新手科普！4個方面幫你快速熟悉UI組件中的瀑布流

編者按：本文從組件介紹、使用場景、設計要點、樣式拓展4個方面，幫你快速熟悉UI組件中的瀑布流設計。

往期組件科普：

一、組件介紹

瀑布流 (Waterfall Layout)，又稱瀑布流式布局，是信息流網格布局的一種視覺形式。顧名思義，這種布局形式既像瀑布一樣無限向下傾瀉，內容又如水一樣沒有固定樣式。

所以我們可以總結出瀑布流的兩個最核心的時間特征：

1. 無限加載
2. 內容等寬不等高

二、使用場景

瀑布流因其視覺特征，多用在以多種比例圖片/視頻為主體的內容流中，最典型的例子莫過于花瓣、Pinterest，這類圖片采集網站使用瀑布流可以更有效地利用頁面空間并充分展示圖片內容而不裁切，同時讓用戶的瀏覽體驗更加沉浸，錯落的圖片也相對更容易形成有效的視覺引導，引導用戶不斷向下瀏覽。

以及另外一類以小紅書、淘寶為代表的強內容展示 APP，在布局內容時不約而同地使用瀑布流，其核心原因即在于其強視覺引導的特性。

三、設計要點

1. 列寬的制定邏輯

對于等寬的網格列表來說，我們只需要去關注它們之間的間距是多少，這樣更方便不同寬度設備的適配，網格會自動扣除間距并適配網格寬度，而不必設計師一一去定義。

例如，我們只需定義兩列網格的左右邊距均為 20pt，間距 12pt。

那么不管是在 12/13/14 的 390 寬度中，還是在 ProMax 的 428 寬度中，布局都會固定住這三個數值，并自動適配列寬，列寬的數值具體是多少，并不需要我們關注。

這也正是兩列網格通用的適配邏輯。

2. 內容的布局

瀑布流有三種內容布局形式。

① 圖片等高

在圖片等高的情況下，能造成網格高度錯落的原因只有文案。文案的長短不一、是否有標簽等因素，會造成每個網格中的文案部分出現高度差異，從而形成網格錯落。但因為文案通常不會超過兩行，這種高度的差值往往是固定且非常有限的，也就是說更容易在下方某些地方回歸對齊。

所以這種布局更容易把控視覺秩序，但會因為強制圖片等比例導致內容的不完整，除非限制用戶上傳圖片的比例。

② 根據圖片比例自由變化

這是一種完全不限制圖片比例的形式，網格的高度不僅由圖片影響，也由文案影響。幾乎不可能做到在下方某處重新對齊，所以視覺上往往更加混亂，偶爾會出現極長或極短的網格，導致視覺權重出現非意圖的傾向。

③ 根據有限圖片比例變化

這種形式的意思是說，在用戶上傳圖片時就限制圖片在有限的幾種比例之內，所以盡管網格高度同樣由圖片和文案共同影響，但卻將高度差值限制在了相對有限的范圍內。現在大多數電商 APP 采用的便是這種布局形式。

3. 內容的類型

瀑布流發展至今，對于內容類型也有許多 App 根據實際項目需求做出了自己的探索。相較于單一的內容類型，因為內容構成更復雜、需求更多元，更多大型 App 會偏向選用多類型內容混合的形式摻進瀑布流里，在達到功能需求的同時，減輕單一性內容對用戶瀏覽時的信息疲勞。

具體來說，內容類型分成兩個大類，主內容和運營內容。

主內容

主內容根據 App 類型的不同，包括但不限于圖片、視頻、動態、商品，主內容依然是瀑布流中占比最多的內容類型。在一個頁面內可以使用一種主內容，也可以多種混合。

在多種主內容混合時，設計形式上通常并不會有太大的區別，只會在同一設計框架下，增改該內容類型特有的信息。

運營內容

針對 App 不斷擴大的運營需要，更多 App 會在瀑布流中插入運營內容。

例如，淘寶會在瀑布流最開始的左上角放置一個小型的輪播組件，左上角則是主推的與拼多多抗衡的百億補貼功能入口。

以及馬蜂窩，在頂部放置一個兩列寬的輪播推薦位。

這些都是很不錯的根據自身需要改造瀑布流的實踐。

三、樣式拓展

1. 站酷

站酷的瀑布流會在中途插入一組視覺上差異較大、與主內容類型相干性也較低的推薦設計師用戶，因為站酷瀑布流內容類型較為單一，這么做可以用來調節單一內容類型對瀏覽造成的視覺壓力。

2. 馬蜂窩

馬蜂窩的瀑布流樣式差異化做得相當大，不管是縱向對比(與同頁面其他卡片)還是橫向對比(與其他 App 瀑布流)，設計都顯得非常大膽前衛，所以馬蜂窩的卡片樣式有比較好的參考性。

3. 其他瀑布流樣式

結尾

瀑布流的組件就介紹到這，后續所有有關組件的介紹都會同步更新。

歡迎關注作者的微信公眾號：「超人的電話亭」