設計文章列表時,左文右圖還是左圖右文好?

7 評論 15523 瀏覽 48 收藏 6 分鐘

當我們仔細看APP的文章列表時我們會發現:有些采用的是左文右圖;有些采用的則是左圖右文。這個時候我們有沒有進一步思考過,這兩種方式有什么區別呢?各自的優缺點又是什么呢?


在對比各大APP時,我們會發現文章列表的排版方式有些是左文有圖,有些是左圖右文。

左文右圖你可能知道就是文字比較重要,但是同樣是新聞類的App你也會看到這兩種情況都存在,因此還不單單是文字重要的原因,下面我們就分別從左文有圖和左圖右文分別來說。

一、左文右圖

左文右圖我們看到大多數新聞類APP都是這樣做的。下面我就以今日頭條和網易新聞為例,來分析左文右圖的優缺點:

文章列表,左文右圖還是左圖右文好?

1. 優勢:

1. 人的閱讀習慣:從左至右,從上至下。采用左文右圖的布局,可以提高用戶閱讀的流暢性;

文章列表,左文右圖還是左圖右文好?

2. 發布者有第三方,圖片質量不能保證:今日頭條、網易新聞其發布者有些不是專業的媒體人,文章質量高低不齊,同時有可能出現沒有圖片的情況。因此為了界面統一,圖片放在右側是不錯的選擇。

文章列表,左文右圖還是左圖右文好?

2. 缺點:

由于人的視線往往先關注圖片,因此當用戶看到感興趣的內容時,閱讀的順序先是圖片然后文字,因此在閱讀上也會有一定的阻礙。

文章列表,左文右圖還是左圖右文好?

因此,左文右圖的文章結構在使用時需要根據產品具體屬性來分析,比如今日頭條,其內容主要來自一些不專業的用戶,同時其產品屬性又多以文字為主,因此他在使用時就采用左文右圖的結構。

二、左圖右文

左圖右文,往往從產品屬性來說以圖片為主,我們常見的電商類產品多以該結構為主。不過在新聞類APP中,我們也經常會看到該結構,下面以搜狐新聞和澎湃新聞為例,來分析左圖右文有缺點:

文章列表,左文右圖還是左圖右文好?

1. 優勢:

1. 文章內容往往由專業人士發布,因此相對于今日頭條和網易新聞,其圖片質量有所保證,同時不會出現有些有圖,有些沒用圖的情況;

2. 可以用圖片內容引發用戶興趣,作為營銷的手段提高轉化率,比如,當你看到特朗普的照片,你是不是大概就能夠猜到新聞內容,從而進一步了解新聞內容。

文章列表,左文右圖還是左圖右文好?

2. 缺點:

1. 如果圖片與內容沒啥關系,就會增加礙眼的污染信息,影響用戶的閱讀速度;

2. 如果圖片主要是以營銷為目的的,久而久之用戶就會下意識自動過濾左側的圖片,圖片就成了無用的障礙信息。

因此,左圖右文的文章結構在使用時需要根據產品具體屬性來分析,比如搜狐,其內容主要來自一些專業的用戶發布,圖片在左邊可以有效的引導用戶閱讀,同時它不存在沒有圖片的情況,因此采用左圖右文的結構比較好。

三、總結

了解了左文右圖和左圖右文,那么在具體操作時就能夠更好、更快的確定使用哪種結構了,下面再來回顧下:

  1. 左文右圖:適合用戶量較大,其內容主要來自一些不專業的用戶,同時其產品屬性又多以文字為主;
  2. 左圖右文:適合于細分類APP,其內容質量高,主要由一些專業人士編輯的APP。

 

作者:風箏KK,公眾號:海鹽社

本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 那上文下圖,和左右的這兩種的區別又在哪里呢

    來自福建 回復
  2. pc網頁版的也是同理嗎

    來自廣東 回復
  3. 想問一下,是不是認為,有圖的情況下,無論圖在左還是右,視線的起點都是從圖到文字?(好想做下眼動儀的大樣本測試~~)

    來自北京 回復
    1. 一般人的視線遵循F模型,也就是從左到右,從上到下,關注點逐漸減弱

      來自四川 回復
  4. 是不是也有要看看圖片的定義是補充說明還是用來強調突出某條信息的,以及圖片在前面,如果每條數據都有圖片的話,圖片五顏六色,會影響用戶的視覺

    回復
    1. 當然,本文章只是分析了左右,而在實際應用中并不會只是這個結構,也會有上下結構、banner等交叉布局,整個界面有讓人想看下去的欲望。你說的圖片五顏六色就是我說的圖片質量低的情況,那么你就需要考慮弱化圖片的展示了。

      來自四川 回復
  5. 言之有理

    來自廣東 回復