佈局空間很寶貴,設計師總是試圖找到在不讓使用者不堪重負的情況下顯示足夠資訊的方法。 循環顯示(Carousel)是一種流行的互動模式,用於在有限的空間內展示多個內容。
要建立一個有效且使用者友好的循環顯示(Carousel),請遵循以下8個最佳做法:
1. 評估內容需求
在實施循環顯示(Carousel)之前,請決定這是否是展示內容的最佳方式。 很多時候,靜態內容部分對使用者來說比循環顯示(Carousel)效能好得多。 使用循環顯示(Carousel)的唯一原因是當你有幾個具有同等(高)優先順序的相同性質的專案時。 例如,您想在電子商務商店的不同部門展示當前的產品。


2. 把最重要的內容放在第一張幻燈片上
人們通常在登陸新頁面後不久就開始滾動。 這就是為什麼您的大多數使用者只會看到旋轉木馬中的第一張幻燈片。 將最關鍵或最誘人的專案放在第一位,因為並非所有使用者都會滾動瀏覽所有專案。
3. 避免自動旋轉循環顯示(Carousel)
在沒有使用者輸入的情況下旋轉的旋轉木馬可能會挫敗那些試圖專注於內容的使用者。 如果您使用自動旋轉,請確保有暫停它的選項。 例如,當用戶將滑鼠懸停在當前幻燈片上時,暫停旋轉。
4. 限制幻燈片總數
過多的幻燈片可能會壓倒使用者。 保持總數可控(3-5張通常是一個很好的範圍)。
5. 使導航控制元件可見。
包括明顯和可訪問的導航控制元件,如箭頭,允許使用者按照自己的節奏在循環顯示(Carousel)中移動,以及點來指示循環顯示(Carousel)中有多少張幻燈片以及使用者當前正在檢視哪個幻燈片。

6. 最佳化移動循環顯示(Carousel)
調整小螢幕的循環顯示(Carousel),大多數時候,最好避免在手機上使用循環顯示(Carousel),因為它不能為移動使用者提供非常好的體驗。 但如果你仍然打算使用它,你需要最佳化幻燈片上的內容——在較小的螢幕上顯示每張幻燈片更少的專案,以保持可讀性和可用性。
7. 儘量減少內容載入時間
循環顯示(Carousel)可能是使用者在您的網站上遇到的第一個專案。 循環顯示(Carousel)效能將塑造使用者對您網站的印象。 緩慢的循環顯示(Carousel)會立即讓使用者認為您的網站沒有最佳化。 在循環顯示(Carousel)中對影象或影片使用延遲載入來提高效能,特別是對於移動使用者。

8. 預防暈車
保持微妙的旋轉動畫,以避免對運動敏感的使用者不堪重負。
- 過渡型別:使用滑動(幻燈片水平移動,模仿翻頁的感覺)或漸變(一張幻燈片淡出,下一張幻燈片淡入,營造出無縫優雅的效果)。
- 曲線:避免像彈跳這樣的複雜效果,因為它們可能會分散注意力。
- 持續時間:典型的持續時間約為300毫秒。 比這更長的動畫可能會感覺遲鈍。






