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

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

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

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

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

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

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

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

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

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

1. 圖文流

2. 視頻流

3. 電商流

二、一些思考

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

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

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

1. 問(wèn)題一

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

回答：

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

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

2）上下排布與左右排布

雖然不同網(wǎng)站在單圖和多圖時(shí)的排列規(guī)則不盡相同，但總體來(lái)說(shuō)，因?yàn)橐骖橣eed的美觀和平衡、以及頁(yè)面的利用率，當(dāng)圖文上下排布時(shí)，圖片會(huì)比左右排布時(shí)更大，在一個(gè)feed中面積占比更大。又因?yàn)閳D片更容易吸引注意力，因此上下排布的Feed流，用戶會(huì)不自覺(jué)地注視圖片，較難聚焦文本。

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

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

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

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

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

2. 問(wèn)題二

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

回答：

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

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

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

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

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

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

4）也有可能是問(wèn)題一回答第4點(diǎn)中提到的原因，不能一概而論。

3. 問(wèn)題三

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

回答：

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

2）Feed的功能包含兩個(gè)：

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

3）回答問(wèn)題。

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

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

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

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

4）其他輔助信息。

輔助信息包括：來(lái)源、發(fā)布時(shí)間、分類、觀看/點(diǎn)贊/評(píng)論/收藏?cái)?shù)、作者介紹等（廣義來(lái)說(shuō)，也包括作者昵稱、作者頭像、標(biāo)簽、話題等）。

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

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

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

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

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

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

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

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