洞察 | 愛優騰 瀑布流設計
瀑布流是內容類產品常用的布局之一,可以提高空間利用率,展示更多內容,在新聞、視頻類產品中非常常見。這篇文章,作者拆解了愛優騰的瀑布流設計,供大家參考。
瀑布流(Waterfall Flow)是一種網頁設計布局方式,內容以垂直方向瀑布般的流動呈現,每一列中的內容高度不一,但整體呈現出平衡美感。
這種布局常用于展示圖片、新聞、博客等網頁內容,可以有效利用空間,提高用戶體驗。
一、瀑布流的優劣勢
優勢
- 視覺吸引力,以其不規則的排列方式吸引眼球,增加了頁面的視覺吸引力。
- 空間利用率高,有效的利用頁面空間,尤其適合展示大量圖片或內容。
- 動態加載,可以分卡片加載,同時保持頁面的動態性,提升用戶體驗。
劣勢
- 不適合所有內容,對于需要特定順序或結構的內容,無法保證固定的排列順序。
- 難以導航,由于內容呈現的不規則性,用戶可能會感到導航困難,特別是當頁面有大量內容時。
- 加載速度受限,大量高清圖片或視頻內容,會影響加載速度,造成等待時間過長。
二、愛優騰的瀑布流交互
1. 交互形式
愛奇藝:手機屏幕為兩列結構,根據不同屏幕寬度自適應。平板屏幕寬度五列,瀑布流為錯落式展示,更高效的利用屏幕空間。瀑布流卡片不支持自動播放劇集片段。
優酷:手機屏幕為兩列結構,根據不同屏幕寬度自適應。大卡片穿插其中,支持自動播放。平板屏幕寬度,采用四列和1+2的展現形式,在有序中又有變化,既提升了屏效,又兼顧了可視性。
騰訊視頻:根據不同屏幕寬度適配,當寬度為手機屏幕寬度時,為沉浸式瀑布流,屏效較低。每個卡片支持自動播放,并播放完后自動切換下一個。平板屏幕寬度,瀑布流最多三列,每個卡片右上方有預覽按鈕。
2. 視覺形式
愛奇藝:卡片內容以影視封面為主,豎版結構,突出影視劇的宣傳海報,一般海報的質量都比較高,視覺效果比較好,會帶來更高的點擊率。每個卡片所展示的信息內容相對簡單,只有影視劇名稱和推薦理由及類型。
優酷:橫版封面為主,穿插視頻畫面截圖,更符合視頻播放的比例,且屏效比更高,一屏可展示的內容更多。每一屏穿插大卡片,支持視頻預覽。每個卡片展示的內容更多,影視劇名稱,推薦理由,同類型集合入口,評論等。
騰訊視頻:結合了前兩個的優勢,既有視頻或劇照截圖,也有影視宣傳海報,并且還帶視頻預覽功能,可預覽當前頁面視頻內容。所展示的內容信息較少影視劇名稱,主演及推薦理由。??
雖然愛優騰都采用了瀑布流設計,但它們在視覺展現和細節處理上有著各自的特點。不能簡單地說哪一家的做法更好,因為它們都有各自的優勢。在設計過程中,更需要考慮產品的獨特性和定位。但無論選擇何種方式,都應該以解決問題和提升用戶體驗為目標。
三、舉一反三
除了網頁設計中常見的應用外,瀑布流布局還可以在各種產品應用中發揮作用,例如:
- 社交媒體:瀑布流布局常用于展示用戶發布的圖片、視頻或帖子,增強用戶瀏覽體驗。
- 電子商務:瀑布流可用于展示商品圖片和相關信息,吸引用戶瀏覽和購買。
- 新聞聚合:用于展示新聞文章、博客帖子或其他內容,以吸引用戶瀏覽并提供個性化的閱讀體驗。
- 設計作品:很多設計作品展示網站都使用瀑布流的形式,由于設計作品天然的視覺屬性,瀑布流是既高效又能增加吸引力的最好方式。
對于側重點不同的產品,可以靈活選擇合適的瀑布流展現形式,單列沉浸式瀑布流注重用戶的觀感體驗,適合長視頻消費場景。
而雙瀑布流或者多列瀑布流,則提供給用戶更多的選擇權,通過增加內容曝光提升分發效率。
所以,在做產品或者設計的時候,應該全盤考慮產品特點和用戶使用場景,選擇最適合的而不是最完美的解決方案。
作者:撿蘑菇的人
來源公眾號:撿蘑菇的人
本文由 @撿蘑菇的人 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!