页面开发完成后，最让设计师和前端头疼的环节往往是还原度验收：设计稿上看起来整整齐齐的布局，做成网页后总有几处“说不上哪里不对”的偏差。很多团队的做法是把设计稿和页面截图并排摆在一起，用眼睛来回扫，效率低还容易漏。Snipaste 的贴图功能提供了一个更直接的办法：把设计稿截图作为悬浮窗钉在桌面最上层，调低透明度后直接叠放在正在运行的开发页面上，两层画面重合的地方看起来清清楚楚，错位的地方会出现明显的重影。本文围绕 Snipaste 贴图的叠放比对用法，讲清楚准备、对齐、比对、记录的完整步骤，并整理常见问题和解决方法。
Snipaste 贴图叠放比对的基本思路
Snipaste 的贴图可以理解为一张始终置顶的“透明胶片”。你可以把截图、剪贴板里的图片甚至文字钉在屏幕上，它不会因为切换窗口而被挡住，还可以移动位置、缩放大小、调整透明度。叠放比对就是利用这几点：先把设计稿钉在屏幕上，再把开发页面摆到它的正下方，然后把贴图调成半透明，让两层内容同时可见。
当两层内容完全一致时，你看到的是一张清晰的画面；只要某个元素的位置、尺寸或者间距不同，就会出现“双影”，偏差越大，重影越明显。这种方法特别适合检查整体布局、栅格对齐、文字基线和图标位置，比逐个量尺寸更快找到问题区域。找到可疑区域后，再用截图时的像素级定位去量精确数值，两种方法配合使用效果最好。
需要说明的是，贴图的透明度调整、鼠标穿透等操作在不同平台和不同版本中的快捷方式可能不同，下文提到的按键均为默认设置下的常见用法，具体以你实际使用的版本为准。
叠放之前要做的准备
叠放比对能否成功，关键在于两层画面的比例是否一致。设计稿通常以一倍图或两倍图导出，而开发页面在屏幕上显示的大小取决于系统缩放和浏览器缩放。如果比例不一致，两层画面永远对不齐，你会误以为页面处处都有问题。所以第一步是让设计稿截图和页面在屏幕上的显示比例相同。
最稳妥的办法是在同一台电脑、同一块屏幕上，把设计稿在设计软件或者图片查看器里以实际像素比例显示，然后用 Snipaste 截图。这样截下来的设计稿和浏览器里的页面都经过了同一套屏幕缩放，比例天然一致。如果设计稿是两倍图，而你的系统缩放是百分之一百，就需要先在查看器里把设计稿缩小到百分之五十再截图。
另外建议把浏览器窗口宽度调整到设计稿对应的宽度，例如设计稿是一千四百四十宽的桌面版页面，就把浏览器内容区域调整到同样宽度，避免响应式布局在不同宽度下切换成另一套样式。最后关闭浏览器里的书签栏和不必要的工具栏，让页面内容区域尽量完整地露出来。
把设计稿钉成贴图并调成半透明
准备工作完成后，就可以开始叠放了。下面的步骤以比对一个登录页面为例，其它页面的做法相同。
- 打开设计稿并按实际像素比例显示，按下截图快捷键进入截图状态，框选设计稿中需要比对的整个页面区域，确认选区后使用贴图操作把它钉在屏幕上。默认设置下，截图完成后可以通过工具条上的贴图按钮或者对应快捷键完成，具体以你实际使用的版本为准。
- 切换到浏览器，打开开发环境中的同一个页面，把浏览器窗口移动到贴图的下方附近，让页面主体和贴图大致重叠，此时贴图会一直浮在浏览器上面。
- 把鼠标放在贴图上，调低贴图的透明度。默认设置下，在贴图上配合修饰键滚动鼠标滚轮可以调整透明度，也可以通过贴图的右键菜单找到透明度相关选项，调到大约一半的透明程度，就能同时看清设计稿和下面的页面。
- 拖动贴图，让设计稿中一个明确的参照点（例如页面左上角的标志或者导航栏的左边缘）与页面中的同一个位置重合。拖动接近时可以改用方向键一次移动一个像素，把参照点对得严丝合缝。
- 对齐后观察整个画面，所有出现重影、错位或者颜色异常的区域就是需要进一步检查的地方，把这些区域逐一记录下来。
如果贴图挡住了页面导致无法滚动或点击，可以使用鼠标穿透功能，让鼠标操作直接作用到贴图下面的窗口上。开启穿透后贴图依然可见，但你可以正常滚动和点击页面，比对长页面时非常实用。不同版本中穿透功能的开启方式可能不同，一般可以在贴图的右键菜单中找到，具体以你实际使用的版本为准。
从重影里读出具体问题
叠放之后，屏幕上会同时出现两层内容。刚开始看可能有点眼花，掌握几个判断规律之后就会很快。下面按常见的偏差类型分别说明怎么判断。
整体错位
如果所有元素都朝同一个方向偏移了相同的距离，说明不是页面做错了，而是参照点没有对准。回到上一步重新对齐参照点，通常重影就会大面积消失。只有在参照点对齐后仍然存在的重影，才是真正需要记录的问题。
局部错位
如果只有某一块区域出现重影，例如表单下方的按钮整体往下偏了一段，说明这一块上方某个元素的高度或者间距与设计稿不同，偏差从这里开始逐级累积。沿着重影往上找，找到第一个开始错位的元素，就是问题的源头。
尺寸不一致
如果某个元素一边对齐、另一边出现重影，说明它的宽度或高度与设计稿不同。比如按钮左边缘重合而右边缘多出一截，就是按钮做宽了。这时可以用 Snipaste 截图时的尺寸显示量一下实际宽度，与设计稿标注对比，写进记录。
文字差异
文字区域出现模糊的重影，往往是字号、行高或者字体不一致。字号不同时字形会整体大一圈，行高不同时每一行的位置会逐行偏移，字体不同时字形轮廓完全对不上。判断时可以把透明度在接近全透明和接近不透明之间来回切换，交替观察两层文字，差异会更加明显。
并排比对和叠放比对怎么选
除了叠放，贴图还可以用来做并排比对，也就是把设计稿钉在屏幕一侧，开发页面放在另一侧，左右对照查看。两种方式各有适合的场景，下面的表格做了一个简单对比，内容为一般性经验。
| 比对方式 | 适合检查的内容 | 优点 | 不足 |
|---|---|---|---|
| 半透明叠放 | 布局对齐、间距、尺寸、文字基线 | 偏差一眼可见，细小错位也能发现 | 要求比例完全一致，对齐需要一点时间 |
| 左右并排 | 配色、图标样式、文案内容、整体观感 | 不需要精确对齐，上手快 | 细小的像素偏差很难靠眼睛发现 |
| 局部贴图 | 单个组件、弹窗、按钮状态 | 只钉需要的部分，不挡住其它内容 | 需要为每个组件分别截取贴图 |
| 多张贴图并存 | 不同状态或不同版本的对照 | 可同时对照悬停、按下、禁用等状态 | 贴图多了需要注意整理和关闭 |
实际工作中，建议先用并排比对快速过一遍配色和内容，再用叠放比对检查布局细节，最后对有问题的组件用局部贴图单独确认。这样由粗到细，既不会漏掉明显问题，也不会在不重要的地方花太多时间。
长页面和多状态组件的比对方法
很多页面比一屏还长，无法一次性叠放。处理长页面时，可以把设计稿按屏幕高度分成几段，每段分别截图钉成贴图，比对完一段就关闭贴图、滚动页面，再钉下一段。每一段都以该段内一个明确的元素作为参照点重新对齐，避免上一段的累积偏差影响下一段的判断。
对于有多种状态的组件，例如按钮的默认、悬停、按下和禁用状态，可以把设计稿中每个状态分别截成小贴图，排成一列钉在屏幕边上。然后在页面上逐个触发这些状态，同时对照相应的贴图。这样一次就能把一个组件的所有状态检查完，不需要在设计稿里来回翻找。检查完成后记得关闭这些贴图，避免桌面越来越乱。
如果团队同时在比较两个版本的页面，例如改版前后的对照，也可以把旧版页面截图钉成贴图叠放在新版页面上，快速看出哪些区域发生了变化。这个用法在回归测试中很有帮助，能够发现意料之外的改动。
比对结果怎么整理和交给开发
找到问题后，需要把它变成开发能直接修改的信息。建议每条问题都截一张包含重影的截图，用 Snipaste 的矩形工具圈出问题区域，再用箭头和文字写明“设计稿间距为示例 24，实际为示例 32”之类的具体描述。截图时可以连同贴图一起截下来，让开发同事也能看到叠放效果，理解问题更直观。
整理时按页面区域排序，从上到下列出问题，并标注优先级。影响整体布局的偏差优先修，只差一两个像素且不影响观感的问题可以放在后面。所有截图和描述整理完后，一次性提交给开发，比零零散散地发消息更高效，也方便后续逐条复查。
叠放比对中的常见问题解决
最常见的问题是怎么调都对不齐。遇到这种情况，先检查设计稿截图时的显示比例是否是实际像素，再检查浏览器缩放是否为百分之一百，最后检查系统缩放。三者中任何一个不一致，都会导致两层画面比例不同。确认比例一致后重新截图钉图，一般就能对齐。
第二个常见问题是贴图调整透明度没有反应。可以先确认鼠标确实停留在贴图上，而不是在贴图下面的窗口上；然后尝试通过贴图的右键菜单调整。如果之前开启了鼠标穿透，鼠标操作会直接作用到下层窗口，贴图自然不响应，需要先关闭穿透。具体操作方式以你实际使用的版本为准。
第三个常见问题是贴图被缩放过，导致比例失真。在贴图上滚动鼠标滚轮通常会缩放贴图，比对时不小心滚了一下，贴图就不再是原始比例了。这时可以通过右键菜单把贴图恢复到原始大小，或者关闭后重新钉一次。
常见问题 FAQ
Snipaste 贴图能不能一直浮在浏览器上面
可以。贴图默认显示在其它窗口的上层，切换到浏览器或者其它软件时贴图不会被挡住，这正是它适合做比对参考的原因。如果发现贴图被某些全屏程序遮挡，可以先把那个程序退出全屏模式再试，不同系统下的表现以实际为准。
贴图挡住页面没法滚动怎么办
使用鼠标穿透功能，让鼠标的点击和滚动直接作用到贴图下面的页面。开启后贴图保持可见，但不再响应鼠标操作。比对结束后记得关闭穿透，否则你可能会以为贴图“点不中”了。穿透的开启方式以你实际使用的版本为准，通常可以在贴图右键菜单里找到。
设计稿是两倍图，截图后怎么和页面对齐
在截图前先把设计稿在查看器中缩放到与页面一致的比例。例如系统缩放为百分之一百而设计稿是两倍图，就先把设计稿缩小到百分之五十再截图钉图。比例统一后再对齐参照点，两层画面就能重合。
同时钉了很多贴图，比对完怎么快速清理
可以逐个关闭不再需要的贴图，也可以使用 Snipaste 提供的隐藏或关闭全部贴图的相关操作，具体入口和快捷方式以你实际使用的版本为准。建议每比对完一个页面就清理一次，保持桌面整洁，也能避免下一页比对时把旧贴图当成新的参考。
叠放后颜色看起来不一样，是配色做错了吗
半透明叠放时两层颜色会混合，看到的颜色本来就和原色不同，不能直接用来判断配色是否正确。检查配色时应该把贴图透明度恢复到不透明，采用并排比对，或者使用 Snipaste 的取色器分别读取设计稿和页面上同一位置的颜色值进行比较。
总结
用 Snipaste 贴图做叠放比对，本质上是把设计稿变成一张可以随意移动、调节透明度、始终置顶的参考胶片。只要保证两层画面比例一致、参照点对准，布局、间距、尺寸和文字的偏差都会以重影的形式直接显现出来。再配合并排比对看配色、局部贴图查组件状态，一套还原度验收流程就完整了。下次拿到新页面，先把设计稿钉上去看看，很多问题一眼就能找到。