前后对比截图

前后对比截图是一组展示同一画面在不同时间或不同状态下样貌的截图，用来突出变化、改进或退步。

Related workflow terms: 截图对比.

为什么前后对比很重要

没有上下文，变化很难判断。当前页面的截图只能告诉读者它现在是什么样，却无法说明具体改了什么。把当前状态和之前的状态放在一起，差异便一目了然，读者也不用凭记忆回想之前的画面。

因此，前后对比图是说明视觉变化最有效的方式之一。它的阅读方式很直观：视线从左向右（或从上向下）移动时，会自然发现不同之处。相比用文字描述修改内容，对比图会直接呈现变化，减少误解。

对比是否有价值，完全取决于截图条件是否一致。如果两张截图的尺寸、缩放级别或滚动位置不同，读者就无法区分哪些是有意修改，哪些只是截图条件造成的偏差。可靠的前后对比需要保持视口、浏览器和内容状态一致，只改变要检查的目标变量。

前后对比截图的常见用途

• 设计评审——把改版前后的页面并排展示，让相关人员直接比较两个状态。
• 验证错误修复——在工单中附上出错状态和修复后的状态，让审核者无需复现问题也能确认结果。
• 发行说明和更新日志——用视觉凭据展示新功能或 UI 改进，说明版本之间发生了什么变化。
• A/B 测试记录——保存两个测试版本的截图，记录不同用户组当时看到的内容。
• 网站监测——按固定间隔自动截图，形成视觉时间线。比较其中任意两帧，就能看出具体变化及其发生时间。
• 客户交付物——把改进前的状态（问题或旧设计）与改进后的结果放在一起，让工作价值更直观。

如何截取有效的前后对比图

关键是把变化单独呈现出来。除目标变量外，两张截图的其他条件都应相同。可以按以下方式操作：

• 固定视口。 设置明确的宽度和高度，两次截图都使用相同数值。哪怕只差几个像素，也会造成布局偏移，加入无关干扰。
• 保持滚动位置一致。 两次都滚动到同一个元素，或使用锚点，确保展示页面的相同部分。
• 使用相同的浏览器和设备。 不同浏览器对字体、间距和颜色的渲染略有不同。中途更换浏览器会产生并非实际修改造成的差异。
• 在同一时段截图（适用时）。实时信息流、限时横幅和个性化区域等动态内容，可能会随时间变化。
• 使用 PNG 格式。 无损压缩能保留准确的像素数据，使对比更可靠。JPG 的压缩瑕疵可能看起来像变化，实际却只是格式引入的噪点。

自动截图流程会默认固定这些条件。同一 URL、视口和设置会应用到每次截图，无需手动协调，就能得到可直接比较的图片组合。

在实际的发布或网站监测流程中，团队通常会把 URL、视口和截图日期与图片一同保存。这些上下文能让对比图成为日后仍可核验的记录，而不只是一组好看的图片。

常见问题

• 画面范围不一致。 修改前后使用不同视口宽度，会让对比失去意义。由视口差异引起的小幅布局变化可能盖过真正的修改。
• 忘记先截取修改前的状态。 变化部署后，之前的状态就无法直接找回。应在修改前保存基准截图，而不是事后补截。持续监测时可自动保存基准，确保始终有之前的状态可用。
• 忽略动态内容。 广告、轮播图、时间戳和个性化元素本来就会在两次截图之间变化。应遮盖或排除这些区域，让对比聚焦于目标变化。
• 展示截图时没有标注。 两张未标注的截图并排放置，读者无法判断哪张在前、哪张在后。应清楚标出“修改前”和“修改后”，或使用日期和版本号。