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

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

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

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

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

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

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

設(shè)計Feed時，以用戶關(guān)注度和業(yè)務(wù)重要性來決定各元素的視覺層級。

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

一、Web端Feed的設(shè)計模式

1. 圖文流

2. 視頻流

3. 電商流

二、一些思考

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

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

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

1. 問題一

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

回答：

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

結(jié)合中文環(huán)境中從左到右、從上到下的閱讀順序，對于一個Feed，越強(qiáng)調(diào)信息傳遞的準(zhǔn)確性，文本的視覺層級就應(yīng)越高，圖片的視覺層級越低，表現(xiàn)為純文無圖、大文小圖、左文右圖；越強(qiáng)調(diào)表現(xiàn)力，不太在意信息傳遞的準(zhǔn)確性，文本的視覺層級就越低，圖片的視覺層級越高，表現(xiàn)為純圖無文、大圖小文、左圖右文。

2）上下排布與左右排布

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

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

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

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

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

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

2. 問題二

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

回答：

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

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

3）產(chǎn)品定位。以掘金為例：一個前端開發(fā)社區(qū)，更強(qiáng)調(diào)文字內(nèi)容，同時要求程序員上傳高質(zhì)量圖片也比較難，因此它的首頁Feed就采用了左文右圖的設(shè)計，且圖片面積很小，加粗著重顯示標(biāo)題。

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

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

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

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

3. 問題三

為什么有的Feed是標(biāo)題+正文，有的只有標(biāo)題？

回答：

1）這個問題可以引申為：“為什么不同的網(wǎng)站，F(xiàn)eed包含的元素不一樣？”——再一步引申為：“在設(shè)計一個Feed時，要包含哪些元素？”

2）Feed的功能包含兩個：

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

3）回答問題。

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

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

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

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

4）其他輔助信息。

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

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

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

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

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

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

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

本文由 @Tzufeng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議