网页设计评审

评估网页设计在各设备上的视觉质量、一致性和有效性。

适用场景

• 在开发前审查设计稿或原型
• 评估已实现的网站或 Web 应用程序的设计质量
• 在设计评审会议中提供视觉设计反馈
• 评估多个页面或章节的品牌一致性
• 检查跨断点的响应式设计行为

输入

• 必填：待审查的设计（URL、设计稿文件、截图或源代码）
• 可选：品牌指南或设计系统文档
• 可选：目标受众描述
• 可选：参考设计或竞品示例
• 可选：特定关注领域

步骤

第 1 步：评估视觉层次

视觉层次按重要性顺序引导用户的视线浏览内容。

• 明确的焦点：每个页面/屏幕是否有明显的入口点？
• 标题层次：标题是否有逻辑递进（H1 → H2 → H3）？
• 尺寸对比：重要元素是否比辅助元素更大？
• 颜色对比：CTA 和关键操作是否在视觉上突出？
• 留白：间距是否有效地分隔了逻辑分组？
• 阅读流：布局是否遵循自然阅读模式（F 型、Z 型）？

## 视觉层次评估
| 页面/章节 | 焦点 | 层次清晰？ | 问题 |
|---------|------|---------|------|
| 首页 | 主视觉区 CTA | 是 | 次要 CTA 与主要 CTA 竞争 |
| 产品页 | 产品图片 | 基本 | 价格不够突出 |
| 联系表单 | 提交按钮 | 否 | 表单标题与正文文字同等大小 |

预期结果： 每个主要页面/章节均已评估视觉层次的清晰度。

失败处理： 若设计稿不可用，使用浏览器开发者工具从实时代码评估。

第 2 步：评估排版

• 字体选择：字体是否适合品牌和内容类型？
• 字体搭配：标题字体和正文字体是否互补（最多 2-3 个字体族）？
• 字号比例：是否有一致的比例（如 1.25 大二度、1.333 完全四度）？
• 行高：正文文本行高为 1.4-1.6；标题行高为 1.1-1.3
• 行长：正文文本行长为 45-75 个字符（最佳约 66 个）
• 字重：字重变化一致地用于表示层次
• 字号：正文文本基础字号至少为 16px

/* 示例良好结构的字号比例（1.25 比率） */
:root {
  --text-xs: 0.64rem;    /* 10.24px */
  --text-sm: 0.8rem;     /* 12.8px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.563rem;   /* 25px */
  --text-2xl: 1.953rem;  /* 31.25px */
  --text-3xl: 2.441rem;  /* 39.06px */
}

预期结果： 排版已从一致性、可读性和层次方面评估。

失败处理： 若设计使用超过 3 个字体族，建议合并。

第 3 步：审查色彩运用

• 调色板协调性：色彩调色板是否有意为之且有限（通常 3-5 种颜色 + 中性色）？
• 品牌对齐：颜色是否符合品牌指南？
• 对比度比率：文字满足 WCAG AA（普通文字 4.5:1，大文字 3:1）
• 语义色彩：颜色是否一致地用于传达含义（红色=错误，绿色=成功）？
• 色盲友好：信息是否不仅仅通过颜色来传达？
• 深色/浅色模式：若支持，两种模式均保持可读性和品牌一致性

## 色彩评估
| 用途 | 颜色 | 对比度比率 | WCAG AA | 备注 |
|------|------|-----------|---------|------|
| 白底正文 | #333333 | 12.6:1 | 通过 | 良好 |
| 白底链接文字 | #2563eb | 5.2:1 | 通过 | 良好 |
| 浅灰底辅助文字 | #9ca3af on #f3f4f6 | 2.1:1 | 不通过 | 增加对比度 |
| CTA 按钮文字 | #ffffff on #22c55e | 3.1:1 | 小文字不通过 | 使用更深的绿色或更大的文字 |

预期结果： 色彩调色板已从协调性、无障碍性和语义一致性方面审查。

失败处理： 使用对比度检查工具（WebAIM）验证精确比率。

第 4 步：评估布局和间距

• 网格系统：是否使用了一致的网格（12 列、自动布局或自定义）？
• 间距比例：间距是否系统化（4px/8px 基础，或类 Tailwind 比例）？
• 对齐：元素是否对齐到网格（没有"差不多对齐"的项目）？
• 密度：信息密度是否适合内容类型（数据密集型 vs 营销型）？
• 留白：留白是否有意地用于分组和分隔？
• 一致性：相似的章节间距是否相同？

间距审计：

## 间距一致性检查
| 元素对 | 预期间距 | 实际间距 | 是否一致？ |
|-------|---------|---------|---------|
| 章节标题到内容 | 24px | 24px | 是 |
| 卡片到卡片 | 16px | 16px/24px | 否——不一致 |
| 表单标签到输入框 | 8px | 4px/8px/12px | 否——有变化 |

预期结果： 布局使用系统化的网格和间距比例且保持一致。

失败处理： 若间距不一致，建议采用间距比例（如 Tailwind 的 space-*）。

第 5 步：评估响应式设计

在关键断点进行测试：

断点	宽度	代表设备
移动端	375px	iPhone SE / 小型手机
大屏移动端	428px	iPhone 14 / 大型手机
平板	768px	iPad 竖向
桌面	1280px	标准笔记本
宽屏	1536px+	桌面显示器

在每个断点检查：

• 布局自适应：布局是否适当地重排（移动端垂直堆叠，桌面端并排）？
• 触控目标：移动端交互元素是否至少为 44x44px？
• 文字可读性：字号是否适合视口？
• 图片缩放：图片是否在不变形或溢出的情况下缩放？
• 导航：移动端导航是否可访问（汉堡菜单、底部导航等）？
• 无水平滚动：内容不会水平溢出视口

## 响应式审查
| 断点 | 布局 | 触控目标 | 文字 | 图片 | 导航 | 问题 |
|------|------|---------|------|------|------|------|
| 375px | 正常 | 正常 | 正常 | 主视觉区溢出 | 汉堡菜单 | 主视觉区图片裁切 |
| 768px | 正常 | 正常 | 正常 | 正常 | 汉堡菜单 | 无 |
| 1280px | 正常 | 不适用 | 正常 | 正常 | 完整导航 | 无 |
| 1536px | 正常 | 不适用 | 行长过长 | 正常 | 完整导航 | 为内容添加 max-width |

预期结果： 设计已在所有关键断点测试，问题已记录。

失败处理： 若响应式测试工具不可用，检查 CSS 媒体查询的覆盖范围。

第 6 步：检查品牌一致性

• Logo 使用：Logo 渲染正确（尺寸、间距、保护区域）
• 颜色准确性：品牌颜色与规范匹配（精确的十六进制值，而非"差不多"）
• 排版匹配：字体符合品牌指南
• 语调/声音：UI 文案符合品牌个性
• 图标一致性：图标来自一致的图标集（风格、粗细、网格）
• 摄影风格：图片符合品牌指南（如适用）

预期结果： 品牌元素已对照指南验证，具体偏差已注明。

失败处理： 若品牌指南不存在，将此列为建议，转而评估内部一致性。

第 7 步：撰写设计评审报告

## 网页设计评审

### 整体印象
[2-3 句：整体质量、最强和最弱方面]

### 视觉层次：[分/5]
[关键发现及具体引用]

### 排版：[分/5]
[关键发现及具体引用]

### 色彩：[分/5]
[关键发现及具体引用]

### 布局与间距：[分/5]
[关键发现及具体引用]

### 响应式设计：[分/5]
[关键发现及具体引用]

### 品牌一致性：[分/5]
[关键发现及具体引用]

### 优先改进项
1. [最具影响力的修改——具体且可操作]
2. [第二优先级]
3. [第三优先级]

### 积极评价
1. [效果良好且应保留的内容]

预期结果： 评审提供具体的视觉参考反馈，并附有优先级改进建议。

失败处理： 若打分感觉随意，改用更简单的通过/关注/未通过系统。

验证清单

• 所有主要页面/章节的视觉层次均已评估
• 排版已从可读性、一致性和比例方面评估
• 色彩对比度已对照 WCAG AA 最低标准验证
• 布局和间距已检查网格一致性
• 响应式设计已在 3 个以上断点测试
• 品牌一致性已对照指南验证（或评估内部一致性）
• 反馈具体，附视觉参考（页面、章节、元素）

常见问题

• 主观而无理由："我不喜欢这种颜色"没有可操作性。解释原因（对比度、品牌不匹配、无障碍性）。
• 忽视无障碍性：视觉设计审查必须包括 WCAG 对比度检查。排除用户的美丽设计不是好设计。
• 只审查设计稿：测试响应式行为、悬停状态和过渡效果——而不仅仅是静态布局。
• 规定解决方案：描述问题（"这个背景上的文字难以阅读"）而非规定具体修复（"使用 #333"）。
• 忘记背景：银行应用和游戏网站有不同的设计标准。对照适当的背景进行审查。

相关技能

• review-ux-ui — 可用性、交互模式和无障碍性（对视觉设计的补充）
• setup-tailwind-typescript — 设计系统的 Tailwind CSS 实现
• scaffold-nextjs-app — Next.js 应用程序脚手架