本文總結了常見Web端Feed的設計模式，以及對此的一些思考。

Feed流：Feed，投喂，指向用戶提供內容以供消費；流，持續，指這種內容的提供是持續的，源源不斷的。

Feed多用于內容型產品中。廣義上的內容型產品，可以粗略分為：圖文流、視頻流、電商流。

• 圖文流中包括：新聞類，如今日頭條；社區類，如知乎、微博、最右；社交類：如微信朋友圈。
• 視頻流，如抖音、快手、網易云音樂。
• 電商流：如天貓、淘寶、京東。

總體來說一個Feed會包含以下元素：內容標題、內容正文、輔助信息、用戶名、用戶頭像、圖片/視頻、標簽、話題、按鈕等。

輔助信息包括：來源、發布時間、分類、觀看/點贊/評論/收藏數、作者介紹等；嚴格來說：作者昵稱、作者頭像、標簽、話題等也屬于輔助信息，只是由于業務需要而被強化顯示，單獨成了一類元素。

一般而言，一個Feed的設計目標包括以下幾點：傳遞信息、誘導點擊查看詳情、誘導互動；不同類型產品，設計目標側重有所不同；這種不同，通過各類元素的有無以及視覺層級來體現。

設計Feed時，以用戶關注度和業務重要性來決定各元素的視覺層級。

• 文字內容視覺層級的影響因素包括：字重(粗>細)、字號(大>小)、字體(特殊字體>系統默認)、字色(背景色補色>背景色)、位置(左上>右下)、背景色(背景色補色>背景色)、間距(疏>密)等；
• 圖片內容視覺層級的影響因素包括：色相(暖色>冷色>黑白灰)、大小、位置等。

一、Web端Feed的設計模式

1. 圖文流

2. 視頻流

3. 電商流

二、一些思考

1）圖/文作為內容載體的差異：相較于文字，圖片更容易吸引注意力、表現力更豐富、信息傳達效率更高(識別圖片的反應時小于識別文字)、信息傳達準確性較低。

2）左右排布的Feed，一個Feed一行，用戶閱讀時視覺流呈“Z”字型；上下排布的Feed，多個Feed一行，用戶閱讀時視覺流呈倒“N”字型。

3）一般而言，一個Feed的設計目標包括以下三點：傳遞信息、誘導點擊查看詳情、誘導互動。Feed采用什么模式，取決于何種模式能更好地達成設計目標。

1. 問題一

Web端，單個Feed中圖文位置包括左圖右文、左文右圖、上文下圖、上圖下文、前文后圖共五種模式，分別適用于什么產品？

回答：

1）五種圖文模式，根本差異在于圖/文作為內容載體的差異。

結合中文環境中從左到右、從上到下的閱讀順序，對于一個Feed，越強調信息傳遞的準確性，文本的視覺層級就應越高，圖片的視覺層級越低，表現為純文無圖、大文小圖、左文右圖；越強調表現力，不太在意信息傳遞的準確性，文本的視覺層級就越低，圖片的視覺層級越高，表現為純圖無文、大圖小文、左圖右文。

2）上下排布與左右排布

雖然不同網站在單圖和多圖時的排列規則不盡相同，但總體來說，因為要兼顧Feed的美觀和平衡、以及頁面的利用率，當圖文上下排布時，圖片會比左右排布時更大，在一個feed中面積占比更大。又因為圖片更容易吸引注意力，因此上下排布的Feed流，用戶會不自覺地注視圖片，較難聚焦文本。

又因為圖片表現力豐富、傳遞信息效率高、準確性低，所以更適用于瀏覽和欣賞(比如電商網站、攝影社區)，不適用于信息的檢索(比如搜索結果頁、新聞網站)。

舉例：電商網站中，用戶看到圖片就知道這是襯衫或者手機，此為效率高；但這個襯衫的材質、尺寸等信息，用戶要通過文本了解，此為傳遞準確信息效率低。

因為電商網站需要誘導用戶查看商品購買商品，所以圖片的效率和表現力更重要，這也是無論web端還是移動端，電商Feed都是上圖下文或者左圖右文，圖為主文為輔的模式。

3）前文后圖的模式是一種創新，將圖文排列的模式從XY軸擴展到Z軸，在保持Feed總面積不變的情況下擴大了圖片的面積。

4）以上分析指出了不同模式之間的差別，但不意味著不同模式不可共存。因為一個Feed流網頁的設計不僅要考慮信息的傳遞，還要考慮整體布局的美觀度、用戶閱讀時的節奏等等。

2. 問題二

同為新聞資訊類網站，為什么有的是左圖右文，有的是左文右圖？

回答：

1）雖然是同類產品，但不代表他們的產品優勢、產品定位、發展策略等方面也完全相同。沒有最好的模式，只有最適合的模式。如果他們的設計契合他們的定位，能助力業務發展，那就是好設計。比如一個社區產品，內容方面不如競品，想通過豐富有趣的圖片殺出重圍，那么它的Feed中圖片就應該有更高的視覺層級，排版上可以采用上圖下文或者前文后圖或者其他更突顯圖片的設計。

2）視覺流。用戶閱讀左右排布的Feed流網頁，視覺流呈“Z”字型。由于圖片吸引注意力的能力比文字更強，因此，一般情況下，左圖右文會更符合視覺流。

3）產品定位。以掘金為例：一個前端開發社區，更強調文字內容，同時要求程序員上傳高質量圖片也比較難，因此它的首頁Feed就采用了左文右圖的設計，且圖片面積很小，加粗著重顯示標題。

而一些左圖右文的新聞產品，可能對圖片的把控比較嚴格，這樣排布就像電商APP一樣，既能通過圖片快速傳達給讀者這是一篇關于川普的政經新聞還是關于烤串的美食訊息，同時能發揮圖片表現力和吸引注意力的優勢，再通過閱讀文本獲取準確信息，過程流暢。

相反，如果一個新聞產品，圖片質量參差不齊，采用左圖右文的模式，就有可能造成用戶先看了圖，不明所以，又讀了標題，哦知道了。

這里的圖片，就降低了信息攝入的效率，如果用戶又返回頭再看了一遍那張圖，效率就更低了。這樣不如把圖片去掉，或者放在右邊，盡量降低其負面影響；盡管初期可能用戶會先被圖片吸引，視覺流不再是“Z”字型的；但稍有經驗，他們就會自動忽視右邊的圖了，回憶我們看有的網頁，右邊的廣告是不是都會選擇性忽視。

4）也有可能是問題一回答第4點中提到的原因，不能一概而論。

3. 問題三

為什么有的Feed是標題+正文，有的只有標題？

回答：

1）這個問題可以引申為：“為什么不同的網站，Feed包含的元素不一樣？”——再一步引申為：“在設計一個Feed時，要包含哪些元素？”

2）Feed的功能包含兩個：

1. 傳遞信息。新聞類網站的首頁，無需點擊查看詳情就能大概知道每天的新聞，因為Feed的標題就是新聞內容的概括。
2. 快速區分，誘導點擊。理想狀態，首頁展示的內容應該都是用戶想要進一步閱讀的，但很難做到，做到也不一定好。這樣首頁Feed中的信息，幫助用戶快速區分這個內容要不要進一步查看，誘導用戶點擊查看詳情，繼而增加用戶使用時長。

3）回答問題。

根據剃刀理論：有無正文取決于正文能否承擔起上面提到的兩個作用。

模式舉例中，有正文的Feed中，人人和36氪是人工編輯的摘要，知乎是截取顯示正文的開頭，根據知乎先說結論的社區文化，也可以認為是正文的摘要。這些摘要都是有信息價值的，首頁中呈現是可以的；但具體有多大價值(表現在對單個Feed打開率，平均單次使用時長的影響)，是個未知數，希望相關人員能做個調研。

模式舉例中，無正文的Feed中，頭條、網易新聞、虎嗅、澎湃、掘金都是只有標題，原因在于：

• 標題本身就能承擔傳遞足夠的信息供用戶篩選。
• 可能是無法提供有信息價值的摘要作為正文露出。

4）其他輔助信息。

輔助信息包括：來源、發布時間、分類、觀看/點贊/評論/收藏數、作者介紹等（廣義來說，也包括作者昵稱、作者頭像、標簽、話題等）。

輔助信息，價值更多體現在幫助用戶快速篩選內容和誘導用戶點擊。包含哪些輔助信息，各個輔助信息在Feed中的視覺層級等等問題，因產品而異。

比如，微博的Feed，會展示作者頭像和姓名，個人分析原因可能包括：

A.擬人化。頭像是個人在網絡中的化身，普通用戶發表微博后，連同頭像一起顯示，卷入感會更深（昵稱、個性簽名同理）。其他用戶閱讀微博時，有頭像也會更真實。偏社交的產品在首頁Feed流設計中基本都會顯示頭像和昵稱。

B.頭像為關注服務。微博單個Feed內容短，基本無需點擊查看詳情。這就方便在Feed中顯示關注按鈕，用戶在發現感興趣的內容后可以立刻關注作者；此時有頭像這種擬人化的顯示，體驗會比只有干巴巴的昵稱更好。

對比B站，雖然也有鼓勵用戶多多關注UP主的傾向，但用戶僅僅根據一個視頻封面和標題，不會貿然關注，因此顯示昵稱即可。

在鼓勵關注、提升關注體驗這一點上，B站是沒必要在首頁顯示UP主頭像的。實際工作中，可以通過用戶研究和數據監測的反饋，決定輔助信息的取舍和視覺層級。平時也可以多思考不同產品設計差異的原因，盡管不一定對。

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

題圖來自Unsplash，基于CC0協議