质量审计 (audit)

质量审计（audit）

概述

audit 是对界面质量进行全面审计的技能。它的核心是：系统性检查界面的无障碍、性能、主题和响应式设计，生成详细的问题报告。

作为设计师/开发者，你可能遇到过：

“不知道界面有哪些问题”
“不知道从哪里开始改进”
“遗漏了一些问题”

audit 就是解决这些的。

为什么需要审计

1. 系统性发现

普通检查：
- 看到什么改什么
- 容易遗漏
- 不系统

审计检查：
- 系统性检查
- 不遗漏
- 有优先级

2. 质量保障

上线前审计：
- 发现潜在问题
- 避免线上问题
- 提升整体质量

3. 持续改进

定期审计：
- 发现新问题
- 跟踪改进
- 保证质量不退化

审计维度

1. 无障碍（A11y）

重要性：

- 残障人士可使用
- 符合法规要求
- SEO 友好

检查项：

检查项	标准	工具
对比度	4.5:1（文字）	axe, Lighthouse
ARIA	正确使用	axe
键盘导航	可用 Tab 操作	手动测试
alt 文本	图片有描述	axe
表单标签	每个输入有标签	axe

常见问题：

❌ 问题：
<img src="logo.png">
<button>点击</button>

✅ 正确：
<img src="logo.png" alt="公司 Logo">
<label for="username">用户名</label>
<input id="username" type="text">

2. 性能

重要性：

- 用户体验
- SEO 排名
- 转化率

检查项：

检查项	目标	工具
LCP	< 2.5s	Lighthouse
CLS	< 0.1	Lighthouse
Bundle 大小	< 500KB	bundle analyzer
图片	优化格式	Lighthouse

常见问题：

❌ 问题：
// 未压缩的代码
// 未优化的图片
// 阻塞渲染的脚本

✅ 正确：
// 代码压缩
// 图片 WebP
// 异步加载

3. 主题

重要性：

- 品牌一致性
- 维护性
- 可维护性

检查项：

检查项	说明
设计 Token	使用变量而非硬编码
暗色模式	支持深色主题
颜色语义	语义化颜色使用

常见问题：

❌ 问题：
color: #007AFF;
background: #ffffff;

✅ 正确：
color: var(--color-primary);
background: var(--color-background);

4. 响应式设计

重要性：

- 移动端用户
- 多设备支持
- SEO

检查项：

检查项	目标
触摸目标	>= 44x44px
断点	合理设置
水平滚动	无

常见问题：

❌ 问题：
width: 1200px;

✅ 正确：
max-width: 100%;
padding: 16px;

审计工具

自动工具

工具	用途
Lighthouse	综合审计
axe	无障碍审计
WebPageTest	性能分析
PageSpeed Insights	性能评分

手动检查

检查项	方法
键盘导航	Tab 键操作
屏幕阅读器	使用 NVDA/VoiceOver
移动端	真机测试

审计流程

第一步：准备

审计前准备：

1. 确定审计范围
2. 选择审计工具
3. 设置基准

第二步：执行审计

按维度逐项检查：

1. 无障碍检查
2. 性能检查
3. 主题检查
4. 响应式检查

第三步：记录问题

记录格式：

| # | 问题 | 严重程度 | 位置 | 修复建议 |
|---|------|----------|------|----------|
| 1 | 对比度不足 | 高 | 按钮 | 改深色 |

第四步：生成报告

审计报告包含：

1. 执行摘要
2. 问题列表
3. 修复优先级
4. 改进建议

实践案例

案例 1：登录页审计

审计结果：

#	问题	严重程度	位置	修复建议
1	对比度 2.5:1	高	按钮文字	改白色文字
2	缺少 ARIA	中	输入框	添加 aria-label
3	无暗色模式	中	全局	添加 dark class
4	移动端布局	低	表单	调整 padding

案例 2：仪表盘审计

审计结果：

#	问题	严重程度	位置	修复建议
1	Bundle 2MB	高	JS	代码分割
2	图片未压缩	高	图表	WebP 格式
3	触摸目标 32px	中	按钮	增大到 44px
4	硬编码颜色	中	卡片	使用 Token

严重程度

等级	说明	处理时间
高	影响使用/法规	立即修复
中	影响体验	1 周内
低	改进项	1 月内

审计报告模板

# 界面审计报告

## 执行摘要
- 审计时间：
- 审计范围：
- 总体评分：

## 问题汇总
| 严重程度 | 数量 |
|----------|------|
| 高 | X |
| 中 | X |
| 低 | X |

## 详细问题

### 高优先级

#### 问题 1：[标题]
- 位置：
- 描述：
- 修复建议：
- 参考：

### 中优先级

...

## 改进建议

### 立即行动
- ...

### 短期计划
- ...

### 长期规划
- ...

与其他技能

critique - UX 评审（体验层面）
polish - 打磨（细节层面）
optimize - 性能优化（性能层面）

速查卡片

审计维度

无障碍（A11y）
性能
主题
响应式

严重程度

高：立即修复
中：1 周内
低：1 月内

工具

Lighthouse
axe
WebPageTest

输出

问题清单
修复建议
优先级

查看源文件: GitHub原始文件