审查页面设计

概述

一份只说“看起来不错”的设计审查毫无价值。有价值的审查会指出具体元素、测量值以及期望值。

核心原则：每个发现都必须附带数字或选择器。没有证据就不能使用形容词，无法验证的部分需明确说明。

检查顺序

按以下顺序执行。若前面的检查失败，后面的检查将无意义。

结构：每个区块是否存在、顺序是否正确、内容是否绑定
节奏：区块连接处的间隙、网格对齐、卡片高度、区块系统
响应式：下方窗口矩阵所示，移动端和桌面端
排版与色彩：对比度、层级、孤行、溢出、文本宽度与设计稿对比
动效：参见 animating-web-pages 和 choreographing-scroll-stories
声明与内容：参见 writing-claims-that-hold
可访问性与性能：焦点、alt文本、LCP、布局偏移

窗口矩阵

测试页面需要适配的所有宽度，而非仅一个代表性宽度。以下是一组在真实上线中验证过的宽度：桌面端：1024、1280、1440、1920 和 2560；手机端：320、360、390 和 430。

宽度	检查项
1440	行长超过约75个字符；不应居中的区块居中显示
992	三栏网格应变为两栏；粘性元素无移动空间
768	没人编写的平板端代码块，导致桌面端值在宽度减半时生效
390	全出血媒体无法容纳主体；深色文本在深色背景上；水平溢出
320	最小手机端：标题换行、按钮被截断
2560	视网膜屏幕上图片模糊；内容在宽画布中间丢失

一个值得指出的移动端失败：全高度英雄区，其媒体仅占区块约55%，剩余部分显示的是区块背景。若区块背景为深色，而文案已切换为浅色主题，则文本和按钮将不可见。请在390宽度下检查两种主题状态。

测量，而非目测

从实时页面读取数值，而非仅凭截图判断。这更快、能捕捉眼睛遗漏的问题，且在无法渲染时也能工作。

// 区块节奏：每个连接处重要的是两者之和
[...document.querySelectorAll('section')].map(s => {
  const c = getComputedStyle(s);
  return { cls: s.className, h: Math.round(s.getBoundingClientRect().height),
           padT: c.paddingTop, padB: c.paddingBottom };
});

// 溢出，最常见的隐形错误
[...document.querySelectorAll('*')]
  .filter(e => e.scrollWidth > e.clientWidth + 1)
  .map(e => e.className);

// 页面水平溢出
document.documentElement.scrollWidth > document.documentElement.clientWidth;

// 网格内卡片高度一致性
[...document.querySelectorAll('.card')].map(c => Math.round(c.getBoundingClientRect().height));

本仓库中的 tools/page-measure.js 将上述检查及以下内容整合为一个代码片段。

其他经实践验证的数值检查：

区块系统：每个内容区块标题的计算字体大小相同；每个左边缘与导航徽标左边缘对齐。
文本大小下限：无文本小于10px。
只有一个 h1。标题级别降序排列且无跳级。
图片：每张都能解码；在所有滚动位置和设备像素比下，有效像素比低于或等于1.0。
每个场景的对比度：在固定场景内，每个文本节点与其第一个实体背景的对比度至少为3:1（大号文本）或4.5:1（正文），且处于场景的完成状态。
英雄区：采样八秒内的帧。若出现重复图片、英雄区矩形外的图块、重叠、文案下方的图块，或简介动画稳定后的任何变化，则判定为失败。
滚动体验：真实的滚轮输入体验，参见 choreographing-scroll-stories。
控制台清洁。脚本启动，简介运行，无待处理的错误。

当无法截图时

无头浏览器和隐藏的浏览器面板会暂停渲染，因此截图可能为空白，但DOM是完全健康的。这不应成为跳过审查或要求用户代劳检查的理由。

请改用数值验证：计算样式、边界框、scrollWidth、资源获取状态和内容类型。在报告中明确说明哪些发现是测量所得，哪些是目测所得。

内容与声明

设计审查应包括页面所陈述的内容。

每项统计数据都有出处，且出处已获准用于营销
客户徽标在已批准列表中，而非仅仅是“我们拥有的徽标”
Alt文本描述图片内容，不是文件名，且对有意义的图片不为空
CMS列表中无占位文本；动画后无空卡片
无禁用词汇；若公司风格指南禁止，则不得使用长破折号

可访问性底线

每个可交互元素上焦点环可见（使用 :focus-visible，而非 outline: none）
正文文本对比度至少4.5:1，大号文本3:1
触摸交互目标至少44x44
尊重减少动效设置：页面完整且静态
无脚本时：所有内容可见

性能底线

LCP图片为立即加载（eager），其他图片均为懒加载（lazy）
英雄区图片宽度约为其CSS宽度的2倍，而非4倍
无因未设置尺寸或没有 aspect-ratio 包装器的图片导致的布局偏移
在手机上，视频为1x或精简版文件，并配有海报图

执行程度

里程碑需要完整执行所有检查项。小修小改则只执行覆盖该更改的一项检查，在预发布环境发布并出具报告。每次调整都运行完整套件会将一行代码的修复变成一小时的工作。当有人要求“全面QA”时，则运行所有检查项。

修复后，请发布到预发布环境并对预发布环境进行QA，而非仅针对本地构建。实际部署上线的内容才是需要检查的。

验证运行过程，而非日志

在报告数据前，请确认产生数据的运行已正常完成：状态文件是今天的、日志正常结束、窗口正是你想要的窗口。早先运行产生的过期日志块看起来与新鲜日志一模一样。

冷审查员关卡

你自己的QA存在盲点。对于里程碑，请将工作产物交给一位从未见过此项工作的新审查员进行审查：仅提供窗口矩阵各宽度的整页截图、390宽度截图、动效捕捉和声明台账。标准：在层级、节奏、动效、图像和文案各项中均获得8/10分。最多三轮，每轮更换一位新审查员。对一份已完成视频的试点审查总体得分为7分，并发现了一个静态钩子和一个晚出现的品牌名称，而所有这些我们自己的自动化检查都通过了。

报告格式

一个表格。严重程度、位置、测量值、修复方案。按严重程度从高到低排序。

严重级别	位置	测量值	修复方案
高	390宽度下的 `.hero`	媒体位于812px高的区块内500px处；文案区域为 `#0c0c0c`	根据主题设置区块背景
中	proof到info的连接处	120 + 120 = 240px 的空白	收紧至80px，或将CTA放置在此处

最后说明你检查过且未发现问题的部分，以及你无法验证的项目列表（例如：“我无法听到音频”、“草稿无法在生产域名上预览”）。一份没有“无可挑剔”项目的报告给人的感觉是不完整的，而非彻底的。

红旗警示

“在移动端看起来不错”但未指定具体宽度
报告修复完成但未重新测量
因上一轮检查通过而跳过本应进行的检查
要求用户检查你自己本可测量的内容
报告来自未经确认已完成的运行数据
对一行代码的修改运行完整套件

页面设计审查