介绍
# UI Audit Skill
根据公认的 UX 原则评估界面。基于 Tommy Geoco 的 [Making UX Decisions](https://uxdecisions.com)。
## 何时使用此技能
- 在时间紧迫的情况下做出 UI/UX 设计决策 - 结合业务背景评估设计权衡 - 为特定问题选择合适的 UI 模式 - 审查设计的完整性和质量 - 构建新界面的设计思维
## 核心理念
**速度 ≠ 莽撞。** 快速设计并不自动等同于莽撞。鲁莽地快速设计才是鲁莽。二者的区别在于意图。
## 极速决策的三大支柱
1. **脚手架 (Scaffolding)** — 用于自动化重复决策的规则 2. **决策 (Decisioning)** — 用于做出新决策的流程 3. **打磨 (Crafting)** — 用于执行决策的检查清单
## 快速参考结构
### 基础框架 - `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` — 仪表盘、自适应内容、偏好设置、本地化 (l10n) - `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` 中的 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. **表单** — 针对数据录入：标签、验证、错误信息、字段类型
### 审计输出格式
```json { "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)、替代文本、语义化标记、减弱动效支持
**导航**：当前位置清晰、菜单行为可预测、面包屑存在、搜索可访问性、移动端导航模式
**可用性**：功能可发现性、操作反馈、错误预防、恢复选项、认知负荷管理、加载状态