UI审计技能

依据成熟的UX原则评估界面。基于《做出UX决策》作者：Tommy Geoco。

何时使用此技能

• 在时间压力下做出UI/UX设计决策
• 结合业务背景评估设计权衡
• 为特定问题选择合适的UI模式
• 审查设计的完整性和质量
• 为新界面构建设计思维框架

核心理念

快速 ≠ 鲁莽。快速设计并不自动等同于鲁莽。鲁莽地快速设计才是鲁莽。区别在于意图性。

极速决策的三大支柱

1. 框架构建——用于自动化重复性决策的规则
2. 决策制定——用于做出新决策的流程
3. 精细执行——用于执行决策的检查清单

快速参考结构

基础框架

• references/00-core-framework.md— 三大支柱、决策流程、宏观押注
• 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— 用户评价、用户生成内容、徽章、社交集成
• 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. 应用三步权衡法：机构知识 → 用户熟悉度 → 研究

用于新界面

1. 遵循10-checklist-new-interfaces.md
2. 中的六步检查清单
3. 参考相关模式文件以获取特定UI组件

使用保真度和视觉风格检查清单来提高质量

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

宏观战略类别

企业通过以下一种或多种方式制胜：

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

Key Principle: Good Design Decisions Are Relative

当一个设计决策满足以下条件时，它就是“好”的：

• 支持产品要完成的"待办任务"
• 与公司的宏观战略押注保持一致
• 尊重约束条件（时间、技术、团队）
• 在用户熟悉度与差异化需求之间取得平衡

不存在普遍正确的UI解决方案——只有适合特定情境的方案。

生成审计报告

当被要求审计一个设计时，生成一份全面的报告。始终包含以下部分：

必填部分（始终包含）

1. 视觉层次— 标题、行动号召、分组、阅读流、字体比例、色彩层次、留白
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）、触控目标尺寸（44像素）、替代文本、语义化标记、减少动效支持

导航当前位置清晰，菜单行为可预测，面包屑导航存在，搜索功能易访问，移动端导航模式

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