輪播和跑馬燈怎麼選？
一句話做出判斷
輪播一次顯示一張內容，並提供切換按鈕。跑馬燈會讓一串內容持續移動。
每個項目都需要慢慢看時，用輪播。跑馬燈只適合不重要的裝飾內容，而且要能暫停或關閉動態。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Carousel
↗ 輪播
輪播是一串面板，可以用箭頭、圓點或滑動手勢，一次看一張或幾張。
圖片庫有「上一張」和「下一張」按鈕、目前張數、滑動手勢，也能暫停自動播放。
- 什麼時候用
- 項目有順序，但畫面空間不足以全部顯示時，就使用輪播。
- 什麼時候不要用
- 不要把重要選項藏在輪播裡，也不要讓內容自動切換得太快。
- 程式裡的名稱
aria-roledescription="carousel"
Marquee
↗ 跑馬燈帶
一條會不斷移動並重複內容的區塊。對動態敏感的人要能暫停，或改看靜態版本。
說出名稱 · 驗證 · 動手打造 · 發布
活動頁讓簡短的贊助名單慢慢移動。滑鼠移入或取得焦點時會暫停；開啟減少動態後，則改成靜態換行。
- 什麼時候用
- 只用於簡短、可重複，而且不是必要資訊的內容。動態可以增加氣氛，但不能妨礙閱讀。
- 什麼時候不要用
- 不要用於操作說明、長文、緊急訊息，或任何需要追著移動才能讀完的文字。
- 程式裡的名稱
overflow clip + duplicated track + prefers-reduced-motion
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 輪播Carousel | 項目有順序，但畫面空間不足以全部顯示時，就使用輪播。 | 不要把重要選項藏在輪播裡，也不要讓內容自動切換得太快。 | aria-roledescription="carousel" |
| 跑馬燈帶Marquee | 只用於簡短、可重複，而且不是必要資訊的內容。動態可以增加氣氛，但不能妨礙閱讀。 | 不要用於操作說明、長文、緊急訊息，或任何需要追著移動才能讀完的文字。 | overflow clip + duplicated track + prefers-reduced-motion |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 輪播（Carousel）、跑馬燈帶（Marquee） 中，為真實使用流程選出最合適的介面模式。判斷規則：輪播一次顯示一張內容，並提供切換按鈕。跑馬燈會讓一串內容持續移動。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。