为何前端实现的页面跟设计师的设计稿的差异那么大？

设计师

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

 

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

咱们都知道，原生 APP 的体验很是流畅，界面也很是华丽，因此设计师也尽可能向原生 APP 的体验靠拢。可是理想很丰满，现实很骨感，许多 APP 的体验换到 H5 上实现就惨不忍睹。因此我建议设计师能够多比照其余 H5 网站的表现来进行设计，而不要常常比照 APP 的体验。

 

二、设计稿展示的都是最理想的状态

设计师给咱们的设计稿上面展示的都是最理想的状态，而实际状况是至关复杂的。设计稿上面反映不出各类溢出，字体折行，分辨率大小的区别。而这些状况每每都是在前端开发工程师的开发过程当中才会暴露出来，这时候再去确认这方面的细节，就比较浪费时间了。因此设计师必定要在设计的时候就须要全方位的考虑到这些客观存在的现实因素。用个人话来讲就是：设计图是死的，现实是多变的。

 

三、活字用了非系统字体

所谓活字，就是直接以文本形式展现在页面上，可能随时会由于实际状况改变，又或者是从接口里请求回来的内容实时渲染的，而不是图片上那种确定不会改变的文字。对于这部分字体，咱们通常会采用系统字体中的一种，不会由于几个特殊字体而去加载一套中文字体文件。若是是英文字体，还能够考虑在高级浏览器下的自定义字体，不过也要考虑优雅降级，以及字体的版权问题。因此常常会遇到前端作完了，设计师或者项目经理跑过来一看，就很生气的跟前端工程师说：为毛跟设计稿不同？这时候我只能呵呵，你他妈用的字体系统根本没有，难道由于你这几个字我还要去加载一套字体文件么？得不偿失啊。因此啊，设计师不只要有美感，还得有正常人的思惟，不能以为全部人都是搞艺术的啊。不然就是坑啊，看着好看却不能实现，这里的不能不是能力上不能，而是从网站的性能上来说不能够那么去作啊。

 

前端开发工程师

下面就是前端工程师们容易忽略的问题了，不论是前端开发仍是页面仔或者切图仔，都须要考虑到下面的这些问题。下面咱们来看看都有哪些问题吧。

 

一、不考虑溢出

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

 

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

不少前端工程师有一个很很差的毛病，拿到设计图就开始作，总感受只有代码写完了本身的事情才是真正的完成了。他们忽略了一个很重要的环节，那就是先看，先确认，先沟通。写代码必定要注意细节和结构性，拿到设计图首先分析应该怎么作，应该有哪些模块，哪些模块能够通用，必定要通过设计以后再动手去写。所谓磨刀不误砍柴工，结构分析必定要先作的。

 

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

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

 

四、不考虑可维护性

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

 

五、不仔细看设计稿

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

 

六、1px也很重要

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

 

七、不考虑可扩展性

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