安安～我是ChiYu～
從 Data Table 進入一筆活動專案後，詳細頁要放六張場地照片和一段教學影片。我把需求交給 AI：
做一個有圖片輪播和影片的漂亮產品頁。
下面是依照第一版需求重建的錯誤現場。畫面使用虛構活動資料與示意媒體，不含真實活動照片或個資：
圖 1：六張場地照被塞進自動輪播，但沒有暫停控制；圖片失敗只剩「活動圖片」，關閉 Lightbox 後焦點還回到頁首。三項故障演練，三項都沒通過。
AI 很快做出一個 Hero Carousel。它每五秒自動換圖，有淡入淡出動畫，標題還壓在照片上，品牌感直接拉滿。
控制權則差不多歸零。
我把圖片暫時關掉，替代文字只剩「活動圖片」，完全看不出入口在哪裡，更別說右側有無障礙坡道。接著拿走滑鼠，只用鍵盤操作；Carousel 沒有暫停按鈕，Lightbox 關閉後，焦點還直接飛回頁面最上方。
這個畫面第一眼確實好看，但 Vibe Coding 不能停在第一眼。今天不從「要不要做輪播」開始，而是先做三次故障演練：
Image、Thumbnail、Gallery、Carousel、Lightbox、Video Player 與 Aspect Ratio 都要在這三關裡說明自己的責任。
完整 Demo 與選型流程整理在 Vibe UI Atlas 的媒體元件比較頁。
第一關，圖片不見了。必要資訊應該仍能被理解，但「活動圖片」只說明檔案類型，沒有說明照片在這段內容裡負責什麼。
第二關，不用滑鼠。我應該能選圖、開啟大圖、暫停輪播並回到原本位置；第一版卻沒有暫停控制，Lightbox 關閉後也弄丟觸發來源。
第三關，禁止自動播放。六張場地照片仍然要容易找到，教學影片則由使用者自行開始。若關掉動畫後，整個媒體區就失去閱讀順序，代表設計一直靠動態效果替內容帶路。
| 故障條件 | 第一版結果 | 修正時要補什麼 |
|---|---|---|
| 圖片無法載入 | 只剩「活動圖片」 | 依內容目的撰寫替代文字，必要資訊不能消失 |
| 只用鍵盤 | Carousel 無法暫停，Lightbox 關閉後焦點回頁首 | 所有控制可聚焦，關閉後焦點回原縮圖 |
| 關閉自動播放 | 媒體閱讀順序不清楚 | 讓照片能直接選擇，影片由使用者主動開始 |
這三關會一路當作選型標準。媒體元件不是把畫面填滿就交差；內容目的、操作控制、網路成本與故障後的替代路徑都得留下來。
| 使用者正在做什麼 | 適合的元件 | 元件責任 |
|---|---|---|
| 閱讀一張有內容目的的圖片 | Image | 傳遞照片本身的資訊 |
| 用小圖選擇或預覽媒體 | Thumbnail | 提供可辨識的媒體入口 |
| 主動瀏覽一組相關媒體 | Gallery | 讓所有項目可以直接到達 |
| 在有限空間輪流呈現部分內容 | Carousel | 管理切換、位置與播放控制 |
| 放大並專心檢視一張媒體 | Lightbox | 提供完整 Dialog 流程 |
| 操作有時間軸的影音 | Video Player | 處理播放、聲音、字幕與時間 |
| 穩定媒體空間與裁切方式 | Aspect Ratio | 約束比例並減少版面跳動 |
Image、Thumbnail 與 Aspect Ratio 常被組進其他元件；Gallery 可以搭配 Thumbnail 和 Lightbox；Video Player 則有自己的時間軸與控制。它們可以合作，但每多包一層，就多一段焦點、載入、失敗與返回路徑要驗收。
Image 可能是內容、功能、裝飾或複雜資訊。替代文字要根據它在當下的目的來寫，不能只把檔名換成人話，也不是每張後面都補上「圖片」兩個字。
圖 2：場地入口位於畫面中央，右側設有無障礙坡道；這兩項是圖片需要傳遞的資訊。
這張圖適合使用「活動場地入口，右側設有無障礙坡道」之類的替代文字。附近若已經有完全相同的說明，就不必再朗讀一次；圖片若純粹裝飾，也應使用空替代文字，不要硬替背景編故事。
W3C 的圖片技巧提供一個很好用的判斷：想像你正在電話裡把頁面念給另一個人聽。理解這一段時，你會怎麼描述圖片？如果完全不需要提到它，它很可能只是裝飾。
替代文字正確，不代表媒體交付就結束。正式產品還要處理：
srcset、sizes 或圖片服務，避免 360px 手機下載桌面 Hero 原圖。效能不是媒體文章旁邊的另一門課。圖片晚五秒才出現、版面一直跳，使用者一樣無法順利完成查看場地的任務。
Thumbnail 用較小畫面幫助選擇或預覽媒體，常出現在檔案預覽、商品圖與 Gallery 導覽。使用者仍要認得每個選項；把原圖縮到所有細節集體請假，沒有完成預覽任務。
圖 3：入口、舞台與座位各有文字名稱，目前選取項目也有可辨識狀態。
縮圖被選取時，不能只多一圈藍框；文字與程式可辨識的狀態要同步。它可能是一組具有目前項目的 Tabs、單選控制，也可能是使用 aria-pressed 的 Toggle Button，語意要跟實際行為一致。Thumbnail 若只負責開啟大圖，它就是 Button，名稱要說明準備開啟哪張圖片。
縮圖還要保留足以辨識主體的裁切。入口照片若被裁到只剩牆面，再清楚的「入口」文字也會讓視覺預覽失去價值。縮圖的任務是幫忙選，不是考眼力。
Gallery 是一組彼此相關的圖片或媒體。所有項目通常都能直接到達，使用者不必等自動播放慢慢輪到下一張。
圖 4：Gallery 將入口、舞台與座位列成可直接選擇的項目，主畫面同步顯示目前照片。
我實際切換三個項目後，照片、Caption 與目前選取狀態會一起更新。這條路徑適合讓參加者主動查看場地細節，也直接通過「關閉自動播放」這一關。
Gallery 若會更新 URL 或支援分享單張圖片，要先決定重新整理與瀏覽器返回行為；若不需要深層連結，也至少要讓目前項目在切換後仍可被察覺。六張照片只需要排成響應式網格時，甚至可以停在更簡單的 Gallery。效果少一點，照片不會因此辭職。
Carousel 一次只顯示部分內容，再透過前後控制或自動播放切換。它能節省首屏空間，代價是後面的項目比較不容易被看見。
圖 5：Carousel 顯示目前位置、上一張、下一張，以及自動播放的暫停或重新開始。
如果重要資訊藏在第二張以後，我會先問它是不是該改用 Gallery。Carousel 確實有空間限制時，至少要交付：
W3C 的 Carousel 結構教學建議把輪播視為有名稱的內容區域，項目仍保留適合的清單、文章與標題結構。W3C APG 的 Carousel Pattern也要求自動輪播能被停止；鍵盤焦點進入或滑鼠停留時應停止，除非使用者明確要求，不要自己重新開始追著人換畫面。
prefers-reduced-motion 可以減少動畫，不等於畫面上的暫停按鈕可以下班。使用者仍然需要直接掌握播放狀態。
LumenDesk 的六張場地照片都值得直接瀏覽，所以 Carousel 沒有繼續當主角。網站保留 Demo，是為了說清楚真的需要輪播時要交付哪些控制，不代表每一頁都得把它用上。
Lightbox 把圖片放到前景，讓使用者專心檢視。它常被實作成 Modal Dialog；若採用 Modal，點圖變大只是第一個動作，後面還有背景不可操作、焦點進入、前後切換、離開與歸還。
圖 6：Lightbox 開啟後提供大圖、標題、位置與關閉操作；關閉後應回到原本 Thumbnail。
焦點進入 Lightbox 後，背景不能繼續被鍵盤操作；Escape 與關閉按鈕都要能離開；關閉後，焦點回到剛才開啟大圖的 Thumbnail。第一版焦點跑回頁首，就是這條流程沒有收完整。
切到下一張大圖時，也要更新圖片名稱、位置與 Caption；原縮圖若因篩選或資料更新已經消失，關閉後則要把焦點移到 Gallery 的合理位置，不能硬找一個不存在的元素。
W3C APG 的 Modal Dialog Pattern提供焦點進入、循環與返回觸發點的基本規則。Lightbox 再漂亮，也不能跳過這份 Dialog 工作。
Video Player 至少要處理播放、暫停、音量、時間、字幕與全螢幕。影片若是完成任務的必要內容，還要考慮逐字稿或音訊描述。
圖 7：Video Player 顯示播放、時間與字幕等控制，影片不會自動以聲音開始。
LumenDesk 不自動播放有聲影片。就算靜音自動播放在技術上可行，也得考慮注意力、行動網路與使用者可能錯過內容開頭。MDN 的 WebVTT API說明瀏覽器如何處理時間同步文字軌；字幕、逐字稿與需要時的音訊描述，都要拿實際內容驗證，不能在按鈕上寫了「字幕」就當整部影片已經交卷。
正式驗收至少要確認：
只留下黑色長方形，使用者連這是載入失敗還是導演風格都不知道。
Aspect Ratio 不是使用者直接操作的媒體元件，而是版面與 CSS 層的約束工具。它用來固定媒體容器比例，例如 16:9 影片、4:3 簡報或 1:1 Avatar；媒體載入前先保留空間，可以減少版面突然跳動。
圖 8：16:9 媒體容器預留穩定空間，裁切後仍保留入口與右側坡道。
固定比例不代表所有圖片都用同一種方式裁切。人像、海報與場地照片的重點不同；使用 cover 時要定義焦點位置，避免人物臉部、海報文字或重要指示被整齊地切出畫面。
不同斷點也可以使用不同 Crop 或 Art Direction。桌面 16:9 能容納入口與坡道，手機狹長版可能需要另一張裁切；這不是多傳一張圖就結束，兩個版本仍要保留相同資訊目的與替代文字策略。
圖 9：依媒體目的選擇 Image、Thumbnail、Gallery、Carousel、Lightbox、Video Player 或 Aspect Ratio。
| 問題 | 比較適合 |
|---|---|
| 只需要一張有內容目的的圖片 | Image |
| 需要用小圖選擇或預覽 | Thumbnail |
| 所有媒體都值得直接瀏覽 | Gallery |
| 空間有限、能接受部分內容先被藏起 | Carousel |
| 需要放大或專心檢視一張媒體 | Lightbox |
| 使用者要控制有時間軸的影音 | Video Player |
| 需要穩定媒體空間與裁切規則 | Aspect Ratio |
LumenDesk 的答案是 Gallery 搭配 Thumbnail，需要放大時再開 Lightbox；Image 與 Aspect Ratio 分別照顧內容和版型，教學影片交給 Video Player。Carousel 被排除，因為六張場地照片沒有哪一張應該等五秒才輪得到。
請為 LumenDesk 活動頁建立場地媒體區。
- 使用 Gallery 顯示入口、舞台與座位照片，所有照片都能直接選擇，不使用自動輪播。
- 每張圖片依內容目的撰寫替代文字；場地入口照片要提到右側無障礙坡道，裝飾背景使用空替代文字。
- 使用響應式圖片來源，避免手機下載桌面原圖；保留寬高或 Aspect Ratio，減少版面位移。
- Thumbnail 顯示文字名稱與目前選取狀態，不能只靠藍色外框。
- 點擊 Thumbnail 開啟 Modal Lightbox；焦點進入 Dialog，Escape 可關閉，關閉後回到原 Thumbnail。
- 教學影片不自動播放聲音，提供播放、暫停、音量、字幕、時間、全螢幕與逐字稿。
- 圖片與影片失敗時顯示替代內容、原因與重試方式。
- 尊重 prefers-reduced-motion；360px 控制項可換行、觸控範圍足夠，重要內容不能因裁切消失。
這份 Prompt 沒有規定淡入淡出要幾毫秒。它先鎖定所有照片是否找得到、圖片失敗後留下什麼、焦點回哪裡、影片由誰開始，以及行動網路要下載多少資料。
交付前，我會重新跑一次：
目前 Gallery 的選取切換、圖片失敗情境、鍵盤操作與關閉自動播放已納入 Demo；第一版兩個明確問題也有對應修正：Carousel 具備停止控制，Lightbox 關閉後回到原 Thumbnail。
尚未完成的驗證也要說清楚：實際字幕檔、逐字稿、prefers-reduced-motion 完整結果、觸控裝置，以及不同網路條件下的媒體效能仍待發布前複驗。不能因為桌面版按鈕都能點，就把媒體體驗整包宣布過關。
開頭那個每五秒換圖的 Hero Carousel 最後退出主要場地資訊。六張照片改由 Gallery 直接選擇，Thumbnail 負責入口，Lightbox 完成放大與焦點返回，Video Player 則把播放權交還給使用者。
到這裡，資料已經有容器、小型標記、表格與媒體。只是把它們重新裝回同一個產品頁，AI 很可能又回到第一天的老方法：先交出一張很像成品的畫面，互動能不能用則等你自己發現。
我回頭拿出第一天那句 Prompt：
幫我做一個現代、漂亮、好用的工作區成員管理後台。
接著在搜尋框輸入 Orbit。
圖 10：搜尋框收下 Orbit，Aurora、Nimbus 與 Solace 卻一筆都沒離開；篩選沒有條件，停用也沒有取消流程，90 秒任務卡直接得到 0／3。
一張圖把這 28 天繞過的坑又集合回來了，效率高得讓人有點哭笑不得。明天不再增加新元件，而是沿用相同資料與任務，重新驗收前後兩個版本。
這一次，先不看它漂不漂亮。
資料查閱：2026-08-07。
iThome鐵人賽
看影片追技術