在这个月里面技术团队正加速研发自家的回流APP，多年没碰前端的我就不进去写Bug给小伙伴添堵了。不过作为旁观者还是发现了一些问题，其中个人比较在意的还是“设计还原度不甚理想”这个问题，今天来简单聊聊这个事情。

设计图的标记就是这样的

在豆厂做了几年的设计还原，也经常会被设计师吐槽还原度不太达标。

这里间距不太对。
这个地方没有局中。
这里高度不对。

相信大多数跟我一样的切图仔都有过类似的经历。而且都很想反驳

设计图标注就是这样标的。
代码就是局中的啊。
高度是这样写的啊。

我理解您的心情，不过，在这一点上，听设计师的就对了。要知道设计师是一群拥有名为“像素眼”的异类，在他们眼里，1px跟2px就是天和地的差距，而且相比起大大大厂及国外的设计师，国内小团队的设计师算是要求很宽松了，他们之所以会把设计还原的问题指出来，只能说明这个地方已经让他们忍无可忍了。设计图或许是这样标的没错，但是您的实现肯定是有问题的。

客户端渲染与人眼欺骗

导致同样的参数，实现出来不符合设计要求的因素有很多。我来简单分析一下。

没注意到其他影响因素

这里是回流APP设计图的一部分。

标注截图

从标注上看如果是用代码做设计还原，那么参数应该是写6px，然而还原出来的东西却被设计师吐槽说，上面的文字跟下面的文字间距不对。原因是啥呢？

无论是红色框框还是蓝色框框里面的文字，都有自己的字体样式。这些样式包括

行高。
字体大小。
字体粗细。
字体风格。

而在最终呈现的时候这些因子或多或少都会影响两行字之间的视觉效果。如果这些参数都跟设计图有些出入，再加上各种不同浏览器及操作系统的渲染算法的大同小异，影响因素就更为错综复杂了。可能这里差1px，那里差1px，最终呈现出来的作品跟设计图出入就十分巨大，以至于设计师都无法接受这种程度的还原。

人眼的欺骗

我们的眼睛经常对我们撒谎。

可以参考一下界面中的视觉差这篇文章。在设计还原里面也会经常出现这种场景，明明我就是照着设计图参数写的，为什么看起来总觉得哪里不对劲呢？

很多时候我们拿参数跟设计师撕逼的时候，如果是没有耐心的设计师也不一定会给你讲解各中原理。而程序员这种性格，要把参数值调成跟设计图标注不一致，又或者是明明实现了居中，却还要用定位来做1～2px的偏移，来达到“视觉上的居中”，从代码整洁性来说他们肯定多少会有点不舒服。矛盾就容易因此产生了。

如何还原设计

几年前刚开始做“切图仔”的时候曾经拜读过一本CSS届的大师级作品《CSS揭秘》，里面有一句话大概是这样的（原话可能有所出入）

比起设计图上的标注，要更多地去相信自己的眼睛。

其实程序员也应该如此，写代码的初期，依旧可以按照原来的做法，跟着设计图的标注参数去写，这样起码能迅速有一个初步的成品。这个时候再去对照一下设计图，如果还原度不够，肯定会觉得哪里不太对劲，这个时候再进一步做微调。

笔者当然也知道绝大多数的客户端工程师都不会有“像素眼”，也没那个心思去练就“像素眼”这个技能。虽说没有像素眼，但是人眼睛的构造应该都是类似的。即便我们不能像设计师那样准确地说出这里差多少个像素，但是我们肯定能察觉到“不对劲”。

目前回流招聘过3个客户端工程师，面试之前，我都会预览他们曾经做过的项目。普遍都有同样的问题“技能全面，然而设计还原&产品交互差强人意”，曾经的作品就是客户端工程师的名片，有时候第一印象就能影响面试结果。

我始终相信，当一个客户端工程师能够察觉到这种不对劲，并且愿意花时间去修复它们的时候（不然看着别扭），必定是迈进了下一个境界。拥有这种技能以及意识的客户端工程师，无论是回流还是其他有名的大厂都不会讨厌才是。毕竟还原度也是审核一个客户端工程师是否及格的因素之一啊（说白了就是哪怕以后要跳槽，这就是优势）。

结语

简单聊聊设计还原这个事情，现实世界有许许多多的因素会影响到设计的还原度。真可谓是“差之毫厘，谬以千里”。长此以往，设计师与客户端工程师之前必然矛盾不断，不利于项目的进展。私以为，比起设计图上的参数，客户端工程师更应该要相信自己的眼睛，当你能够经常发现“此处不对劲”，并进行微调，必然会迈上另一个台阶，这种能力不管是对公司还是自己的职业生涯都是大有裨益的。