本文從組件介紹、使用場(chǎng)景、設(shè)計(jì)要點(diǎn)、樣式拓展4個(gè)方面，幫你快速熟悉UI組件中的瀑布流設(shè)計(jì)。

一、組件介紹

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

所以我們可以總結(jié)出瀑布流的兩個(gè)最核心的時(shí)間特征：

1. 無(wú)限加載
2. 內(nèi)容等寬不等高

二、使用場(chǎng)景

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

以及另外一類以小紅書、淘寶為代表的強(qiáng)內(nèi)容展示 APP，在布局內(nèi)容時(shí)不約而同地使用瀑布流，其核心原因即在于其強(qiáng)視覺引導(dǎo)的特性。

三、設(shè)計(jì)要點(diǎn)

1. 列寬的制定邏輯

對(duì)于等寬的網(wǎng)格列表來(lái)說(shuō)，我們只需要去關(guān)注它們之間的間距是多少，這樣更方便不同寬度設(shè)備的適配，網(wǎng)格會(huì)自動(dòng)扣除間距并適配網(wǎng)格寬度，而不必設(shè)計(jì)師一一去定義。

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

那么不管是在 12/13/14 的 390 寬度中，還是在 ProMax 的 428 寬度中，布局都會(huì)固定住這三個(gè)數(shù)值，并自動(dòng)適配列寬，列寬的數(shù)值具體是多少，并不需要我們關(guān)注。

這也正是兩列網(wǎng)格通用的適配邏輯。

2. 內(nèi)容的布局

瀑布流有三種內(nèi)容布局形式。

① 圖片等高

在圖片等高的情況下，能造成網(wǎng)格高度錯(cuò)落的原因只有文案。文案的長(zhǎng)短不一、是否有標(biāo)簽等因素，會(huì)造成每個(gè)網(wǎng)格中的文案部分出現(xiàn)高度差異，從而形成網(wǎng)格錯(cuò)落。但因?yàn)槲陌竿ǔ２粫?huì)超過(guò)兩行，這種高度的差值往往是固定且非常有限的，也就是說(shuō)更容易在下方某些地方回歸對(duì)齊。

所以這種布局更容易把控視覺秩序，但會(huì)因?yàn)閺?qiáng)制圖片等比例導(dǎo)致內(nèi)容的不完整，除非限制用戶上傳圖片的比例。

② 根據(jù)圖片比例自由變化

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

③ 根據(jù)有限圖片比例變化

這種形式的意思是說(shuō)，在用戶上傳圖片時(shí)就限制圖片在有限的幾種比例之內(nèi)，所以盡管網(wǎng)格高度同樣由圖片和文案共同影響，但卻將高度差值限制在了相對(duì)有限的范圍內(nèi)?，F(xiàn)在大多數(shù)電商 APP 采用的便是這種布局形式。

3. 內(nèi)容的類型

瀑布流發(fā)展至今，對(duì)于內(nèi)容類型也有許多 App 根據(jù)實(shí)際項(xiàng)目需求做出了自己的探索。相較于單一的內(nèi)容類型，因?yàn)閮?nèi)容構(gòu)成更復(fù)雜、需求更多元，更多大型 App 會(huì)偏向選用多類型內(nèi)容混合的形式摻進(jìn)瀑布流里，在達(dá)到功能需求的同時(shí)，減輕單一性內(nèi)容對(duì)用戶瀏覽時(shí)的信息疲勞。

具體來(lái)說(shuō)，內(nèi)容類型分成兩個(gè)大類，主內(nèi)容和運(yùn)營(yíng)內(nèi)容。

主內(nèi)容

主內(nèi)容根據(jù) App 類型的不同，包括但不限于圖片、視頻、動(dòng)態(tài)、商品，主內(nèi)容依然是瀑布流中占比最多的內(nèi)容類型。在一個(gè)頁(yè)面內(nèi)可以使用一種主內(nèi)容，也可以多種混合。

在多種主內(nèi)容混合時(shí)，設(shè)計(jì)形式上通常并不會(huì)有太大的區(qū)別，只會(huì)在同一設(shè)計(jì)框架下，增改該內(nèi)容類型特有的信息。

運(yùn)營(yíng)內(nèi)容

針對(duì) App 不斷擴(kuò)大的運(yùn)營(yíng)需要，更多 App 會(huì)在瀑布流中插入運(yùn)營(yíng)內(nèi)容。

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

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

這些都是很不錯(cuò)的根據(jù)自身需要改造瀑布流的實(shí)踐。

三、樣式拓展

1. 站酷

站酷的瀑布流會(huì)在中途插入一組視覺上差異較大、與主內(nèi)容類型相干性也較低的推薦設(shè)計(jì)師用戶，因?yàn)檎究崞俨剂鲀?nèi)容類型較為單一，這么做可以用來(lái)調(diào)節(jié)單一內(nèi)容類型對(duì)瀏覽造成的視覺壓力。

2. 馬蜂窩

馬蜂窩的瀑布流樣式差異化做得相當(dāng)大，不管是縱向?qū)Ρ?與同頁(yè)面其他卡片)還是橫向?qū)Ρ?與其他 App 瀑布流)，設(shè)計(jì)都顯得非常大膽前衛(wèi)，所以馬蜂窩的卡片樣式有比較好的參考性。

3. 其他瀑布流樣式

結(jié)尾

瀑布流的組件就介紹到這，后續(xù)所有有關(guān)組件的介紹都會(huì)同步更新。

作者：超人的電話亭