ui-audit

UI 审查技能

依据经过验证的 UX 原则评估界面。内容基于 Tommy Geoco 的 Making UX Decisions。

何时使用此技能

• 在时间紧迫时做出 UI/UX 设计决策
• 结合业务背景评估设计取舍
• 为特定问题选择合适的 UI 模式
• 检查设计的完整性和质量
• 为新界面构建设计思路

核心理念

速度 ≠ 鲁莽。 快速设计并不意味着鲁莽，鲁莽地快速设计才是鲁莽。两者的区别在于是否经过深思熟虑。

极速决策的 3 大支柱

1. 搭建框架 — 用于自动处理重复决策的规则
2. 决策 — 用于做出新决策的流程
3. 打磨 — 用于执行决策的检查清单

快速参考结构

基础框架

• references/00-core-framework.md — 3 大支柱、决策工作流、宏观取舍
• references/01-anchors.md — 提升设计韧性的 7 种基础思维方式
• references/02-information-scaffold.md — 心理学、经济学、无障碍性、默认值

检查清单（执行）

• references/10-checklist-new-interfaces.md — 设计新界面的 6 步流程
• references/11-checklist-fidelity.md — 组件状态、交互、可扩展性、反馈
• references/12-checklist-visual-style.md — 间距、颜色、层次、字体、动效
• references/13-checklist-innovation.md — 原创性光谱的 5 个层级

模式（可复用方案）

• references/20-patterns-chunking.md — 卡片、标签页、折叠面板、分页、轮播
• references/21-patterns-progressive-disclosure.md — 工具提示、弹出层、抽屉、模态框
• references/22-patterns-cognitive-load.md — 步骤条、向导、极简导航、简化表单
• references/23-patterns-visual-hierarchy.md — 字体、颜色、留白、大小、邻近关系
• references/24-patterns-social-proof.md — 用户评价、UGC、徽章、社交集成
• references/25-patterns-feedback.md — 进度条、通知、验证、情境帮助
• references/26-patterns-error-handling.md — 表单验证、撤销/重做、对话框、自动保存
• references/27-patterns-accessibility.md — 键盘导航、ARIA、替代文本、对比度、缩放
• references/28-patterns-personalization.md — 仪表板、自适应内容、偏好设置、本地化
• references/29-patterns-onboarding.md — 引导游览、情境提示、教程、检查清单
• references/30-patterns-information.md — 面包屑导航、站点地图、标签、分面搜索
• references/31-patterns-navigation.md — 优先级导航、画布外导航、粘性导航、底部导航

使用说明

设计决策

1. 阅读 00-core-framework.md，了解决策工作流
2. 判断这是重复决策（使用框架）还是新决策（使用流程）
3. 按 3 步权衡：机构知识 → 用户熟悉度 → 研究

新界面

1. 遵循 10-checklist-new-interfaces.md 中的 6 步检查清单
2. 查阅相关模式文件，了解特定 UI 组件
3. 使用保真度和视觉风格检查清单提升质量

选择模式

1. 找出核心问题（信息分块、渐进披露、认知负荷等）
2. 加载相关模式参考文件
3. 评估其优势、适用场景、心理学原理和实施指南

决策工作流概要

面临 UI 决策时：

1. WEIGH INFORMATION
   ├─ What does institutional knowledge say? (existing patterns, brand, tech constraints)
   ├─ What are users familiar with? (conventions, competitor patterns)
   └─ What does research say? (user testing, analytics, studies)

2. NARROW OPTIONS
   ├─ Eliminate what conflicts with constraints
   ├─ Prioritize what aligns with macro bets
   └─ Choose based on JTBD support

3. EXECUTE
   └─ Apply relevant checklist + patterns

宏观设计赌注类别

公司通过以下一项或多项赢得竞争：

赌注	描述	设计启示
速度	更快地推出功能	复用模式，从其他市场寻找隐喻
效率	更好地管理浪费	设计系统，减少 WIP
准确性	更频繁地做出正确判断	加强研究，完善数据采集
创新	发掘尚未挖掘的潜力	运用新颖模式，汲取跨领域灵感

始终让微观设计赌注与公司的宏观设计赌注保持一致。

核心原则：好的设计决策具有相对性

当一项设计决策能够做到以下几点时，它就是“好的”：

• 支持产品的待完成工作
• 与公司的宏观设计赌注保持一致
• 尊重各项限制（时间、技术、团队）
• 平衡用户熟悉度与差异化需求

不存在放之四海而皆准的正确 UI 方案，只有适合具体情境的方案。

---

生成审查报告

收到设计审查请求时，请生成一份全面的报告。始终包含以下部分：

必需部分（始终包含）

1. 视觉层级 — 标题、CTA、分组、阅读流、字号比例、色彩层级、留白
2. 视觉风格 — 间距一致性、色彩运用、层次／深度、排版、动效／动画
3. 无障碍性 — 键盘导航、焦点状态、对比度、屏幕阅读器支持、触控目标

情境相关部分（视情况包含）

4. 导航 — 针对多页面应用：寻路方式、面包屑、菜单结构、信息架构
5. 可用性 — 针对交互流程：功能可发现性、反馈、错误处理、认知负荷
6. 引导 — 针对新用户体验：首次使用、教程、渐进式信息披露
7. 社会认同 — 针对落地页／营销页：用户评价、信任信号、社交集成
8. 表单 — 针对数据录入：标签、校验、错误消息、字段类型

审查输出格式

{
  "title": "Design Name — Screen/Flow",
  "project": "Project Name",
  "date": "YYYY-MM-DD",
  "figma_url": "optional",
  "screenshot_url": "optional - URL to screenshot",
  
  "macro_bets": [
    { "category": "velocity|efficiency|accuracy|innovation", "description": "...", "alignment": "strong|moderate|weak" }
  ],
  
  "jtbd": [
    { "user": "User Type", "situation": "context without 'When'", "motivation": "goal without 'I want to'", "outcome": "benefit without 'so I can'" }
  ],
  
  "visual_hierarchy": {
    "title": "Visual Hierarchy",
    "checks": [
      { "label": "Check name", "status": "pass|warn|fail|na", "notes": "Details" }
    ]
  },
  "visual_style": { ... },
  "accessibility": { ... },
  
  "priority_fixes": [
    { "rank": 1, "title": "Fix title", "description": "What and why", "framework_reference": "XX-filename.md → Section Name" }
  ],
  
  "notes": "Optional overall observations"
}

各部分的检查项（每部分以 6–10 项为目标）

视觉层级：标题区分度、主要操作清晰度、分组／邻近关系、阅读流、字号比例、色彩层级、留白运用、视觉权重平衡

视觉风格：间距一致性、色彩方案遵循度、层次／阴影、排版系统、边框／圆角一致性、图标风格、动效原则

无障碍性：键盘可操作性、焦点可见性、颜色对比度（4.5:1）、触控目标（44px）、替代文本、语义化标记、减少动态效果支持

导航：当前位置清晰度、菜单行为的可预测性、面包屑是否存在、搜索可访问性、移动端导航模式

可用性：功能可发现性、操作反馈、错误预防、恢复选项、认知负荷管理、加载状态