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 開始修改。

作品正在準備

讓互動回饋有目的

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

查看作品成果

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

CONTINUE

開始 TASK-01

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

前往 Checkpoint 1:完成 TASK-01