輪播與滑塊系統 是做什麼的？
目的
輪播與滑塊系統提供了一套方法論，用於設計水平滾動容器，讓使用者能夠瀏覽一系列相關內容（卡片、圖片、推薦），而不佔用過多的垂直空間。雖然輪播常因互動率低而受到批評，但透過系統化的方法，專注於提示性、感知效能與使用者控制，可以確保水平探索既直觀、無障礙，又能產生高影響力。
使用案例
- 產品探索： 在電子商務中瀏覽「相關產品」或「新進商品」。
- 社交證明： 顯示一系列客戶推薦或案例研究。
- 媒體圖庫： 在有限的視窗內展示高密度的照片或影片集合。
- 引導/功能導覽： 引導使用者依序瀏覽一系列價值主張。
- 儀表板小工具： 以水平行管理多個資料摘要，以保持頁面節奏。
何時不該使用
- 關鍵循序步驟： 如果使用者必須看到每一項才能完成任務，請使用垂直堆疊或網格以確保不遺漏任何內容。
- 小型內容數量： 如果只有 2 或 3 個項目，標準網格更有效率，所需的互動也更少。
- 混合內容類型： 請勿在單一輪播中混合不同類型的卡片（例如，將文章與產品相鄰）；一致性是掃描性的關鍵。
- 低價值的行銷滑塊： 避免使用大型「英雄輪播」來展示不相關的促銷內容，因為使用者通常會忽略這些內容（橫幅盲視）。
輸入
- 內容原型： 要滾動的內容是什麼？（例如，
card-ui-system卡片、圖片或文字區塊）。 - 目錄大小： 總集合中有多少個項目？
- 容器上下文： 它是全寬區段還是包含在網格欄位內？
- 互動需求： 是否需要自動播放、無限循環或僅手動滾動？
- 品牌標記： 用於控制項與指示器的間距、字體與色彩系統。
輸出
- 輪播結構規範： 容器、軌道、導航（箭頭）與分頁（圓點）的視覺定義。
- 揭示策略： 定義「部分項目揭示」規則，以提示水平隱藏的內容。
- 響應式對應： 行動裝置、平板與桌上型裝置上每視圖項目數的規則。
- 無障礙藍圖： ARIA 標籤、焦點管理與動作控制規範。
工作流程
1. 確定探索意圖
識別使用者應如何與項目互動：
- 線性： 使用者逐一瀏覽項目（例如，引導流程）。
- 探索性： 使用者可以隨意跳轉或略讀（例如，產品網格）。
- 環境式： 內容自動移動（例如，標誌跑馬燈）。
2. 建立「揭示模式」
向使用者提示右側還有更多內容：
- 部分揭示： 確保「下一個」項目部分可見（通常溢出容器邊緣 10-20%）。這是可滾動性最強的視覺提示。
- 淡入效果： 在容器邊緣應用微妙的漸層淡出。
3. 選擇導航提示
提供清晰的移動控制項：
- 箭頭（方向性）： 放置在軌道垂直中心（容器內部或外部）。最適合高密度瀏覽。
- 分頁（圓點/點）： 放置在軌道下方。最適合短序列（3-7 個項目）以顯示進度。
- 滾動條： 底部的視覺進度條。最適合非常大的集合。
4. 定義響應式欄位邏輯
對應一次可見的項目數量：
- 桌上型裝置： 每視圖 3-5 個項目。
- 平板： 每視圖 2-3 個項目。
- 行動裝置： 每視圖 1.2 個項目（1 個完整項目 + 部分揭示）。
5. 實作控制項與無障礙性
- 鍵盤支援： 使用者必須能使用
ArrowLeft和ArrowRight在項目之間移動；Tab應移動到下一個可聚焦的控制項，而不是每個幻燈片之間。 - 動作控制： 如果使用自動播放，請提供可見的「暫停」按鈕，並在滑鼠懸停、焦點以及設定
prefers-reduced-motion: reduce時停止動畫（不要僅依賴懸停/焦點）。 - ARIA 角色： 遵循 ARIA APG 輪播模式——容器使用
role="region"搭配aria-label，aria-roledescription="carousel"，以及幻燈片軌道使用aria-live="polite"（或在自動播放期間使用"off"），以便螢幕閱讀器在不被淹沒的情況下宣告變更。 - 焦點可見性： 確保箭頭、圓點與幻燈片內容上的焦點指示器永遠不會被相鄰幻燈片或固定的揭示邊緣遮擋（WCAG 2.2 SC 2.4.11）。
決策規則
- 「部分揭示」規則： 在行動裝置上始終顯示下一項目的細微部分，以指示水平滾動，無需依賴箭頭。
- 箭頭 vs. 圓點： 如果項目超過 5 個，請使用箭頭。僅在總數較少（3-7 個）且顯示進度有價值時才使用圓點。
- 循環邏輯： 僅對環境式探索（如標誌）使用「無限循環」。對於功能性內容（如產品），請使用「軌道末端」狀態，此時右箭頭變為禁用。
- 貼齊滾動： 始終使用
scroll-snap-type: x mandatory，以確保項目在滑動或點擊後完美對齊容器邊緣。
限制條件
- 無障礙性： 必須支援
prefers-reduced-motion。所有互動控制項（箭頭/圓點）必須符合 WCAG 2.2 SC 2.5.8（最小目標尺寸 24x24px，主要箭頭建議 44x44px）。 - 響應性： 項目必須是流體式的。輪播容器絕不能導致水平頁面溢出；溢出必須包含在元件內部。使用
clamp()設定項目寬度/間距，使每視圖項目數平滑縮放，而不是在固定斷點處跳躍。 - 感知效能： 對尚未載入或離螢幕的項目使用
skeleton-state-system。
常見失敗模式
- 「隱形」輪播： 沒有部分揭示也沒有箭頭，使元件看起來像靜態、損壞的網格。
- 「自動播放陷阱」： 內容旋轉太快，使用者來不及閱讀，或沒有提供停止方式。
- 損壞的貼齊： 項目停在視窗之間，導致內容被截斷。
- 缺少互動狀態： 箭頭沒有懸停/焦點狀態，或在軌道末端時未顯示禁用狀態。
- 行動裝置溢出： 輪播擴展了整個頁面的寬度，導致使用者在水平滾動時「迷失方向」。
驗證標準
- 存在「部分揭示」或清晰的隱藏內容視覺指示器。
- 導航控制項（箭頭/圓點）符合 WCAG 2.2 SC 2.5.8（最小觸控區域 24x24px）。
- 實作了鍵盤導航（
箭頭鍵）與焦點管理，且焦點指示器從未被遮擋（WCAG 2.2 SC 2.4.11）。 - 使用
scroll-snap確保項目對齊網格。 - 自動播放（如果使用）可由使用者暫停，並在
prefers-reduced-motion下自動停止。 - 為所有主要斷點定義了響應式項目計數。
- 為螢幕閱讀器正確應用了 ARIA 地標與標籤。