前言

信息爆炸時代，信息的更迭速度越來越快，用戶擁有無限的信息獲取渠道。如何從多元信息中篩選出優質且符合胃口的內容，那就不得不提今天的主角 —— Feed流。Feed流是移動互聯網的產物，個性化的內容推薦方式將在這個內容爲王的時代發揮出它更大的價值。

設計師也應當與時俱進，如何在信息超載時代下做「更好的用戶體驗」是設計師們不斷追尋的。

美柚作爲國內超活躍的女性交流社區，Feed流是資訊和社區的核心場景之一，針對Feed流的優化也在不斷進行。本文將從認識Feed流、國內Feed流的市場格局、可用性設計原則、設計方案，全方位帶你瞭解Feed流。

認識Feed流

1. 什麼是Feed流？

「Feed」在現代信息媒體世界中可以理解爲「投餵」。最早web時代，用戶主動從新聞網站或博客訂閱，訂閱器幫用戶及時更新信息，然後按照時間順序展示。

從維基百科中關於「web feed」的定義中，我們可以看出：

• Feed是爲用戶持續提供內容的數據格式；
• 內容提供方訂閱服務，用戶主動訂閱獲得內容更新；

2006年Facebook在社交行業重新定義爲「News Feed」，即突出內容信息，注重「沉浸式」的體驗，用戶通過無限的下拉刷新獲取信息。

「流」是一種呈現形式，現今產品應用中，除了用戶主動訂閱，大多基於智能算法進行推薦。

小結：Feed流是一個信息出口，爲用戶提供個性化定製的內容，只需要刷新一個動作就能與他人或者資訊建立連接。

2. Feed流的作用

現代Feed流的核心是個性化推薦，內容和用戶爲兩大主體，通過用戶與內容的匹配實現「信息找人」的展示方式。

3. Feed流的表現形式

Feed流的基礎核心是內容，其次會有內容產生的時間、地點、發佈者等等，社交領域中常見的還有點贊、轉發、評論等更小的元信息，根據場景和業務不同，其表現方式也不盡相同。在移動互聯網中最常見3種形式：文字流、圖片流、視頻流。

文字Feed流

主要以「標題文字+輔助圖片」組成。常用在新聞資訊類應用中，如今日頭條、騰訊新聞等。

• 優點：信息明確，提煉內容信息轉化成標題傳遞給用戶；展示信息量多，信息互獲取率高；學習成本低；
• 缺點：視覺衝擊力較弱；內容展示不夠全面；需要二次點擊進入詳情頁；
• 常見佈局：左右結構、上下結構；

圖片Feed流

以圖片爲主，文字性信息在圖片底部輔助展示。如綠洲、ins、Facebook、微信、小紅書等。

• 優點：視覺衝擊力強；適配簡單，節省開發成本；畫面視覺層級豐富；優質的圖片可以提升整體產品品質；
• 缺點：佔用空間大，展示內容少；信息傳達不如文字明確；圖片質量差時容易降低品質；
• 常見佈局：大圖、宮格、拼圖、瀑布流；

視頻Feed流

以短視頻爲主，文字信息弱化處理。如抖音、快手等。

• 優點：沉浸式體驗好；感官衝擊力最強，滿足用戶在視覺和聽覺上的感受；
• 缺點：佔用空間大，需要緩存，對網絡質量要求高；展示內容少，只能進行短視頻播放，需要頻繁刷屏；
• 常見佈局：全屏流；

國內Feed流的市場格局

在碎片化時代的今天，人們越來越追求高效準確的獲取信息。社交和獲取信息是用戶在網絡上的重要需求，資訊產品連接人與內容，專注信息獲取；社交產品連接人與人，注重交流環境。在這一大背景下，Feed流的優化一直在進行。本文講從美柚App中有運用到的新聞資訊類和社交互動類兩個類型分析國內Feed流的市場格局。

1. 新聞資訊類

2016年新聞客戶端在智能手機用戶中的滲透率就高達66.2%，即3.77億人。隨着移動互聯網的飛速發展，這個數據還在不斷擴大。目前資訊類產品較多使用智能推薦算法排序，這就是信息的「同溫層效應」，即心理學上說的，人們天然地就更喜歡接受與自己觀點一致的信息。

本次通過「易觀千帆」篩選「信息流資訊」，選出新聞類產品Top4的Feed流樣式進行對比統計。

今日頭條

今日頭條是一款綜合資訊App，通過用戶行爲分析、推薦引擎技術實現更加個性化與精準化的推送。

結構清晰，功能劃分也較爲明確。更多下發3圖大圖和視頻樣式。

使用紅色品牌色，基本情況下白底黑字，文字最多顯示3行。

騰訊新聞

騰訊新聞在微信、QQ等社交平臺的助力下，其用戶活躍程度高。強調新聞秒傳，快速實時推送重大新聞。

整體結構非常清晰，操作簡單，隱藏層次較少，易使用。

使用騰訊系藍色，沒有複雜的配色，界面簡潔明瞭，很乾淨。

趣頭條

以娛樂和生活爲主題內容，爲新興市場用戶提供精準的內容，主打讓閱讀更有價值。

結構上更多使用上文下圖的格式，更多下發三圖與視頻樣式。

顏色上使用了安全穩妥的綠色，這色系在新聞資訊產品中較爲少見。

搜狐新聞

全媒體資訊平臺，開放的訂閱模式，海量的獨家內容，主打準確可靠。

與其他新聞類應用不同的是搜狐新聞採用左圖右文的佈局方式，瀏覽動線稍顯複雜，更多下發小圖樣式，故而相比其他客戶端，搜狐新聞一個頁面呈現的新聞數目更多。

動態字號的運用

新聞資訊類產品大多有動態字號的功能。一般情況下默認顯示字號均爲標準(中)字號，以今日頭條爲例，我們能發現小字體、大字體基於標準字體以2爲單位向上遞增或向下遞減。

在同一機型下進行動態字體調整，可以發現在Feed流中僅有標題字號隨設置字體大小而調整，而在詳情頁中也僅有標題和段落的字號隨設置字體而調整。輔助信息及配圖大小在任何情況下均不更改。部分插入模塊不隨設置字體大小而更改。

視覺層面解析

在視覺層面上對所選主流應用Feed流中的標題文字、輔助信息、對齊方式、分割線進行拆解分析。文字（大小、顏色、字重）、顏色、標籤、佈局等等都可以作爲分析的因素。

• 標題文字：字號介於17至19之間，顏色僅在HSB模式中的B（亮度）存在區別，在字距與行高的選擇上無統一格式。
• 輔助信息：字號在11與12之間，顏色在HSB顏色模式下B>60，多個輔助文字信息以寬度間距分割。
• 對齊方式：小圖的圖文展示上超87%使用了左文右圖的結構，文字信息均採用左對齊方式。
• 分割線：同一信息模塊分割更多采用兩邊留距的方式，插入不同信息模塊，上下以模塊間距分割。

小結：資訊流信息流產品，亦即頭條類產品，以內容爲主，注重信息提取效率，更強調用標題文字信息吸引用戶瀏覽視線。合理的在更小空間內展示更多內容給用戶，在高效閱讀的同時提高用戶的視覺體驗。

2. 社交互動類

互聯網的本質是連接，價值也在連接中產生。社交是用戶在網絡上的另一大重要需求，應運而生多種圈子產品。基於不同的圈子人羣，創造社交環境。圈子能夠很好地平衡產品的內容與社交屬性。

本次主要對宮格式佈局產品進行解析，如我們最熟悉的「微信」中的朋友圈便是經典的宮格式佈局.

新浪微博

新浪微博作爲國內領先的社區，Feed流是微博最重要的場景之一，首頁與發現中最常見的便是宮格佈局。與新聞資訊類有所不同的是會在每個內容上方增加發布者信息和關注按鈕。關注的目的不是社交，而是社交的前提。關注關係可以更快速的獲得內容，是社交產生的前提語境。

豆瓣

豆瓣首頁主打發現和記錄感興趣的內容，在首頁推薦頻道可以自由瀏覽個性化內容，發現更多有趣的豆友並與之建立聯繫。首頁推薦與動態的主要目的在於社交互動，其中佔比最大的爲2圖與3圖樣式。較微博有所不同的是發佈者後面沒有關注按鈕，而是與資訊類中一樣的負反饋。

小結：泛社交應用產品，社交關係主要建立在內容上，注重內容傳播的速度和內容公開。Feed的呈現方式發佈者與發佈內容不做明顯的設計區分。底部一般伴隨點贊、評論和分享等操作交互。以間距分割方式區分不同模塊。

可用性設計原理

設計不止是藝術行爲，同時也是商業行爲，越來越數據化的今天，光憑感性的判斷來定義設計的價值是不夠客觀的，設計師們應該掌握更多的設計原理爲設計賦能。

1. 信噪比

信噪比是指相關信息與不相關信息的比例。合理的信噪比可改善與用戶的交流。加大信號可以將有用的信息快速準確的傳達給用戶，減少噪音並使信號脫穎而出，平衡好內容的優先級有助於用戶快速找到所需的信息。靈活運用「信噪比」，通過設計減輕用戶負擔，提升效率。

2. 文字易讀性

文字的易讀性很大程度上決定了用戶是否能準確高效的閱讀。在iOS和 Android的通用文字規範中，最小閱讀文字爲12號字。

行間距也是影響文字易讀性很重要的要素。行間距過大會增加視線跨越度，過小增加閱讀負擔且容易重複閱讀。一般1.2～2倍行間距更適合人眼閱讀。

3. 圖版率

圖版率指頁面中圖片面積的佔比。當圖版率爲0%時，版面顯得非常枯燥，讀者會喪失閱讀的興趣。當圖版率爲40%時，版面充滿生氣，富有活力，讀者的閱讀興趣會隨之上升。當圖版率爲100%時，則會給讀者帶來強烈的視覺感受。

除圖片本身外，我們也可以通過填充底色、圖形疊底、重複圖片來提高界面中的圖版率。

4. 格式塔原則-鄰近

物體之間的相對距離會影響我們感知它們的關係。距離較近的對象比距離較遠的對象更相關。

當不同的元素的物理距離靠近時，自熱而然被看作是一個組，而不是單個的元素。當其中距離較遠時則是不同的組。

設計方案

通過對基礎知識的瞭解和主流應用Feed流對比，結合自身產品特色，以設計體驗目標爲導向，梳理現狀問題提出相應的優化目標，進而產出優化方案。

目前資訊和社區線上存在以下問題：

• Feed流字號不統一；
• 配圖間距不統一，配圖圓角不統一；
• 標籤位置無統一邏輯；

爲解決現有問題，我們重新對Feed流的設計語言進行優化。基於對Feed流的瞭解及主流產品分析，本次優化將從有序統一、空間利用率、視覺體驗三個要點展開。

通過「信噪比」理論我們知道平衡信號與噪音的比例，可以有效保證核心信息的清晰度。弱化其他裝飾性元素，讓用戶可以聚焦內容本身。

格式塔中的鄰近原則也告訴我們控制不同元素的間距可以更好的把握親疏關係。

爲了更好的觀察Feed流中的不同文字字號的影響，我們可以從標題字號、行高、字距等多個不同變量中組合多種方案進行對比。

字號、字距、字重與配圖比例都是可以影響Feed流最終數據的潛在因素，我們可以分開對不同元素進行實驗驗證。

注意文字跳動率，即最大字號與最小字號之間的比例。除了黃金分割比例1.618，還可以運用到根號2的比例，即1.141。

圖片的比例儘量使用黃金比例做展示，例如4:3、3:2、1:1、16:9。

圖文樣式可作爲基礎樣式，在確定圖文樣式後，梳理所有Feed流樣式進行新設計方案的所有輸出。

總結：如今互聯網內容時代，用戶對於快速獲取有效內容的需求日漸強烈，如何高效、準確獲取自己感興趣的內容成爲一個日益凸顯的需求。Feed流結構簡潔，減輕用戶的認知負擔，每個資訊社交相關的產品都勢必進行科學有效的優化迭代。

寫在最後

此次文章分享美柚Feed流redesign的全過程，優化過程中我們也發現了很多自身的不足，還有很多內容需要完善，我們也相信每一次改變都是前進的腳步。

每一次的設計提案都應該基於理論知識和對市場格局的瞭解，設計不是最終目的，提升用戶體驗纔是我們的追求。

希望本篇文章對各位小夥伴們有所幫助，有任何意見建議也歡迎評論區留言討論。

更多Feed流設計方法：

歡迎關注作者微信公衆號：「美柚UED」