设计审查 (design-review)

设计审查（design-review）

概述

design-review 从设计角度审查 UI/UX 变更。它的核心是：确保设计质量，发现视觉、交互、体验问题。

作为程序员，你可能遇到过：

• “这个实现和设计图不一致”——但不知道具体哪里不对
• “设计师说体验不好”——但说不清楚哪里不好
• “这个界面怪怪的”——但说不上来为什么

design-review 就是解决这些的。

审查维度

1. 视觉一致性

检查点：
- [ ] 颜色和设计系统一致？
- [ ] 字体、字号符合规范？
- [ ] 间距、padding 统一？
- [ ] 图标风格一致？
- [ ] 圆角、阴影风格统一？

2. 交互体验

检查点：
- [ ] 按钮悬停/点击状态？
- [ ] 表单输入状态？
- [ ] 加载状态？
- [ ] 错误状态？
- [ ] 空状态？

3. 响应式

检查点：
- [ ] 移动端布局正常？
- [ ] 平板布局正常？
- [ ] 桌面布局正常？
- [ ] 断点设置合理？

4. 可访问性

检查点：
- [ ] 颜色对比度符合 WCAG？
- [ ] 所有交互可通过键盘完成？
- [ ] 有适当的 ARIA 标签？
- [ ] 图片有 alt 文字？
- [ ] 表单有对应 label？

实践案例

案例 1：按钮审查

设计师给了一个按钮设计

design-review 会检查：

视觉：
- [x] 颜色：#007AFF ✅
- [ ] 字号：应该是 16px，设计图是 14px ❌
- [x] 圆角：8px ✅
- [x] 内边距：12px 16px ✅

交互：
- [x] 悬停态：有 #0056b3 背景色 ✅
- [x] 点击态：有按下效果 ✅
- [x] 禁用态：50% 透明度 ✅

可访问性：
- [x] 键盘可聚焦 ✅
- [x] focus ring ✅

问题：
- 字号偏小，建议 16px

案例 2：表单审查

一个登录表单设计

design-review 会检查：

UX：
- [ ] 标签位置：左对齐 vs 上对齐
- [ ] 占位符 vs 标签文字
- [ ] 必填项标识
- [ ] 错误提示位置和内容

交互：
- [ ] 输入时即时验证？
- [ ] 错误时聚焦到第一个错误字段？
- [ ] 密码可见/隐藏切换？

可访问性：
- [ ] 所有 input 有 id 和 label 对应？
- [ ] 错误用 aria-describedby 关联？
- [ ] 颜色对比度 > 4.5:1？

案例 3：卡片组件审查

一个商品卡片设计

design-review 会检查：

视觉：
- [ ] 图片比例一致？
- [ ] 标题行数限制？
- [ ] 价格样式统一？
- [ ] 阴影层次？

内容：
- [ ] 商品名称过长怎么处理？
- [ ] 没有图片怎么处理？
- [ ] 价格为空怎么处理？

交互：
- [ ] 整卡片可点还是只有按钮？
- [ ] 悬停效果？

输出模板

## 设计审查报告

### 1. 视觉一致性
- ✅ 通过项...
- ❌ 问题项...

### 2. 交互体验
- ✅ 通过项...
- ❌ 问题项...

### 3. 可访问性
- ✅ 通过项...
- ❌ 问题项...

### 4. 问题汇总
| # | 问题 | 严重程度 | 建议 |
|---|------|----------|------|
| 1 | 字号不一致 | 高 | 改为 16px |
| 2 | 缺少 focus 样式 | 中 | 添加 outline |

速查卡片

审查维度

• 视觉一致性
• 交互体验
• 响应式
• 可访问性

输出

• 审查报告
• 问题清单
• 改进建议

使用场景

• 设计完成后
• 开发前
• Code Review 时

与其他技能

• design-consultation - 设计咨询
• audit - 技术质量审查
• plan-design-review - 设计计划审查

---

查看源文件: GitHub原始文件