先从用户和任务开始

设计验收容易从颜色、圆角和阴影开始。页面看起来是否精致当然重要，但更早需要确认的是：目标用户能不能看出信息层级，能不能完成主要任务，内容变化以后结构会不会失效。

一张页面在设计稿里整齐，不代表它在小屏、键盘操作、放大文字、屏幕阅读器、长语言、从右向左书写或真实数据下仍然可用。设计、可访问性和本地化需要进入同一套验收流程，而不是等页面完成以后再分别补丁。

这套流程可以从三个问题开始：用户要完成什么，界面怎样引导他完成，哪些条件会让这条路径中断。

检查页面前，先写清楚四件事：

• 谁会使用；
• 他此刻要完成什么；
• 主要行动是什么；
• 完成后怎样确认结果。

同一个输入框，在站内搜索、付款、地址填写和账户登录中承担的风险不同。站内搜索没有结果时，重点是提供修改查询的方法；付款表单出错时，还要保护已填写内容、说明扣款状态，并让用户安全返回。

如果任务没有定义，设计评审很容易变成个人偏好。有人希望按钮更大，有人希望页面更克制，双方都无法说明变化会怎样影响用户。把任务写出来以后，可以继续问：最重要的信息是否先被看见，主要行动是否容易识别，错误是否可以恢复。

设计相关案例中的 HAS 和 CCC，可以作为第一轮视觉检查的简写：Hierarchy、Alignment、Spacing，以及 Color、Contrast、Consistency。它们用于把模糊的「看起来不对」拆成可以讨论和修改的问题，不承担评分公式的作用。^[1]

用固定顺序减少遗漏

一轮完整验收可以采用下面的顺序：

1. 用户、场景和主要任务；
2. 信息层级；
3. 对齐与分组；
4. 间距；
5. 颜色与对比；
6. 字体与文案；
7. 组件、状态和反馈；
8. 响应式与真实内容；
9. 键盘、语义和辅助技术；
10. 语言、Locale 和阅读方向；
11. 真实设备与目标用户测试。

这个顺序能避免在结构仍有问题时反复调整细节。比如主标题、说明和按钮没有形成清楚层级，先换品牌色通常解决不了问题；组件没有定义加载和错误状态，只检查静态默认样式也不足以交付。

每轮评审最好保留问题、影响、证据和处理结果。记录「按钮颜色不够好」很难复查，记录「主要 CTA 与次要链接的对比接近，三位测试者先点击了次要链接」则更容易决定优先级。

层级让用户知道先看什么

信息层级回答三个问题：这里是什么，最重要的内容是什么，下一步是什么。

页面通常同时包含标题、解释、主要行动、次要行动、导航和辅助信息。层级可以通过字号、字重、颜色、位置、留白、边框和容器建立。工具很多，角色应当有限。若每个区块都使用最大标题、强对比颜色和醒目卡片，页面会同时争夺注意力。

检查层级时，可以把页面缩小或轻微模糊，只看整体形状。主要标题和行动是否仍能被识别？然后恢复正常尺寸，快速扫视几秒，记录视线顺序。最后回到内容，确认视觉重点与业务重点一致。

层级还要覆盖状态。错误信息可能比字段说明更重要，付款成功确认可能比继续浏览更重要。只在默认页面建立层级，真实使用时仍会混乱。

设计走查中曾出现过一个具体问题：为了保持几何对齐，某段内容被放在视觉上整齐的位置，却削弱了推荐方案的层级。最终需要调整 CSS，而不是继续解释「它在像素上是齐的」。这类案例说明，对齐服务于关系，不能压过任务。^[1]

对齐表达关系

同一列的标题、正文和按钮通常共享一条起始线，能够让用户快速理解它们属于同一组。跨区块出现无意错位，会增加扫描负担，也会让页面显得不稳定。

对齐不等于每个可见笔画都落在同一像素。字体包含字面框、字偶距、字距和行高，不同字形的视觉边缘可能不一致。图标也可能因为内部留白显得偏移。判断时既要看布局框，也要看实际视觉重量。

自动布局、Flexbox 或 Grid 有助于保存共同规则。它们让内容增加、语言变长和窗口变化时，元素仍按父容器的方向、间距和对齐方式重新排布。自由拖拽适合少量装饰，承担主要信息的元素若大量使用绝对定位，后续适配成本通常会升高。^[1][2]

检查对齐时，可以先打开布局参考线，再关闭参考线观察视觉结果。两者有冲突时，应回到内容关系和使用场景，而不是只服从工具中的坐标。

间距说明哪些内容属于一组

间距承担分组作用。标题和解释较近，表示它们共同表达一件事；两个章节之间更远，表示话题已经切换。所有距离都相近时，用户难以判断组内与组间关系。

4 或 8 的倍数是一种常见起点，有些工具和模板也会使用 5 或 10 系列。具体数列不是质量证明。更重要的是项目只使用有限刻度，并让相同关系获得相同距离。^[1][2]

可以先定义少量角色：

• 图标与标签；
• 标题与正文；
• 字段标签与控件；
• 组内元素；
• 卡片内边距；
• 区块间距；
• 页面上下边距。

随后用真实内容做压力测试。两行标题、三段说明、空状态和错误消息出现后，原来的间距是否仍能表达关系？如果设计只能容纳示例文案，问题可能在容器和布局规则，而不只是文案太长。

颜色需要承担明确职责

颜色可以表示品牌、层级、状态和交互。每种颜色最好有稳定职责，例如正文、次级文字、背景、边界、主要行动、成功、警告和错误。

成熟色板中的编号通常代表设计者整理过的明暗梯度，不表示两个不同色相的同编号具有相同感知亮度。选择颜色时要在实际前景、背景、字号和状态组合中检查，不能只看色板名称。^[1]

状态也不能只依靠颜色。错误字段可以同时使用文字说明、图标和明确关联；图表可以增加标签、线型或纹理；选中项可以同时改变形状或标记。这样既照顾色觉差异，也让所有用户更容易判断。

深色模式不能靠简单反转。背景、表面、文字、边界、图片、阴影和状态都需要重新验证。浅色模式中很轻的边框，在深色背景上可能消失；品牌色在深色底上也可能产生眩光或对比不足。

对比要在真实状态下检查

对比既影响视觉层级，也影响可读性。课堂中常见的 4.5:1、3:1 等数字只能作为进入规范的提示，产品应根据当前采用的 WCAG 版本、文本大小、组件类型和符合等级核对具体成功标准。^[1][3]

截至 2026 年 8 月，W3C 建议使用最新的 WCAG 2.2 资源。WCAG 2.2 仍按可感知、可操作、可理解和稳健四项原则组织，并通过 A、AA、AAA 三级成功标准判断符合程度。^[4]

对比检查至少覆盖：

• 正文、次级文字和占位提示；
• 链接及其悬停、访问和聚焦状态；
• 按钮的默认、悬停、按下、禁用和聚焦状态；
• 表单边界、错误、成功和帮助文字；
• 图标、图表和传达意义的图形；
• 键盘焦点指示；
• 浅色、深色以及系统高对比设置。

一个常见疏漏是默认状态通过了检测，悬停后背景变浅导致文字对比下降。另一种疏漏是禁用按钮过于模糊，却没有说明为什么不能继续。验收要覆盖完整状态组合。

符合 WCAG 也不等于所有用户都能轻松完成任务。标准提供可测试基线，复杂产品仍需要辅助技术测试和目标用户研究。

字体系统要经得起内容变化

字体检查可以从五个参数开始：字体家族、字号、字重、字距和行高。^[2]

正文以 16px 起步、标题按比例生成，是常见练习方法。实际项目还要考虑字体本身、用户设置、设备距离、语言和内容密度。标题约 1.2 倍行高、正文约 1.4 倍行高也只是起点，不同字体的 metrics 会改变结果。^[2]

一套可维护的字体系统通常包含少量明确角色，例如页面标题、区块标题、正文、辅助文字、按钮和数据。每个角色记录字号、行高、字重和适用范围。角色比一串散落的像素值更容易维护。

还要检查以下内容：

• 用户把文字放大后，内容是否重叠、截断或被固定高度隐藏；
• 长标题和长按钮是否换行合理；
• 中英文、数字和标点混排是否稳定；
• 大写英文、产品名和品牌名的写法是否一致；
• 链接是否只靠颜色区分；
• 代码、金额和表格数字是否需要等宽或制表数字；
• 备用字体加载时是否产生严重跳动。

字距需要按字体、字号和字重判断。某些大号英文标题适合略微收紧，正文不能机械复用。字体作者的说明和真实文案比通用参数更可靠。^[2]

字体还涉及许可。网页字体、App 内嵌、商业发布、再分发和客户交付可能属于不同许可范围。选型时要保留字体来源和授权记录，避免在上线前才发现无法合法嵌入。