UI 审查技能

依据经验证的用户体验（UX）原则评估界面。内容基于 Tommy Geoco 所著《Making UX Decisions》。

适用场景

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

核心理念

速度 ≠ 草率。 快速设计本身并非草率；草率地快速设计才是草率。二者的区别在于是否具备明确的意图性。

超速决策的三大支柱

1. 脚手架（Scaffolding） —— 用于自动化重复性决策的规则
2. 决策流程（Decisioning） —— 用于处理全新决策的过程方法
3. 执行规范（Crafting） —— 用于落实决策的检查清单

快速参考结构

基础框架

• references/00-core-framework.md —— 三大支柱、决策工作流、宏观押注（macro bets）
• references/01-anchors.md —— 支撑设计韧性的 7 种基础心智模式
• references/02-information-scaffold.md —— 心理学、经济学、可访问性、默认值

检查清单（执行层）

• references/10-checklist-new-interfaces.md —— 设计新界面的六步流程
• references/11-checklist-fidelity.md —— 组件状态、交互行为、可扩展性、反馈机制
• references/12-checklist-visual-style.md —— 间距、色彩、层级（elevation）、排版、动效
• references/13-checklist-innovation.md —— 原创性光谱的五个层级

模式库（可复用方案）

• 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 属性、替代文本（alt text）、对比度、缩放支持
• references/28-patterns-personalization.md —— 仪表盘、自适应内容、用户偏好、本地化（l10n）
• references/29-patterns-onboarding.md —— 引导游览、上下文提示、教程、任务清单
• references/30-patterns-information.md —— 面包屑、站点地图、标签系统、多维筛选搜索
• references/31-patterns-navigation.md —— 优先级导航、侧滑菜单（off-canvas）、悬浮导航、底部导航

使用说明

用于设计决策

1. 通读 00-core-framework.md 了解决策工作流
2. 判断该决策是否属于重复性决策（启用脚手架）或全新决策（启用流程）
3. 应用三步权衡法：机构知识 → 用户熟悉度 → 研究证据

用于新界面设计

1. 遵循 10-checklist-new-interfaces.md 中的六步检查清单
2. 针对具体 UI 组件，查阅相关模式文件
3. 结合保真度与视觉风格检查清单提升整体质量

用于模式选型

1. 识别核心问题类型（如信息分块、渐进式披露、认知负荷等）
2. 加载对应模式参考文档
3. 评估其优势、适用场景、心理学原理及实施指南

决策工作流摘要

面对 UI 决策时，请按以下步骤执行：

1. 权衡信息
   ├─ 机构知识如何指示？（既有模式、品牌规范、技术约束）
   ├─ 用户熟悉哪些模式？（行业惯例、竞品方案）
   └─ 研究证据如何支持？（用户测试、数据分析、学术研究）

2. 缩小选项范围
   ├─ 排除违反约束条件的选项
   ├─ 优先保留契合宏观押注（macro bets）的选项
   └─ 基于对用户待办任务（JTBD）的支持程度做最终选择

3. 执行落地
   └─ 应用相关检查清单 + 模式方案

宏观押注（Macro Bet）类别

企业通过以下一项或多项赢得竞争优势：

所有微观设计决策均须与公司宏观押注保持一致。

关键原则：优秀的设计决策是相对的

当一个设计决策满足以下全部条件时，即为“优秀”：

• 支撑产品的用户待办任务（Jobs-to-be-Done, JTBD）
• 与公司宏观押注（macro bets）方向一致
• 尊重各类约束条件（时间、技术、团队能力）
• 在用户熟悉度与差异化需求之间取得平衡

不存在普适正确的 UI 解决方案——只有在特定上下文中恰如其分的方案。

生成审查报告

当被要求对设计进行审查时，请输出一份完整报告。以下部分必须始终包含：

必含章节（始终包含）

1. 视觉层级（Visual Hierarchy） —— 标题层级、主操作按钮（CTA）、元素分组与邻近性、阅读流向、字号体系、色彩层级、留白运用
2. 视觉风格（Visual Style） —— 间距一致性、色彩使用、层级/深度表现（elevation/depth）、排版系统、动效/动画
3. 可访问性（Accessibility） —— 键盘导航、焦点状态可见性、对比度比率、屏幕阅读器支持、触控目标尺寸

上下文相关章节（按需包含）

4. 导航（Navigation） —— 针对多页面应用：路径指引、面包屑、菜单结构、信息架构
5. 可用性（Usability） —— 针对交互流程：功能可发现性、操作反馈、错误处理、认知负荷管理
6. 新手引导（Onboarding） —— 针对新用户场景：首次运行体验、教程、渐进式披露
7. 社会认同（Social Proof） —— 针对落地页/营销页：用户评价、信任信号、社交集成
8. 表单（Forms） —— 针对数据录入：标签、验证逻辑、错误提示、字段类型

审查报告输出格式

{
  "title": "设计名称 — 屏幕/流程名",
  "project": "项目名称",
  "date": "YYYY-MM-DD",
  "figma_url": "可选",
  "screenshot_url": "可选 — 截图 URL",
  
  "macro_bets": [
    { "category": "velocity|efficiency|accuracy|innovation", "description": "...", "alignment": "strong|moderate|weak" }
  ],
  
  "jtbd": [
    { "user": "用户类型", "situation": "不含‘当……时’的情境描述", "motivation": "不含‘我想……’的目标描述", "outcome": "不含‘以便我能……’的结果描述" }
  ],
  
  "visual_hierarchy": {
    "title": "Visual Hierarchy",
    "checks": [
      { "label": "检查项名称", "status": "pass|warn|fail|na", "notes": "详细说明" }
    ]
  },
  "visual_style": { ... },
  "accessibility": { ... },
  
  "priority_fixes": [
    { "rank": 1, "title": "修复项标题", "description": "问题是什么、为何重要", "framework_reference": "XX-filename.md → 章节名称" }
  ],
  
  "notes": "可选的整体观察结论"
}

各章节检查项数量建议（每项 6–10 条）

视觉层级：标题区分度、主操作清晰度、分组/邻近性、阅读流向、字号体系、色彩层级、留白运用、视觉权重平衡

视觉风格：间距一致性、配色方案符合度、层级/阴影表现、排版系统完整性、边框/圆角一致性、图标风格统一性、动效设计原则

可访问性：键盘可操作性、焦点状态可见性、色彩对比度（≥4.5:1）、触控目标尺寸（≥44px）、替代文本（alt text）、语义化 HTML 标记、减少动效支持（reduced motion）

导航：当前位置标识清晰、菜单行为可预期、面包屑存在且有效、搜索功能可访问、移动端导航模式合理

可用性：功能可发现性、操作反馈及时性、错误预防机制、恢复操作选项、认知负荷控制、加载状态呈现