场景 A：10分钟设计走查体检表（Design Review Playbook）
适用场景：代码合入（PR Review）阶段、版本发布前视觉验收、Agent 自动化设计走查。 核心原则：区分硬性合规与主观风格；每一条批评意见都必须挂载具体的硬指标、心理学法则或证伪证据。
走查执行四步闭环流
┌─────────────────────────────────────────────────────────────┐
│ 第 1 步：定位产品形态与约束（定位类型矩阵，排除通用偏见） │
│ └── 落地页？B2B SaaS？移动 App？AI 对话产品？ │
└──────────────────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 第 2 步：致命可用性红线排查（WCAG 2.2 AA 级刚性数字拦截） │
│ └── 对比度 ≥ 4.5:1、目标尺寸 ≥ 24×24px、焦点可见性 │
└──────────────────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 第 3 步：交互秩序与启发式走查（Nielsen 10 大启发式逐条过筛） │
│ └── 系统状态可见、错误预防、自解释、灵活与效率 │
└──────────────────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 第 4 步：心理学归因与报告输出（区分 P0 / P1 / P2 评级） │
│ └── 引用 Laws of UX 给出修改建议，主动驳回已证伪教条 │
└─────────────────────────────────────────────────────────────┘第一步：确认产品类型与核心约束
在开始审查前，首先确认被测界面的产品类型，对照 产品类型设计约束矩阵 确认其第一优先级约束：
- B2B SaaS / 仪表盘：第一优先级是“高数据密度下的快速决策”，严禁为了视觉美观牺牲紧凑表格和高效筛选；避免 3D 饼图。
- 营销 / 落地页：第一优先级是“单一清晰的价值主张 + 滚动线索”，首屏不应塞满冗余细节。
- 移动端应用：第一优先级是“单手拇指可达性与触控目标”，核心导航下沉到底部。
- AI 对话 / Agent 产品：第一优先级是“预期管理、流式可打断与错误可撤销”，必须有明确的引用溯源。
第二步：致命可用性与合规红线（P0 级阻断项）
依据 WCAG 2.2 规范与无障碍基线，以下条目不通过直接判定为 P0 级严重 Bug，阻断上线：
- [ ] 普通正文对比度：正文文字与直接背景色的对比度是否 $\ge 4.5:1$？
- [ ] 大字号文本对比度：18pt（24px）以上或 14pt 粗体以上标题，对比度是否 $\ge 3:1$？
- [ ] 关键 UI 边界对比度：输入框边框、开关（Switch）、图标按钮轮廓与背景对比度是否 $\ge 3:1$？
- [ ] 触控与点击目标尺寸：可点击元素物理尺寸是否 $\ge 24 \times 24\text{ CSS px}$？（移动端触控区建议 $\ge 44 \times 44\text{pt}$，若视觉图标小于该尺寸，其透明点击热区必须补足）。
- [ ] 键盘焦点可见性：按
Tab键在控件间切换时，当前获焦控件是否有清晰、未被遮挡的焦点环（Focus Ring）？严禁出现全局outline: none！ - [ ] 色彩单一依赖排查：系统是否单纯依赖红/绿颜色来传达“成功/失败”？（必须辅以图标或文字说明，照顾色弱用户）。
第三步：Nielsen 10 大启发式走查清单（P1 / P2 级）
对照 Nielsen 启发式评审问句，逐项核验交互流畅度：
1. 系统状态可见性（Visibility of System Status）
- [ ] 耗时操作（如数据导出、API 调用）是否有加载状态（Loading Spinner / 骨架屏）？
- [ ] 操作反馈是否符合多赫蒂阈值（Doherty Threshold），在 400ms 内给出系统已被触发的即时响应？
2. 系统与真实世界匹配（Match Between System and the Real World）
- [ ] 文案用词是用户的日常业务语言，还是冷冰冰的后端错误代码（如直接弹窗
Error 500: NullPointerException）？ - [ ] 图标与隐喻是否符合行业通用共识（如放大镜代表搜索，齿轮代表设置）？
3. 用户控制与自由（User Control and Freedom）
- [ ] 破坏性操作（删除、重置、批量变更）是否有明确的二次确认弹窗或支持至少 5 秒的“撤销（Undo）”机会？
- [ ] 模态弹窗是否有明确且容易点击的关闭“X”按钮，并支持按
Esc键退出？
4. 一致性与标准（Consistency and Standards）
- [ ] 符合雅各布定律（Jakob's Law）：站内相同的交互行为是否遵循业界主流惯例？
- [ ] 同一页面中的按钮圆角、阴影层级、间距倍数是否严格复用固定 Token？
5. 错误预防（Error Prevention）
- [ ] 是在用户填完错格式后报错，还是输入框直接限制不合规字符并给出实时格式引导？
- [ ] 容易误触的危险操作按钮（如“删除项目”），是否在颜色（警示红）和空间位置上与其他安全按钮拉开距离？
6. 识别而非回忆（Recognition Rather Than Recall）
- [ ] 用户在填写多步向导表单时，上一页填写的核心信息是否在当前步骤可见，还是强迫用户凭记忆默写？
- [ ] 复杂筛选器中，用户已选中的过滤条件是否显性显示为可一键清除的标签（Tags）？
7. 灵活与效率（Flexibility and Efficiency of Use）
- [ ] 是否为高频熟练用户提供了键盘快捷键或全局命令面板（Command Palette）？
- [ ] 常用操作是否支持行内快捷操作，而非必须点进详情页后才能编辑？
8. 美学与极简主义设计（Aesthetic and Minimalist Design）
- [ ] 页面中的每一个视觉元素是否都直接服务于当前任务？
- [ ] 是否消灭了不必要的装饰性边框、杂乱渐变和冗余背景色？
9. 帮助用户识别、诊断并从错误中恢复（Help Users Recognize and Recover from Errors）
- [ ] 表单报错提示是否紧挨着出错的输入框就地高亮，而不是只在页面右上角弹出一个语焉不详的 Toast？
- [ ] 报错文案是否清晰告知了用户“问题出在哪 + 接下来该怎么做”？
10. 帮助与文档（Help and Documentation）
- [ ] 在易产生困惑的专业参数旁，是否有悬停展示的 Tooltip 辅助解释？
第四步：已证伪教条主动排查（反确认偏误）
在审核他人设计或提出修改建议时，必须主动过滤已证伪的教条（详见 已证伪设计教条专篇）：
- [ ] 驳回“三次点击强迫症”：如果有人批评“用户需要点 4 次才能完成这个任务，必须改成 3 次以内”，应予以驳回——只要每一步的信息气味清晰、路径直观，点击次数与任务成功率不存在负相关。
- [ ] 驳回“所有内容必须塞进首屏”：如果有人为了“不上翻”而把字体缩至极小、取消呼吸感间距，应予以驳回——现代眼动研究证实用户更倾向于自然滚动，首屏的任务是建立价值主张和滚动线索。
- [ ] 驳回“菜单项不能超过 7 个”：如果有人引用米勒定律强制将导航折叠到 7 项以下导致功能难以发现，应予以驳回——视觉菜单属于“识别”，不受短时记忆 7±2 限制。
设计走查报告模板（Markdown 交付范式）
执行完毕后，可直接复制以下模板输出结构化 Review 报告：
markdown
# 评审对象：[页面/组件名称]
- **评审人**：[姓名 / Agent ID]
- **所属产品类型**：[SaaS / 落地页 / 移动 App / ...]
- **走查结论**：[通过 / 附条件通过 / 阻断拦截]
### P0 阻断性缺陷（合规红线）
- **[对比度不足]** 登录表单辅助提示文字 `#A0AEC0` 在白色背景上对比度仅为 2.8:1，违反 WCAG 2.2 AA（需 ≥ 4.5:1）。
- *建议修改*：正文灰色调整为 `#52565C` 或加深至 4.5:1 以上。
### P1 体验严重缺陷（启发式违规）
- **[缺少状态反馈]** 点击“保存配置”按钮后，页面有长达 1.5 秒的网络请求空白，未禁用按钮且无 Loading 提示，极易诱发重复点击提交（违反多赫蒂阈值与状态可见性）。
- *建议修改*：点击瞬间将按钮置为 Loading 态并设置 `disabled`。
### P2 视觉秩序优化建议（风格提升）
- **[间距节律不一致]** 卡片外部 margin 混用了 15px 与 22px，破坏了 8pt 网格节奏。
- *建议修改*：统一收敛至 `--space-4: 16px` 与 `--space-6: 24px`。