Feed 流,簡單來說,就是將用戶感興趣的內容以信息流的形式呈現出來。我們可以把 “Feed” 理解為 “按需供給”,即產品通過數據算法為不同用戶推薦他們感興趣的內容,吸引用戶不斷下拉瀏覽;而 “流” 則指信息有規律排版的呈現形式。
Feed 流主要有三種常見形式,分別是文字流、圖片流和視頻流,每種形式都有其獨特的特點和適用場景。

文字性 Feed 流主要由標題文字和輔助圖片組成。它的優點很明顯,在一屏之內能夠展現的信息數量較多,用戶的信息獲取率高,通過對標題信息的提煉,能快速告訴用戶當前模塊的核心內容。不過,它也存在一些缺點,視覺沖擊力較弱,僅靠標題信息,內容展示不夠全面。
常見的布局方式有左右布局和上下布局,多用于新聞資訊類產品中。比如駕考寶典的資訊頁面,采用上下布局,每條資訊以標題為主,搭配輔助圖片,讓用戶能快速了解內容概要;騰訊視頻的資訊板塊則運用左右布局,左側是標題和簡要內容,右側是相關圖片,便于用戶快速篩選感興趣的信息。

圖片性 Feed 流由圖片和輔助文字構成。其最大的優點是視覺沖擊力強,更容易吸引用戶注意力,圖片比文字具有更強的感染力,能在短時間內引發用戶的情感共鳴,而且相對文字來說,圖片的瀏覽速度更快,給人的印象也更深刻。但它也有不足,圖片占用空間大,導致展示的內容較少,同時信息傳達不如文字明確,對圖片質量的要求也比較高。
常見的布局方式有大圖布局、宮格布局、拼圖布局和瀑布流布局。

大圖布局指的是無論用戶上傳幾張圖片,Feed 流中始終以一張大圖的形式展現。其適配方式一般有兩種:
- 展示圖片尺寸固定:不管用戶上傳的是橫圖還是豎圖,展示圖片的比例始終固定,常用的比例有 1:1、3:2、4:3、16:9 等。這種適配方式圖片占用空間小,可提高用戶的閱讀效率,適合想要提高用戶閱讀效率的產品,如站酷的部分頁面,采用固定比例展示圖片,讓用戶能在有限空間內瀏覽更多內容。
- 隨圖片而變化:當用戶上傳不同比例的圖片時,圖片展示寬度為屏幕寬度,展示高度根據確定的寬度等比例縮放。這種適配方式能將圖片信息表達完善,但圖片占用空間大,適合圖片質量高、用戶以瀏覽圖片為主的產品,如圖蟲。不過需要注意的是,采用該方式需要設置最大最小閾值,當圖片的高度超過一定數值,高度就不再增加,當圖片的高度小于一定數值,高度不再減小。

宮格式布局是指用戶上傳的圖片會適配到一個個的方格中,常見的排版有 3 宮格、6 宮格、9 宮格。它多應用在社交類的 APP 中或者電商 APP 的內容社區,如微博、微信、QQ 空間等社交 APP,以及淘寶等電商應用的內容社區。
不同平臺的宮格布局適配方式有所不同:
- 微博九宮格布局:當圖片為一張,且 0.5 ≤ 寬 / 高 ≤ 2 時,寬度占兩個格子加間距,高度根據比例縮放;當圖片為一張,寬 / 高 <0.5 時,寬度占兩個格子加間距,寬:高 = 4:5 顯示;當圖片為一張,寬 / 高> 2 時,寬度占兩個格子加間距,寬:高 = 4:3 顯示;當圖片多于一張時,直接將圖片適配到格子里。
- 微信九宮格布局:當圖片為一張,且 0.5 ≤ 寬 / 高 ≤ 2 時,高度 360px,寬度根據比例縮放;當圖片為一張,寬 / 高 <0.5 時,高度 360px,寬:高 = 1:3 顯示;當圖片為一張,寬 / 高> 2 時,高度 360px,圖片占橫向 3 格;當圖片多于一張時,直接將圖片適配到格子里。

這種布局方式是將幾張圖片拼成一個矩形,樣式新穎類似雜志的排版,對圖片質量要求較高,多應用在圖片社交中,如 in。通過獨特的拼圖方式,能讓圖片展示更具創意和吸引力,增強用戶的視覺體驗。

瀑布流式布局的視覺表現為參差不齊的多欄布局,用戶的視線軌跡以 Z 型為主,這種軌跡易于閱讀。但由于用戶采用 “就近原則” 閱讀信息,容易產生漏讀現象。它適用于社區類瀏覽型頁面,這類頁面往往信息量大,采用瀑布流式布局能讓瀏覽體驗更為流暢,如花瓣、小紅書等平臺,用戶可以不斷下拉獲取更多內容,沉浸在瀏覽過程中。

視頻性 Feed 流以短視頻為主(長視頻占用用戶時間長,容易導致用戶缺乏耐心),搭配輔助文字。它的優點是能滿足用戶在視覺和聽覺上的感受,沉浸式體驗好,更加容易吸引用戶的注意力,一般情況下會主動且循環播放,畫面占滿全屏,如快手、抖音、微視等。不過,它也存在缺點,占用空間大,展示內容少,而且需要緩存,對網絡質量要求高。
Feed 流主要有文字流、圖片流和視頻流三種常見形式。其中圖片流的布局方式最為豐富,主要有大圖布局(適配方式包括圖片固定比例、尺寸隨圖片而變化)、宮格布局(三宮格、六宮格、九宮格)、拼圖布局和瀑布流式布局。在設計 Feed 流時,需要根據產品的定位和用戶需求,選擇合適的樣式和布局方式,以提升用戶體驗和信息傳達效率。