經(jīng)常使用或者關(guān)注資訊類產(chǎn)品的同學(xué)可能會(huì)留意到，在信息流中，有的標(biāo)題在左圖片在右，而有的是圖片在左標(biāo)題在右，這兩種形式看似區(qū)別不大，但又似乎存在很大差異。設(shè)計(jì)師在設(shè)計(jì)時(shí)是如何考慮的？我認(rèn)為這是一個(gè)很有意思的話題，所以今天就和大家聊一聊在資訊流中，左文右圖和左圖右文的差異。
左文右圖的樣式普遍出現(xiàn)在新聞資訊產(chǎn)品中，其中包括今日頭條、騰訊新聞、UC瀏覽器信息流以及我們的vivo瀏覽器信息流等等，現(xiàn)在就讓我們從資訊平臺(tái)作為切入點(diǎn)，對(duì)左文右圖的形式進(jìn)行分析
1. 左文右圖符合人們長(zhǎng)久以來(lái)的閱讀習(xí)慣
按照已知經(jīng)過(guò)驗(yàn)證的理論，即F閱讀順序（尼爾森的用戶閱讀視線模型），用戶瀏覽頁(yè)面的順序是從左往右自上而下，因此左上角的信息最早觸達(dá)用戶。然而至文字誕生以來(lái)，多數(shù)情況下，人類普遍通過(guò)文字來(lái)獲取信息，我們不否定，通常情況下圖片的易識(shí)別性遠(yuǎn)優(yōu)于文字，但是從信息傳遞的準(zhǔn)確性以及豐富性上來(lái)說(shuō)，文字的優(yōu)勢(shì)是遠(yuǎn)大于圖片的。
所以在資訊類產(chǎn)品中我們更傾向于優(yōu)先通過(guò)文字來(lái)識(shí)別內(nèi)容，而將圖片作為輔助信息，因此根據(jù)我們從左往右自上而下閱讀習(xí)慣，將文字放在左邊更有利于用戶獲取信息。我們通過(guò)一個(gè)案例來(lái)分別了解一下左圖右文與左文右圖的用戶閱讀路徑是什么樣的。
在上面的案例中，左圖右文用戶的閱讀路徑偏長(zhǎng)，并且常常出現(xiàn)視線的折返
左文右圖用戶的閱讀路徑較短，不會(huì)有視線的折反。因此，基于效率和閱讀習(xí)慣的角度來(lái)說(shuō)，左文右圖優(yōu)勢(shì)更明顯。
但或許這里就會(huì)有人提出疑問 “在資訊類信息流中很大一部分用戶都是因?yàn)槭軋D片的吸引才會(huì)對(duì)該則新聞感興趣的呀” 。的確，這是一個(gè)普遍場(chǎng)景，但是在前面我們也提到，圖片的易識(shí)別性是遠(yuǎn)高于文字的，因此哪怕是將圖片放在文字后面，對(duì)于圖片的“魅力”的影響是在可接受范圍內(nèi)的。
2. 左文右圖更有利于為用戶提供統(tǒng)一的閱讀基準(zhǔn)位置
在資訊信息流中，為了信息展示的多樣性，避免單一的信息流結(jié)構(gòu)使用戶感到單調(diào)，在樣式上除了左文右圖的樣式，往往還會(huì)搭配三圖、大圖及視頻的樣式出現(xiàn)，而在這樣多種穿插樣式的情況下，左文右圖能夠?yàn)橛脩舻碾p眼提供了一個(gè)掃讀時(shí)候的基準(zhǔn)位置，在大量、長(zhǎng)時(shí)間閱讀的過(guò)程中，極大地減小了閱讀壓力
3. 盡可能保持整體信息流圖文閱讀先后順序的一致性
資訊流中除了左文右圖的樣式，還會(huì)搭配三圖、大圖及視頻的樣式出現(xiàn)，因此我們不僅僅要考慮單個(gè)信息流樣式的閱讀體驗(yàn)，更要保持整體信息流閱讀先后順序的一致性，這能夠?yàn)橛脩籼峁┹^好的沉浸式體驗(yàn)。
4. 在視覺上更符合格式塔閉合原理
左圖右文的的形式在標(biāo)題文字較短的情況下，右上角就會(huì)出現(xiàn)視覺上的缺角，這會(huì)破壞頁(yè)面整體的工整性，而左文右圖的形式就很好的避免了這個(gè)問題。格式塔原理對(duì)閉合的研究中提到，人的大腦無(wú)論看見什么東西，都喜歡去將它們想象成為一個(gè)整體，如果元素太過(guò)雜亂大腦無(wú)法將其歸類成為一個(gè)整體，那么視覺感受就是非常不佳的。
小結(jié)：左圖右文基于它在信息獲取效率和人們閱讀習(xí)慣上的優(yōu)勢(shì)得到各大新聞資訊類產(chǎn)品的青睞，是較為通用的形式。那是不是就沒有“左圖右文”什么事了？其實(shí)不然，左圖右文仍是有其優(yōu)勢(shì)的，并且在特定場(chǎng)景下，左圖右文的形式的優(yōu)勢(shì)會(huì)更明顯。
1. 圖片在左側(cè)，第一時(shí)間吸引用戶視線
在內(nèi)容形式的吸引力上，視頻>圖片>文字，并且前面我們提到，圖片的易識(shí)別性是高于文字的，因此一張高質(zhì)量的圖片往往能夠在第一時(shí)間觸達(dá)用戶并形成轉(zhuǎn)化。但前提要求是我們能夠把控圖片的質(zhì)量，否則效果將適得其反，所以我們說(shuō)左圖右文的樣式一般更適合用來(lái)承載PGC的內(nèi)容。例如主打品質(zhì)時(shí)政新聞的資訊產(chǎn)品澎湃新聞以及垂類游戲資訊社區(qū)平臺(tái)篝火營(yíng)地，其推薦的內(nèi)容都來(lái)自專業(yè)團(tuán)隊(duì)的輸出，對(duì)內(nèi)容圖片的質(zhì)量有較好的掌控力，因此采用了左圖右文的形式優(yōu)先給用戶展示圖片信息，以提升用戶對(duì)內(nèi)容的興趣。
2. 在帶有明確目的閱讀場(chǎng)景下，例如查找歷史內(nèi)容、搜索等，左圖右文的形式效率更高
在用戶帶有明確目的場(chǎng)景進(jìn)行信息閱讀時(shí)，用戶往往對(duì)內(nèi)容已經(jīng)有了一個(gè)大致的預(yù)期，所以這個(gè)時(shí)候如果我們能讓用戶第一時(shí)間識(shí)別圖片，能夠大大的提升用戶的操作效率。例如用戶在查找一篇曾經(jīng)看過(guò)的文章時(shí)，當(dāng)曾經(jīng)閱讀過(guò)那篇文章的封面出現(xiàn)在屏幕中時(shí)，用戶便能立刻作出判斷，這會(huì)比在眾多文字標(biāo)題中查找更為便捷。
左文右圖
- 通常情況下，我們優(yōu)先通過(guò)文字來(lái)獲取訊息，因此在一般的信息流中，更青睞采用左文右圖的方式，以提升效率
- 左文右圖能夠?yàn)橛脩籼峁┙y(tǒng)一的閱讀基準(zhǔn)位置，在用戶長(zhǎng)時(shí)間瀏覽時(shí)減少閱讀壓力
- 更好的滿足格式塔閉合原理，使信息流整體的頁(yè)面更加工整
左圖右文
- 左圖右文常被用來(lái)承載PGC的內(nèi)容。在能夠確保圖片質(zhì)量的情況下，圖片在左側(cè)，更容易引起用戶對(duì)帖子的興趣
- 在帶有明確目的閱讀場(chǎng)景下，例如查找歷史內(nèi)容、搜索等，左圖右文的形式效率更高
#Tips
無(wú)論是左文右圖還是左圖右文都各有其優(yōu)勢(shì)及適用的場(chǎng)景，但當(dāng)我們?cè)谠O(shè)計(jì)信息流時(shí)，我們要注意為用戶提供圖文閱讀順序一致的體驗(yàn)。
以上是個(gè)人對(duì)資訊流左文右圖&左圖右文的一些思考和心得，感謝大家的閱讀，假設(shè)通過(guò)本次閱讀能夠給大家今后的工作帶來(lái)一些啟發(fā)和思考，那就實(shí)在是再好不過(guò)的事了:)
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。