Communitygithub.com

ali-kk/uxlaws

30 個以證據為基礎的 UX 原則,化身為 AI 代理技能 — 包含機制、應用方法、常見陷阱與實際案例。

uxlaws 是什麼?

此技能為開發者與 AI 代理提供一套 30 個 UX 原則的完整工具包,每個原則均源自感知與認知研究,並以可操作的決策指南呈現。技能涵蓋感知與視覺分組(Gestalt)、記憶與注意力、決策制定、互動與效能,以及期望與心智模型五大範疇。使用者可透過「症狀導向檢索」快速找到對應原則,並獲得完整條目(含機制、應用指南、陷阱與實際案例)以供參考。支援 Claude Code、Cursor、Codex 等主要 AI 代理平台,其結構化索引與即用型組合模式能有效輔助 UI 設計診斷、決策論證與衝突平衡。此工具將 UX 原則從「風格偏好」提升為「可審計的設計決策」,特別適合用於新介面設計、既有畫面問題診斷,或為設計選擇提供理性支撐。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add ali-kk/uxlaws

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

法則 UX

一個包含 30 條原則的實用工具包,闡述人們如何觀看、記憶、決定與行動 — 每一條都轉化為真實介面中可做出的決策。這些不是風格偏好,而是源自感知與認知研究,並跨越平台、時代與視覺趨勢而成立。

使用此技能來設計新 UI、診斷既有畫面為何「感覺不對」,或為設計決策提供理由,而非僅憑喜好。

如何執行 UX 檢視

  1. 命名症狀。 「按鈕太多」、「感覺遲緩」、「使用者放棄表單」、「沒人注意到 CTA」。症狀可對應到原則 — 下方索引即依此組織。
  2. 提取 1–3 個相關原則,並在 reference/laws.md 讀取完整條目。閱讀機制與陷阱,而非僅看定義 — 那才是實用細節所在。
  3. 提出具體的畫面變更,並引用原則名稱使推理可被審計。不要只說「增加對比」— 而是:「Von Restorff Effect:讓主要動作成為唯一有填充的按鈕,使其不再與周圍三個 ghost 按鈕競爭。」
  4. 檢查衝突。 原則之間會相互拉扯。更多留白(Prägnanz)vs. 更多可見選項(可發現性)。簡潔(Occam)有其下限(Tesler)。審慎解決,不可盲目套用單一法則。
  5. 在攸關成敗時請以使用者驗證。 這些原則能良好預測行為,但無法取代測試 — 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。

相關技能