为什么页面跟设计稿差距这么大？是啊！为毛啊？

在互联网产品的研发流程中，页面的视觉还原是很重要的一个步骤，也往往是问题最多的一个环节。如果一些细节问题在这个环节没有被有效地发现并解决，那么后续流程中再去解决这些问题的成本就会呈指数上升。

那么今天我们就来梳理一下，看看前端工程师本身以及上下游的角色之间，都会容易遇到哪些常见的问题。

设计师

设计师是最贴近产品体验的人，但是术业有专攻，设计师往往更加注重视觉的表现，而容易犯一些美丽的错误：

1，以原生 APP 的体验类比 H5 页面设计

我们都知道，原生 APP 的体验非常流畅，界面也非常华丽，所以设计侧也尽量向原生 APP 的体验靠拢。但是现实往往很残酷，许多 APP 的体验换到 H5 上实现就惨不忍睹，比如一个包含复杂操作的浮层，在各种低端机上可以说是漏洞百出。所以这里，建议设计师可以多比照其他 H5 网站的表现来进行设计，而不要经常比照 APP 的体验。

2，设计稿都是最完美的状态

是的，设计稿上面往往体现的都是最完美的状态。而前端开发人员往往要考虑各种溢出状态，多个超出、折行、撑开等等。这些情况多数在设计稿上不会体现，往往要到开发过程中再去确认细节，比较浪费时间。

3，活字用了非系统字体

所谓活字，就是直接以文本形式展示在页面上，而不是用图片模拟的文字。对于这部分字体，我们一般会采用系统字体中的一种，不会因为几个特殊字体而去加载一套中文字体文件。如果是英文字体，还可以考虑在高级浏览器下的自定义字体，不过也要考虑优雅降级，以及字体的版权问题。所以老大问：为毛跟设计稿不一样？我们只能说，没这字体啊… 这里建议，即使是设计稿，活字也要用系统字体，否则就是坑啊，看着好看又实现不了。

4，版本不清晰

设计出的稿子，往往是一段时间的规划功能，再去跟产品确认。而产品一般会说，这个先不要，那个先不做。但当真正去掉之后，所有这些间距调整，颜色背景影响等等，还是要再跟设计师确认。所以如果可能的话，应该每次需求只突出变更部分，而不是一个大而全的稿子。

5，这个应该这么切

关于这个问题，已经无力吐槽了，这页面真的不是切出来的。你说这么切那么切，你切个给我看看？分明是撸出来的嘛～

(编辑：小酷)