瀑佈流 (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.其他瀑佈流樣式結尾瀑佈流的組件就介紹到這，後續所有有關組件的介紹都會同步更新到我們的知識庫中！大傢記得到裡面查看～作者:酸梅幹超人 來源:微信公眾號:超人的電話亭出處:https://mp.weixin.qq.com/s/yIsepfjBKQ_Wpa1335V9tQ