markhougaard/ux-laws

UX 法則 — 索引與協議

此檔案負責選擇模式、從 30 條法則中選出適用的法則，並定義它們如何一起使用以及如何回報。每條法則都位於 references/ 目錄下的獨立檔案中，命名方式如下表所示（fitts-law → references/fitts-law.md）。只開啟你選擇的那些檔案。

如果使用者提及一條法則（例如「根據 Postel 法則審查這個表單」），則只開啟該參考檔案，並按照使用者要求的模式使用。審查流程仍遵循此處的第 5 節。

0. 檔案與環境

此技能適用於任何能夠讀取檔案的代理。它不依賴於特定的工具。

• 路徑：在此技能的所有檔案（包括參考檔案）中，路徑都是相對於包含此 SKILL.md 的目錄。例如 references/fitts-law.md 永遠指 <技能目錄>/references/fitts-law.md，即使它出現在另一個參考檔案中也是如此。
• 如果你無法開啟參考檔案（例如，此文字被貼到提示中，但缺少其資料夾），請告知並請求你需要的法則檔案。不要憑記憶執行檢查：檢查 ID、嚴重性和證據類型僅在那些檔案中定義。
• 證據取決於你能檢查的內容。 如果你無法檢視圖片，則截圖和模擬圖對你來說就不算 static 證據；請審查你擁有的文字或程式碼，並在範圍行中說明。如果你無法執行成品，則除非使用者提供錄影或測量數據，否則 interactive 和 runtime 證據超出範圍。

1. 選擇模式

模式	使用時機	產出內容
建議 (Advise)	只有目標、簡報、問題陳述、路線圖項目或早期概念存在時。	一份簡短的引導簡報：此處最重要的法則、它們預測的風險、團隊必須回答的問題，以及現在要做的決策。
建構 (Build)	正在進行中的設計或實作，需要參考資料時。	針對當前元件或畫面的目標指導，來自相關法則的「模式 2」，並在可能時包含具體數值。
審查 (Review)	即將提交的完成設計、原型、截圖集、網址或程式碼 diff。	一份嚴格的問題報告，包含嚴重性、證據、修正方式和裁決。

如果請求未說明模式，請從輸入內容推斷：如果是目標 → 建議；進行中的工作 → 建構；完成的成品 → 審查。如果仍不確定，則提出一個問題。

2. 選擇法則

不要為每個任務都開啟全部 30 條法則。根據情境選擇，然後再加入任何觸發條件與你所見內容相符的法則。

任何 UI 審查的基準（一律執行）： fitts-law、jakobs-law、cognitive-load、law-of-proximity、law-of-similarity、selective-attention、cognitive-bias。當成品是可互動的時，再加入 doherty-threshold。

依情境分類：

情境	開啟的法則
表單、資料輸入、註冊	postels-law、working-memory、chunking、law-of-proximity、parkinsons-law、goal-gradient-effect
導航、選單、資訊架構	hicks-law、serial-position-effect、mental-model、jakobs-law、chunking、pareto-principle
儀表板、資料密集與專家工具	cognitive-load、chunking、law-of-common-region、law-of-pragnanz、flow、pareto-principle
資料視覺化與圖表	law-of-pragnanz、law-of-uniform-connectedness、law-of-similarity、von-restorff-effect
入門引導、首次使用、幫助	paradox-of-the-active-user、goal-gradient-effect、zeigarnik-effect、cognitive-load、mental-model
定價、方案、目錄、結帳	choice-overload、hicks-law、cognitive-bias、von-restorff-effect、serial-position-effect、peak-end-rule
通知、提醒、狀態	selective-attention、von-restorff-effect、flow、zeigarnik-effect
行動裝置與觸控	fitts-law、law-of-proximity、serial-position-effect、doherty-threshold
效能、載入、非同步工作	doherty-threshold、goal-gradient-effect、peak-end-rule、flow
重新設計與遷移	jakobs-law、mental-model、serial-position-effect、aesthetic-usability-effect
自動化、AI 與智慧功能	teslers-law、mental-model、cognitive-bias、doherty-threshold
範圍、優先級、路線圖	pareto-principle、occams-razor、teslers-law、hicks-law
視覺設計與設計系統工作	aesthetic-usability-effect、law-of-similarity、law-of-proximity、law-of-common-region、law-of-pragnanz、von-restorff-effect
錯誤、失敗與結束	peak-end-rule、postels-law、selective-attention、mental-model

僅在發現的問題或疑問實際觸及某個法則時，才跟隨該法則的相關法則。

3. 建議協議

1. 用兩到三行重新陳述目標、使用者和背景。如果使用者或背景未知，請說明——這是第一個風險。
2. 從上表中選擇 3–6 條法則。超過六條會稀釋建議的價值。
3. 針對每條法則，指出它為這個專案預測的一兩個風險，以及團隊必須回答的問題。使用該法則的「模式 1」作為來源，但使其具體化。
4. 列出現在要做的決策（預算、預設值、慣例、強調規則、衡量標準）以及應由誰負責。
5. 標記需要深思熟慮才能解決的法則之間的衝突（參見第 6 節）。

保持在大約一頁的篇幅。目標是引導方向，而非預先設計。

4. 建構協議

1. 識別正在處理的元件、畫面或流程。
2. 開啟相符的法則，並使用其「模式 2」列表作為參考，引用具體數值（目標大小、時間、對比度、WCAG 標準）。
3. 當指引發生衝突時，說明情況並針對此案例建議一種解決方案。
4. 在建構過程中不要執行完整的審查；僅在可能出現阻礙者等級的問題時才提及。

5. 審查協議（嚴格）

審查的目的是在提交前阻止問題。嚴格規則：

• 沒有證據視同未通過。 僅當成品中存在正面證據時，檢查才算通過。永遠不要假設你看不到的狀態、大小、時間或行為。
• 無法驗證 = 未驗證，而非通過。 說明你需要什麼（錯誤狀態、測量值、真實數據、設備、程式碼）。
• 範圍是明確說明的，而非隱含的。 裁決僅涵蓋你獲得的證據。需要你未獲得的某種證據類型的檢查會被列為超出範圍，因此截圖審查不能視為全面通過。
• 不要軟化。 沒有讚美性的填充內容，沒有「整體看起來很棒」，不要因為截止日期或已投入的精力而降低嚴重性。
• 要具體。 每個發現都需指明位置（畫面、元件、元素或檔案:行號）、你觀察到的內容以及具體的修正方式。
• 一個問題，一個發現。 如果多條法則標記同一個問題，則只報告一次，列出所有檢查 ID，並使用最高的嚴重性。
• 明確報告通過的法則。 列出哪些已應用但未發現問題的法則，以便顯示覆蓋範圍。

步驟：

1. 盤點你獲得的內容（畫面、狀態、斷點、程式碼）以及缺少的內容，並設定證據範圍：你擁有下列哪些證據類型。
2. 選擇基準法則加上情境法則。
3. 執行每條所選法則「模式 3」表格中的每個檢查。將每個檢查歸入以下類別之一：
   • 已檢查 — 通過或產生了發現；
   • 未驗證 — 其證據類型在範圍內，但缺少所需的狀態、元素或測量值（例如 static 範圍，但缺少錯誤狀態畫面）；
   • 超出範圍 — 其證據類型均不在範圍內；
   • 不適用 — 成品中沒有任何與該檢查相關的內容（例如，在僅滑鼠操作的桌面工具上檢查 FIT-1）。用幾句話說明原因。
4. 合併重複項，分配嚴重性，撰寫修正方式。
5. 給出裁決，並附上其範圍。

證據類型

每個「模式 3」檢查都有一個證據欄，列出了可以解決該檢查的輸入類型。當列出多於一種時，任何一種都足夠。

類型	內容	典型輸入
static	在相關畫面與狀態的靜態圖像中可以看到的內容。	截圖、靜態模擬圖、包含尺寸的設計檔案、流程圖板
interactive	僅在操作實物時才會顯示的內容：鍵盤、焦點、轉場效果、實際體驗的時序、操作後的結果。	可點擊的原型、正在執行的建置版本、網址、畫面錄影
code	原始碼或標記中的內容：語意、ARIA、autocomplete、點擊區域、令牌，以及原始碼明確定義的行為（錯誤處理程式的功能、輸入是否保留、焦點移至何處）。	diff、元件原始碼、渲染後的 DOM
runtime	在實際硬體、網路和數據上的測量值。	效能追蹤、真實使用者監控或實驗室測試數據
context	成品外部的事實：使用數據、研究、決策記錄、業務規則。	分析數據、研究結果、產品需求文件或架構決策記錄、團隊陳述

只有當你實際擁有某種證據類型時，才將其計入範圍。被告知程式碼存在並不代表 code 在範圍內。

嚴重性

嚴重性	意義
阻礙者	妨礙或誤導核心任務；有數據遺失、財務、安全或隱私危害的風險；不符合 WCAG 2.2 AA 標準；或構成欺騙性模式。必須在提交前修正。
重大	明顯的摩擦、容易出錯的設計，或與慣例或設計系統明顯不一致。在提交前修正，或由指定負責人明確接受並記錄後續追蹤。
次要	潤飾和一致性。下次處理該區域時修正即可。

裁決

應用第一個符合的規則：

1. 有任何阻礙者 → 請勿提交。
2. 有任何範圍內的阻礙者檢查是未驗證 → 阻擋，待補證據。 說明缺少的狀態或測量值，團隊本可以在他們已提供的證據中補齊。
3. 有任何重大 → 仅在每个重大問題都已被修正或由指定负责人接受後，才可提交。
4. 只有次要或無 → 通過。

每個裁決都帶有其範圍，例如通過（static 範圍）。如果有任何阻礙者檢查處於超出範圍，請在裁決行中列出它們以及每個檢查所需的證據類型，例如 超出範圍：JAK-1 (interactive), SA-2 (interactive), DOH-1 (interactive)。只有當所選法則中沒有阻礙者檢查處於超出範圍或未驗證時，裁決才可以是無條件的（僅「通過」）。超出範圍的檢查永遠不會改變裁決。它們告訴團隊還有什麼尚未審查，以及在發佈前是否需要使用更多證據進行第二次審查。

報告範本

## UX 法則審查 — <成品名稱>

審查項目：<審查的內容：畫面、狀態、斷點、檔案>
證據範圍：<static | interactive | code | runtime | context — 實際提供的那些>
未提供：<缺少的狀態或證據>
應用法則：<代碼>
裁決：<請勿提交 | 阻擋待補證據 | 在重大問題被接受後提交 | 通過>（<範圍> 範圍）
         超出範圍：<阻礙者檢查 ID，附上每個檢查所需的證據類型，若無則填「無」>

### 阻礙者
- [阻礙者] FIT-1, JAK-1 · <位置> — <觀察> → <修正>

### 重大問題
- [重大] CL-2 · <位置> — <觀察> → <修正>

### 次要問題
- [次要] SIM-6 · <位置> — <觀察> → <修正>

### 未驗證（在範圍內，缺少證據）
- POS-2 · <無法檢查的內容> — 需要 <特定的狀態或測量值>

### 超出範圍
- interactive: JAK-1, SA-2, DOH-1, …
- code: CH-3, PKL-3, …

### 不適用
- FIT-1 — <原因>

### 已應用且未發現問題
<代碼>

6. 常見衝突

衝突	預設解決方案
Hick / Occam（減少選項） vs Pareto 長尾與專家需求	透過漸進揭露讓關鍵但罕見的功能可被找到；永遠不要僅因使用率低而移除它們。
Occam（移除） vs Tesler（不可簡化的複雜性）	移除附帶的複雜性；將固有的複雜性轉移到系統，並提供可見性和復原功能。
Jakob（慣例） vs 差異化	在問題上創新，而不是在核心控制項上創新。偏離慣例需要說明並經過測試的好處。
Von Restorff（強調） vs 相似性（一致性）	每個視圖一個強調的元素；其他所有內容保持一致。
Fitts（大尺寸、方便的目標） vs 意外觸發	將破壞性操作分開；為重大後果的操作添加復原或確認。
心流（不打斷） vs 安全確認	僅打斷那些有重大後果、不可逆轉的操作。
認知負荷（顯示更少） vs 工作記憶（顯示上下文）	顯示當前步驟所需的上下文；隱藏其餘內容。
Postel（寬容接受） vs 正確性	格式寬容，意義嚴格；對於有歧義的重大值進行確認。
目標漸進效應、Zeigarnik 效應、序列位置效應、Von Restorff 效應作為槓桿 vs 使用者興趣	僅用於使用者期望的結果；請參閱 cognitive-bias。

7. 所有法則

感知與注意力

法則	代碼	使用時機
aesthetic-usability-effect	AUE	視覺潤飾、第一印象、品牌表達、易用性測試解讀，以及產品外觀與功能之間的差距
law-of-common-region	CR	卡片、面板、區塊、邊框、背景填充、表格列、表單群組以及任何用於表示項目歸屬於同一組的容器
law-of-proximity	PRX	間距、佈局密度、標籤與欄位的關聯、控制項與內容的分組，以及間距尺度
law-of-pragnanz	PRG	圖示、插圖、資料視覺化、佈局輪廓、標誌以及任何需要一眼就能理解的視覺元素
selective-attention	SA	通知、提醒、狀態變更、橫幅、入門提示、系統訊息，以及放置使用者不可錯過的資訊
law-of-similarity	SIM	視覺一致性、連結和按鈕樣式、元件變體、狀態顏色、圖示系列和設計系統使用
[

…

[已截斷以便翻譯]