UI必看｜組件應用 - 瀑布流設計方式詳解

2022-12-06 12:17 作者:酸梅干超人的電話亭 0人讀過 | 我要投稿

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

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

1.無限加載

2.內(nèi)容等寬不等高

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

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

1.列寬的制定邏輯

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

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

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

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

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

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

一是圖片等高

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

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

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

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

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

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

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

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

具體來說，內(nèi)容類型分成兩個大類，主內(nèi)容和運營內(nèi)容。

主內(nèi)容

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

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