瀑布流是內(nèi)容類產(chǎn)品常用的布局之一，可以提高空間利用率，展示更多內(nèi)容，在新聞、視頻類產(chǎn)品中非常常見。這篇文章，作者拆解了愛優(yōu)騰的瀑布流設(shè)計，供大家參考。

瀑布流（Waterfall Flow）是一種網(wǎng)頁設(shè)計布局方式，內(nèi)容以垂直方向瀑布般的流動呈現(xiàn)，每一列中的內(nèi)容高度不一，但整體呈現(xiàn)出平衡美感。

這種布局常用于展示圖片、新聞、博客等網(wǎng)頁內(nèi)容，可以有效利用空間，提高用戶體驗。

一、瀑布流的優(yōu)劣勢

優(yōu)勢

• 視覺吸引力，以其不規(guī)則的排列方式吸引眼球，增加了頁面的視覺吸引力。
• 空間利用率高，有效的利用頁面空間，尤其適合展示大量圖片或內(nèi)容。
• 動態(tài)加載，可以分卡片加載，同時保持頁面的動態(tài)性，提升用戶體驗。

劣勢

• 不適合所有內(nèi)容，對于需要特定順序或結(jié)構(gòu)的內(nèi)容，無法保證固定的排列順序。
• 難以導航，由于內(nèi)容呈現(xiàn)的不規(guī)則性，用戶可能會感到導航困難，特別是當頁面有大量內(nèi)容時。
• 加載速度受限，大量高清圖片或視頻內(nèi)容，會影響加載速度，造成等待時間過長。

二、愛優(yōu)騰的瀑布流交互

1. 交互形式

愛奇藝：手機屏幕為兩列結(jié)構(gòu)，根據(jù)不同屏幕寬度自適應(yīng)。平板屏幕寬度五列，瀑布流為錯落式展示，更高效的利用屏幕空間。瀑布流卡片不支持自動播放劇集片段。

優(yōu)酷：手機屏幕為兩列結(jié)構(gòu)，根據(jù)不同屏幕寬度自適應(yīng)。大卡片穿插其中，支持自動播放。平板屏幕寬度，采用四列和1+2的展現(xiàn)形式，在有序中又有變化，既提升了屏效，又兼顧了可視性。

騰訊視頻：根據(jù)不同屏幕寬度適配，當寬度為手機屏幕寬度時，為沉浸式瀑布流，屏效較低。每個卡片支持自動播放，并播放完后自動切換下一個。平板屏幕寬度，瀑布流最多三列，每個卡片右上方有預覽按鈕。

2. 視覺形式

愛奇藝：卡片內(nèi)容以影視封面為主，豎版結(jié)構(gòu)，突出影視劇的宣傳海報，一般海報的質(zhì)量都比較高，視覺效果比較好，會帶來更高的點擊率。每個卡片所展示的信息內(nèi)容相對簡單，只有影視劇名稱和推薦理由及類型。

優(yōu)酷：橫版封面為主，穿插視頻畫面截圖，更符合視頻播放的比例，且屏效比更高，一屏可展示的內(nèi)容更多。每一屏穿插大卡片，支持視頻預覽。每個卡片展示的內(nèi)容更多，影視劇名稱，推薦理由，同類型集合入口，評論等。

騰訊視頻：結(jié)合了前兩個的優(yōu)勢，既有視頻或劇照截圖，也有影視宣傳海報，并且還帶視頻預覽功能，可預覽當前頁面視頻內(nèi)容。所展示的內(nèi)容信息較少影視劇名稱，主演及推薦理由。??

雖然愛優(yōu)騰都采用了瀑布流設(shè)計，但它們在視覺展現(xiàn)和細節(jié)處理上有著各自的特點。不能簡單地說哪一家的做法更好，因為它們都有各自的優(yōu)勢。在設(shè)計過程中，更需要考慮產(chǎn)品的獨特性和定位。但無論選擇何種方式，都應(yīng)該以解決問題和提升用戶體驗為目標。

三、舉一反三

除了網(wǎng)頁設(shè)計中常見的應(yīng)用外，瀑布流布局還可以在各種產(chǎn)品應(yīng)用中發(fā)揮作用，例如：

1. 社交媒體：瀑布流布局常用于展示用戶發(fā)布的圖片、視頻或帖子，增強用戶瀏覽體驗。
2. 電子商務(wù)：瀑布流可用于展示商品圖片和相關(guān)信息，吸引用戶瀏覽和購買。
3. 新聞聚合：用于展示新聞文章、博客帖子或其他內(nèi)容，以吸引用戶瀏覽并提供個性化的閱讀體驗。
4. 設(shè)計作品：很多設(shè)計作品展示網(wǎng)站都使用瀑布流的形式，由于設(shè)計作品天然的視覺屬性，瀑布流是既高效又能增加吸引力的最好方式。

對于側(cè)重點不同的產(chǎn)品，可以靈活選擇合適的瀑布流展現(xiàn)形式，單列沉浸式瀑布流注重用戶的觀感體驗，適合長視頻消費場景。

而雙瀑布流或者多列瀑布流，則提供給用戶更多的選擇權(quán)，通過增加內(nèi)容曝光提升分發(fā)效率。

所以，在做產(chǎn)品或者設(shè)計的時候，應(yīng)該全盤考慮產(chǎn)品特點和用戶使用場景，選擇最適合的而不是最完美的解決方案。