媒體內容與控制
圖片不是塞進容器就完成。
一張內容圖片、一組可掃讀圖庫、需要放大的預覽與有時間軸的影片，各自需要不同控制、比例與替代文字。
選擇流程
先問媒體在這裡要幫什麼忙。
- 只呈現一張內容？Image。
- 要瀏覽一組媒體？Gallery。
- 空間有限且必須逐張看？謹慎使用 Carousel。
- 要放大或播放？Lightbox／Video Player。
差異對照
替代、比例與控制都要跟著任務走。
| 判斷面向 | Image圖片 | Thumbnail縮圖 | Gallery圖庫 | Carousel輪播 | Lightbox燈箱預覽 | Video Player影片播放器 | Aspect Ratio長寬比容器 |
|---|---|---|---|---|---|---|---|
| 主要任務 | 閱讀一張圖片 | 預覽並前往完整內容 | 瀏覽一組媒體 | 逐張切換精選內容 | 放大目前媒體 | 播放有時間軸內容 | 穩定保留比例 |
| 必要控制 | 依內容而定 | 清楚焦點與選取 | 每項都可到達 | 前後、位置、暫停 | 關閉、前後、焦點歸還 | 播放、暫停、字幕 | 裁切與容器策略 |
| 最常誤用 | alt 只寫「圖片」 | 縮圖沒有檔名 | 強迫改成 Carousel | 自動播放且不能停 | 關閉後焦點迷路 | 自動播放聲音 | 任意拉伸內容 |
示範情境
Carousel 不是產品頁的預設配備。
三張場地照片若需要一起比較，Gallery 比自動輪播更直接；需要放大時再由縮圖開啟 Lightbox，並把焦點還回原縮圖。
查看 Gallery Demo →