每天我們在手機上瀏覽各種新聞資訊、娛樂八卦、好友動態時，這些信息通常以 Feed 形式滑過。無時無刻接收著各種信息的你，有沒有想過這些信息的 Feed 形式是怎么被定義下來的，不同的 Feed 形式背后又有著什么樣的設計考慮呢？
相關干貨介紹：
維基百科對 Feed 的定義是一種信息格式，平臺可透過它將最新信息傳播給用戶，用戶有意愿訂閱網站的先決條件是網站可提供持續更新的信息。
Feed 是信息聚合的最小單元，每一條內容都是一個獨立的 Feed，如公眾號的每篇文章和視頻號的每條視頻。
Feed 流是持續更新給用戶的信息流，流是一種信息呈現的形式，除了用戶訂閱的內容還有基于算法進行推薦的信息內容，是一種用戶獲取信息的方式。
在互聯網早期，用戶通過門戶網站獲取內容訊息，各大門戶網站的內容都由編輯來篩選，更像紙媒的電子版。每個用戶看到的都是相同的內容，沒有現在流行的訂閱和個性化的分發方式，用戶想消費資訊就需要登陸各大門戶網站去看編輯好的內容。
基于訂閱的 Feed 早期使用是在 RSS（Really Simple Syndication）時期，最早應用在 RSS 閱讀器中。用戶可以通過 RSS 查看訂閱的所有網站新消息，RSS 將用戶訂閱的各種信息源組合在一起形成內容，對用戶而言就是一個專門訂閱網站的軟件。它可以收集你關心的網站更新的內容，當你關注的內容有更新時，用戶可以通過訂閱器獲取信息。
而 RSS 這種通過接收匯總不同網站的信息來源，再集中呈現給用戶的信息組織形式就被稱之為 Feed 流。
隨著互聯網的發展，普通用戶也可以通過簡單的方式發布訊息，而人們也更習慣的在一個產品中去關注其他的信息發布者，比如微博、Facebook。
2006 年，Facebook 發布了“News Feed”，突破了之前 RSS 的訂閱方式，用戶可以自主發布動態信息，好友之間可以相互的瀏覽和產生互動。News Feed 就像一個新的信息集合，訂閱的不再是某個門戶網站、某個資訊內容，而是創作內容的人，內容就是被關注者生產的動態和在其動態內的社交行為。
目前，隨著互聯網產品和技術的提升，越來越多的產品開始使用 Feed 流這種形態，不再單一基于訂閱為主聚合 Feed，開始演變成挖掘用戶行為習慣和消費數據來進行興趣推薦和社交推薦形式的 Feed 流，例如今日頭條、抖音、視頻號、YouTube、知乎等。
1. 單列沉浸式
隨著短視頻產品的興起，高度碎片化和殺時間成為它的特性。用戶在使用短視頻產品時，會進入到一個情緒化的大腦工作狀態，基本不需要思考，用腦成本低。
單列沉浸式的 Feed 形態更容易將用戶拉到消費短視頻的場景之中，當用戶打開產品即自動播放，不知不覺就會跟著看下去，沉浸在其中。
沉浸流就像是一個永遠裝不滿又讓人興奮下一個開出的視頻是什么的盒子，無論怎么刷都有源源不斷的視頻出現，即使不感興趣，手指輕輕一滑就又有新的內容。而設計沉浸式視頻 Feed 流的核心要點就是不去打破用戶的沉浸感。
如何做才能最大程度的維護這種“沉浸感”?
設計要點一：視覺降噪
視覺降噪就好像我們在電影院看電影時，你的眼睛只被前方那一塊充滿故事性的幕布吸引，周圍一切都是黑暗的，讓你能更沉浸的投入在電影的故事情節中。
在 UI 上做降噪的手法，可以通過強化有效資訊，消除多余雜訊，穩定變量元素，從而達到降噪的效果。
設計師應該清楚的知道頁面哪些內容可控，哪些不可控。
拿視頻號的 Feed 舉例，描述文本內容是視頻 Feed 上設計無法控制的變量元素，有些 Feed 有，有些又沒有，而身份信息和操作按鈕，是固定出現的元素。
兩個固定元素（身份信息）間夾著不可控的變量元素（描述文本），勢必產生變化，影響內容體驗。固定元素受到變量元素的影響，在上下滑動 Feed 時，用戶頭像會因為文本內容的多少而上下跳動，導致頁面節奏不穩定。
想要讓頁面結構變得穩定，就要讓固定元素（身份信息）保持位置的穩定，不受變量元素（描述文本）拓展的影響。那么，在每次上滑 Feed 時，創作者的身份信息都是穩定的出現在左下角。位置的固定會讓整個產品布局更加穩定。
左下角展示創作者身份，右下角放操作按鈕是視頻號 Feed 流的布局特點。同時能讓視頻號 Feed 流在操作布局上和抖音、快手的右側豎立的操作布局有明顯的差異性。視頻號的這種特有布局追究其原因，是因為希望更多的空間留給視頻本身的展示，減少頁面元素對視頻的遮擋。
這樣的布局和抖音、快手比起來可能會犧牲部分的互動率，畢竟豎排且面積更大的操作按鈕在互動數據表現上肯定會高于現在視頻號采用的布局方式。但是從對瀏覽視頻的干擾上，視頻號顯然選擇了干擾更小的方案。
設計要點二：保持任務的連貫性，減少打斷
保持任務的連續性，減少打斷和干擾也是保持沉浸體驗的方法之一，看評論的時候視頻縮放到頂部，保證瀏覽視頻的主任務不被打斷和受到評論半屏遮擋的干擾。讓瀏覽者在查看評論的同時，也能繼續保持視頻內容的不間斷播放。
設計要點三：不要過度刺激
無論是產品功能的推廣還是廣告插入，全屏 Feed 流的轉化率都會優于其他形式的 Feed。產品的發展過程會或多或少有一些功能推廣、廣告等方面的訴求。我們應該思考如何控制功能推廣性質上的過度刺激。
如上圖，產品側希望在用戶上滑視頻流的過程中去推廣新特效的發表。從左到右三個方案對用戶瀏覽視頻的沉浸感的打斷是從強到弱的。如何更好的處理這些強行插入的內容，在提升業務轉化率和不影響用戶沉浸體驗方面，是設計師需要去思考和決策的。
2. 單列非沉浸式
單列非沉浸式視頻 Feed 流，是指內容以 Cell 或卡片的形式單列排列，一個 Cell 或一個卡片即為一個 Feed 信息聚合的最小單元載體，并通過封面圖、標題、摘要、發表者身份信息等為瀏覽者提供部分預覽內容。瀏覽者需要通過點擊 Cell 或卡片進入二級頁面來瀏覽完整的內容，典型的例子如 YouTube。
通常中長視頻采用的單列非沉浸式 Feed 流，一屏最多可以展示 1.5-2 個 Feed 內容，單列非沉浸式 Feed 流要求設計簡潔和保持克制，Feed 上保留最核心的預覽內容，即內容描述、推薦信息、操作按鈕，這些預覽內容目的都是為了幫助用戶去做篩選決策。
如何才能保持單列非沉浸式 Feed 的“簡潔和克制”?
設計要點一：控制外露信息的維度
單列非沉浸式 Feed 上展示的內容是有限的，外露的信息最好控制在「內容信息、相關數據、操作按鈕」三個維度以內。
之所以按這三個維度分，是因為選擇需要外露的預覽內容，要從能最大激發瀏覽者篩選和點擊欲望的角度去出發。Feed 上的任何一個信息都是有價值的，對瀏覽者篩選內容作用不大的信息，盡量不要放在 Feed 上。同時，每個 Feed 上僅保留一個核心操作按鈕，非核心操作盡量弱化處理，降低用戶的認知成本。
設計要點二：減少層級
減少層級會使界面變得更加簡潔，去掉卡片能使用戶更聚焦于內容本身，而不是卡片的邊框和裝飾。
設計要點三：選擇適合產品定位的布局
單列非沉浸式 Feed 在排版布局上往往需要考慮的因素比較多，如：1. 是否使用通欄的樣式？2. 頭像放在上面還是下面？3. 標題放在上面還是下面？4. 視頻封面是否自動播放？
問題一：是否使用通欄的樣式？
使用通欄或不通欄的布局取決于多個因素，包括內容類型、產品目標、體驗目標等。如果視頻內容需要更大的屏幕空間展示畫面，通欄布局更適合。通欄布局可以充分利用屏幕空間來展示更多的內容，使用戶更專注于視頻，適合于當前播放瀏覽的場景。
而不通欄的樣式，更適合讓用戶前往二級頁面去消費完整的視頻內容。不通欄的單卡 Feed，更像一個供用戶瀏覽篩選的內容概覽。
問題二：頭像 / 標題放視頻封面上面還是下面？
頭像的位置是在視頻上還是在視頻下，取決于產品是以創作者為重點去推內容，還是以內容為重點創作者僅為輔助篩選的元素。用戶在使用手機應用時，視覺動線都是至上而下的，希望用戶先看到什么，就把什么信息放在上面。以內容為主的產品視頻封面即放在最上，以創作者為主的產品，創作者身份則放在最上。
標題放在上面還是下面也是一樣的道理，但標題的位置取決于是否能夠幫助用戶快速的了解視頻內容，從而進一步消費內容提供依據。
然而現在越來越多的創作者會在視頻封面上將主題以封面的形式展現給觀眾，平臺上創作者的視頻封面帶主題的比例如果很大，或者平臺推薦創作者在制作封面的時候能很好的帶上主題，則在 Feed 的布局上可以降低標題展示的權重，將標題放在封面下方。所以標題的上或下，一方面取決于產品導向，即是否希望創作者制作帶標題的封面。另一方面也要考慮現存視頻資源有優質封面的創作內容的比例。
問題三：是否自動播放視頻？
實際上是否自動播放封面視頻，也是一個產品導向的問題，自動播放，可減少用戶操作成本，更沉浸。但這需要平臺具備較好的推薦算法，保證推薦的視頻都是用戶喜歡的。若推薦視頻內容和用戶喜好度不匹配，自動播放反而會變成對用戶的干擾，影響用戶體驗。是否自動播放需要綜合考慮產品特點和用戶訴求。
3. 雙列瀑布流
①什么是瀑布流?
瀑布流布局的英文叫 Masonry Layouts，在移動互聯網還沒發展的 Web 時代，Pinterest 就在使用瀑布流式的布局方式，所以也有人將瀑布流布局稱之為 Pinterest 布局。
瀑布流布局是一個非常經典的布局方式，等寬不等高，根據封面原比例縮放高度達到設計預定的比例。其布局核心是網格布局，除了每個內容的高度有變化，寬度和間距都是完全固定的。
②為什么使用瀑布流?
瀑布流布局最大的優點就是提高篩選效率，更適合于 UGC 產品的使用，當我們不能保證每個 Feed 內容都是吸引用戶的，雙列無盡的瀑布流式布局是更高效的選擇。瀑布流式的布局將每個 Feed 的決策權交到了用戶手中，使它們能更快的找到自己想看的內容。
同時，瀑布流形式上簡單，視覺樣式簡潔，能有效的降低頁面的復雜度，同時節省很多空間。
瀑布流在設計上需要關注每個獨立的卡片的比例大小。上文提及，瀑布流是等寬不等高的，不等高是因為封面的比例或文本的行數決定的，一般情況下，文本的行數很好控制，一行或兩行差異不會太大，但封面的比例不同，會很大程度影響瀑布流單個卡片的面積大小。設計規則上應該有封面梯度的要求，避免出現豎封面比橫封面占比懸殊過大的情況。
對于視頻 Feed 來說，不同形態的 Feed 流滿足不同的產品訴求。
單列沉浸式 Feed 流注重單個視頻的觀看體驗，用戶可以沉浸的觀看視頻內容。但全屏的 Feed 流容錯率會更低，要保證推出的內容是用戶喜歡的，對推薦算法要求就更高。
單列非沉浸式 Feed 流更適合于長視頻消費，用戶自主探索性要高于沉浸式 Feed 流，同時視頻流卡片可以展示更多的內容，如熱門視頻、相關合集，用戶可以通過視頻 Feed 卡片去發現更多內容，從而豐富觀看體驗。
雙列瀑布流提供用戶選擇的權利則更高，通過增加內容的曝光，內容的分發效率提升，為用戶提供更多樣化的內容選擇，推薦內容契合度的容錯率就更高。
歡迎關注作者微信公眾號：「We-Design」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 陳家的小美工