一个做家居外贸的客户验收时拿尺子截图量像素，开发商说差不多就行，双方僵了一周。也有另一种客户，页面间距差了十几个像素、颜色深了一个色号都看不出来，上线后才觉得哪里不对劲。网页前端开发的设计稿还原，需要一个双方都认可的尺度，太较真和太马虎都会出问题。
还原度差都差在哪
看一个前端还原得用不用心，四个地方最露馅：
- 间距：设计稿上二十四像素的留白，做出来凭感觉变成三十像素，整页松散；
- 字号层级：标题和正文的对比度被拉平，页面的主次关系没了；
- 颜色：品牌色深一度浅一度，横幅和标志放一起就穿帮；
- 交互状态：设计稿上画了按钮悬停、点击、禁用三种样子，代码只做了默认态。
第四条最容易被漏，验收的人通常只看静态效果。按钮点下去没有任何反馈、链接悬停不变色，这些细节在设计稿上是一帧，在真实浏览里是天天见的体验。网页前端开发对还原度的把控，本质上是对设计师劳动的尊重，稿子画得再好，代码走样了也是白搭。
合理的误差范围
一比一的像素级还原是理想态，但有几类客观差异要认账：字体渲染在不同系统上粗细略有不同，一两个像素的偏差属于正常；响应式页面在中间尺寸屏幕上的排布，设计稿本来就没画，靠前端按设计语言合理处理。合理的标准是：设计稿明确标注的尺寸误差控制在一到两个像素内，颜色直接取设计稿的值，标了交互状态的必须全部实现。标注缺失的地方，做之前先问设计师，别自作主张。有分歧不可怕，可怕的是各自按想象做，最后一对全是偏差。
验收怎么做不扯皮
最有效的方法土得很：把设计稿和页面并排截图，逐屏对照，差异逐条记录，分成必须改和可接受两类，一次清单解决争议。手机端同样按移动稿对照一遍，别只验电脑端。两轮对照做完，差异清单通常不超过十来条，一次会就能清完。分歧当场定，改完再对一遍，一周内就能闭环。事先在合同里写明还原标准和分歧处理方式，验收时谁说了都不算，清单说了算。
两条建议：给设计师提需求时要求标注齐全，间距、字号、颜色值、交互状态一个不落，标注不全的稿子前端只能靠猜；验收还原度时邀请实际用户看两分钟，用户对不对劲的直觉，往往比像素尺子更能发现真问题。比格网络的项目都按逐屏对照清单走验收，这一步省不了，也从来不需要省。
