信息爆炸時(shí)代，信息的更迭速度越來越快，用戶擁有無限的信息獲取渠道。如何從多元信息中篩選出優(yōu)質(zhì)且符合胃口的內(nèi)容，那就不得不提今天的主角 —— Feed流。Feed流是移動(dòng)互聯(lián)網(wǎng)的產(chǎn)物，個(gè)性化的內(nèi)容推薦方式將在這個(gè)內(nèi)容為王的時(shí)代發(fā)揮出它更大的價(jià)值。

設(shè)計(jì)師也應(yīng)當(dāng)與時(shí)俱進(jìn)，如何在信息超載時(shí)代下做「更好的用戶體驗(yàn)」是設(shè)計(jì)師們不斷追尋的。

美柚作為國內(nèi)超活躍的女性交流社區(qū)，F(xiàn)eed流是資訊和社區(qū)的核心場景之一，針對Feed流的優(yōu)化也在不斷進(jìn)行。本文將從認(rèn)識Feed流、國內(nèi)Feed流的市場格局、可用性設(shè)計(jì)原則、設(shè)計(jì)方案，全方位帶你了解Feed流。

認(rèn)識Feed流

1. 什么是Feed流？

「Feed」在現(xiàn)代信息媒體世界中可以理解為「投喂」。最早web時(shí)代，用戶主動(dòng)從新聞網(wǎng)站或博客訂閱，訂閱器幫用戶及時(shí)更新信息，然后按照時(shí)間順序展示。

從維基百科中關(guān)于「web feed」的定義中，我們可以看出：

• Feed是為用戶持續(xù)提供內(nèi)容的數(shù)據(jù)格式；

• 內(nèi)容提供方訂閱服務(wù)，用戶主動(dòng)訂閱獲得內(nèi)容更新；

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

「流」是一種呈現(xiàn)形式，現(xiàn)今產(chǎn)品應(yīng)用中，除了用戶主動(dòng)訂閱，大多基于智能算法進(jìn)行推薦。

小結(jié)：Feed流是一個(gè)信息出口，為用戶提供個(gè)性化定制的內(nèi)容，只需要刷新一個(gè)動(dòng)作就能與他人或者資訊建立連接。

2. Feed流的作用

現(xiàn)代Feed流的核心是個(gè)性化推薦，內(nèi)容和用戶為兩大主體，通過用戶與內(nèi)容的匹配實(shí)現(xiàn)「信息找人」的展示方式。

3. Feed流的表現(xiàn)形式

Feed流的基礎(chǔ)核心是內(nèi)容，其次會有內(nèi)容產(chǎn)生的時(shí)間、地點(diǎn)、發(fā)布者等等，社交領(lǐng)域中常見的還有點(diǎn)贊、轉(zhuǎn)發(fā)、評論等更小的元信息，根據(jù)場景和業(yè)務(wù)不同，其表現(xiàn)方式也不盡相同。在移動(dòng)互聯(lián)網(wǎng)中最常見3種形式：文字流、圖片流、視頻流。

文字Feed流

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

• 優(yōu)點(diǎn)：信息明確，提煉內(nèi)容信息轉(zhuǎn)化成標(biāo)題傳遞給用戶；展示信息量多，信息互獲取率高；學(xué)習(xí)成本低；

• 缺點(diǎn)：視覺沖擊力較弱；內(nèi)容展示不夠全面；需要二次點(diǎn)擊進(jìn)入詳情頁；

• 常見布局：左右結(jié)構(gòu)、上下結(jié)構(gòu)；

圖片F(xiàn)eed流

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

• 優(yōu)點(diǎn)：視覺沖擊力強(qiáng)；適配簡單，節(jié)省開發(fā)成本；畫面視覺層級豐富；優(yōu)質(zhì)的圖片可以提升整體產(chǎn)品品質(zhì)；

• 缺點(diǎn)：占用空間大，展示內(nèi)容少；信息傳達(dá)不如文字明確；圖片質(zhì)量差時(shí)容易降低品質(zhì)；

• 常見布局：大圖、宮格、拼圖、瀑布流；

視頻Feed流

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

• 優(yōu)點(diǎn)：沉浸式體驗(yàn)好；感官沖擊力最強(qiáng)，滿足用戶在視覺和聽覺上的感受；

• 缺點(diǎn)：占用空間大，需要緩存，對網(wǎng)絡(luò)質(zhì)量要求高；展示內(nèi)容少，只能進(jìn)行短視頻播放，需要頻繁刷屏；

• 常見布局：全屏流；

國內(nèi)Feed流的市場格局

在碎片化時(shí)代的今天，人們越來越追求高效準(zhǔn)確的獲取信息。社交和獲取信息是用戶在網(wǎng)絡(luò)上的重要需求，資訊產(chǎn)品連接人與內(nèi)容，專注信息獲??；社交產(chǎn)品連接人與人，注重交流環(huán)境。在這一大背景下，F(xiàn)eed流的優(yōu)化一直在進(jìn)行。本文講從美柚App中有運(yùn)用到的新聞資訊類和社交互動(dòng)類兩個(gè)類型分析國內(nèi)Feed流的市場格局。

1. 新聞資訊類

2016年新聞客戶端在智能手機(jī)用戶中的滲透率就高達(dá)66.2%，即3.77億人。隨著移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，這個(gè)數(shù)據(jù)還在不斷擴(kuò)大。目前資訊類產(chǎn)品較多使用智能推薦算法排序，這就是信息的「同溫層效應(yīng)」，即心理學(xué)上說的，人們天然地就更喜歡接受與自己觀點(diǎn)一致的信息。

本次通過「易觀千帆」篩選「信息流資訊」，選出新聞?lì)惍a(chǎn)品Top4的Feed流樣式進(jìn)行對比統(tǒng)計(jì)。

今日頭條

今日頭條是一款綜合資訊App，通過用戶行為分析、推薦引擎技術(shù)實(shí)現(xiàn)更加個(gè)性化與精準(zhǔn)化的推送。

結(jié)構(gòu)清晰，功能劃分也較為明確。更多下發(fā)3圖大圖和視頻樣式。

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

騰訊新聞

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

整體結(jié)構(gòu)非常清晰，操作簡單，隱藏層次較少，易使用。

使用騰訊系藍(lán)色，沒有復(fù)雜的配色，界面簡潔明了，很干凈。

趣頭條

以娛樂和生活為主題內(nèi)容，為新興市場用戶提供精準(zhǔn)的內(nèi)容，主打讓閱讀更有價(jià)值。

結(jié)構(gòu)上更多使用上文下圖的格式，更多下發(fā)三圖與視頻樣式。

顏色上使用了安全穩(wěn)妥的綠色，這色系在新聞資訊產(chǎn)品中較為少見。

搜狐新聞

全媒體資訊平臺，開放的訂閱模式，海量的獨(dú)家內(nèi)容，主打準(zhǔn)確可靠。

與其他新聞?lì)悜?yīng)用不同的是搜狐新聞采用左圖右文的布局方式，瀏覽動(dòng)線稍顯復(fù)雜，更多下發(fā)小圖樣式，故而相比其他客戶端，搜狐新聞一個(gè)頁面呈現(xiàn)的新聞數(shù)目更多。

動(dòng)態(tài)字號的運(yùn)用

新聞資訊類產(chǎn)品大多有動(dòng)態(tài)字號的功能。一般情況下默認(rèn)顯示字號均為標(biāo)準(zhǔn)(中)字號，以今日頭條為例，我們能發(fā)現(xiàn)小字體、大字體基于標(biāo)準(zhǔn)字體以2為單位向上遞增或向下遞減。

在同一機(jī)型下進(jìn)行動(dòng)態(tài)字體調(diào)整，可以發(fā)現(xiàn)在Feed流中僅有標(biāo)題字號隨設(shè)置字體大小而調(diào)整，而在詳情頁中也僅有標(biāo)題和段落的字號隨設(shè)置字體而調(diào)整。輔助信息及配圖大小在任何情況下均不更改。部分插入模塊不隨設(shè)置字體大小而更改。

視覺層面解析

在視覺層面上對所選主流應(yīng)用Feed流中的標(biāo)題文字、輔助信息、對齊方式、分割線進(jìn)行拆解分析。文字（大小、顏色、字重）、顏色、標(biāo)簽、布局等等都可以作為分析的因素。

• 標(biāo)題文字：字號介于17至19之間，顏色僅在HSB模式中的B（亮度）存在區(qū)別，在字距與行高的選擇上無統(tǒng)一格式。

• 輔助信息：字號在11與12之間，顏色在HSB顏色模式下B>60，多個(gè)輔助文字信息以寬度間距分割。

• 對齊方式：小圖的圖文展示上超87%使用了左文右圖的結(jié)構(gòu)，文字信息均采用左對齊方式。

• 分割線：同一信息模塊分割更多采用兩邊留距的方式，插入不同信息模塊，上下以模塊間距分割。

小結(jié)：資訊流信息流產(chǎn)品，亦即頭條類產(chǎn)品，以內(nèi)容為主，注重信息提取效率，更強(qiáng)調(diào)用標(biāo)題文字信息吸引用戶瀏覽視線。合理的在更小空間內(nèi)展示更多內(nèi)容給用戶，在高效閱讀的同時(shí)提高用戶的視覺體驗(yàn)。

2. 社交互動(dòng)類

互聯(lián)網(wǎng)的本質(zhì)是連接，價(jià)值也在連接中產(chǎn)生。社交是用戶在網(wǎng)絡(luò)上的另一大重要需求，應(yīng)運(yùn)而生多種圈子產(chǎn)品。基于不同的圈子人群，創(chuàng)造社交環(huán)境。圈子能夠很好地平衡產(chǎn)品的內(nèi)容與社交屬性。

本次主要對宮格式布局產(chǎn)品進(jìn)行解析，如我們最熟悉的「微信」中的朋友圈便是經(jīng)典的宮格式布局.

新浪微博

新浪微博作為國內(nèi)領(lǐng)先的社區(qū)，F(xiàn)eed流是微博最重要的場景之一，首頁與發(fā)現(xiàn)中最常見的便是宮格布局。與新聞資訊類有所不同的是會在每個(gè)內(nèi)容上方增加發(fā)布者信息和關(guān)注按鈕。關(guān)注的目的不是社交，而是社交的前提。關(guān)注關(guān)系可以更快速的獲得內(nèi)容，是社交產(chǎn)生的前提語境。

豆瓣

豆瓣首頁主打發(fā)現(xiàn)和記錄感興趣的內(nèi)容，在首頁推薦頻道可以自由瀏覽個(gè)性化內(nèi)容，發(fā)現(xiàn)更多有趣的豆友并與之建立聯(lián)系。首頁推薦與動(dòng)態(tài)的主要目的在于社交互動(dòng)，其中占比最大的為2圖與3圖樣式。較微博有所不同的是發(fā)布者后面沒有關(guān)注按鈕，而是與資訊類中一樣的負(fù)反饋。

小結(jié)：泛社交應(yīng)用產(chǎn)品，社交關(guān)系主要建立在內(nèi)容上，注重內(nèi)容傳播的速度和內(nèi)容公開。Feed的呈現(xiàn)方式發(fā)布者與發(fā)布內(nèi)容不做明顯的設(shè)計(jì)區(qū)分。底部一般伴隨點(diǎn)贊、評論和分享等操作交互。以間距分割方式區(qū)分不同模塊。

可用性設(shè)計(jì)原理

設(shè)計(jì)不止是藝術(shù)行為，同時(shí)也是商業(yè)行為，越來越數(shù)據(jù)化的今天，光憑感性的判斷來定義設(shè)計(jì)的價(jià)值是不夠客觀的，設(shè)計(jì)師們應(yīng)該掌握更多的設(shè)計(jì)原理為設(shè)計(jì)賦能。

1. 信噪比

信噪比是指相關(guān)信息與不相關(guān)信息的比例。合理的信噪比可改善與用戶的交流。加大信號可以將有用的信息快速準(zhǔn)確的傳達(dá)給用戶，減少噪音并使信號脫穎而出，平衡好內(nèi)容的優(yōu)先級有助于用戶快速找到所需的信息。靈活運(yùn)用「信噪比」，通過設(shè)計(jì)減輕用戶負(fù)擔(dān)，提升效率。

2. 文字易讀性

文字的易讀性很大程度上決定了用戶是否能準(zhǔn)確高效的閱讀。在iOS和 Android的通用文字規(guī)范中，最小閱讀文字為12號字。

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

3. 圖版率

圖版率指頁面中圖片面積的占比。當(dāng)圖版率為0%時(shí)，版面顯得非?？菰铮x者會喪失閱讀的興趣。當(dāng)圖版率為40%時(shí)，版面充滿生氣，富有活力，讀者的閱讀興趣會隨之上升。當(dāng)圖版率為100%時(shí)，則會給讀者帶來強(qiáng)烈的視覺感受。

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

4. 格式塔原則-鄰近

物體之間的相對距離會影響我們感知它們的關(guān)系。距離較近的對象比距離較遠(yuǎn)的對象更相關(guān)。

當(dāng)不同的元素的物理距離靠近時(shí)，自熱而然被看作是一個(gè)組，而不是單個(gè)的元素。當(dāng)其中距離較遠(yuǎn)時(shí)則是不同的組。

設(shè)計(jì)方案

通過對基礎(chǔ)知識的了解和主流應(yīng)用Feed流對比，結(jié)合自身產(chǎn)品特色，以設(shè)計(jì)體驗(yàn)?zāi)繕?biāo)為導(dǎo)向，梳理現(xiàn)狀問題提出相應(yīng)的優(yōu)化目標(biāo)，進(jìn)而產(chǎn)出優(yōu)化方案。

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

• Feed流字號不統(tǒng)一；

• 配圖間距不統(tǒng)一，配圖圓角不統(tǒng)一；

• 標(biāo)簽位置無統(tǒng)一邏輯；

為解決現(xiàn)有問題，我們重新對Feed流的設(shè)計(jì)語言進(jìn)行優(yōu)化?；趯eed流的了解及主流產(chǎn)品分析，本次優(yōu)化將從有序統(tǒng)一、空間利用率、視覺體驗(yàn)三個(gè)要點(diǎn)展開。

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

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

為了更好的觀察Feed流中的不同文字字號的影響，我們可以從標(biāo)題字號、行高、字距等多個(gè)不同變量中組合多種方案進(jìn)行對比。

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

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

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

圖文樣式可作為基礎(chǔ)樣式，在確定圖文樣式后，梳理所有Feed流樣式進(jìn)行新設(shè)計(jì)方案的所有輸出。

總結(jié)：如今互聯(lián)網(wǎng)內(nèi)容時(shí)代，用戶對于快速獲取有效內(nèi)容的需求日漸強(qiáng)烈，如何高效、準(zhǔn)確獲取自己感興趣的內(nèi)容成為一個(gè)日益凸顯的需求。Feed流結(jié)構(gòu)簡潔，減輕用戶的認(rèn)知負(fù)擔(dān)，每個(gè)資訊社交相關(guān)的產(chǎn)品都勢必進(jìn)行科學(xué)有效的優(yōu)化迭代。

寫在最后

此次文章分享美柚Feed流redesign的全過程，優(yōu)化過程中我們也發(fā)現(xiàn)了很多自身的不足，還有很多內(nèi)容需要完善，我們也相信每一次改變都是前進(jìn)的腳步。

每一次的設(shè)計(jì)提案都應(yīng)該基于理論知識和對市場格局的了解，設(shè)計(jì)不是最終目的，提升用戶體驗(yàn)才是我們的追求。

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

作者微信公眾號：「美柚UED」