设计验收清单——让开发还原度从60%到90%

有段时间我特别怕打开自己设计的页面——设计稿里间距、层次、光影都调好了，开发一还原全变味。最离谱的一次，导航栏的hover效果上线一个月没人发现没做，因为压根没人验收过。后来我把「还原度」当成一个正经环节来抓，做了份验收清单，现在交付质量稳定多了。

问题的根源不是开发不认真，是设计侧没给验收标准。设计师交完稿就当甩手掌柜，开发只能凭感觉猜。猜就有误差。我的做法是：开发提测后，设计按清单逐项过，发现问题截图标注，一次提测一次过，不来回拉锯。

第一项是静态核对：间距、字号、行高、颜色值，对着设计稿逐项比。间距用8的倍数约定，颜色统一从设计系统的变量里取，不许出现「看起来差不多」的#333和#222。这一项能揪出八成问题，多数是色值手输错、间距差了两像素这种小毛病。

第二项是交互态，设计稿里经常漏画，开发就随便做。清单里固定检查：按钮的hover、按下、禁用三态，输入框的聚焦边框，列表加载中的骨架屏，空状态有没有引导文案，提交失败的错误提示。每缺一个都算不过关。

第三项是响应式。别只看桌面端，375、768、1440三个断点必须过一遍。最常见的坑：表格在小屏溢出、按钮文字换行、图片裁切变形。我一般让开发用浏览器自带的设备模拟器截三张图发群里，我这边对着设计稿核。

第四项容易被忽略：真实内容。设计稿里是「用户名」三个字，上线后真实用户名有20个字符，一长就破版。清单里要求用真实数据测一遍：长标题怎么截断、超长链接怎么换行、中文标点别落到行首。这些在验收时一次搞定，比上线后被用户截图吐槽强。

现在这套清单存在Figma的checklist页里，提测时发给开发，验收时逐项打勾。配合浏览器里截图对比，一次验收从原来的两天压缩到两小时。设计同学轻松了，开发不用反复返工，客户看到的成品也终于和设计稿长一个样。

标签： 设计验收 UI设计 还原度