設計沉思錄|58部落是如何做feed流設計的?

2021-01-18 騰訊網

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

58部落是58同城旗下的內容社區 ,基於58同城和58同鎮用戶基礎的建立的「58部落」。

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

01 認識feed流

1. feed流的定義

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

2. feed流的作用

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

3. feed流的表現的形式

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

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

優點:信息明確,提煉內容傳達給用戶,信息獲取的效率高學習成本低。

缺點:視覺衝擊力弱,內容不全面需要點擊至詳情頁閱讀詳情。

常見布局:左文右圖、上文下圖。

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

優點:視覺的衝擊力強,視覺層次豐富。優質的圖片能有提升整體產品的品質感

缺點:佔用的空間大,展示的內容少。信息傳遞的內容少。圖片質量不高時影響整體產品的品質感

常見布局:大圖、宮格圖、瀑布流

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

優點:視覺衝擊力強,能滿足用戶視覺和聽覺的享受。沉浸式的體驗好

缺點:對設備網絡的質量要求高,對視頻內容本身的要求高。文字內容展示少

常見布局:全屏布局

02 可用性的設計原則

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

1. 信噪比

信噪比是指相關主要信息與次要信息的比例。合理的信噪比能夠改善用戶的溝通,通過減少不必要的信息平衡好信息傳遞的優先級。快速的將準確的信息傳遞給用戶。從而提升設計瀏覽效率。

2. 文字的易讀性

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

3. 臨近原則

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

03 設計方案

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

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

字號、圖片圓角、間距等展示不統一

內容屏佔比高,單屏展示的內容少 用戶瀏覽的效率低

視頻/直播內容展示形式傳統,無體驗更優的展示方式並且缺少沉浸式體驗。

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

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

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

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

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

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

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

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

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

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

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

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

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

04 最後

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

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

作者:榮濤,視覺設計師

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

題圖來自pexels,基於CC0協議

相關焦點

  • 設計沉思錄|3個步驟,完成資訊內容產品設計
    58同城作為綜合信息類生活服務平臺,一方面為更多場景觸達用戶,搭建信息紐帶,助力生活服務;另一方面為促進用戶留存、互動乃至平臺用戶價值的提升,2019年以來一直在重點運營58部落社區,而這裡要講的便是部落的資訊內容產品模塊——58熱議。
  • 設計沉思錄|如何通過視覺表現提升廣告點擊率?
    編輯導讀:本文主要介紹,針對大眾心理對廣告素材頁有排斥的情況下,如何通過創意視覺設計助力提升廣告點擊率。作者針對核心問題,展開了深入的分析拆解,並對重要步驟展開了說明,與大家分享。01 前言移動網際網路時代,信息流廣告已成為商業化變現和用戶增長的重要方式之一,素材頁面的設計同樣也是以「用戶體驗」為中心。在大眾心理對廣告素材頁有排斥情況下,從用戶的特殊需求和精準度出發設計,視覺元素也得遵循去繁從簡的流程。信息流作為用戶拉新的引導,我們進行討論如何通過視覺表現提升點擊率。
  • 設計沉思錄|消息中心設計
    本文作者消息中心的概念出發,結合58同城的案例,分析總結了APP消息中心的設計思路,與大家分享。 本篇文章,從消息中心的定義、發展、組成、以及各行業間的異同等方面做了詳細介紹,讓我們對消息中心有一個整體了解,便於找到設計切入點,或幫助我們評估自身產品的消息中心。從一致性和服務號兩個方面,闡述了如何將消息中心的優化收益最大。 01 消息中心的概念 1.
  • 設計沉思錄|B端企業認證的分析與設計
    本文作者從具體案例出發,就如何用服務思維推動企業配合完成實名認證進行了分析說明,與大家分享。01 前言每個產品,都有自己的生命周期,不同時期的產品特性決定著不同的平臺策略。我們以58招聘B端產品的企業認證模塊為例,通過KANO模型得知,認證模塊屬於產品的反向屬性,會隨著平臺的門檻加強而讓用戶的滿意度降低,但是從發展角度看,企業認證是攔截黑產的有效途徑、所以為了淨化平臺環境,提高認證率是成熟期產品必須要做的一件事,來看一下怎麼應用服務思維來實現產品的目標。
  • 設計沉思錄|如何做下沉市場交友直播產品的品牌運營?
    編輯導讀:本文作者以58本地交友項目為例,從品牌定位和業務價值兩個方面出發,對如何做好下沉市場交友直播產品的品牌運營展開了分析探討,供大家一同參考學習。本地交友項目在20年年初,上線於58本地版APP的交友模塊中,最初剛上線的幾個月在湖南地區做灰度測試。
  • 四種方式的feed流廣告,讓你的讀者從「被強姦」變為「享受」
    目前國內大多數的feed流文案還處於起步階段,簡單除暴地將其他媒體的文案粘貼在朋友圈或者其他的APP中,這確實是對讀者的一種精神「強姦」。如何改變呢?本文作者總結了四種方法,幫你在朋友圈的廣告從「強姦」變為「享受」。移動網際網路時代的趨勢已經不可逆轉,廣告行業也漸漸呈現出從原先的大媒體時代向移動網際網路靠攏的趨勢,feed信息流廣告就是這一趨勢的產物。
  • 設計沉思錄 | 助力業務之PC端微聊改版總結
    編輯導讀:在產品的迭代升級過程中,改版設計是常常會遇到的問題。文章對58集團內部即時通訊工作——微聊的升級改版進行了詳細的梳理,對遇到的一些問題進行了分析總結,供大家參考學習。
  • 部落直播項目總結
    部落也做直播了!沒錯,在當今直播的熱潮下,國內外的直播產品大都是基於陌生人的關係鏈,且內容結構與視覺效果同質化嚴重。如何讓用戶在部落平臺體驗直播?如何為用戶提供差異化的內容消費?如何給用戶更多新鮮趣味的互動玩法?這是我們做直播希望解決的問題。部落依託自身優勢,另闢蹊徑地發掘基於58業務關係鏈的直播場景。
  • 《沉思錄》:看古羅馬「斜槓青年」,如何將哲學作為一種生活方式
    《沉思錄》作者:馬可·奧勒留 作為一個皇帝,思考人生顯然不是他的主要任務,但對於有使命的人來說,鞍馬勞頓之間堅持與自我對話並記錄好像是一件更有意義的事
  • 幾種常見的Web端Feed設計模式 - 人人都是產品經理
    本文總結了常見Web端Feed的設計模式,以及對此的一些思考。Feed流:Feed,投喂,指向用戶提供內容以供消費;流,持續,指這種內容的提供是持續的,源源不斷的。Feed多用於內容型產品中。廣義上的內容型產品,可以粗略分為:圖文流、視頻流、電商流。
  • 信仰沉思錄:求神的國和祂的義
    信仰沉思錄:求神的國和祂的義
  • 7-8本部落戰龍流攻略及心得 部落戰新手教程
    作者:白夜騎士部落本人渣9,純龍流順利畢業,以後研究方向轉為地面流。
  • 部落衝突四格陣狗球流怎麼用 11本部落四格陣型三星詳解
    部落衝突四格陣狗球流怎麼用?下面就分享11本部落四格陣型三星詳解給大家,希望這篇攻略對小夥伴們有幫助。 在11本部落戰中,四格陣型算是出現較多的陣型了,之前有一期講解過使用電龍的打法。那麼如果使用狗球流,又該如何操作才能獲取三星呢?今天就為各位首領們講解一下使用熱門的「狗球流」來拿11本部落戰四格陣型的三星。
  • 奧斯卡最佳服裝《黑豹》:非洲部落設計與瓦坎達時尚
    如何打造一個真正的非洲女王?
  • 繼純銀視奸渣浪之後,我們來詳聊微博feed流算法問題
    視奸渣浪的feed流算法 如此敬業,對於「網際網路欠他一個成功」的說法我至此深信不疑。好了,話不多說,既然話題拋出來了,作為從業者+PM,也談一些自己的看法。其實,純銀談論的核心內容很簡單,採用大白話式的普及貼,相對於不那麼晦澀,也有利於各年齡段的用戶理解,但確實有點淺嘗輒止。
  • 中華盾艦沉思錄(二)
    就紙面性能而言,"提豐"系統堪稱理想,只可惜過於雄心勃勃的設計理念超前於那個年代甚多,一旦進入工程實踐階段,成堆的技術問題便撲面來。這其中,最主要的問題出在SPG-59多功能電掃艦載雷達上。而且整個架構上是從導航、情報、探測,到決策、火控、武器、反制的一體化系統,甚至包括故障自檢和系統重組、仿真訓練功能,而不是分別設計然後組合。整個思維是自頂而下的。
  • 企業如何做品牌logo設計?logo設計公司為你解答
    企業品牌logo設計如何做?logo設計公司為你解答。一個好的品牌logo設計,不僅可以很好地推廣自己的產品,使企業在很大程度上獲得意想不到的經濟效益,同時還可以讓消費者更好地記住產品,從而推廣自己的品牌,所以企業的品牌logo設計很重要。
  • 產品經理如何做設計決策?
    設計決策在產品工作中是非常重要的一部分,做好了決策才能保證產品經理在正確方向上做事。那我們要如何確保設計決策是準確無誤的呢?本文將揭曉答案。如果問我產品經理職業生涯中最難做的工作內容是什麼,毫無疑問我會說是設計決策。工作中無法對產品做出準確設計決策的產品經理註定會迷失在產品設計開發的細節之中,難以取捨。更不要妄談平衡市場需求與資源之間的關係。
  • 磨礪心靈的正能量句子《沉思錄》:傾聽來自心靈的聲音和力量
    《沉思錄》,是古羅馬唯一一位哲學家皇帝馬可·奧勒留·安東尼所著。對此書,費迪曼曾這樣評價:「《沉思錄》有一種不可思議的魅力,它甜美、憂鬱和高貴。這部黃金之書以莊嚴不屈的精神負起做人的重荷,直接幫助人們去過更加美好的生活。」
  • 自己如何室內裝修設計?如何學習室內裝修設計?
    現在買房已經成為全民話題,甚至許多的丈母娘選擇女婿的時候都要看有沒有房,有了房,就需要裝修,那怎樣去裝修呢,自己如何室內裝修設計,這個問題值得所有人去思考,尤其是對想要自己設計裝修自己的房子的。那如何學習室內裝修設計?有許多的途徑,小編也為大家總結了一些,希望能有所幫助。