Labs 導讀

在這個內容為王的時代，各個類型的產品都開始圍繞著自己所處的賽道營造豐富的信息流，傳統的信息流不再能承載當下豐富多樣的內容，信息流也不再單純屬于信息類以及文娛類產品，因此傳統的信息流無法承載日益豐富的產品內容，逐漸一種個性化的內容推薦方式-Feed流逐漸孕育而生，其樣式豐富，其中包括大卡流、雙列流、沉浸流、動態流、文本流、動態流、櫥窗流等等…...

Part 01、 什么是Feed流 

Feed流是持續更新并呈現給用戶內容的信息流，feed是將用戶主動訂閱的若干消息源組合在一起形成內容聚合器，幫助用戶持續地獲取最新的訂閱源內容。

Feed，源自早期的RSS。是一種呈現內容給用戶并持續更新的方式，用戶可以選擇訂閱多個資源，網站提供feed 網址 ，用戶將feed網址登記到閱讀器里，在閱讀器里形成的聚合頁就是feed流。

2006年 Facebook重新定義了feed，叫News Feed，我們如今廣泛使用的模式和這個類似。它有幾個特點：

訂閱源不再是某個內容，而是生產內容的人/團體。訂閱中通常夾雜非訂閱內容，比如熱門推薦，廣告。

內容也不再嚴格按照timeline（時間排序），廣泛使用智能feed排序。新的feed流刻意不再需要主動搜索，而是主動呈現琳瑯滿目的內容。它對我們了如指掌，給我們想了解的，讓我們不停的刷新沉溺于此。

Part 02、Feed流主要模式  

以微博舉例：

2.1推模式

當一個用戶觸發行為（比如發微博）時，自身行為記錄到行為表中，同時也對應到這個用戶的粉絲表，為每個粉絲插入一條feed。但是對于粉絲過萬的大V，為每個粉絲插入一條feed對存儲數據成本很大。

圖片

2.2拉模式

當一個用戶（特別是關注了很多人的）觸發行為時，拉取自己動態，檢索用戶的關注表，然后根據關注表檢索新發的feed。如果一個用戶關注過多的時候，查詢該用戶的關注列表也是有很大數據成本。

圖片

2.3推拉結合模式（結合方式多種，舉兩個例子）

2.3.1在線推，離線拉：

大V發動態，只同步發布動態給同時在線的粉絲，離線的粉絲上線后，再去拉取動態。來完成推與拉。

圖片

2.3.2定時推，離線拉：

大V發動態之后，以常駐進程的方式定時推送到粉絲動態表。

圖片

Part 03、Feed流的主要組成部分  

feed流主要由以下幾個部分組成，如下圖：

圖片

3.1圖片/視頻

在大多出產品的feed流中，占最大面積的就是圖片或視頻。相較于文字，圖片更能夠激發用戶點擊的欲望，在帶有社區屬性的產品中，設計師還需要考慮如何適配橫屏以及豎屏封面。

其次是如果該位置出現的是視頻。在常見的視頻產品中，當系統識別出該內容處于用戶界面的中間區域，則會自動進行預告播放。在1-2秒的時間內，用戶能夠快速瀏覽視頻中最精彩的部分。在展現方式上通常使用帶有圓角的距形進行展示，圓角一般設置為：8、10、12、14、16、20PX。

3.2標題

在feed的設計中，標題是最不可缺少的部分，在字體的設計上，大多數采用黑色字體。在排布方式上在一行至兩行，如出現標題字數過多，可以用「 … 」的方式進行呈現。其次需要限制產品的創作者以及運營在配置標題時，注意文案應該簡明扼要，不要過于累贅。

3.3文案

該區域可以叫做文案區域或二級標題區域，在該區域的設計中，字體顏色建議大多數采用灰色進行展示。在文案的編寫上可以加入更帶有引導性的詞匯用于引導用戶點擊。

3.4標簽

標簽的出現目的主要有兩個方面，第一個方面是幫助用戶能夠快速的區分內容的種類如：預告、獨播、直播、精選、推薦等。用戶可以在眾多feed流中通過查看標簽進行篩選，從而快速找到自己想看的內容。

第二個方面主要是幫助產品進行更加精準的流量分發，產品會根據用戶的操作習慣進行分群，再根據用戶興趣給每個群體打上相對應標簽。而這些標簽則是對應了不同群體的用戶，因此也就有了淘寶商城中千人千面的推薦形式。

3.5輔助信息

輔助信息主要是為了滿足不同產品的信息呈現，如在視頻平臺中，輔助信息可以承載電影評分、電視劇的集數、播放量、綜藝的更新日期、點贊數、評論等，甚至會加入相關的快捷操作如靜音。輔助信息在設計中，不易做的過于突出，需要清晰單個feed的信息層級，挑選必要的信息進行展現。

3.6操作

操作區域的目的是為了產品的算法更加了解用戶的偏好，因為用戶的興趣是會發生變化的，如果用戶在某段時間突然特別不想看到某些內容，就可以通過點擊操作將內容進行「不喜歡」或「減少相關內容」的操作，這樣也能給予用戶對于feed流一定的自定義。

在交互形式上，點擊操作區域后，建議采用較為輕量的交互方式，如點擊后出現底部彈窗或氣泡的形式。

圖片

Part 04、 Feed流的形式 

僅僅了解了feed的組成部分是不夠的。單個的feed流其實就像是英語學習中的單個單詞一樣，單獨的去死記硬背某個單詞其實意義是不大的，feed流的設計也同樣如此。我們還需要擁有能夠將前面提到的組成元素，拆開和重組的能力，因為不同的產品業務屬性不同，所需要給用戶提供的內容也就不同。

4.1 文字流

介紹：文字流多在信息類產品如知乎、百度，或產品的用戶評論區當中。此類樣式可以運用在以文字為主的feed流設計中，并且還可以與動態流（下文會提到）之間搭配使用。

由于適配度高，可容納更多的操作按鈕，因此可以服務與以UGC內容為主的產品，UGC產品需要強調用戶之間的互動，需要將互動類快捷操作外露。 

圖片

使用場景：以文字為主的信息類產品，新聞資訊類產品、評論區、產品發現頁/社區。

設計要點：在文本流的設計中，需要注意的是區分信息的優先級，其中標題可以采用大字號加粗的方式進行區分，正文則可以采用黑色常規的字體。

操作區域以及輔助信息可以布置在正文的下方，灰色處理，頭像以及標簽可以作為一個整體進行布局。在交互上，可以將分享/評論/點贊等按鈕外露，從而降低用戶的互動成本。

4.2大卡流

介紹：該樣式主要服務于以圖片/視頻信息為主要內容的feed流。以淘寶為例，在淘寶2020年提出“逛淘寶”的理念后，不再一味的追求交易的最短路徑，而是讓用戶在首頁點擊了某件商品之后，進入的是一系列同類商品的feed流，而不是商品的詳情頁。可以看出，大卡流非常適用于圖片/視頻信息的展示。

使用場景：以圖片為主的內容且需要搭配相關操作，如評論/進入詳情/分享/點贊等。劣勢是單排僅顯示一條feed，所需空間較大，在首頁不適合單獨使用，需要和其他feed樣式進行搭配。

設計要點：在大卡流的設計中，由于空間較大，需要注意標題和操作區域的擺放位置，其次是需要把控創作者或合作媒體上傳的圖片質量。最重要的是需要考慮適配橫屏和豎屏的封面，由于圖片比例的不同，會涉及到相關操作交互一致性以及視覺一致性的統一。

4.3雙列流

介紹：將雙列流帶到用戶視野的產品非小紅書莫屬，從小紅書發布之初到現在一直采用雙列流的形式。它的好處是能夠最大限度的將以圖片為主的feed內容呈現給用戶。

樣式最初以長卡樣式為主，主要用于適配豎屏圖片，但隨著現階段UGC內容的發展，雙列流也開始適配橫屏封面。如優酷的首頁feed，則是采用了雙卡流中的短卡樣式，也不乏將長卡和短卡搭配使用的情況。

圖片

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

設計要點：在設計雙列流的過程中需要考慮左右兩列之間以及上下兩行之間的間距，由于內容與內容之間圖片的高度不同，標題字數不同，因此需要制定良好的規范，從而保證用戶在瀏覽內容的過程中保證兩列內容之間的節奏感。其次是控制操作按鈕的個數，需要根據產品實際需求，僅將最重要的操作進行外露。

4.4沉浸流

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

圖片

使用場景：該類樣式主要適用于短視頻、直播間。

設計要點：由于在不同產品中，短視頻起到作用不同。比如在淘寶，短視頻的目的是給予用戶更直接的效果展示，讓用戶能夠快速的了解到產品的優點，從而下單。

因此短視頻在淘寶詳情頁中的作用就是激勵用戶購買，所以會在左下角加入購買的鏈接。再比如在視頻類產品中，如優酷則是提供相關的電影片段，那么目的就是為了給產品中的電影播放區導流，因此在設計過程中也會有相應的改變。

在使用沉浸流的過程中，需要結合實際項目需求，不能將抖音快手的設計方式直接照搬到自己的產品中，這樣容易導致產品功能割裂的情況。

其次是需要將功能進行分區展示，如可以將同類的相關操作聚合放置在固定的區域，由于沉浸流功能按鈕會非常多，因此對用戶容易造成干擾，容易找不到想要操作的按鈕。

4.5動態流

介紹：微博和微信朋友圈是筆者認為將動態流使用的最為廣泛的產品，由于在這兩款產品中，內容過于豐富，不僅需要適配橫屏或豎屏的圖片/視頻，還需要考慮適配不同數量。

并且需要將所有圖片展現給用戶，其中還不乏動圖。因此對于feed的兼容性提出了極高的要求。 

圖片

使用場景：動態流可以運用在主打UGC的社區類產品當中，以及單個產品中的社區模塊。

設計要點：由于發布內容的主題是合作的媒體以及用戶用于記錄個人生活，因此動態流的優勢非常明顯，可以適配不同數量的圖片以及用戶的自定義標簽，因此動態流很難說是呈現以圖片/視頻為主的內容，還是以文字為主的內容，需要設計師與業務側進行協商，找到feed對于產品的定位是什么。

劣勢則是用戶難以抓住單條內容中的重點。因此設計師在設計的過程中，需要明確制定相關規范，靈活適配單數或雙數的圖片數量，從視覺上保證平衡。

4.6櫥窗流

介紹：櫥窗流在近兩年越來越多的出現在各大產品中，由于頭部產品都在往超級APP的方向進行發展。

前面筆者給大家介紹的各種feed樣式之間都存在著各自的優勢和劣勢，但是依然無法滿足現在日益豐富的產品內容，因此櫥窗流誕生了。其樣式可以理解為將不同樣式的feed進行排列組合，給予用戶矩陣式的內容推薦。

圖片

使用場景：多用于產品首頁金剛區的下方，作為產品中某項功能或服務的入口進行承載，如新品首發、限時搶購、正片回顧等。其次是運用在某類內容的聚合場景下。如將某一類視頻形成一個組合的片單，或者是將某一類書籍形成書單，但是由于內容過多，封面難定的問題，此時可以采用櫥窗流的方式進行承載。

設計要點：雖然說櫥窗流能夠承載豐富的內容，容易烘托產品氛圍。但是設計師在設計過程中需要對視覺進行整體把控，由于單個區域中，可能會出現多個內容，容易造成頁面混亂的情況。因此不宜把單個feed設計得過于出挑，這樣容易影響產品的流量分發。

其次是需要區分單個feed之間的樣式差異，由于在櫥窗流中，單個feed屬于內容的集合，因此需要注意區分不同feed之間的樣式。

Part 05、  總結  

本文粗略的分析了feed流的起源、主要模式、組成元素以及常見的feed流樣式。其中不同的樣式各有利弊，并沒有某一種萬能的樣式，因此在設計過程中，需要結合業務目標以及用戶目標進行分析，分別分析對于標簽/圖片/文字/操作的需求，從而設計出最適合產品需求的feed。