編輯導(dǎo)語(yǔ)：在當(dāng)今內(nèi)容為王的時(shí)代，傳統(tǒng)的信息流無(wú)法承載日益豐富的產(chǎn)品內(nèi)容，一種個(gè)性化的內(nèi)容推薦方式-feed流逐漸孕育而生。本篇文章中作者分析了feed流的組成元素，以及常見(jiàn)的feed流樣式。推薦對(duì)feed流感興趣的朋友們閱讀。

在這個(gè)內(nèi)容為王的時(shí)代，各個(gè)類(lèi)型的產(chǎn)品都開(kāi)始圍繞著自己所處的賽道營(yíng)造豐富的信息流，傳統(tǒng)的信息流不再能承載當(dāng)下豐富多樣的內(nèi)容，信息流也不再單純屬于信息類(lèi)以及文娛類(lèi)產(chǎn)品，許多金融類(lèi)產(chǎn)品甚至是工具類(lèi)產(chǎn)品都開(kāi)始有了社區(qū)，不同類(lèi)型的內(nèi)容開(kāi)始進(jìn)入用戶(hù)的視野。

因此傳統(tǒng)的信息流無(wú)法承載日益豐富的產(chǎn)品內(nèi)容，逐漸一種個(gè)性化的內(nèi)容推薦方式-feed流逐漸孕育而生，其樣式豐富，其中包括大卡流、雙列流、沉浸流、動(dòng)態(tài)流、文本流、動(dòng)態(tài)流、櫥窗流…..筆者將在本文中分析feed流的組成部分，以及使用場(chǎng)景和設(shè)計(jì)要點(diǎn)。

一、feed流的主要組成部分

筆者調(diào)研了不同類(lèi)型的feed流，發(fā)現(xiàn)feed流主要由以下幾個(gè)部分組成。如下圖：

筆者為大家挑選了幾個(gè)比較常見(jiàn)的元素為大家進(jìn)行分析。

1. 圖片/視頻

在大多出產(chǎn)品的feed流中，占最大面積的就是圖片或視頻。相較于文字，圖片更能夠激發(fā)用戶(hù)點(diǎn)擊的欲望，在帶有社區(qū)屬性的產(chǎn)品中，設(shè)計(jì)師還需要考慮如何適配橫屏以及豎屏封面。

其次是如果該位置出現(xiàn)的是視頻。在常見(jiàn)的視頻產(chǎn)品中，當(dāng)系統(tǒng)識(shí)別出該內(nèi)容處于用戶(hù)界面的中間區(qū)域，則會(huì)自動(dòng)進(jìn)行預(yù)告播放。在1-2秒的時(shí)間內(nèi)，用戶(hù)能夠快速瀏覽視頻中最精彩的部分。在展現(xiàn)方式上通常使用帶有圓角的距形進(jìn)行展示，圓角一般設(shè)置為：8、10、12、14、16、20PX。

2. 標(biāo)題

在feed的設(shè)計(jì)中，標(biāo)題是最不可缺少的部分，在字體的設(shè)計(jì)上，大多數(shù)采用黑色字體。在排布方式上在一行至兩行，如出現(xiàn)標(biāo)題字?jǐn)?shù)過(guò)多，可以用「 … 」的方式進(jìn)行呈現(xiàn)。其次需要限制產(chǎn)品的創(chuàng)作者以及運(yùn)營(yíng)在配置標(biāo)題時(shí)，注意文案應(yīng)該簡(jiǎn)明扼要，不要過(guò)于累贅。

3. 文案

該區(qū)域可以叫做文案區(qū)域或二級(jí)標(biāo)題區(qū)域，在該區(qū)域的設(shè)計(jì)中，字體顏色建議大多數(shù)采用灰色進(jìn)行展示。在文案的編寫(xiě)上可以加入更帶有引導(dǎo)性的詞匯用于引導(dǎo)用戶(hù)點(diǎn)擊。

4. 標(biāo)簽

標(biāo)簽的出現(xiàn)目的主要有兩個(gè)方面，第一個(gè)方面是幫助用戶(hù)能夠快速的區(qū)分內(nèi)容的種類(lèi)如：預(yù)告、獨(dú)播、直播、精選、推薦等。用戶(hù)可以在眾多feed流中通過(guò)快速查看標(biāo)簽進(jìn)行篩選，從而快速找到自己想看的內(nèi)容。

第二個(gè)方面主要是幫助產(chǎn)品進(jìn)行更加精準(zhǔn)的流量分發(fā)，產(chǎn)品會(huì)根據(jù)用戶(hù)的操作習(xí)慣進(jìn)行分群，再根據(jù)用戶(hù)興趣給每個(gè)群體打上相對(duì)應(yīng)標(biāo)簽。而這些標(biāo)簽則是對(duì)應(yīng)了不同群體的用戶(hù)，因此也就有了淘寶商城中千人千面的推薦形式。

5. 輔助信息

輔助信息主要是為了滿(mǎn)足不同產(chǎn)品的信息呈現(xiàn)，如在視頻平臺(tái)中，輔助信息可以承載電影評(píng)分、電視劇的集數(shù)、播放量、綜藝的更新日期、點(diǎn)贊數(shù)、評(píng)論等，甚至?xí)尤胂嚓P(guān)的快捷操作如靜音。輔助信息在設(shè)計(jì)中，不易做的過(guò)于突出，需要清晰單個(gè)feed的信息層級(jí)，挑選必要的信息進(jìn)行展現(xiàn)。

6. 操作

操作區(qū)域的目的是為了產(chǎn)品的算法更加了解用戶(hù)的偏好，因?yàn)橛脩?hù)的興趣是會(huì)發(fā)生變化的，如果用戶(hù)在某段時(shí)間突然特別不想看到某些內(nèi)容，就可以通過(guò)點(diǎn)擊操作將內(nèi)容進(jìn)行「不喜歡」或「減少相關(guān)內(nèi)容」的操作，這樣也能給予用戶(hù)對(duì)于feed流一定的自定義。

在交互形式上，點(diǎn)擊操作區(qū)域后，建議采用較為輕量的交互方式，如點(diǎn)擊后出現(xiàn)底部彈窗或氣泡的形式。

二、feed流的形式

僅僅了解了feed的組成部分是不夠的。單個(gè)的feed流其實(shí)就像是英語(yǔ)學(xué)習(xí)中的單個(gè)單詞一樣，單獨(dú)的去死記硬背某個(gè)單詞其實(shí)意義是不大的，feed流的設(shè)計(jì)也同樣如此。

我們還需要擁有能夠?qū)⑶懊嫣岬降慕M成元素，拆開(kāi)和重組的能力，因?yàn)椴煌漠a(chǎn)品業(yè)務(wù)屬性不同，所需要給用戶(hù)提供的內(nèi)容也就不同。接下來(lái)筆者就給大家介紹一下常見(jiàn)的feed流形式。

1. 文字流

介紹：文字流多在信息類(lèi)產(chǎn)品如知乎、百度，或產(chǎn)品的用戶(hù)評(píng)論區(qū)當(dāng)中。此類(lèi)樣式可以運(yùn)用在以文字為主的feed流設(shè)計(jì)中，并且還可以與動(dòng)態(tài)流（下文會(huì)提到）之間搭配使用。

由于適配度高，可容納更多的操作按鈕，因此可以服務(wù)與以UGC內(nèi)容為主的產(chǎn)品，UGC產(chǎn)品需要強(qiáng)調(diào)用戶(hù)之間的互動(dòng)，需要將互動(dòng)類(lèi)快捷操作外露。

如下圖：

使用場(chǎng)景：以文字為主的信息類(lèi)產(chǎn)品，新聞資訊類(lèi)產(chǎn)品、評(píng)論區(qū)、產(chǎn)品發(fā)現(xiàn)頁(yè)/社區(qū)

設(shè)計(jì)要點(diǎn)：在文本流的設(shè)計(jì)中，需要注意的是區(qū)分信息的優(yōu)先級(jí)，其中標(biāo)題可以采用大字號(hào)加粗的方式進(jìn)行區(qū)分，正文則可以采用黑色常規(guī)的字體。

操作區(qū)域以及輔助信息可以布置在正文的下方，灰色處理，頭像以及標(biāo)簽可以作為一個(gè)整體進(jìn)行布局。在交互上，可以將分享/評(píng)論/點(diǎn)贊等按鈕外露，從而降低用戶(hù)的互動(dòng)成本。

2. 大卡流

介紹：該樣式主要服務(wù)與以圖片/視頻信息為主要內(nèi)容的feed流。以淘寶為例，在淘寶2020年提出“逛淘寶”的理念后，不再一味的追求交易的最短路徑，而是讓用戶(hù)在首頁(yè)點(diǎn)擊了某件商品之后，進(jìn)入的是一系列同類(lèi)商品的feed流，而不是商品的詳情頁(yè)?？梢钥闯觯罂鞣浅＿m用于圖片/視頻信息的展示。如下圖：

使用場(chǎng)景：以圖片為主的內(nèi)容且需要搭配相關(guān)操作，如評(píng)論/進(jìn)入詳情/分享/點(diǎn)贊等。劣勢(shì)是單排僅顯示一條feed，所需空間較大，在首頁(yè)不適合單獨(dú)使用，需要和其他feed樣式進(jìn)行搭配。

設(shè)計(jì)要點(diǎn)：在大卡流的設(shè)計(jì)中，由于空間較大，需要注意標(biāo)題和操作區(qū)域的擺放位置，其次是需要把控創(chuàng)作者或合作媒體上傳的圖片質(zhì)量。最重要的是需要考慮適配橫屏和豎屏的封面，由于圖片比例的不同，會(huì)涉及到相關(guān)操作交互一致性以及視覺(jué)一致性的統(tǒng)一。

3. 雙列流

介紹：筆者認(rèn)為將雙列流帶到用戶(hù)視野的產(chǎn)品非小紅書(shū)莫屬，從小紅書(shū)發(fā)布之初到現(xiàn)在一直采用雙列流的形式。它的好處是能夠最大限度的將以圖片為主的feed內(nèi)容呈現(xiàn)給用戶(hù)。

樣式最初以長(zhǎng)卡樣式為主，主要用于適配豎屏圖片，但隨著現(xiàn)階段UGC內(nèi)容的發(fā)展，雙列流也開(kāi)始適配橫屏封面。如優(yōu)酷的首頁(yè)feed，則是采用了雙卡流中的短卡樣式，也不乏將長(zhǎng)卡和短卡搭配使用的情況。

使用場(chǎng)景：主要適用于需要以圖片為主的UGC產(chǎn)品，非常適合用于首頁(yè)，但不推薦與其他feed樣式結(jié)合使用，容易打破雙列流左右兩則的排布節(jié)奏。對(duì)于相關(guān)操作按鈕從數(shù)量上有局限性，不建議外露過(guò)多按鈕，可以探索長(zhǎng)按吊起更多操作的交互方式。在具體的設(shè)計(jì)樣式上，建議參考小紅書(shū)，僅將創(chuàng)作者與點(diǎn)贊數(shù)的操作進(jìn)行外露。

設(shè)計(jì)要點(diǎn)：在設(shè)計(jì)雙列流的過(guò)程中需要考慮左右兩列之間以及上下兩行之間的間距，由于內(nèi)容與內(nèi)容之間圖片的高度不同，標(biāo)題字?jǐn)?shù)不同，因此需要制定良好的規(guī)范，從而保證用戶(hù)在瀏覽內(nèi)容的過(guò)程中保證兩列內(nèi)容之間的節(jié)奏感。其次是控制操作按鈕的個(gè)數(shù)，需要根據(jù)產(chǎn)品實(shí)際需求，僅將最總要的操作進(jìn)行外露。

4. 沉浸流

對(duì)于沉浸流的使用最具有代表性的是抖音以及快手，隨著各個(gè)產(chǎn)品賽道都加入了短視頻以及直播間的模塊，該類(lèi)樣式幾乎能夠在所有頭部產(chǎn)品中見(jiàn)到。如在淘寶的商品詳情頁(yè)以及首頁(yè)都加入了直播的模塊，點(diǎn)擊進(jìn)入后可以沉浸的了解電子產(chǎn)品的測(cè)評(píng)或是服裝的實(shí)際上身效果，從信息傳達(dá)上會(huì)比單一的圖片更加多元更具有沉浸感。

使用場(chǎng)景：該類(lèi)樣式主要適用于短視頻、直播間

設(shè)計(jì)要點(diǎn)：由于在不同產(chǎn)品中，短視頻起到作用不同。

比如在淘寶，短視頻的目的是給予用戶(hù)更直接的效果展示，讓用戶(hù)能夠快速的了解到產(chǎn)品的優(yōu)點(diǎn)，從而下單。

因此短視頻在淘寶詳情頁(yè)中的作用就是激勵(lì)用戶(hù)購(gòu)買(mǎi)，所以會(huì)在左下角加入購(gòu)買(mǎi)的鏈接。再比如在視頻類(lèi)產(chǎn)品中，如優(yōu)酷則是提供相關(guān)的電影片段，那么目的就是為了給產(chǎn)品中的電影播放區(qū)導(dǎo)流，因此在設(shè)計(jì)過(guò)程中也會(huì)有相應(yīng)的改變。

在使用沉浸流的過(guò)程中，需要結(jié)合實(shí)際項(xiàng)目需求，不能將抖音快手的設(shè)計(jì)方式直接照搬到自己的產(chǎn)品中，這樣容易導(dǎo)致產(chǎn)品功能割裂的情況。

其次是需要將功能進(jìn)行分區(qū)展示，如可以將同類(lèi)的相關(guān)操作聚合放置在固定的區(qū)域，由于沉浸流功能按鈕會(huì)非常多，因此對(duì)用戶(hù)容易造成干擾，容易找不到想要操作的按鈕。

5. 動(dòng)態(tài)流：

介紹：微博和微信朋友圈是筆者認(rèn)為將動(dòng)態(tài)流使用的最為廣泛的產(chǎn)品，由于在這兩款產(chǎn)品中，內(nèi)容過(guò)于豐富，不僅需要適配橫屏或豎屏的圖片/視頻，還需要考慮適配不同數(shù)量。

并且需要將所有圖片展現(xiàn)給用戶(hù)，其中還不乏動(dòng)圖。因此對(duì)于feed的兼容性提出了極高的要求。

使用場(chǎng)景：動(dòng)態(tài)流可以運(yùn)用在主打UGC的社區(qū)類(lèi)產(chǎn)品當(dāng)中，以及單個(gè)產(chǎn)品中的社區(qū)模塊。

設(shè)計(jì)要點(diǎn)：由于發(fā)布內(nèi)容的主題是合作的媒體以及用戶(hù)用于記錄個(gè)人生活，因此動(dòng)態(tài)流的優(yōu)勢(shì)非常明顯，可以適配不同數(shù)量的圖片以及用戶(hù)的自定義標(biāo)簽，因此動(dòng)態(tài)流很難說(shuō)是呈現(xiàn)以圖片/視頻為主的內(nèi)容，還是以文字為主的內(nèi)容，需要設(shè)計(jì)師與業(yè)務(wù)冊(cè)進(jìn)行協(xié)商，找到feed對(duì)于產(chǎn)品的定位是什么。

劣勢(shì)則是用戶(hù)難以抓住單條內(nèi)容中的重點(diǎn)。因此設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中，需要明確制定相關(guān)規(guī)范，靈活適配單數(shù)或雙數(shù)的圖片數(shù)量，從視覺(jué)上保證平衡。

6. 櫥窗流

介紹：櫥窗流在近兩年越來(lái)越多的出現(xiàn)在各大產(chǎn)品中，由于頭部產(chǎn)品都在往超級(jí)APP的方向進(jìn)行發(fā)展。

前面筆者給大家介紹的各種feed樣式之間都存在著各自的優(yōu)勢(shì)和劣勢(shì)，但是依然無(wú)法滿(mǎn)足現(xiàn)在日益豐富的產(chǎn)品內(nèi)容，因此櫥窗流誕生了。其樣式可以理解為將不同樣式的feed進(jìn)行排列組合，給予用戶(hù)矩陣式的內(nèi)容推薦。

使用場(chǎng)景：多用于產(chǎn)品首頁(yè)金剛區(qū)的下方，作為產(chǎn)品中某項(xiàng)功能或服務(wù)的入口進(jìn)行承載，如新品首發(fā)、現(xiàn)實(shí)搶購(gòu)、正片回顧等。其次是運(yùn)用在某類(lèi)內(nèi)容的聚合場(chǎng)景下。如將某一類(lèi)視頻形成一個(gè)組合的片單，或者是將某一類(lèi)書(shū)籍形成書(shū)單，但是由于內(nèi)容過(guò)多，封面難定的問(wèn)題，此時(shí)可以采用櫥窗流的方式進(jìn)行承載。

設(shè)計(jì)要點(diǎn)：雖然說(shuō)櫥窗流能夠承載豐富的內(nèi)容，容易烘托產(chǎn)品氛圍。但是設(shè)計(jì)師在設(shè)計(jì)過(guò)程中需要對(duì)視覺(jué)進(jìn)行整體進(jìn)行把控，由于單個(gè)區(qū)域中，可能會(huì)出現(xiàn)過(guò)多個(gè)內(nèi)容，容易造成頁(yè)面混亂對(duì)情況。因此不宜把單個(gè)feed設(shè)計(jì)對(duì)過(guò)于出跳，這樣容易影響產(chǎn)品的流量分發(fā)。

其次是需要區(qū)分單個(gè)feed之間對(duì)樣式差異，由于在櫥窗流中，單個(gè)feed屬于內(nèi)容的集合，因此需要注意區(qū)分不同feed之間的樣式。

三、總結(jié)

在本文中，筆者粗略的分析了feed流的組成元素，以及常見(jiàn)的feed流樣式。其中不同的樣式各有利弊，并沒(méi)有某一種萬(wàn)能的樣式，因此在設(shè)計(jì)過(guò)程中，需要結(jié)合業(yè)務(wù)目標(biāo)以及用戶(hù)目標(biāo)進(jìn)行分析，分別分析對(duì)于標(biāo)簽/圖片/文字/操作的需求，從而設(shè)計(jì)出最適合產(chǎn)品需求的feed。

這是設(shè)計(jì)羊皮卷系列文章的第二篇，該系列文章主要分享交互設(shè)計(jì)在互聯(lián)網(wǎng)行業(yè)中實(shí)用的方法論，以及相關(guān)研究。

#專(zhuān)欄作家#

黑羊，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計(jì)師，主要針對(duì)B端設(shè)計(jì)。專(zhuān)注于語(yǔ)音交互、VR、智能硬件、翻譯等交互設(shè)計(jì)工作。擅長(zhǎng)需求分析、用戶(hù)行為分析、用戶(hù)研究以及流程設(shè)計(jì)。

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

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