法則 UX
一個包含 30 條原則的實用工具包,闡述人們如何觀看、記憶、決定與行動 — 每一條都轉化為真實介面中可做出的決策。這些不是風格偏好,而是源自感知與認知研究,並跨越平台、時代與視覺趨勢而成立。
使用此技能來設計新 UI、診斷既有畫面為何「感覺不對」,或為設計決策提供理由,而非僅憑喜好。
如何執行 UX 檢視
- 命名症狀。 「按鈕太多」、「感覺遲緩」、「使用者放棄表單」、「沒人注意到 CTA」。症狀可對應到原則 — 下方索引即依此組織。
- 提取 1–3 個相關原則,並在
reference/laws.md讀取完整條目。閱讀機制與陷阱,而非僅看定義 — 那才是實用細節所在。 - 提出具體的畫面變更,並引用原則名稱使推理可被審計。不要只說「增加對比」— 而是:「Von Restorff Effect:讓主要動作成為唯一有填充的按鈕,使其不再與周圍三個 ghost 按鈕競爭。」
- 檢查衝突。 原則之間會相互拉扯。更多留白(Prägnanz)vs. 更多可見選項(可發現性)。簡潔(Occam)有其下限(Tesler)。審慎解決,不可盲目套用單一法則。
- 在攸關成敗時請以使用者驗證。 這些原則能良好預測行為,但無法取代測試 — Aesthetic-Usability Effect 特別提醒:好看的設計可能隱藏有問題的任務流程。
30 條原則,依其管轄範疇分類
感知與視覺分組(Gestalt) — 眼睛在任何人閱讀文字之前如何組織畫面。
- 接近法則 · 共同區域法則 · 相似法則 · 均勻連結法則 · Prägnanz 法則 · Von Restorff 效應 · 選擇性注意 · 美學-可用性效應
記憶與注意力 — 使用者在操作 UI 時能記在腦中的事物。
- Miller 法則 · 工作記憶 · 組塊化 · 序列位置效應 · 認知負荷 · Zeigarnik 效應 · 峰終法則
決策制定 — 選擇如何被做出,及在哪裡卡關。
- Hick 法則 · 選擇過載 · 認知偏誤 · Occam 剃刀 · 帕累托法則
互動與效能 — 速度、努力、動態、動量。
- Fitts 法則 · Doherty 門檻 · 心流 · 目標梯度效應 · Parkinson 法則
期望與心智模型 — 使用者在抵達前已假設的事物。
- Jakob 法則 · 心智模型 · 活躍使用者悖論 · Postel 法則 · Tesler 法則
索引 — 在…時使用
| 原則 | 在…時使用 |
|---|---|
| 美學-可用性效應 | 你需要知道為何較美的設計被測試為「較易用」— 以及為何這是陷阱。 |
| 選擇過載 | 太多選項讓人凍結、做出更差決定或離開。 |
| 組塊化 | 密集內容或長字串需要分組才能掃讀。 |
| 認知偏誤 | 決策偏離「理性」— 框架、預設值、定錨、確認偏誤。 |
| 認知負荷 | 介面要求大腦一次記住或處理過多資訊。 |
| Doherty 門檻 | 任何事物感覺慢;回應超過約 400ms;需要載入狀態。 |
| Fitts 法則 | 設計按鈕、連結與觸控目標的大小與位置。 |
| 心流 | 讓使用者保持沉浸;將挑戰與技能匹配;消除摩擦。 |
| 目標梯度效應 | 激勵完成;接近終點時進度加速。 |
| Hick 法則 | 決策時間隨選擇數量與複雜度暴增。 |
| Jakob 法則 | 使用者期望你的 UI 行為與他們所知的其他 UI 相同。 |
| 共同區域法則 | 使用邊框、卡片、背景、容器進行分組。 |
| 接近法則 | 僅靠間距分組 — 靠近的事物被視為相關。 |
| Prägnanz 法則 | 降低視覺複雜度;眼睛偏好最簡單的讀取方式。 |
| 相似法則 | 相似外觀暗示相似功能(連結 vs. 純文字)。 |
| 均勻連結法則 | 用線條、框架、共享容器連結相關項目。 |
| 心智模型 | 匹配使用者對事物運作方式的既有信念。 |
| Miller 法則 | 工作記憶容量小(約 7±2 個組塊);進行組塊化 — 但不過度限制。 |
| Occam 剃刀 | 移除每個不值得存在的元素。 |
| 活躍使用者悖論 | 人們不會閱讀文件;在情境中、行內、即時教導。 |
| 帕累托法則 | 將精力集中在驅動約 80% 價值的約 20% 功能上。 |
| Parkinson 法則 | 任務會膨脹以填滿可用時間;縮短步驟、自動填寫、設定期望。 |
| 峰終法則 | 刻意設計最強烈的時刻與結尾。 |
| Postel 法則 | 寬容接受混亂輸入;發出乾淨、可預測的輸出。 |
| 選擇性注意 | 人們會忽略事物;避免橫幅盲視與變更盲視。 |
| 序列位置效應 | 第一個與最後一個項目記憶最深刻;將關鍵動作放在兩端。 |
| Tesler 法則 | 某些複雜度無法簡化 — 讓系統承擔它,而非使用者。 |
| Von Restorff 效應 | 讓唯一重要的事物明顯有別(但不要偽裝成廣告)。 |
| 工作記憶 | 支持辨識勝於回憶;跨畫面攜帶狀態。 |
| Zeigarnik 效應 | 未完成的任務會吸引注意力;使用進度提示推動完成。 |
即用型組合
- 清理雜亂畫面 → Occam 剃刀 + 接近法則 + Miller 法則。
- 消除遲緩感流程 → Doherty 門檻 + 目標梯度效應 + 樂觀 UI。
- 修正令人困惑的新功能 → Jakob 法則 + 心智模型 + 活躍使用者悖論。
- 挽救被放棄的表單 → Hick 法則 + Parkinson 法則 + Postel 法則 + 進度提示(Zeigarnik / 目標梯度)。
- 強化登陸頁面 → Von Restorff 效應 + 選擇性注意 + 序列位置效應 + 峰終法則。
完整條目 — 機制、如何應用、陷阱與實際案例 — 均收錄於 reference/laws.md。