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

58部落是58同城旗下的內容社區 ，基于58同城和58同鎮用戶基礎的建立的“58部落”。

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

01?認識feed流

1. feed流的定義

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

2. feed流的作用

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

3. feed流的表現的形式

feed流的核心是基于內容。同時也會產生內容的時間 地點 發布信息等等，可能還有點贊、轉發、評論等相關的互動信息。在移動互聯網常見的形式有三種 文字、圖片流、視頻直播流。

文字feed流：主要以標題文字+圖片組成 常出現在在資訊新聞類的應用中。

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

圖片feed流：以圖片為主，文字信息只作為輔助展示。通過優質吸引用戶的圖片展示相關內容。

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

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

• 優點：視覺沖擊力強，能滿足用戶視覺和聽覺的享受。沉浸式的體驗好
• 缺點：對設備網絡的質量要求高，對視頻內容本身的要求高。文字內容展示少
• 常見布局:全屏布局

02?可用性的設計原則

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

1. 信噪比

信噪比是指相關主要信息與次要信息的比例。合理的信噪比能夠改善用戶的溝通，通過減少不必要的信息平衡好信息傳遞的優先級?？焖俚膶蚀_的信息傳遞給用戶。從而提升設計瀏覽效率。

2. 文字的易讀性

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

3. 臨近原則

物體之間的相對距離會影響我們感知他們的關系。距離較近的對象比距離較遠的對象更相關，當內容靠近時自然而然形成同一組的感受。

03?設計方案

通過對基礎的知識了解和主流的Feed流設計分析。結合一定的設計原則和產品特點。梳理現狀問題提出相對應的設計方案。從而產出針對性的設計方案。

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

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

為了解決現有的問題。我們重新對部落內容的feed流進行了統一的視覺語言的優化?；趯Σ柯銯eed流的分析。本次將從內容展示布局、空間的利用率、和豐富體驗進行展開說明。

1. 整合：在內容展示的布局上做差異化

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

采用符合相對應內容的Feed流布局。部落一級頁多為用戶發帖，露出頭像和用戶信息體現社交屬性采用上文下圖文字流布局展示。

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

2. 提效：在內容空間利用率上做減法

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

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

3. 豐富：在產品體驗上做加法

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

為了提升內容轉化的效率。我們優化了圖片展示規則。采用宮格布局讓用戶聚焦部落的內容本身。

在用戶等級的標簽上增加設計的精致度，原有的標簽體系復雜，為了讓標簽體系更具有識別性。我們對標簽進行了等級更為直接的設計。通過數字、顏色、質感體現更具有精致度的等級標簽。

在確立好所有圖文樣式和元素后，通過臨近原則控制不同元素入口的間距更好的把握好親疏關系。以下是對feed流中所有的結構樣式進行的設計輸出。

04?最后

如今移動互聯網時代，用戶對于內容的獲取更加強烈。高效準確的幫助用戶獲取感興趣的內容是feed設計目的的關鍵，通過極致的用戶體驗、豐富真實的社區內容，以及可用性的設計原則，都可以幫助進行科學有效的優化迭代。

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

作者：榮濤，視覺設計師

本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@榮濤

題圖來自pexels，基于CC0協議