編輯導(dǎo)讀：feed是將用戶主動(dòng)訂閱的若干消息源組合在一起形成內(nèi)容聚合器，幫助用戶持續(xù)地獲取最新的訂閱源內(nèi)容，feed流即持續(xù)更新并呈現(xiàn)給用戶內(nèi)容的信息流。本篇文章以58部落為例，對(duì)如何設(shè)計(jì)Feed流以及Feed流背后的設(shè)計(jì)邏輯進(jìn)行了討論，與大家分享。

58部落是58同城旗下的內(nèi)容社區(qū) ，基于58同城和58同鎮(zhèn)用戶基礎(chǔ)的建立的“58部落”。

通過職場(chǎng)經(jīng)驗(yàn)、生活竅門、情感互助等“內(nèi)容+社交”的產(chǎn)品，用戶可獲得多元化的部落體驗(yàn)，而作為針對(duì)58用戶交流的內(nèi)容社區(qū)，feed流是58部落社區(qū)核心消費(fèi)載體之一，針對(duì)于feed流的設(shè)計(jì)也在不斷的優(yōu)化和研究中，本文將從認(rèn)識(shí)feed流，feed流的設(shè)計(jì)市場(chǎng)格局、可用性的設(shè)計(jì)原則、和部落feed流的設(shè)計(jì)方案，全方位的探討如何將分析運(yùn)用到實(shí)際項(xiàng)目中。

01?認(rèn)識(shí)feed流

1. feed流的定義

伴隨著內(nèi)容的爆發(fā)和用戶時(shí)間的擠壓，傳統(tǒng)的信息流呈現(xiàn)一定的弊端，無法滿足用戶了解特定內(nèi)容的需求，這個(gè)時(shí)候feed就應(yīng)運(yùn)而生。feed顧名思義就是投喂的意思，用戶需要什么樣的內(nèi)容，就喂給用戶什么樣的內(nèi)容?！傲鳌眲t是內(nèi)容的呈現(xiàn)形式，即信息是如何呈現(xiàn)的。大多數(shù)也是按照 時(shí)間、熱度等排序去展示。feed流是信息內(nèi)容的出口，從而建立人與內(nèi)容的連接。

2. feed流的作用

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

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

feed流的核心是基于內(nèi)容。同時(shí)也會(huì)產(chǎn)生內(nèi)容的時(shí)間 地點(diǎn) 發(fā)布信息等等，可能還有點(diǎn)贊、轉(zhuǎn)發(fā)、評(píng)論等相關(guān)的互動(dòng)信息。在移動(dòng)互聯(lián)網(wǎng)常見的形式有三種 文字、圖片流、視頻直播流。

文字feed流：主要以標(biāo)題文字+圖片組成 常出現(xiàn)在在資訊新聞?lì)惖膽?yīng)用中。

1. 優(yōu)點(diǎn)：信息明確，提煉內(nèi)容傳達(dá)給用戶，信息獲取的效率高學(xué)習(xí)成本低。
2. 缺點(diǎn)：視覺沖擊力弱，內(nèi)容不全面需要點(diǎn)擊至詳情頁閱讀詳情。
3. 常見布局：左文右圖、上文下圖。

圖片feed流：以圖片為主，文字信息只作為輔助展示。通過優(yōu)質(zhì)吸引用戶的圖片展示相關(guān)內(nèi)容。

• 優(yōu)點(diǎn)：視覺的沖擊力強(qiáng)，視覺層次豐富。優(yōu)質(zhì)的圖片能有提升整體產(chǎn)品的品質(zhì)感
• 缺點(diǎn)：占用的空間大，展示的內(nèi)容少。信息傳遞的內(nèi)容少。圖片質(zhì)量不高時(shí)影響整體產(chǎn)品的品質(zhì)感
• 常見布局：大圖、宮格圖、瀑布流

視頻直播feed流：以短視頻直播內(nèi)容為主，文字信息弱化

• 優(yōu)點(diǎn)：視覺沖擊力強(qiáng)，能滿足用戶視覺和聽覺的享受。沉浸式的體驗(yàn)好
• 缺點(diǎn)：對(duì)設(shè)備網(wǎng)絡(luò)的質(zhì)量要求高，對(duì)視頻內(nèi)容本身的要求高。文字內(nèi)容展示少
• 常見布局:全屏布局

02?可用性的設(shè)計(jì)原則

設(shè)計(jì)師通過設(shè)計(jì)的感覺做設(shè)計(jì)輸出是往往不夠的，應(yīng)該通過更多的設(shè)計(jì)原理來為產(chǎn)品賦能。以下介紹三種設(shè)計(jì)原則來提升信息設(shè)計(jì)效率。

1. 信噪比

信噪比是指相關(guān)主要信息與次要信息的比例。合理的信噪比能夠改善用戶的溝通，通過減少不必要的信息平衡好信息傳遞的優(yōu)先級(jí)?？焖俚膶?zhǔn)確的信息傳遞給用戶。從而提升設(shè)計(jì)瀏覽效率。

2. 文字的易讀性

文字的易讀性很大程度解決了用戶能否準(zhǔn)確的閱讀信息。在移動(dòng)端的規(guī)范中最小的閱讀文字不能小于12 。行間距也是影響文字閱讀的重要因素，行間距過大或者過小都會(huì)增加用戶閱讀的負(fù)擔(dān)。一般1.2-2倍的行間距更適合用戶閱讀。

3. 臨近原則

物體之間的相對(duì)距離會(huì)影響我們感知他們的關(guān)系。距離較近的對(duì)象比距離較遠(yuǎn)的對(duì)象更相關(guān)，當(dāng)內(nèi)容靠近時(shí)自然而然形成同一組的感受。

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

通過對(duì)基礎(chǔ)的知識(shí)了解和主流的Feed流設(shè)計(jì)分析。結(jié)合一定的設(shè)計(jì)原則和產(chǎn)品特點(diǎn)。梳理現(xiàn)狀問題提出相對(duì)應(yīng)的設(shè)計(jì)方案。從而產(chǎn)出針對(duì)性的設(shè)計(jì)方案。

目前部落熱議線上存在以下的問題：

1. 字號(hào)、圖片圓角、間距等展示不統(tǒng)一
2. 內(nèi)容屏占比高，單屏展示的內(nèi)容少 用戶瀏覽的效率低
3. 視頻/直播內(nèi)容展示形式傳統(tǒng)，無體驗(yàn)更優(yōu)的展示方式并且缺少沉浸式體驗(yàn)。

為了解決現(xiàn)有的問題。我們重新對(duì)部落內(nèi)容的feed流進(jìn)行了統(tǒng)一的視覺語言的優(yōu)化?；趯?duì)部落Feed流的分析。本次將從內(nèi)容展示布局、空間的利用率、和豐富體驗(yàn)進(jìn)行展開說明。

1. 整合：在內(nèi)容展示的布局上做差異化

在部落內(nèi)容的展示上把社區(qū)類、資訊類、視頻類、直播類進(jìn)行梳理整合，通過內(nèi)容特征對(duì)社區(qū)類、資訊類、視頻直播類的頁面作區(qū)分。

采用符合相對(duì)應(yīng)內(nèi)容的Feed流布局。部落一級(jí)頁多為用戶發(fā)帖，露出頭像和用戶信息體現(xiàn)社交屬性采用上文下圖文字流布局展示。

視頻/圖片類通過圖片和視頻帶來視覺沖擊力吸引用戶點(diǎn)擊，在布局和展示上采用瀑布流展示。直播視頻類更要求滿足對(duì)用戶聽覺和視覺的感受因此采用全屏的布局。

2. 提效：在內(nèi)容空間利用率上做減法

通過降噪比原則我們調(diào)整了文字信息和內(nèi)容的比例，有效的保證信息的清晰度，通過前期的數(shù)據(jù)調(diào)研已知部落和話題的展示入口的點(diǎn)擊不足0.07%。

所以話題和部落入口只是輔助用戶決策。最重要的還是讓用戶聚焦內(nèi)容的本身。通過推薦標(biāo)準(zhǔn)展示部落和話題入口。在一級(jí)頁Feed中做減法。充分的提升頁面展示效率。

3. 豐富：在產(chǎn)品體驗(yàn)上做加法

在圖片的展示規(guī)則上增加取圖策略。圖片的的比例盡量的使用 4:3、16:9、 1:1設(shè)備比例做展示。由于部落用戶的圖片質(zhì)量相對(duì)較低原本較大空間的展示反而不利于內(nèi)容的轉(zhuǎn)化。

為了提升內(nèi)容轉(zhuǎn)化的效率。我們優(yōu)化了圖片展示規(guī)則。采用宮格布局讓用戶聚焦部落的內(nèi)容本身。

在用戶等級(jí)的標(biāo)簽上增加設(shè)計(jì)的精致度，原有的標(biāo)簽體系復(fù)雜，為了讓標(biāo)簽體系更具有識(shí)別性。我們對(duì)標(biāo)簽進(jìn)行了等級(jí)更為直接的設(shè)計(jì)。通過數(shù)字、顏色、質(zhì)感體現(xiàn)更具有精致度的等級(jí)標(biāo)簽。

在確立好所有圖文樣式和元素后，通過臨近原則控制不同元素入口的間距更好的把握好親疏關(guān)系。以下是對(duì)feed流中所有的結(jié)構(gòu)樣式進(jìn)行的設(shè)計(jì)輸出。

04?最后

如今移動(dòng)互聯(lián)網(wǎng)時(shí)代，用戶對(duì)于內(nèi)容的獲取更加強(qiáng)烈。高效準(zhǔn)確的幫助用戶獲取感興趣的內(nèi)容是feed設(shè)計(jì)目的的關(guān)鍵，通過極致的用戶體驗(yàn)、豐富真實(shí)的社區(qū)內(nèi)容，以及可用性的設(shè)計(jì)原則，都可以幫助進(jìn)行科學(xué)有效的優(yōu)化迭代。

每一次的設(shè)計(jì)都是基于設(shè)計(jì)原則和市場(chǎng)格局的了解。設(shè)計(jì)不是最終目的，提升體驗(yàn)才是我們的關(guān)鍵。

作者：榮濤，視覺設(shè)計(jì)師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@榮濤

題圖來自pexels，基于CC0協(xié)議