UX Design Evaluation
UX / UI 設計的系統性評估方法。這個 skill 的出發點是一類反覆出現的事故：功能邏輯完整、實機測試才發現使用者被困在畫面裡出不去、按鈕按了沒有任何回饋、Face ID 失敗後沒有替代路徑。加一顆 back 按鈕是 5 分鐘的事，問題在設計階段沒有工具強制回答「每個狀態怎麼離開、每道關卡失敗怎麼辦、每個動作使用者怎麼知道系統收到了」。
本 skill 把 UX 設計從「靠經驗想到」變成「靠方法查到」：每個評估維度都有可機械執行的表格或提問清單，填完表格、空白格自動暴露缺口。適用於任何前端 surface（mobile app、web、桌面），範例以 mobile 為主；不涵蓋視覺風格設計（品牌色、字型、間距美學）與使用者研究方法 — 可讀性對比（WCAG）屬本 skill 的互動回饋檢查範圍。
Core Pillars（核心支柱）
| 支柱 | 意義 | | -------------------------------------------------- | ---------------------------------------------------------------------------------- | | Every state has an exit 每個狀態都有退出路徑 | 畫面的每個狀態至少一條使用者可自行觸發的離開路徑；退出路徑為空 = UX 死胡同 | | Every gate has a fallback 每道關卡都有替代路徑 | 使用者過不了關卡（認證失敗、斷網、權限被拒）時仍有路可走，而非被擋死 | | Every action gets honest feedback 回饋即時誠實 | 每個使用者動作都有與等待時長相稱的系統回應；沒有回饋的按鈕等同壞掉的按鈕 | | Design decisions are artifacts 設計決策成品化 | 狀態矩陣、gate 設計表、輸入決策表在企劃階段產出、可被 review、可直接轉成 test case |
評估流程
設計新畫面 / 新流程時（事前）
- 從操作盤點（BDD 情境或功能規格）列出所有畫面與狀態
- 每個畫面填畫面狀態矩陣（四欄：顯示 / 可用操作 / 進入條件 / 退出路徑）— 空白格就是設計缺口
- 每道 gate 回答成功 / 失敗 / 不確定必答問題、產出 gate 設計表
- 每個輸入框過輸入機制決策（keyboard type / submit model / IME policy / special keys）
- 每個非同步操作標時間門檻帶、決定回饋形式
- 每個導航操作回答「使用者按 back 期望回到哪裡」
審查既有 UI / UX review 時（事後）
依症狀路由到對應 reference（見下表），用該 reference 的檢查清單逐項掃。跨維度的快速掃描順序：先掃退出路徑（被困住的代價最高）、再掃 gate fallback、再掃回饋完整性。
觸發路由
| 觸發情境 / 症狀 | 讀哪份 reference |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
| 設計多狀態畫面（連線 / 配對 / 同步）、使用者被困在畫面出不去、畫面剛開啟就顯示離線、審查導航缺口、路由存在但入口找不到 | references/screen-state-matrix.md |
| 設計認證 / 網路 / 權限 / 硬體條件關卡、生物辨識失敗沒退路、權限被拒後的處理、覆蓋 / 清空既有資料的操作確認、模擬器上測不到的 gate | references/gate-fallback.md |
| 設計輸入框 / 表單 / 搜尋框 / CLI 輸入、鍵盤自動校正破壞輸入、密碼或 secret 欄位、驗證時機選擇 | references/input-mechanism.md |
| 撰寫錯誤訊息、設計重試機制、使用者卡在錯誤迴圈、錯誤畫面的行動過重（重載 / 重裝）、部分功能不可用的降級呈現 | references/error-recovery.md |
| 選擇導航模式（stack / tab / drawer）、go vs push 的選擇、back 行為不符預期、hash SPA 的頁面辨識、deep link 設計 | references/navigation-patterns.md |
| 按鈕按了沒反應（含點到的是狀態圖示 / 佔位 handler）、重複提交、切換鈕標籤被讀成現態、選中看不到字、文字被壓成省略號、宣告完成但資料不全、loading 該不該顯示、spinner vs skeleton、通知該用 SnackBar 還是 Dialog | references/interaction-feedback.md |
每份 reference 自包含：不讀 SKILL.md 與其他 reference 也能獨立套用。
跨維度快速自檢
任何 UX / UI 變更提交前的最小檢查（細項在各 reference 內）：
- [ ] 新增或修改的畫面：每個狀態都有至少一條退出路徑？
- [ ] 涉及 gate（認證 / 網路 / 權限）：失敗與不確定路徑都有設計？
- [ ] 涉及輸入框：keyboard type 與 IME policy 是明確決策而非預設值？secret 類欄位過了 IME 安全清單？
- [ ] 涉及非同步操作：按鈕有 loading + disabled + 恢復？結果有通知？
- [ ] 涉及錯誤畫面：除了重試還有第二條路（返回 / 替代方案）？
- [ ] 涉及導航：go / push 的選擇對照過「按 back 期望回哪裡」？
- [ ] 通知形式對照過「是否需要使用者操作 × 干擾程度」二軸？
- [ ] 畫面查詢的對象有獨立生命週期（service worker / 遠端服務）：initializing 與離線分開建模？
- [ ] 批次 / 遍歷操作的完成宣告有窮盡證據？
- [ ] 跨 context 的結果通知有端對端驗證？
- [ ] 覆蓋 / 清空既有資料的操作：有後果確認 + 確認機制故障時的安全預設？
- [ ] 切換元件標籤是動作語意（或已拆成狀態顯示 + 動作按鈕）？
- [ ] 非互動指示與按鈕形態可區分、選中態對比成對設計？
- [ ] 關鍵回饋文字有版面保障（窄幕驗收）？
- [ ] 無佔位 handler（dev toast / log-only）殘留？
Directory Index
ux-design-evaluation/
├── SKILL.md # 本檔：支柱 + 評估流程 + 觸發路由
└── references/
├── screen-state-matrix.md # 畫面狀態矩陣：四欄定義、填寫、BDD 展開、路由可達性、happy-path 反模式
├── gate-fallback.md # Gate 分類、成功/失敗/不確定必答問題、biometric/network/permission、dev vs 真機差異
├── input-mechanism.md # 輸入機制四維決策、表單/搜尋/CLI 場景、IME 安全清單
├── error-recovery.md # 錯誤訊息兩職責、retry 策略、error loop 逃生口、degraded mode
├── navigation-patterns.md # 導航模式分類、go/push/pushReplacement 語意、平台慣例差異、deep link
└── interaction-feedback.md # 回饋三層模型、時間門檻、按鈕狀態、spinner vs skeleton、通知形式選擇
Last Updated: 2026-07-17 Version: 1.4.0 — 三輪 agent 審查（compliance / cadence 冷讀對齊 / self-application steelman outbound）修正：宣告層與內容層對齊（description / Triggers / 路由表症狀欄補 v1.2-1.3 新增檢查的入口、「不涵蓋」聲明修正為視覺風格 — WCAG 對比屬檢查範圍、元件語意段主標去半套）；steelman 修正（WCAG AA 分字級 4.5:1 / 3:1、觸控底線標派系 44pt HIG / 48dp Material、選中態補主題成對機制條件、溢出手段補捲軸指示、toggle 消歧補動詞標籤選項、完成證據補 API cursor + 全量場景邊界、debounce 慣例值去門檻化、跨平台適配補系統行為 / 視覺風格判準、navigation 補參考來源）；快速自檢 3-in-1 拆分、佔位掃描補操作提示 Version: 1.3.0 — 元件語意與版面檢查加第六項「sizing 套件不驗證空間分配」（換算工具在常數層、空間分配在 layout 協商層，兩層獨立；版面擠壓先分換算錯 vs 分配錯、引入套件時記錄它不保證的層）；檢查標題去計數化（五個檢查 → 元件語意與版面檢查）；檢查清單同步 Version: 1.2.0 — 從一次 mobile app 驗收的六個實際發現補「元件語意與版面」檢查層（互動回饋 reference 加五項：切換元件標籤的現態 / 動作歧義、非互動指示與動作按鈕同形、選中態底色文字色成對設計、水平溢出捲動 affordance、關鍵回饋文字版面保障；反模式表加四行含佔位 handler 掃描）；快速自檢同步擴充 Version: 1.1.0 — 從一個 Chrome extension 專案的實際事故補 web / 多 context 維度（原案例庫全為 mobile app、系統性缺這一面）：狀態矩陣加 initializing 狀態（查詢對象獨立生命週期）、互動回饋加結果通知鏈路前提與完成宣告窮盡證據、gate 加破壞性操作確認與 fail-safe 預設、錯誤恢復加行動層級對位、導航加 hash SPA 路由辨識；跨維度快速自檢同步擴充 Version: 1.0.0 — 從單一模組的簡略版（ux-interaction-feedback：按鈕級 + 畫面級回饋）擴充為全維度 UX 設計評估 skill：新增畫面狀態矩陣、gate fallback、輸入機制、錯誤恢復、導航模式五份 reference，互動回饋 reference 併入通知模式選擇與延遲分布判讀；建立四支柱與事前 / 事後兩條評估流程