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

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

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

01?認(rèn)識feed流

1. feed流的定義

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

2. feed流的作用

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

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

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

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

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

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

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

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

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

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

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

1. 信噪比

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

2. 文字的易讀性

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

3. 臨近原則

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

03?設(shè)計方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

04?最后

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

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

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

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

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