高还原度是如何炼成的?

注:本文所讲的还原度特指「视觉设计还原度」。

最近,许多人都来问我「为什么我们的产品对设计稿的还原度很高?」

  • 如果提问者是交互或视觉设计师,内心独白:为什么我如此优秀的设计无法被100%实现?
  • 如果提问者是前端开发工程师,内心独白:到底哪里和设计稿不一样了?

其实无论提问者是什么角色,只要有人抛出这个问题,那就说明组内的设计团队与研发团队出现了比较明显的能力差。两个不同领域也许无法直接对比,但至少在对还原度这个点的认知上,是存在非常明显的差异的。

一个优秀的前端开发工程师,他一定有着雕刻家的精神,会把每一个页面、每一个组件甚至是每一个像素都当作一件作品去打磨,直到完美。如果他始终无法从设计师那儿看到他理想的、值得花心血去还原的设计稿,那一定是非常失望地做着每一次作业。

同样,一个优秀的设计师,如果他呕心沥血的精心设计无法被100%还原度地实现,眼看着自己的设计一次次地被捶打到只剩下精华的70%~80%,那内心一定是崩溃的。他会想着,如果有能力,要自己实现自己的设计。是的,前端开发领域有很多优秀框架的大神都是从设计岗位转行过来的。

一个团队的默契就在于优秀的前端开发工程师遇到了同样优秀的设计师。

还原度的唯一标准

还原度的唯一标准应该是和视觉稿看起来一模一样而不是所有像素、尺寸等在数值上绝对相等

无论你是前端开发工程师,还是设计师,只要都觉得实现和视觉稿看起来一模一样的,那说明还原度已经非常高了。

有人一定会问,如果视觉稿上标注的是1px,而实现的却是2px,明明不一样,为什么说还原度高呢?理由如下:

  1. 视觉稿上的数值是设计软件出的,而实现却是基于浏览器的,由于色彩空间不同,所以即便数值相同也不意味着完全一致。
  2. 设计师在设计时,是在一个特定尺寸的界面里设计的,界面的内容也是设计师按照一定的美感模拟的,每个界面的设计大多情况下都只会给出一份稿子;但是,在实际使用时,用户的界面内容会出现无数种状况。
  3. 设计师做内容排版的时候,并不是依据绝对的数字来进行设计的。交给研发的设计稿都是最后才标注上去的。
  4. 有些需要对齐的地方,即使只有1px,也可以肉眼直接看出来。

还原设计稿的正确姿势

既然标注的数字都不可信,那到底该如何来还原呢?那带大家一起来看一下,到底有哪些不可信的数字。

颜色

设计师们常用sketchphotoshop。当使用sketch时,那一定会使用类似Sketch Measure这种标注工具用来将设计稿标注后交付给研发。如下图:
FmedDOfEAAEgCCqAUoZvWrISAKkp
研发在开发时,会使用标注按钮颜色#0DB3A6。这看似完全没有问题的行为恰恰是存在问题的,因为如果用取色器,你就会发现,这个绿色并不是#0DB3A6

那这是为什么呢?

因为在把sketch的设计图转成预览页面的时候,发生了色彩空间转换

sketch 不支持色彩管理,所有输出的图片都是sRGB模式,而sketch工作区使用的是显示器的色彩配置(通常采用RGB模式)

标注工具标注的颜色是sketch工作区里所使用的颜色。而web浏览器里使用的是sRGB。sRGB是比RGB色域更小的一种广泛使用的色彩空间。当颜色从RGB转换到sRGB时,为了保证RGB里的每一种颜色都可以对应转换,就形成了一定的偏移。

由于色彩空间的不一样,会导致如果完全按照标注的颜色值去还原,始终与设计稿存在一些颜色上的出入。所以,尽管有标注的颜色值,研发在开发过程中,仍然常常会使用到取色器来保证高还原度。

字体

一个页面的美观度,与页面内容的文字部分有很大的关系。设计师只会出一份设计稿,为了设计稿的美观度,一定会为设计稿中的文字内容使用一个更便于阅读的字体。

程序员开发时,浏览器中常用的font-family写法有:

body {
    font-family: "Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

或者

body {
    font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

等。

以上都是非常优秀的适配字体的写法。但是不管你如何调整,适配的永远只是那几个原生字体就比较好看的设备,而用户群最大的windows总是在拖着后腿,适配到的都是微软雅黑

其实这时候,设计师们都会说:“加载一套和设计稿一样的字体呗~”。但是网站通常不太会这样做,毕竟中文的字体库真的太大了,会比较明显得影响到网页的加载效率。

除了字体本身以外,加粗在web中的表现也非常不如人意。设计师使用设计软件加粗文字的时候,会一点一点地调整,300、400、500……但是浏览器里的能支持的font-weight只有几种,不是太粗就是太细,没有中间数值;而且在 iOS、android、windows的浏览器里的表现还略有差异。始终无法与视觉稿里给的粗细保持一致,还原困难。而且windows下的微软雅黑在加粗的情况下,会表现得更差。

因此,我们会让设计师们尽量避免一些不必要的字体加粗设计。

距离

直接来看如下设计图:
Fl_0WKe-65JHmO_d8PCTU8JIqA9p
程序员对于左下角的「暂不安装」四个字会如何实现呢?

将文字所在的元素固定在左下角,并设置左边距73px和下边距38px。当然程序员们会自动强迫症地把左边距73px,调整为75px;将下边距38px,调整为40px。正如前面所说,设计师们都是先设计后标注的,因此在距离上不会有意去凑整。程序员们自己去凑整实际上影响也不大。

但是,实际上设计师去验收的时候,文字的下边距会比38,甚至是40还大。因为,文字是有自己的行高(line-height)的,也就是文字所在的元素的内容区域与元素的边界之间还有一定的距离,参考下图:
Fmd_TyjSiEG34hNtVssMkUzT3hrO
所以实现时,如果没有注意到这样的细节,那么就会导致文字与周围元素的距离与设计稿上标注的距离存在出入。这样的距离差异过多的话,会很容易降低整体的还原度。

总结

以上只是众多影响还原度因素中的个别而已,更多的问题需要自己在工作中不断总结,积累经验。

团队的默契,仅仅通过长时间合作也未必可以达到很高的水准。只有相互理解工作模式和技术手段、统一规范、不断总结进步才能真正形成团队内的默契,打造出高还原度的产品。