新聞型產品列表設計分析

有天下班，我和公司另外兩個產品在閒聊，你知道，產品嘛總會吐槽A公司又有新動做，B公司又出新產品，吐槽產品C體驗糟糕···，這天，咱們聊的是內容型產品的體驗問題。

內容型產品的核心競爭力必定是內容，好比咱們廣泛認爲QQ音樂的播放體驗優於網易雲音樂，但網易雲音樂勝在歌曲豐富，因此體驗上的瑕疵也是能夠接受的。可是做爲須要消耗大量時間的app來講，好的體驗確實可以增長溫馨度，讓你不會以爲特別「累」，從而增長消費時長。

問題發現

首先咱們發現的是微信，同一個app不一樣層級的產品設計存在差別，聊天主界面→訂閱列表，均是圖片+文字的形式，而到了內容展現頁面，變成了文字+圖片，爲何會這樣？

而後咱們又找了內容型app的兩個同類產品，網易新聞和今日頭條，發現是兩種相反的設計，那麼那種方式更好呢？

問題分析

從元素和用戶兩個角度分析：

一、元素的感知程度

可視化元素的感知程度排序：動畫>圖片>文字，這也是PC上不少小網站放滿動畫廣告的緣由，它太能吸引你們的注意力了。具體到手機上，圖片比文字更能吸引你們的眼球。

同時，圖片包含的信息量更大，易讀性更高，當你看到普京的照片，你能夠迅速意識到這大概是一篇國際政治相關的新聞。

從這個角度來講，圖片應該至於文字前方，主要目的是快速獲取你的注意力，並傳遞宏觀信息，關注繼續閱讀，不然直接跳過。

二、人類的閱讀習慣

正常狀況下，人類的閱讀習慣是從左到右，從上往下（爲什麼古書從右到左？有興趣的看官能夠自行了解）。因此在網頁時代，人類的眼球熱力圖是「F」型。

在小屏終端時代，我的以爲「F型」不太實用，我我的更傾向於優先關注屏幕中央。未找到移動端的相關分析報告，但這不影響咱們分析問題。

（圖片來源於網絡）

同時，要注意的是，眼睛的閱讀速度快於大腦的分析速度，也就是當你在閱讀內容的時候，眼睛（餘光）要提早去看下文才能保證閱讀的快速性和內容的連貫性。

當你在快速閱讀文字的時候，你確定不但願忽然出現了一張圖片，你須要停下來，大腦從「文字解析方式」切換到「圖片解析方式「」，形成閱讀的卡殼。這樣看來，文字應該在圖片後方，你能夠略過圖片，一馬平川的閱讀文字。

優化方案

綜上，圖片+文字彷佛是更合理的排版方式，以新聞類產品爲例，能夠嘗試從如下角度優化：

一、框架=圖片+標題+摘要

圖片儘可能貼近內容，標題清晰，一句話說明問題，摘要簡潔，對標題合理補充。

二、合理展現相關信息

網易經過評論來吸引用戶，今日頭條須要在列表說明內容來源，新聞講究時效性，合理的時間說明可以幫助用戶快速篩選信息。來源、時間和評論數多是須要在列表中標明的元素，能夠合理排版展現。

那麼微信公衆帳號內容頁爲什麼會以文字+圖片的形式展現呢？個人猜想是微信公衆帳號的編輯者是我的，在配圖方面並不專業，好比我有時配圖特別意識流，僅從圖片很難揣摩出做者的真正意思，所以微信優先展現了文字。

看吧，咱們常犯的錯誤：當一個產品成功以後，不管它的功能或設計是否合理，咱們老是會不禁自主的給它找一個合理的理由來證實他的偉大。或許，它這裏的設計確實不合理。