frontend-design-review

前端设计评审

概述

此技能提供全面开展前端设计评审的专业指导，涵盖 UI/UX 设计质量、设计系统一致性、无障碍合规性和响应式设计模式。此技能有助于在开发生命周期早期发现设计问题，确保设计在实施前符合质量标准、无障碍要求和业务目标。

核心能力

1. UI/UX 设计质量评审

• 视觉设计评估（字体、颜色、间距、布局、视觉层次）
• 用户体验评估（流程、交互、导航、易用性）
• 验证各屏幕和用户旅程之间的设计一致性
• 验证品牌契合度和视觉识别
• 认知负荷分析

2. 设计系统验证

• 组件库评审（设计、变体、状态、可复用性）
• 设计令牌验证（颜色、字体、间距）
• 评估模式库的一致性
• 文档质量评估
• 设计系统治理评估

3. 无障碍合规性

• 验证是否符合 WCAG 2.1 AA 标准
• 验证颜色对比度（文本为 4.5:1，UI 组件为 3:1）
• 键盘导航和焦点管理
• 验证屏幕阅读器支持
• 评审无障碍交互模式

4. 响应式设计评审

• 断点策略评估
• 移动优先方法评估
• 验证触控目标尺寸（最小为 44x44px）
• 评估内容在不同视口中的适配
• 性能考量

5. 组件架构评估

• 组件层级和组合模式
• 可复用性和灵活性评估
• 状态管理评审（默认、悬停、激活、禁用、错误、加载中）
• 组件变体和自定义模式
• 组件文档质量

工作流

阶段 1：评审前准备

1. 收集设计素材

• 收集 Figma/Sketch 文件、设计规范和模型图
• 获取设计系统文档和组件库
• 查看品牌指南和风格指南
• 收集用户研究结果和用户画像

2. 了解背景

• 查看项目要求和业务目标
• 了解目标用户和使用场景
• 确定关键用户旅程和重要流程
• 记录技术限制和平台要求

3. 确定评审范围

• 确定要评审的屏幕/流程
• 确定评审深度（高层级或详细评审）
• 根据重要性设定优先级
• 制定时间表和交付成果

阶段 2：开展设计评审

步骤 1：视觉设计评审

• 评估排版（字体选择、字号比例、行高、一致性）
• 评估配色系统（调色板、对比度、语义化用法、令牌）
• 评审间距和布局（网格系统、留白、对齐）
• 检查视觉层级（大小、颜色、位置、强调方式）
• 验证图标设计（风格、大小、清晰度、一致性）
• 评估图像和媒体（质量、纵横比、优化情况）

步骤 2：设计系统合规性

• 验证组件用法是否符合设计系统
• 检查设计令牌的使用情况（不得使用硬编码值）
• 找出与既定模式的偏差
• 验证组件变体和状态
• 评审自定义组件与系统组件

步骤 3：无障碍审查

• 测试所有文本和 UI 元素的颜色对比度
• 验证键盘导航和 Tab 顺序
• 检查焦点指示器是否清晰可见
• 验证 ARIA 标签和语义结构
• 评审图像的替代文本
• 评估表单标签的关联情况
• 测试交互元素的无障碍性

步骤 4：响应式设计评估

• 评审断点策略（移动设备、平板、桌面设备）
• 检查内容在不同视口下的适配情况
• 验证移动设备上的触控目标尺寸
• 评估移动设备的导航模式
• 评审图像的响应式表现和优化情况
• 验证不同设备上的排版缩放

步骤 5：组件架构分析

• 评估组件组织方式和层级
• 评审组件的可复用性和组合方式
• 检查组件状态覆盖情况
• 评估变体设计和灵活性
• 验证组件属性和自定义能力

步骤 6：用户体验评估

• 分析用户流程和任务完成路径
• 评估导航结构和内容可查找性
• 检查交互模式和反馈
• 评估错误状态和错误处理
• 评审空状态和加载状态
• 验证表单设计和验证模式

阶段 3：记录发现

1. 按严重程度对问题分类

• 严重：阻碍发布的问题，发布前必须修复
• 高：影响显著的易用性／无障碍问题
• 中：存在变通方案的问题，应尽快修复
• 低：细微润色，可改进之处

2. 创建详细的发现报告 请参阅 design-review-report-template.md，了解完整的报告结构

包括：

• 包含关键统计数据的执行摘要
• 评审范围文档
• 按类别整理的发现及具体示例
• 按严重程度评级的问题列表
• 正面观察（表现良好的方面）
• 按优先级排序的可执行建议
• 标明负责人和时间安排的行动项

3. 提供可视化示例

• 使用带注释的截图展示问题
• 展示建议的改进前后对比
• 包含对比度测量值
• 以可视化方式记录组件状态问题

阶段 4：协作制定解决方案

1. 确定修复优先级

• 区分必须修复项和可选优化项
• 考虑实施所需的工作量
• 平衡用户影响与开发成本

2. 制定行动计划

• 分配负责人（设计团队或开发团队）
• 制定切实可行的时间安排
• 安排后续评审

3. 记录决策

• 记录已接受的风险或权衡
• 备注推迟到未来处理的事项
• 如果模式发生变化，则更新设计系统

严重程度级别指南

严重（阻塞性）

• 违反 WCAG AA 要求（存在法律风险）
• 完全阻碍核心用户任务
• 导致数据丢失或安全问题
• 严重损害品牌形象或用户信任

高优先级

• 显著降低用户体验
• 影响大量用户
• 造成严重的无障碍障碍
• 与设计系统不一致，导致困惑

中优先级

• 对体验造成负面影响，但有替代方案
• 影响部分用户
• 轻微的无障碍问题（WCAG AAA）
• 明显的设计不一致

低优先级

• 润色和优化事项
• 边缘情况问题
• 轻微的视觉细节调整
• 有则更好的增强项

无障碍快速参考

WCAG 2.1 AA 要求：

• 色彩对比度：普通文本为 4.5:1，大号文本（18pt+ 或 14pt+ 粗体）为 3:1
• UI 组件对比度：至少 3:1
• 支持键盘操作：所有功能均可通过键盘使用
• 焦点可见：交互元素具有清晰的焦点指示器
• 文本替代内容：所有图像都具有适当的替代文本
• 表单标签：所有输入项都关联有标签
• 语义化 HTML：正确的标题层级和地标
• 触控目标：至少为 44x44 CSS 像素

测试工具：

• 色彩对比度：WebAIM Contrast Checker、Stark 插件
• 键盘导航：使用 Tab/Shift+Tab 手动测试
• 屏幕阅读器：使用 VoiceOver（Mac）、NVDA（Windows）测试

设计系统审查清单

组件使用：

• 所有组件均来自设计系统
• 未使用缺乏合理说明的一次性自定义变体
• 适当使用组件变体
• 已设计所有组件状态（默认、悬停、激活、禁用、错误、加载中）

设计令牌：

• 颜色使用令牌引用（而非十六进制值）
• 排版使用令牌引用（而非硬编码字号）
• 间距使用令牌引用（8px 网格系统）
• 阴影和效果使用令牌引用

模式：

• 导航模式与系统保持一致
• 表单模式遵循系统规范
• 模态框／对话框模式与系统一致
• 空状态使用系统模式
• 错误处理遵循系统模式

参考文件

根据具体审查需求加载以下参考资料：

• best-practices-for-design-reviews.md - 有效设计审查的方法、工具和技巧

• common-design-issues-to-watch-for.md - 常见设计问题，以及审查时需要识别的警示信号

• design-review-process.md - 全面的分步流程，包含各审查阶段的详细清单

• design-system-patterns.md - 设计系统验证标准、组件模式和令牌使用指南

• responsive-design-patterns.md - 断点策略、移动优先模式和响应式设计最佳实践

• accessibility-guidelines.md - 详细的 WCAG 2.1 AA 合规指南、测试流程和无障碍模式

• severity-levels.md - 详细的严重程度级别定义及设计问题分类标准

• design-review-report-template.md - 完整的报告模板，包含记录审查发现所需的所有章节

示例评审流程

场景：在 Figma 中评审新的结账流程设计

1. 准备（30 分钟）

   • 查看结账需求和成功指标
   • 确定结账流程中的 5 个屏幕
   • 收集支付合规要求
   • 查看设计系统组件库

2. 视觉设计评审（45 分钟）

   • 检查全部 5 个屏幕的字体排版一致性
   • 验证 CTA 按钮的颜色对比度（发现 2 个问题）
   • 确认间距遵循 8px 网格
   • 评审支付屏幕上的视觉层次

3. 无障碍审计（60 分钟）

   • 测试颜色对比度：3 个文本元素未达标（4.2:1，需达到 4.5:1）
   • 检查键盘操作流程：第 3 个屏幕上的 Tab 顺序跳转错误
   • 验证 ARIA 标签：支付输入框缺少标签关联
   • 查看错误状态：错误消息缺少语义标记

4. 响应式评审（30 分钟）

   • 检查移动端断点：表单输入框过小（高度为 38px）
   • 验证平板布局：适配效果良好
   • 测试内容重排：成功

5. 设计系统检查（20 分钟）

   • 发现系统中没有的自定义按钮变体
   • 间距使用硬编码值，而非设计令牌
   • 表单模式符合系统惯例 ✅

6. 记录发现（45 分钟）

   • 3 个严重问题：对比度不达标、触控目标尺寸不足
   • 5 个高优先级问题：键盘导航、缺少标签
   • 4 个中等问题：设计令牌使用、自定义组件
   • 使用模板创建报告，并附上视觉示例

7. 交付成果

   • 包含 12 项发现的设计评审报告
   • 针对具体问题添加的 Figma 批注
   • 列出优先级和负责人的行动项
   • 安排 1 周后进行跟进评审

总耗时：全面评审约需 3.5 小时

高效评审技巧

具体说明：不要只说“提高对比度”，而要说“蓝色背景上的正文文本对比度为 3.8:1，需达到 4.5:1。请将文本颜色加深至 #1a1a1a，或调亮背景。”

展示示例：附上带批注的屏幕截图，指出问题并建议视觉修复方案。

明确优先级：清楚区分必须修复和可选改进项，重点关注对用户的影响。

提供背景：解释问题的重要性。“此对比度问题会影响 8% 的低视力用户。”

建设性反馈：肯定做得好的地方，在提出批评的同时给予认可。

协作沟通：在最终确定前与设计师一起评审发现，并征求他们对解决方案的意见。

跟进确认：安排复审以验证修复效果，并跟踪问题直至解决。