CHAPTER 10 · PRACTICE WORKSPACE

狀態、轉場、動畫與 CTA

有目的、可操作且尊重減少動態偏好的互動回饋

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

讓 CTA 的滑入、按下與鍵盤焦點可辨識

修改檔案：style.css

完成後看見：按鈕有平順位移、按壓回饋與焦點框

TASK-02稍後處理

替處理中徽章加入有限度的動畫

修改檔案：style.css

完成後看見：處理中標籤以淡入淡出提示狀態

TASK-03稍後處理

尊重減少動態效果偏好

修改檔案：style.css

完成後看見：系統偏好減少動態時取消轉場與動畫

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：讓 CTA 的滑入、按下與鍵盤焦點可辨識

修改：style.css

完成後：按鈕有平順位移、按壓回饋與焦點框

講解時展開：2 個小型比較

Focus-visible｜讓鍵盤焦點看得見

比較：:focus-visible 是鍵盤使用者定位目前控制項的可見線索，不能只靠滑鼠 hover 或顏色差異。

現在做：先用滑鼠操作 CTA，再只用 Tab 鍵移動，為 .cta-button:focus-visible 補上清楚的 outline 或 ring。

看預期與證據

預期：Tab 聚焦時能清楚看見目前位置，且不需要依賴滑鼠才能完成操作。

證據：用鍵盤完成一次聚焦操作，截圖或口述焦點位置與它對使用者的意義。

Transition｜讓狀態改變平順

比較：transition 處理 hover、active 或 focus 等狀態切換，不會自己循環播放。

現在做：先暫時在 .cta-button:hover 加上 transform: translateY(-4px)，再把 transition: transform 180ms ease 放到 .cta-button 一般狀態，反覆滑入、移出與按住按鈕。

看預期與證據

預期：進場與退場都平順；學生能指出 transition 應放在一般狀態，而不是只放在 :hover。

證據：比較加入前後的進場與退場，並說出這是狀態切換，不是自動播放。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 依序用滑鼠 hover、按住 CTA、再用 Tab 聚焦，確認三種狀態目前都沒有位移、按壓或清楚焦點框。
  2. B｜預測：依序用滑鼠滑入、按住按鈕，再按 Tab 聚焦，觀察三種回饋。
  3. C｜實作：在 style.css 的 .cta-button、:hover、:active、:focus-visible 完成「讓 CTA 的滑入、按下與鍵盤焦點可辨識」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 .cta-button、:hover、:active、:focus-visible 與 style.css，最後重跑原操作。
  5. E｜驗收：按鈕有平順位移、按壓回饋與焦點框

完成條件：DONE-01：按鈕有平順位移、按壓回饋與焦點框

作品正在準備

讓互動回饋有目的

先用 Tab 找到按鈕，再用滑鼠比較滑入、按下與等待狀態。

查看作品成果

沒有動畫時，這段重要說明仍然可讀。

第 09 章 → 第 10 章

把已完成的元件，變成可感知的狀態

保留第 09 章的按鈕與卡片基底；本章只新增 hover、focus、處理中動畫與 reduced-motion，下一章再用 DevTools 追查它們的 CSS 來源。

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「讓 CTA 的滑入、按下與鍵盤焦點可辨識」。

前往 Checkpoint 1：完成 TASK-01