laws-of-ux

概述

本技能指导 AI 使用 UX 的 21 条定律来评审和构建用户界面。它有两个用途：

1. 评审模式：分析现有 UI 代码中违反 UX 原则的情况，并提出改进建议。
2. 指导模式：在构建新功能时应用 UX 定律，从一开始就确保界面易用且直观。

这些定律根据所涉及的用户体验方面分为三类：

• 认知与决策 — 用户如何思考和处理信息
• 视觉与感知 — 用户如何观察和理解视觉布局
• 行为与交互 — 用户如何操作界面并对界面做出响应

评审代码时，请先查看评审清单，确定最相关的定律，然后参阅详细章节，了解指导原则和示例。

关键词：UX 评审、UI 评审、可用性、UX 定律、UX 最佳实践、用户体验、UX 审计、UI 模式

评审清单

使用此表快速检查。每项检查都对应一条或多条定律，并说明代码中需要关注的内容。

检查项	定律	关注内容
顶层导航项不超过 7 个	Miller 定律	nav、菜单、侧边栏——统计直接子项
每个步骤的选项尽可能少	Hick 定律	<select> 选项数量、单选按钮组、按钮数组
可点击目标至少为 44x44px	Fitts 定律	按钮/链接的 min-height、min-width、padding
重要操作足够醒目且易于触达	Fitts 定律	CTA 的尺寸及其在布局中的位置
在 400ms 内显示加载反馈	Doherty 阈值	加载动画、骨架屏、disabled 状态
表单接受灵活的输入格式	Postel 定律	输入验证、格式掩码、格式要求
一个主要 CTA 在视觉上足够醒目	Von Restorff 效应	按钮变体类、颜色强调
相关项在视觉上分组	接近原则、共同区域原则	间距、边框、背景分组
多步骤流程显示进度指示器	Zeigarnik 效应、目标梯度效应	步骤指示器、进度条
列表的开头和结尾放置关键操作	序列位置效应	导航顺序、列表结构
界面遵循平台惯例	Jakob 定律	标准模式与自定义组件的对比
UI 视觉精致且风格一致	美观性-可用性效应	设计令牌的使用、样式一致性
由系统而非用户处理复杂性	Tesler 定律	智能默认值、自动检测、预填值
优先展示最常用的功能	Pareto 原则	布局层级、功能突出程度
表单和流程的范围恰当	Parkinson 定律	步骤数量、字段数量、时间限制
最后的交互留下积极印象	峰终定律	成功状态、确认页面、错误恢复
视觉层级简洁清晰	Prägnanz 定律	布局清晰度、视觉干扰最少化
一致的视觉样式表示关联性	相似性定律	相关元素使用一致的类
关联元素使用相同的视觉指示	统一连接性	线条、边框、共享背景
选择最简单的解释	奥卡姆剃刀	UI 复杂度与任务要求的匹配度
多步骤任务显示进度并保持推进动力	目标梯度效应	进度条、步骤完成反馈

---

认知与决策定律

这些定律涉及用户如何处理信息、做出决策以及管理认知负担。

米勒定律

定义：普通人的工作记忆一次大约能容纳 7（正负 2）项内容。

关键要点：将内容分成每组 5-9 项。需要容纳更多内容时，使用层级和分组来减轻认知负担。

在代码中应关注：

• 统计导航菜单、标签栏和侧边栏中的直接子项数量
• 统计一次可见（无需滚动）的表单字段数量
• 统计下拉选择框和单选按钮组中的选项数量
• 检查长列表是否按逻辑分组

示例：

✅ 好

<nav class="main-nav">
  <a href="/dashboard">Dashboard</a>
  <a href="/projects">Projects</a>
  <a href="/team">Team</a>
  <a href="/reports">Reports</a>
  <a href="/settings">Settings</a>
</nav>

🚫 差

<nav class="main-nav">
  <a href="/dashboard">Dashboard</a>
  <a href="/projects">Projects</a>
  <a href="/team">Team</a>
  <a href="/reports">Reports</a>
  <a href="/analytics">Analytics</a>
  <a href="/settings">Settings</a>
  <a href="/billing">Billing</a>
  <a href="/integrations">Integrations</a>
  <a href="/support">Support</a>
  <a href="/docs">Documentation</a>
  <a href="/profile">Profile</a>
  <a href="/admin">Admin</a>
</nav>

12 个平铺的导航项会让工作记忆不堪重负。将它们归入下拉菜单或进行整合。

审查标记：

• 标记顶层项超过 7 个的导航
• 标记未分组且同时可见字段超过 7 个的表单
• 标记包含超过 10 个未分组选项的 <select> 元素（建议使用 <optgroup>）

---

希克定律

定义：做出决定所需的时间会随着可选项的数量和复杂程度增加。

关键要点：减少任一时刻呈现的选项数量。将复杂决策拆分成更小的连续步骤。

在代码中应关注：

• 统计同时可见的操作按钮数量
• 检查复杂表单是否使用多步向导，而非冗长的单页表单
• 查找渐进式披露模式（仅在需要时显示更多选项）
• 检查是否突出显示默认选项或推荐选项

示例：

✅ 好

<div class="pricing-options">
  <div class="pricing-card">
    <h3>Basic</h3>
    <button class="btn btn--outline">Select</button>
  </div>
  <div class="pricing-card pricing-card--recommended">
    <span class="badge">Recommended</span>
    <h3>Pro</h3>
    <button class="btn btn--primary">Select</button>
  </div>
  <div class="pricing-card">
    <h3>Enterprise</h3>
    <button class="btn btn--outline">Contact Us</button>
  </div>
</div>

🚫 差

<div class="pricing-options">
  <div class="pricing-card"><h3>Free</h3><button class="btn">Select</button></div>
  <div class="pricing-card"><h3>Starter</h3><button class="btn">Select</button></div>
  <div class="pricing-card"><h3>Basic</h3><button class="btn">Select</button></div>
  <div class="pricing-card"><h3>Pro</h3><button class="btn">Select</button></div>
  <div class="pricing-card"><h3>Business</h3><button class="btn">Select</button></div>
  <div class="pricing-card"><h3>Enterprise</h3><button class="btn">Select</button></div>
  <div class="pricing-card"><h3>Custom</h3><button class="btn">Select</button></div>
</div>

七个视觉上完全相同的选项，且没有推荐选项。减少选项，并突出显示最佳默认选项。

审查标记：

• 标记单个视图中超过 4-5 个权重相同的操作按钮
• 标记一次呈现所有步骤、而非逐步呈现的多步流程
• 标记未突出显示默认选项或推荐选项的选项集

---

特斯勒定律（复杂性守恒定律）

定义：每个应用程序都存在固有的复杂性，无法移除或隐藏。它必须由系统或用户来处理。

关键要点：将复杂性吸收到系统中，让用户无需处理。使用智能默认值、自动检测和预填值。

在代码中应关注：

• 检查表单字段是否设置了智能默认值
• 查找自动检测功能（例如时区、区域设置、地址自动补全）
• 检查系统是否会预填已知的值
• 查找能够简化用户操作流程的条件逻辑

示例：

✅ 好

<form>
  <label for="phone">Phone Number</label>
  <input type="tel" id="phone" placeholder="(555) 123-4567"
         data-controller="phone-format"
         data-action="input->phone-format#format">
  
</form>

🚫 差

<form>
  <label for="phone">Phone Number (format: +1-XXX-XXX-XXXX)</label>
  <input type="text" id="phone" pattern="\+1-\d{3}-\d{3}-\d{4}">
  <span class="help-text">Must include country code and dashes</span>
</form>

格式设置的负担落在了用户身上，而不是由系统处理。

审查标记：

• 标记要求用户按特定格式填写、但系统本可自动格式化的表单
• 标记询问系统已掌握信息的字段（例如，用户已登录时仍要求重新输入电子邮件）
• 标记存在合理默认值、但未提供智能默认值的字段

---

奥卡姆剃刀

定义：在能够解释相同观察结果的多个竞争假设中，应选择假设最少的那个。

关键要点：优先采用能完成任务的最简单界面。移除不必要的元素、步骤和视觉复杂性。

在代码中应关注：

• 检查未使用或多余的界面元素（没有实际用途的装饰元素）
• 查找本可采用简单结构、却使用了过于复杂的组件层级的情况
• 检查不同样式和视觉效果的数量是否合理

示例：

✅ 好

<div class="empty-state">
  <p>No projects yet.</p>
  <a href="/projects/new" class="btn btn--primary">Create your first project</a>
</div>

🚫 差

<div class="empty-state">
  <img src="/images/empty-illustration.svg" alt="">
  <h2>Welcome to Your Dashboard!</h2>
  <p>It looks like you haven't created any projects yet. Projects help you organize your work and collaborate with your team members efficiently.</p>
  <p>Getting started is easy — just click the button below to create your first project and begin your journey!</p>
  <a href="/projects/new" class="btn btn--primary btn--large">Create Project</a>
  <a href="/help/getting-started" class="btn btn--outline">Learn More</a>
  <p class="text-muted">You can also import projects from other tools.</p>
</div>

简单的空状态却包含过多内容。用户的目标很明确——帮助他们迅速采取行动。

审查标记：

• 标记多个相互争夺注意力、但一个就足够的行动号召
• 标记以行动为导向的场景中冗长的文案
• 标记本可简化的深层嵌套组件树

---

帕金森定律

定义：任何任务都会膨胀，直到耗尽所有可用时间。

关键要点：通过设置合理的边界来限定任务范围。将表单字段精简到必需项，并把大型任务拆分为重点明确的小步骤。

代码中需要检查的内容：

• 统计表单字段数量——当前步骤是否真的需要所有字段？
• 检查是否有可推迟到后续步骤的可选字段
• 查看多步骤流程是否为每个步骤设定了恰当的范围

审查标记：

• 如果表单字段超过 5-7 个，而更少的字段就能实现目标，则标记
• 如果关键路径表单中包含“可选”字段，则标记（将其移至次要步骤）
• 如果单页表单适合改为分步流程，则标记

---

帕累托原则（80/20 法则）

定义：大约 80% 的效果来自 20% 的原因。

关键要点：找出用户最常依赖的 20% 功能和操作，并让它们醒目且易于访问。

代码中需要检查的内容：

• 检查最常用的操作是否可以立即访问（而非藏在菜单中）
• 查看布局层级——主要功能应在视觉上更加突出
• 检查不常用的操作是否易于访问，但不会争抢注意力

审查标记：

• 如果主要操作藏在下拉菜单或次级导航中，则标记
• 如果仪表板中所有元素的视觉权重都相同，则标记
• 如果设置或选项将常用控件与不常用控件混排在同一层级，则标记

---

视觉与感知法则

这些法则关注用户如何感知和解读屏幕上的视觉信息。

接近法则

定义：彼此靠近的对象通常会被视为一个组。

关键要点：利用间距传达关联关系。相关项目应彼此靠近；无关项目之间则应留出更多空间。

代码中需要检查的内容：

• 检查 gap、margin 和 padding 的取值——相关项目之间的间距应小于组与组之间的间距
• 查看表单字段是否使用 <fieldset> 或带间距的包装 div 进行分组
• 检查间距令牌是否构建了视觉层级（例如，组内使用 --op-space-small，组间使用 --op-space-large）

示例：

✅ 好

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);  /* Tight spacing within group */
}

.form__section + .form__section {
  margin-top: var(--op-space-x-large);  /* Larger spacing between sections */
}

🚫 差

.form label,
.form input,
.form select,
.form textarea {
  margin-bottom: 16px;  /* Uniform spacing everywhere — no grouping */
}

统一的间距无法传达哪些字段彼此相关。

审查标记：

• 如果布局中存在逻辑分组，但所有项目之间的间距都相同，则标记
• 如果表单字段缺少视觉分组（没有 <fieldset>、分节分隔线或间距变化），则标记
• 如果使用硬编码的间距值而非设计令牌，则标记（参见 optics-context 技能）

---

相似法则

定义：具有相同视觉特征（颜色、形状、大小）的元素会被视为彼此相关并属于同一组。

关键要点：对执行相同功能的元素采用一致的样式。有意采用不同样式，以表明用途不同。

代码中需要检查的内容：

• 检查功能相同的元素是否使用相同的 CSS 类
• 确认导航项、卡片组件和列表项的样式是否一致
• 检查样式上的有意差异是否反映了功能上的真实差异

示例：

✅ 好

<div class="action-bar">
  <button class="btn btn--primary">Save</button>
  <button class="btn btn--outline">Cancel</button>
  <button class="btn btn--danger">Delete</button>
</div>

三种不同的按钮样式传达了三种不同的意图。

🚫 差

<div class="action-bar">
  <button class="btn btn--primary">Save</button>
  <button class="btn btn--primary">Cancel</button>
  <button class="btn btn--primary">Delete</button>
</div>

尽管用途截然不同，所有按钮看起来却都一模一样。

审查标记：

• 如果功能相同的元素样式不同（不一致），则标记
• 如果功能不同的元素样式相同（含糊不清），则标记
• 如果本应与同类元素样式一致的元素使用了单独定制的样式，则标记

---

共同区域法则

定义：位于同一边界（边框、背景或容器）内的元素会被视为一个整体。

要点：使用视觉容器——背景、边框、卡片——将相关内容分组。这样比单靠邻近关系更能强化分组效果。

代码中需要检查的内容：

• 检查是否使用 <fieldset>、卡片、面板或带有可见边界的分区
• 查找用于创建容器区域的 background-color、border 或 border-radius
• 确认分组项目是否共用同一个容器元素

示例：

✅ GOOD

<fieldset class="form__section">
  <legend>Shipping Address</legend>
  <input type="text" placeholder="Street">
  <input type="text" placeholder="City">
  <input type="text" placeholder="Zip">
</fieldset>

<fieldset class="form__section">
  <legend>Billing Address</legend>
  <input type="text" placeholder="Street">
  <input type="text" placeholder="City">
  <input type="text" placeholder="Zip">
</fieldset>

🚫 BAD

<label>Shipping Street</label>
<input type="text">
<label>Shipping City</label>
<input type="text">
<label>Shipping Zip</label>
<input type="text">
<label>Billing Street</label>
<input type="text">
<label>Billing City</label>
<input type="text">
<label>Billing Zip</label>
<input type="text">

字段平铺罗列，未作分组。用户无法快速判断配送信息从哪里结束、账单信息从哪里开始。

审查标记：

• 标记缺少视觉分组的长字段平铺列表
• 标记没有容器边界的不同内容分区
• 标记未使用 <legend> 的 <fieldset>（存在边界，但缺少标签）

---

均匀连接法则

定义：视觉上相连（通过线条、颜色、框架或其他形状）的元素，相比没有连接的元素，会被视为关联更紧密。

要点：使用视觉连接元素——线条、相同颜色、包围框——来表示元素之间的关系。

代码中需要检查的内容：

• 检查步骤指示器中是否有视觉连接元素（步骤之间的线条）
• 查找用于连接相关项目的相同背景色或边框
• 确认时间线、面包屑或向导是否使用连接性视觉元素

示例：

✅ GOOD

.stepper__step {
  display: flex;
  align-items: center;
}

.stepper__connector {
  flex: 1;
  height: 2px;
  background-color: var(--op-color-border);
}

.stepper__step--completed .stepper__connector {
  background-color: var(--op-color-primary-base);
}

审查标记：

• 标记步骤之间缺少视觉连接元素的多步骤向导
• 标记缺少任何共同视觉样式的相关元素
• 标记缺少连接线或箭头的面包屑或时间线组件

---

Prägnanz 法则（简洁法则）

定义：人们倾向于以尽可能简单的形式解读模糊或复杂的图像。

要点：保持布局整洁、简洁。使用清晰的视觉层级和充足的留白，避免不必要的视觉复杂性。

代码中需要检查的内容：

• 检查是否存在过多边框、阴影和装饰元素
• 查找视觉权重相互竞争的布局
• 确认是否有效利用留白，让内容更易于阅读

示例：

✅ GOOD

.card {
  background: var(--op-color-surface-base);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-large);
}

🚫 BAD

.card {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
  border: 2px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  padding: 24px;
  outline: 1px solid rgba(255, 255, 255, 0.5);
}

过度的样式会争夺注意力，并增加视觉干扰。

审查标记：

• 标记装饰效果超过 2 种的元素（阴影 + 边框 + 渐变）
• 标记主要分区之间没有留白的布局
• 标记使用硬编码视觉值而非设计令牌的情况（参见 optics-context 技能）

---

Von Restorff 效应（孤立效应）

定义：当存在多个相似对象时，与其他对象差异最大的那个最容易被记住。

要点：让最重要的元素在视觉上脱颖而出。使用统一的主要 CTA 样式，突出关键操作。

代码中需要检查的内容：

• 检查每个视图或分区中是否只有一个主要操作按钮
• 查找最重要元素的视觉强调（颜色、尺寸、字重）
• 确认次要操作使用了较低调的样式

示例：

✅ GOOD

<div class="dialog__actions">
  <button class="btn btn--outline">Cancel</button>
  <button class="btn btn--primary">Confirm Purchase</button>
</div>

🚫 BAD

<div class="dialog__actions">
  <button class="btn btn--primary">Cancel</button>
  <button class="btn btn--primary">Confirm Purchase</button>
</div>

两个操作的视觉权重相同——用户无法快速识别主要操作。

审查标记：

• 标记多个 btn--primary（或等效）元素争夺注意力的视图
• 标记与周围元素融为一体（缺少视觉区分）的 CTA
• 标记没有明确视觉焦点的页面

---

序列位置效应

定义：用户往往最容易记住一系列项目中的首项和末项。

关键要点：将最重要的项目放在列表、导航和内容序列的开头和结尾。

代码检查要点：

• 检查导航顺序——关键项目应排在首位和末位
• 查看列表和标签页的排序，确认优先级项目的位置
• 检查页脚／页面底部的内容，确认是否包含重要操作

示例：

✅ 好

<nav class="main-nav">
  <a href="/dashboard">Dashboard</a>     
  <a href="/projects">Projects</a>
  <a href="/team">Team</a>
  <a href="/reports">Reports</a>
  <a href="/settings">Settings</a>       
</nav>

审查标记：

• 标记将最不重要的项目放在首位的导航
• 标记缺少关键项目策略性排序的长列表
• 标记只包含模板文本、没有实用操作的页脚

---

行为与交互法则

这些法则探讨用户与界面的交互方式，以及驱动其行为的因素。

菲茨定律

定义：获取目标所需的时间取决于目标的距离和大小。

关键要点：让重要的交互元素更大、更容易触达。增大点击／轻触目标的尺寸，尤其是在触屏设备上。

代码检查要点：

• 检查按钮和链接的尺寸——触控目标至少应为 44x44px
• 检查交互元素是否有足够的内边距
• 检查重要操作的位置——它们应靠近用户当前的注意力／光标所在位置
• 通过媒体查询验证移动设备专属的尺寸设置

示例：

✅ 好

.btn {
  min-height: 44px;
  min-width: 44px;
  padding: var(--op-space-small) var(--op-space-medium);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

🚫 差

.action-link {
  font-size: 12px;
  padding: 2px 4px;
}

.icon-btn {
  width: 20px;
  height: 20px;
}

过小的点击目标在触屏设备上难以轻触，在桌面设备上也很难精准点击。

审查标记：

• 标记小于 44x44px 的交互元素（尤其是在触屏界面中）
• 标记没有内边距的文本链接（仅依靠文字尺寸作为目标区域）
• 标记远离用户可能关注区域的重要操作
• 标记尺寸过小或位于难以触达角落的关闭／取消按钮

---

多尔蒂阈值

定义：当计算机与用户以确保双方都无需等待对方的节奏（<400ms）进行交互时，工作效率会大幅提升。

关键要点：为所有用户操作提供即时的视觉反馈。使用加载状态、乐观更新和骨架屏，让感知响应时间保持在 400ms 以内。

代码检查要点：

• 检查异步操作是否有加载指示器（旋转图标、骨架屏）
• 检查表单提交期间按钮是否处于 disabled 状态
• 检查是否采用乐观 UI 模式（在服务端响应前更新 UI）
• 检查是否使用 Turbo Frame／Stream 进行局部页面更新

示例：

✅ 好

<button type="submit" class="btn btn--primary"
        data-disable-with="Saving..."
        data-controller="submit-button">
  Save Changes
</button>

<div class="card card--skeleton">
  <div class="skeleton-line skeleton-line--title"></div>
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
</div>

🚫 差

<button type="submit" class="btn btn--primary">Save Changes</button>

审查标记：

• 标记未使用 data-disable-with 或等效加载状态的表单提交按钮
• 标记没有骨架屏或旋转图标的异步数据加载
• 标记在局部更新（Turbo Frame）更快时仍跳转到新页面的操作
• 标记状态变化缺少过渡／动画的情况

---

目标梯度效应

定义：越接近目标，越倾向于朝目标前进。

关键要点：显示多步骤任务的进度。随着用户越来越接近完成，应通过醒目的视觉效果展示进度，激励用户完成任务。

代码检查要点：

• 检查多步骤表单是否有进度指示器
• 检查是否显示完成百分比或步骤计数（例如，“第 3 步，共 5 步”）
• 检查引导流程是否提供进度反馈
• 检查是否以视觉方式显示进度（进度条、已完成步骤的勾选标记）

示例：

✅ 好

<div class="stepper">
  <div class="stepper__step stepper__step--completed">
    <span class="stepper__icon">&#10003;</span>
    <span>Account</span>
  </div>
  <div class="stepper__connector stepper__connector--completed"></div>
  <div class="stepper__step stepper__step--active">
    <span class="stepper__icon">2</span>
    <span>Profile</span>
  </div>
  <div class="stepper__connector"></div>
  <div class="stepper__step">
    <span class="stepper__icon">3</span>
    <span>Preferences</span>
  </div>
</div>

🚫 差

<h2>Profile Information</h2>
<form>
  
  <input type="text" placeholder="Name">
  <button type="submit">Next</button>
</form>

审查标记：

• 标记没有进度指示器的多步骤表单或向导
• 标记没有步骤计数或进度条的引导流程
• 标记步骤展示不清晰的结账流程

---

雅各布定律

定义：用户大部分时间都在浏览其他网站。他们希望你的网站与自己熟悉的其他网站保持一致。

核心要点：遵循成熟的 UI 惯例。为导航、表单和常见交互使用标准模式。谨慎创新。

代码审查要点：

• 检查导航是否符合平台惯例（顶部栏或侧边栏，徽标链接到首页）
• 查看是否采用标准表单模式（标签位于输入框上方，提交按钮位于右下角）
• 检查链接是否看起来像链接，按钮是否看起来像按钮
• 确认键盘交互是否符合标准（按 Escape 关闭模态框，按 Tab 导航）

示例：

✅ GOOD

<header class="header">
  <a href="/" class="header__logo">
    <img src="/logo.svg" alt="AppName">
  </a>
  <nav class="header__nav"></nav>
  <div class="header__actions">
    <a href="/account" class="header__avatar"></a>
  </div>
</header>

🚫 BAD

<footer>
  <a href="/">
    <img src="/logo.svg" alt="AppName">
  </a>
  <nav></nav>
</footer>

将主要导航放在页脚中会违背用户预期。

审查标记：

• 标记那些在缺少键盘辅助功能时仍模仿浏览器原生控件的自定义组件（自定义选择框、自定义复选框）
• 标记导航、搜索或用户账户链接位置不符合常规的情况
• 标记样式看起来像普通文本的链接，或样式看起来像链接的按钮（角色混淆）
• 标记无法通过 Escape 键关闭的模态框

---

审美—易用性效应

定义：用户通常会认为，美观的设计也更易于使用。

核心要点：注重视觉细节。设计精良的界面能建立用户信任，提高用户对轻微易用性问题的容忍度，并促进用户参与。

代码审查要点：

• 检查是否一致地使用设计令牌（颜色、间距、字体排版）
• 查看视觉对齐和间距是否一致
• 确认界面是否使用协调统一的配色方案
• 检查微交互（悬停状态、焦点状态、过渡效果）是否注重细节

示例：

✅ GOOD

.btn {
  background-color: var(--op-color-primary-base);
  color: var(--op-color-primary-base-on);
  border-radius: var(--op-radius-medium);
  padding: var(--op-space-small) var(--op-space-medium);
  transition: background-color 150ms ease;
}

.btn:hover {
  background-color: var(--op-color-primary-plus-one);
}

.btn:focus-visible {
  outline: 2px solid var(--op-color-primary-base);
  outline-offset: 2px;
}

🚫 BAD

.btn {
  background: blue;
  color: white;
  padding: 8px 12px;
}
/* No hover state, no focus state, no transitions */

缺少交互状态并使用硬编码颜色，会显得粗糙，降低用户对产品质量的感知。

审查标记：

• 标记缺少悬停和焦点状态的交互元素
• 标记间距或字体排版不一致的情况（混用设计令牌与硬编码值）
• 标记状态变化时缺少过渡效果的情况
• 标记使用硬编码颜色而非设计令牌的情况（参见 optics-context skill）

---

峰终定律

定义：人们对一段体验的评价，主要取决于最强烈时刻（峰值）和结束时的感受，而非每个时刻感受的总和。

核心要点：设计积极的高光时刻和令人满意的结尾。成功状态、确认消息和完成时的庆祝效果，其影响远超一般时刻。

代码审查要点：

• 检查成功／确认页面是否提供积极反馈
• 查看是否有完成时的庆祝效果（勾号、成功消息、动画）
• 确认错误状态是否提供有帮助的恢复路径（而非死胡同）
• 检查任意流程的最后一步是否令人满意

示例：

✅ GOOD

<div class="success-state">
  <div class="success-state__icon">&#10003;</div>
  <h2>Payment Successful!</h2>
  <p>Your order #1234 has been confirmed. You'll receive a confirmation email shortly.</p>
  <a href="/orders/1234" class="btn btn--primary">View Order</a>
</div>

🚫 BAD

<div class="alert alert--success">
  <p>Done.</p>
</div>

复杂流程（例如结账）结束后，如果只显示一条简短生硬的成功消息，会留下较差的最终印象。

审查标记：

• 标记笼统或敷衍的完成状态（“完成”“成功”）
• 标记没有明确后续步骤或恢复选项的错误页面
• 标记会自动跳转离开成功／确认页面的情况
• 标记结账或引导流程结束时缺少积极确认环节的情况

---

波斯特尔法则（稳健性原则）

定义：接收时尽量宽容，发送时务必谨慎。

关键要点：接受多种用户输入格式，并宽容对待小错误。自动格式化、自动纠正，并提供有用的建议，而不是严格报错。

代码检查要点：

• 检查输入验证：是否因格式要求过于严格而拒绝有效输入？
• 查看是否有自动格式化（电话号码、日期、信用卡号）
• 检查错误消息：是否有帮助且具体？
• 确认搜索是否足够宽容（能否处理拼写错误和部分匹配）

示例：

✅ 好

<input type="tel" placeholder="Phone number"
       data-controller="phone-input"
       data-action="input->phone-input#format">

🚫 差

<input type="text" placeholder="XXX-XXX-XXXX" pattern="\d{3}-\d{3}-\d{4}">
<span class="error">Phone number must be in format XXX-XXX-XXXX</span>

因格式差异而拒绝有效的电话号码。

审查标记：

• 标记会拒绝常见替代格式的严格输入模式
• 标记未说明预期输入内容的验证消息
• 标记缺少模糊匹配或自动补全的搜索输入
• 标记要求特定格式而非使用日期选择器的日期输入

---

蔡加尼克效应

定义：相比已完成的任务，人们更容易记住未完成或被中断的任务。

关键要点：使用视觉提示标示未完成的任务，以激励用户完成。展示已开始但尚未完成的内容，例如个人资料完成进度条、未完成的表单草稿、已保存的进度。

代码检查要点：

• 检查是否有个人资料或设置完成度提示
• 查看列表视图中是否有“草稿”或“进行中”状态
• 确认部分填写的表单是否会保存进度
• 检查是否有“从上次中断处继续”模式

示例：

✅ 好

<div class="profile-completion">
  <div class="progress-bar">
    <div class="progress-bar__fill" style="width: 60%"></div>
  </div>
  <p>Your profile is 60% complete. <a href="/profile/edit">Complete your profile</a></p>
</div>

🚫 差

<div class="profile-header">
  <h2>Welcome, Alex</h2>
</div>

错失了激励用户完善个人资料的机会。

审查标记：

• 标记未保存部分进度的多步骤流程
• 标记缺少完成度提示的引导流程
• 标记离开页面时会丢失数据的表单（无自动保存或草稿状态）
• 标记需要处理的列表项缺少“未完成”或“草稿”徽章的情况

---

跨领域考量

几条法则之间存在相互强化的关系。审查代码时，应将相关问题归类，而不是在多个法则名下重复标记同一问题。

法则分组：邻近性 + 共同区域 + 相似性 + 连通性

这四条法则都与用户如何感知哪些元素属于一组有关。审查布局时：

• 检查空间分组（邻近性）
• 检查视觉容器（共同区域）
• 检查相关元素的样式是否一致（相似性）
• 检查视觉连接线索（连通性）

如果布局违反了这四条法则，应将其作为一个分组问题报告，并引用对修复最相关的法则。

复杂性法则：米勒定律 + 希克定律 + 特斯勒定律 + 奥卡姆剃刀 + 帕金森定律

这些法则都涉及如何管理界面复杂性：

• 项目过多 → 米勒定律
• 选项过多 → 希克定律
• 将复杂性推给用户 → 特斯勒定律
• 不必要的复杂性 → 奥卡姆剃刀
• 表单范围膨胀 → 帕金森定律

当表单字段过多，且每个字段的选项也过多时，应针对每个具体问题引用影响最大的法则。

反馈法则：多尔蒂阈值 + 峰终定律 + 目标梯度效应 + 蔡加尼克效应

这些法则都与反馈和进度感知有关：

• 对操作立即响应 → 多尔蒂阈值
• 关键时刻的质量 → 峰终定律
• 进度可视化 → 目标梯度效应
• 对未完成任务的感知 → 蔡加尼克效应

在多步骤流程中，应检查这四条法则，但报告问题时应按具体交互环节分组，而不是按法则名称分组。

配套技能

• bem-structure：创建实现这些 UX 法则的组件时，用于 CSS 类命名规范。
• optics-context：实现这些法则的视觉部分时，用于设计令牌的使用（颜色、间距、排版）。