循環顯示(Carousel)設計的最佳實踐

佈局空間很寶貴,設計師總是試圖找到在不讓使用者不堪重負的情況下顯示足夠資訊的方法。 循環顯示(Carousel)是一種流行的互動模式,用於在有限的空間內展示多個內容。

要建立一個有效且使用者友好的循環顯示(Carousel),請遵循以下8個最佳做法:

1. 評估內容需求

在實施循環顯示(Carousel)之前,請決定這是否是展示內容的最佳方式。 很多時候,靜態內容部分對使用者來說比循環顯示(Carousel)效能好得多。 使用循環顯示(Carousel)的唯一原因是當你有幾個具有同等(高)優先順序的相同性質的專案時。 例如,您想在電子商務商店的不同部門展示當前的產品。

iHerb uses a carousel to show current product offerings in different departments.
沃爾瑪採用不同的方法——它在主頁上以卡片格式顯示所有產品。

2. 把最重要的內容放在第一張幻燈片上

人們通常在登陸新頁面後不久就開始滾動。 這就是為什麼您的大多數使用者只會看到旋轉木馬中的第一張幻燈片。 將最關鍵或最誘人的專案放在第一位,因為並非所有使用者都會滾動瀏覽所有專案。

3. 避免自動旋轉循環顯示(Carousel)

在沒有使用者輸入的情況下旋轉的旋轉木馬可能會挫敗那些試圖專注於內容的使用者。 如果您使用自動旋轉,請確保有暫停它的選項。 例如,當用戶將滑鼠懸停在當前幻燈片上時,暫停旋轉。

4. 限制幻燈片總數

過多的幻燈片可能會壓倒使用者。 保持總數可控(3-5張通常是一個很好的範圍)。

5. 使導航控制元件可見。

包括明顯和可訪問的導航控制元件,如箭頭,允許使用者按照自己的節奏在循環顯示(Carousel)中移動,以及點來指示循環顯示(Carousel)中有多少張幻燈片以及使用者當前正在檢視哪個幻燈片。

亞馬遜清楚地為其循環顯示(Carousel)標明瞭“上一個”和“下一個”按鈕。

6. 最佳化移動循環顯示(Carousel)

調整小螢幕的循環顯示(Carousel),大多數時候,最好避免在手機上使用循環顯示(Carousel),因為它不能為移動使用者提供非常好的體驗。 但如果你仍然打算使用它,你需要最佳化幻燈片上的內容——在較小的螢幕上顯示每張幻燈片更少的專案,以保持可讀性和可用性。

7. 儘量減少內容載入時間

循環顯示(Carousel)可能是使用者在您的網站上遇到的第一個專案。 循環顯示(Carousel)效能將塑造使用者對您網站的印象。 緩慢的循環顯示(Carousel)會立即讓使用者認為您的網站沒有最佳化。 在循環顯示(Carousel)中對影象或影片使用延遲載入來提高效能,特別是對於移動使用者。

影象的懶惰載入(Lazy loading)

8. 預防暈車

保持微妙的旋轉動畫,以避免對運動敏感的使用者不堪重負。

  • 過渡型別:使用滑動(幻燈片水平移動,模仿翻頁的感覺)或漸變(一張幻燈片淡出,下一張幻燈片淡入,營造出無縫優雅的效果)。
  • 曲線:避免像彈跳這樣的複雜效果,因為它們可能會分散注意力。
  • 持續時間:典型的持續時間約為300毫秒。 比這更長的動畫可能會感覺遲鈍。
參考來源:
關鍵字:
  • WordCamp Europe 2025:在瑞士巴塞爾舉辦!

    WordCamp Europe 2025將於6月5日至7日在瑞士(Switzerland)美麗的巴塞爾(Basel)舉行。 它將彙集來自整個地區和世界各地的開源愛好者、開發人員和 WordPress 專業人士! 今年的活動提供了新鮮的觀點、引人入勝的對話,以及無數的機會,在充滿行動的學習、網路和協作的三天裡,與WordPress社群、機構和創新者建立聯絡。
    2025.04.16 Wednesday
  • 9個傑出的Webflow CMS網站示例

    檢視這9個CMS網站示例,這些示例使用 Webflow 強大而靈活的 CMS 來建立直觀、引人入勝的數字閱讀體驗。
    2025.04.09 Wednesday
  • 案例研習:Troa 25′ Folio

    看看 Troa 如何重新構想他們的作品集 —— 專注於效能、可持續性以及簡潔、周到的設計。
    2025.04.04 Friday
  • 網站分析101:提高網站效能的快速入門指南

    管理網站的團隊面臨著不斷的選擇, 從 CTA 放置到瞭解他們的核心受眾,內容編輯、設計師和開發人員需要將他們的決策與關鍵業務目標保持一致,以實現收入的最大化,並將他們的努力能夠實踐到真正的商業價值。為此,我們需要可操作的資訊去作為考量。
    2025.04.04 Friday
  • 大韓航空以全新的外觀起飛

    大韓航空的品牌重塑以深藍色的現代化太極(Taegeuk)符號為特色,搭配更乾淨、更流線型的新字型。 更新的徽標和符號,結合飛機塗裝上的金屬外觀,創造了一個時尚、現代的視覺標誌,強調了航空公司的創新和前瞻性方案。
    2025.04.02 Wednesday