按截图改网页：怎样描述差异、怎样验收

AgentField 编辑整理｜截图比对工作流。本文没有提供或完成一组实际还原截图；差异记录中的情境均为示例，不能作为项目已还原的证据。

参考图和当前网页看起来不同，原因可能是布局，也可能只是窗口宽度、文字长度或展开状态不同。开始调整样式前，先让两边处在可比较的条件下，再把差异写成可以复核的记录。

第一步：给参考图补一张条件卡

拿到图片时，先记录它对应哪个页面、哪个状态，以及你知道和不知道的条件：

• 页面与内容：页面位置、实际文案、图片素材；敏感内容脱敏后，两边尽量用相同长度的替代文字。
• 视口：浏览器内容区域的宽与高，不要只记整个显示器尺寸。
• 显示条件：浏览器缩放、设备像素比、字体是否已加载；无法确认的项目直接标未知。
• 交互状态：登录情况、当前分类、展开或收起、弹窗是否出现，以及滚动位置。
• 截图范围：当前视口还是完整页面，是否被裁剪或二次缩放。

截图文件的像素数不能直接当成页面的 CSS 尺寸。Chrome 官方文档说明，设备像素比反映物理像素与 CSS 像素的关系；设备工具栏也可指定模拟视口尺寸。因此先记录这些条件，再判断间距差异。Chrome 设备模式文档

如果参考图只剩一个裁剪片段，就先核对这个片段内能确认的关系，别据此承诺整页尺寸完全一致。

第二步：一条记录只说一个差异

先处理内容缺失和区域顺序，再处理对齐、换行与间距，最后检查颜色和装饰细节。这样可以避免布局尚未确定，就反复调整局部外观。

每条差异按下面四格写：

位置：哪个区域、哪个元素
参考：参考图中可确认的表现
当前：在相同条件下观察到的表现
验收：修改后怎样再次确认

例如，下面是格式演示，不是实际测量：

位置：列表上方的分类栏
参考：所有分类在一行，选中项有底部标记
当前：最后一个分类换到下一行
验收：相同视口、文案和选中状态下检查换行与标记

“更紧凑一点”还需要补充位置和依据；“这里差 8 像素”也需要说明测量条件。不能从图片确认的字体、阴影或隐藏交互，先列为待确认项。

第三步：修改一组相关差异，再用相同条件重拍

把共同影响布局的差异放在一轮，例如内容宽度与分类栏换行；每轮完成后保留新的结果图和仍未解决的编号。不要用旧结果图解释新代码。

Chrome 设备模式的 Responsive 视口允许输入宽、高；截图菜单区分当前视口截图与完整页面截图。前后比对时使用相同范围，避免把不同裁剪当成布局变化。官方截图与视口说明

文件可按“页面—状态—尺寸—前后”命名。命名只是定位线索，具体日期、浏览器和已知限制仍要写进检查记录。若内容刷新了，也应说明这张图已不具备完全相同的比较条件。

第四步：把视觉与行为分开验收

视觉检查回答：参考中的内容和顺序是否保留，主要区域是否对齐，文字是否出现意外换行或截断。逐条对应差异编号，记录通过、未通过或无法确认。

行为检查回答：分类能否切换，折叠能否恢复，长内容是否能滚到末尾，按钮能否完成既定动作。静态图里看不出的行为，要实际操作后单独记录。

设备模式是桌面上的近似模拟，不等于在真实手机运行。若验收要求涉及目标手机，应补充真机结果；没有设备时写“真机未验证”，不能把模拟截图称为真机证明。Chrome 官方限制说明

交付时保留参考图、最新结果图、相同条件说明、差异结果和未验证项。没有参考或结果截图，就把状态写为待比对。你遇到的视觉差异里，有没有最终发现是内容或状态不一致，而非样式造成的？欢迎分享能说明这个判断的证据。