背景

經(jīng)常使用或者關(guān)注資訊類產(chǎn)品的同學可能會留意到，在信息流中，有的標題在左圖片在右，而有的是圖片在左標題在右，這兩種形式看似區(qū)別不大，但又似乎存在很大差異。設(shè)計師在設(shè)計時是如何考慮的？我認為這是一個很有意思的話題，所以今天就和大家聊一聊在資訊流中，左文右圖和左圖右文的差異。

左文右圖

左文右圖的樣式普遍出現(xiàn)在新聞資訊產(chǎn)品中，其中包括今日頭條、騰訊新聞、UC瀏覽器信息流以及我們的vivo瀏覽器信息流等等，現(xiàn)在就讓我們從資訊平臺作為切入點，對左文右圖的形式進行分析

1. 左文右圖符合人們長久以來的閱讀習慣

按照已知經(jīng)過驗證的理論，即F閱讀順序（尼爾森的用戶閱讀視線模型），用戶瀏覽頁面的順序是從左往右自上而下，因此左上角的信息最早觸達用戶。然而至文字誕生以來，多數(shù)情況下，人類普遍通過文字來獲取信息，我們不否定，通常情況下圖片的易識別性遠優(yōu)于文字，但是從信息傳遞的準確性以及豐富性上來說，文字的優(yōu)勢是遠大于圖片的。

所以在資訊類產(chǎn)品中我們更傾向于優(yōu)先通過文字來識別內(nèi)容，而將圖片作為輔助信息，因此根據(jù)我們從左往右自上而下閱讀習慣，將文字放在左邊更有利于用戶獲取信息。我們通過一個案例來分別了解一下左圖右文與左文右圖的用戶閱讀路徑是什么樣的。

在上面的案例中，左圖右文用戶的閱讀路徑偏長，并且常常出現(xiàn)視線的折返

左文右圖用戶的閱讀路徑較短，不會有視線的折反。因此，基于效率和閱讀習慣的角度來說，左文右圖優(yōu)勢更明顯。

但或許這里就會有人提出疑問 “在資訊類信息流中很大一部分用戶都是因為受圖片的吸引才會對該則新聞感興趣的呀” 。的確，這是一個普遍場景，但是在前面我們也提到，圖片的易識別性是遠高于文字的，因此哪怕是將圖片放在文字后面，對于圖片的“魅力”的影響是在可接受范圍內(nèi)的。

2. 左文右圖更有利于為用戶提供統(tǒng)一的閱讀基準位置

在資訊信息流中，為了信息展示的多樣性，避免單一的信息流結(jié)構(gòu)使用戶感到單調(diào)，在樣式上除了左文右圖的樣式，往往還會搭配三圖、大圖及視頻的樣式出現(xiàn)，而在這樣多種穿插樣式的情況下，左文右圖能夠為用戶的雙眼提供了一個掃讀時候的基準位置，在大量、長時間閱讀的過程中，極大地減小了閱讀壓力

3. 盡可能保持整體信息流圖文閱讀先后順序的一致性

資訊流中除了左文右圖的樣式，還會搭配三圖、大圖及視頻的樣式出現(xiàn)，因此我們不僅僅要考慮單個信息流樣式的閱讀體驗，更要保持整體信息流閱讀先后順序的一致性，這能夠為用戶提供較好的沉浸式體驗。

4. 在視覺上更符合格式塔閉合原理

左圖右文的的形式在標題文字較短的情況下，右上角就會出現(xiàn)視覺上的缺角，這會破壞頁面整體的工整性，而左文右圖的形式就很好的避免了這個問題。格式塔原理對閉合的研究中提到，人的大腦無論看見什么東西，都喜歡去將它們想象成為一個整體，如果元素太過雜亂大腦無法將其歸類成為一個整體，那么視覺感受就是非常不佳的。

小結(jié)：左圖右文基于它在信息獲取效率和人們閱讀習慣上的優(yōu)勢得到各大新聞資訊類產(chǎn)品的青睞，是較為通用的形式。那是不是就沒有“左圖右文”什么事了？其實不然，左圖右文仍是有其優(yōu)勢的，并且在特定場景下，左圖右文的形式的優(yōu)勢會更明顯。

左圖右文

1. 圖片在左側(cè)，第一時間吸引用戶視線

在內(nèi)容形式的吸引力上，視頻>圖片>文字，并且前面我們提到，圖片的易識別性是高于文字的，因此一張高質(zhì)量的圖片往往能夠在第一時間觸達用戶并形成轉(zhuǎn)化。但前提要求是我們能夠把控圖片的質(zhì)量，否則效果將適得其反，所以我們說左圖右文的樣式一般更適合用來承載PGC的內(nèi)容。例如主打品質(zhì)時政新聞的資訊產(chǎn)品澎湃新聞以及垂類游戲資訊社區(qū)平臺篝火營地，其推薦的內(nèi)容都來自專業(yè)團隊的輸出，對內(nèi)容圖片的質(zhì)量有較好的掌控力，因此采用了左圖右文的形式優(yōu)先給用戶展示圖片信息，以提升用戶對內(nèi)容的興趣。

2. 在帶有明確目的閱讀場景下，例如查找歷史內(nèi)容、搜索等，左圖右文的形式效率更高

在用戶帶有明確目的場景進行信息閱讀時，用戶往往對內(nèi)容已經(jīng)有了一個大致的預期，所以這個時候如果我們能讓用戶第一時間識別圖片，能夠大大的提升用戶的操作效率。例如用戶在查找一篇曾經(jīng)看過的文章時，當曾經(jīng)閱讀過那篇文章的封面出現(xiàn)在屏幕中時，用戶便能立刻作出判斷，這會比在眾多文字標題中查找更為便捷。

總結(jié)

左文右圖

• 通常情況下，我們優(yōu)先通過文字來獲取訊息，因此在一般的信息流中，更青睞采用左文右圖的方式，以提升效率
• 左文右圖能夠為用戶提供統(tǒng)一的閱讀基準位置，在用戶長時間瀏覽時減少閱讀壓力
• 更好的滿足格式塔閉合原理，使信息流整體的頁面更加工整

左圖右文

• 左圖右文常被用來承載PGC的內(nèi)容。在能夠確保圖片質(zhì)量的情況下，圖片在左側(cè)，更容易引起用戶對帖子的興趣
• 在帶有明確目的閱讀場景下，例如查找歷史內(nèi)容、搜索等，左圖右文的形式效率更高

#Tips

無論是左文右圖還是左圖右文都各有其優(yōu)勢及適用的場景，但當我們在設(shè)計信息流時，我們要注意為用戶提供圖文閱讀順序一致的體驗。

以上是個人對資訊流左文右圖&左圖右文的一些思考和心得，感謝大家的閱讀，假設(shè)通過本次閱讀能夠給大家今后的工作帶來一些啟發(fā)和思考，那就實在是再好不過的事了:)

藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)