前端读者 | 为何页面跟设计稿差距这么大？是啊！为毛啊？

本文来自优设 @3年2班程远；连接：https://www.uisdc.com/design-just-stay-design

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

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

设计师

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

一、以原生 APP 的体验类比 H5 页面设计

咱们都知道，原生 APP 的体验很是流畅，界面也很是华丽，因此设计侧也尽可能向原生 APP 的体验靠拢。可是现实每每很残酷，许多 APP 的体验换到 H5 上实现就惨不忍睹，好比一个包含复杂操做的浮层，在各类低端机上能够说是漏洞百出。因此这里，建议设计师能够多比照其余 H5 网站的表现来进行设计，而不要常常比照 APP 的体验。

二、设计稿都是最完美的状态

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

三、活字用了非系统字体

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

四、版本不清晰

设计出的稿子，每每是一段时间的规划功能，再去跟产品确认。而产品通常会说，这个先不要，那个先不作。但当真正去掉以后，全部这些间距调整，颜色背景影响等等，仍是要再跟设计师确认。因此若是可能的话，应该每次需求只突出变动部分，而不是一个大而全的稿子。

五、这个应该这么切

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

前端开发

前端开发，也有称页面仔，切图仔，在还原设计的过程当中，容易遇到的问题就更多了：

一、不考虑溢出

关于溢出这里有个基本的法则，就是只要是动态输出内容，或者有用户输入的，就必定要考虑溢出状态的展现。文字溢出，列表溢出等等。当拿到设计稿时，确认好布局以后，就是各类溢出状态的确认了。

二、不分析设计稿就动手写代码

做为新手拿到设计稿以后，每每都想很快写代码，由于写代码才有快感。却不知，页面结构的分析就跟程序架构同样重要，分析透彻才能兼顾各类状况以及部分的需求变动，所谓磨刀不误砍柴工，结构分析必定要先作的。

三、不考虑增删元素的状态

稍微大一点的公司，每每是多个需求并行，因此设计稿可能有超前的部分，或者中间因为各类缘由实现不了的功能。做为一个合格的前端工程师，在实现页面的时候，就要作到一些可能变更的部分就算删掉也不会对页面形成大面积影响。

四、不考虑可维护性

能自适应的地方尽可能用自适应，以便应付需求变动。好比多个楼层，宽度调整，加个icon等等。举个简单例子，好比一个框框中间有个居中的按钮，不少新手是直接用 margin-left 来定位的，这样若是外层框框宽度调整，这个 margin-left 值就得跟着调整。虽然说调个宽度也不麻烦，可是当开发大型复杂页面的时候，这些联动的小改动也足够搞死人了。

五、不仔细看设计稿

最多见的错误就是，设计稿上有边框，可是颜色太淡没看到。或者设计稿没边框，因为迭代样式，加了深色背景，忽略了边框没有去掉。还有一种状况就是设计稿上的色块是盖住边线的，可是实现的时候没有盖住，就致使那一部分看起来像凹进去同样。

六、看出 1px 没那么难

不少新人都以为要对齐 1px 的差距好难，听上也有点吹毛求疵了。可是你想一想，假如你是设计师，辛辛苦苦作出来个设计稿，哪哪都对不齐，你不会以为不爽？其实只要你认真仔细看，再加上一些练习，差几像素几乎一眼就能够看出来。实在不行感受不肯定，能够截图到 PS 里面放大，再用参考线对比。

七、不考虑可扩展性

不少时候我检查页面还原，无非是多加几个项目，多填些文字先试试看，可是不少人这一关都过不了。加了项目，要么就是没有设置多行时候的下边距，要么就是再多一行边框变了，或者结尾的项目又要单独设置样式。加了文字，就直接顶出去毁告终构。

好了，吐槽这么多你们必定已经够了，相信你们在工做流程中都会遇到各类各样的细节问题，还有一些反反复复一遍又一遍遇到的问题，好比突然一阵捉急的跑来：这个页面怎么乱了啊啊啊，麻烦快看看~~~答：ctrl+0，你放大了…… So，你有没有什么想吐槽的呢？