review-ux-ui

评审 UX/UI

评估用户体验和界面设计的易用性、无障碍性和有效性。

适用场景

• 在应用发布前进行易用性评审
• 评估无障碍合规性（WCAG 2.1 AA 或 AAA）
• 评估用户流程的效率和错误预防能力
• 评审表单设计的易用性和转化率优化效果
• 对现有界面进行启发式评估
• 评估认知负荷和信息架构

输入

• 必需：待评审的应用（URL、原型或源代码）
• 必需：目标用户描述（角色、技术熟练程度、使用情境）
• 可选：用户研究结果（访谈、调查、分析数据）
• 可选：WCAG 一致性目标（A、AA 或 AAA）
• 可选：要评估的特定用户流程或任务
• 可选：要用于测试的辅助技术（屏幕阅读器、开关控制）

流程

步骤 1：启发式评估（Nielsen 的 10 条启发式原则）

根据每条启发式原则评估界面：

#	启发式原则	关键问题	评级
1	系统状态的可见性	系统是否始终告知用户正在发生什么？
2	系统与现实世界的匹配	系统是否使用熟悉的语言和概念？
3	用户控制权和自由度	用户能否轻松撤销、重做或退出不需要的状态？
4	一致性和标准	类似元素在整个界面中的行为是否一致？
5	错误预防	设计是否能在错误发生前预防错误？
6	识别而非回忆	选项、操作和信息是否可见或易于查找？
7	灵活性和使用效率	是否为有经验的用户提供快捷方式，同时避免让新手感到困惑？
8	美观且简约的设计	每个元素是否都有其用途？是否存在不必要的杂乱内容？
9	帮助用户识别、诊断和恢复错误	错误消息是否清晰、具体且具有指导性？
10	帮助和文档	用户需要时，是否能找到帮助？

针对每条启发式原则，评定问题的严重程度：

严重程度	描述
0	不构成易用性问题
1	外观问题——时间允许时修复
2	轻微问题——低优先级修复
3	主要问题——应优先修复
4	灾难性问题——发布前必须修复

## Heuristic Evaluation Findings
| # | Heuristic | Severity | Finding | Location |
|---|-----------|----------|---------|----------|
| 1 | System status | 3 | No loading indicator during data fetch — users click repeatedly | Dashboard page |
| 3 | User control | 2 | No undo for item deletion — only a confirmation dialog | Item list |
| 5 | Error prevention | 3 | Date field accepts invalid dates (Feb 30) | Booking form |
| 9 | Error recovery | 4 | Form submission error clears all fields | Registration |

**预期结果：**对全部 10 条启发式原则进行评估，并给出具体发现和严重程度评级。 **失败时：**如果时间有限，重点关注第 1、3、5 和 9 条启发式原则（对用户体验影响最大）。

步骤 2：无障碍审查（WCAG 2.1）

可感知性

• 1.1.1 非文本内容：所有图像都有替代文本（装饰性图像使用 alt=""）
• 1.3.1 信息和关系：使用语义化 HTML（标题、列表、表格、地标）
• 1.3.2 有意义的顺序：DOM 顺序与视觉顺序一致
• 1.4.1 颜色的使用：颜色不是传达信息的唯一方式
• 1.4.3 对比度：文本对比度至少为 4.5:1（普通文本）或 3:1（大号文本）
• 1.4.4 调整文本大小：文本放大至 200% 后，功能不受影响
• 1.4.11 非文本对比度：UI 组件和图形的对比度至少为 3:1
• 1.4.12 文本间距：增大文本间距后，内容仍可正常使用（行高为 1.5 倍、字母间距为 0.12em、单词间距为 0.16em）

可操作性

• 2.1.1 键盘：所有功能均可通过键盘操作
• 2.1.2 无键盘陷阱：焦点不会被困在某个组件中
• 2.4.1 跳过链接：为键盘用户提供跳过导航的链接
• 2.4.3 焦点顺序：Tab 顺序遵循合理、可预测的顺序
• 2.4.7 焦点可见：键盘焦点指示器清晰可见
• 2.4.11 焦点不被遮挡：聚焦的元素不会被固定页眉或覆盖层遮挡
• 2.5.5 目标尺寸：交互目标至少为 24x24px（触屏场景推荐 44x44px）

易于理解

• 3.1.1 页面语言：在 <html> 上设置 lang 属性
• 3.2.1 获得焦点时：获得焦点不会触发意外更改
• 3.2.2 输入时：输入不会在没有警告的情况下触发意外更改
• 3.3.1 错误识别：在文本中清楚地描述错误
• 3.3.2 标签或说明：表单输入项有可见标签
• 3.3.3 错误建议：错误消息会建议如何解决问题

稳健性

• 4.1.1 解析：HTML 有效（无重复 ID，嵌套正确）
• 4.1.2 名称、角色、值：自定义组件具有 ARIA 角色和属性
• 4.1.3 状态消息：动态内容变更会播报给屏幕阅读器

预期： 系统地检查 WCAG 2.1 AA 标准，并逐项记录通过或未通过。 失败时： 使用自动化工具（axe-core、Lighthouse）进行初步扫描，然后针对需要人工判断的标准进行手动测试。

第 3 步：键盘和屏幕阅读器审查

键盘导航测试

仅使用 Tab、Shift+Tab、Enter、Space、方向键和 Escape：

## Keyboard Navigation Audit
| Task | Completable? | Issues |
|------|-------------|--------|
| Navigate to main content | Yes — skip link works | None |
| Open dropdown menu | Yes | Arrow keys don't work within menu |
| Submit a form | Yes | Tab order skips the submit button |
| Close a modal | No | Escape doesn't close, no visible close button in tab order |
| Use date picker | No | Custom date picker not keyboard accessible |

屏幕阅读器测试

使用 NVDA（Windows）、VoiceOver（macOS/iOS）或 TalkBack（Android）进行测试：

## Screen Reader Audit
| Element | Announced As | Expected | Issue |
|---------|-------------|----------|-------|
| Logo link | "link, image" | "Home, link" | Missing alt text on logo |
| Search input | "edit, search" | "Search products, edit" | Missing label association |
| Nav menu | "navigation, main" | Correct | None |
| Error message | (not announced) | "Error: email is required" | Missing live region |
| Loading spinner | (not announced) | "Loading, please wait" | Missing aria-live or role="status" |

预期： 使用纯键盘和屏幕阅读器测试完整的任务流程。 失败时： 如果无法使用屏幕阅读器，请检查 ARIA 属性和语义化 HTML，将其作为替代方法。

第 4 步：分析用户流程

绘制并评估关键用户流程：

## User Flow: Complete a Purchase

### Steps
1. Browse products → 2. View product → 3. Add to cart → 4. View cart →
5. Enter shipping → 6. Enter payment → 7. Review order → 8. Confirm

### Assessment
| Step | Friction | Severity | Notes |
|------|---------|----------|-------|
| 1→2 | Low | - | Clear product cards |
| 2→3 | Medium | 2 | "Add to cart" button below the fold on mobile |
| 3→4 | Low | - | Cart icon updates with count |
| 4→5 | High | 3 | Must create account — no guest checkout |
| 5→6 | Low | - | Address autocomplete works well |
| 6→7 | Medium | 2 | Card number field doesn't auto-format |
| 7→8 | Low | - | Clear order summary |

### Flow Efficiency
- **Steps**: 8 (acceptable for e-commerce)
- **Required fields**: 14 (could reduce with address autocomplete + saved payment)
- **Decision points**: 2 (size selection, shipping method)
- **Potential drop-off points**: Step 4→5 (forced account creation)

预期： 绘制关键用户流程，找出摩擦点并评定其严重程度。 失败时： 如果无法获取用户分析数据，请根据任务复杂度和步骤数评估流程。

第 5 步：评估认知负荷

• 信息密度：每个屏幕上的信息量是否合适？
• 渐进式披露：复杂信息是否逐步呈现？
• 分组：相关项目是否在视觉上归为一组（格式塔原则）？
• 识别优于回忆：用户能否直接看到选项，而不必回忆它们？
• 模式一致：相似任务是否采用相似的交互模式？
• 决策疲劳：是否一次性向用户提供了太多选项？（希克定律）
• 工作记忆：用户是否需要在不同步骤间记住信息？

预期： 评估认知负荷，并找出具体的负荷过高或过低之处。 失败时： 如果难以客观评估认知负荷，请使用“眯眼测试”——眯起眼睛看屏幕，观察结构和层级是否依然清晰。

第 6 步：评估表单可用性

针对应用中的每个表单：

• 标签：每个输入框都有可见且关联的标签
• 占位文本：仅用于示例，不作为标签
• 输入类型：使用正确的 HTML 输入类型（email、tel、number、date），以适配移动设备键盘
• 验证时机：在失焦或提交时显示错误（而非每次按键时都显示）
• 错误消息：具体（“邮箱必须包含 @”），而非笼统（“输入无效”）
• 必填字段：明确标出（如果大多数字段为必填，也要标出可选字段）
• 字段分组：在视觉上将相关字段分组（姓名、地址、付款部分）
• 自动填充：为标准字段（姓名、邮箱、地址、cc-number）设置 autocomplete 属性
• Tab 顺序：符合视觉布局的逻辑顺序
• 多步骤表单：进度指示器显示当前步骤和总步骤数
• 数据保留：用户离开并返回时，表单数据仍会保留

预期： 根据清单评估每个表单，并记录具体问题。 未通过时： 如果表单很多，优先处理访问量最高的表单（注册、结账、联系）。

第 7 步：撰写 UX/UI 评审

## UX/UI Review Report

### Executive Summary
[2-3 sentences: overall usability, most critical issues, strongest aspects]

### Heuristic Evaluation Summary
| Heuristic | Severity | Key Finding |
|-----------|----------|-------------|
[Summary table from Step 1]

### Accessibility Compliance
- **Target**: WCAG 2.1 AA
- **Status**: [X of Y criteria pass]
- **Critical failures**: [List]

### User Flow Analysis
[Key friction points with severity and recommendations]

### Top 5 Improvements (Prioritised)
1. **[Issue]** — Severity: [N] — [Specific recommendation]
2. ...

### What Works Well
1. [Specific positive observation]
2. ...

预期： 评审提供按优先级排序、可执行的建议，并标注严重程度。 未通过时： 如果评审发现的问题过多，按“必须修复”（严重程度 3-4）和“应该修复”（严重程度 1-2）分类。

验证

• 已评估全部 10 项 Nielsen 启发式原则，并标注严重程度
• 已检查 WCAG 2.1 标准（至少包括：1.1.1、1.4.3、2.1.1、2.4.7、3.3.1、4.1.2）
• 已针对关键用户流程测试键盘导航
• 已测试屏幕阅读器（或将 ARIA/语义化 HTML 评审作为替代方式）
• 已分析至少一个关键用户流程的阻碍点
• 已评估认知负荷
• 已评估表单可用性
• 已按严重程度排列发现的问题，并提供可执行的建议

常见误区

• 混淆 UX 与视觉设计：UX 关注如何使用；视觉设计关注外观。界面可以很美观，但 UX 糟糕。两者都要评估，但要区分开来。
• 只测试顺利路径：错误状态、空状态、加载状态和边缘情况往往隐藏着 UX 问题。
• 忽略真实设备：浏览器开发者工具的响应式模式只能作为替代方案。在真实设备上测试才能发现触控、性能和视口问题。
• 事后才考虑无障碍性：晚发现的无障碍问题修复成本很高。应尽早并持续评估。
• 将个人偏好当作 UX 反馈：“我更喜欢……”不算 UX 反馈。应引用启发式原则、研究或成熟模式。

相关技能

• review-web-design — 视觉设计评审（布局、排版、色彩，与 UX 互为补充）
• scaffold-nextjs-app — Next.js 应用脚手架
• setup-tailwind-typescript — 用于设计系统实现的 Tailwind CSS