设计师
设计师是最贴近产品体验的人，但是术业有专攻，设计师往往更加注重视觉的感受，而容易犯一些美丽的错误：
1、以原生 APP 的体验类比 H5 页面设计
我们都知道，原生 APP 的体验非常流畅，界面也非常华丽，所以设计师也尽量向原生 APP 的体验靠拢。但是理想很丰满，现实很骨感，许多 APP 的体验换到 H5 上实现就惨不忍睹。所以我建议设计师可以多比照其他 H5 网站的表现来进行设计，而不要经常比照 APP 的体验。
2、设计稿展现的都是最理想的状态
设计师给我们的设计稿上面展现的都是最理想的状态，而实际情况是相当复杂的。设计稿上面反映不出各种溢出，字体折行，分辨率大小的区别。而这些情况往往都是在前端开发工程师的开发过程中才会暴露出来，这时候再去确认这方面的细节，就比较浪费时间了。所以设计师一定要在设计的时候就需要全方位的考虑到这些客观存在的现实因素。用我的话来说就是：设计图是死的，现实是多变的。
3、活字用了非系统字体
所谓活字，就是直接以文本形式展示在页面上，可能随时会因为实际情况改变，又或者是从接口里请求回来的内容实时渲染的，而不是图片上那种肯定不会改变的文字。对于这部分字体，我们一般会采用系统字体中的一种，不会因为几个特殊字体而去加载一套中文字体文件。如果是英文字体，还可以考虑在高级浏览器下的自定义字体，不过也要考虑优雅降级，以及字体的版权问题。所以经常会遇到前端做完了，设计师或者项目经理跑过来一看，就很生气的跟前端工程师说：为毛跟设计稿不一样？这时候我只能呵呵，你他妈用的字体系统根本没有，难道因为你这几个字我还要去加载一套字体文件么？得不偿失啊。所以啊，设计师不仅要有美感，还得有正常人的思维，不能觉得所有人都是搞艺术的啊。否则就是坑啊，看着好看却不能实现，这里的不能不是能力上不能，而是从网站的性能上来讲不可以那么去做啊。
前端开发工程师
下面就是前端工程师们容易忽略的问题了，不管是前端开发还是页面仔或者切图仔，都需要考虑到下面的这些问题。下面我们来看看都有哪些问题吧。
1、不考虑溢出
关于溢出这里有个基本的法则，就是只要是动态输出内容，或者有用户输入的，就一定要考虑溢出状态的展示。文字溢出，列表溢出等等。当拿到设计稿时，确认好布局之后，就是各种溢出状态的确认了。
2、不分析设计稿就动手写代码
很多前端工程师有一个很不好的毛病，拿到设计图就开始做，总感觉只有代码写完了自己的事情才是真正的完成了。他们忽略了一个很重要的环节，那就是先看，先确认，先沟通。写代码一定要注意细节和结构性，拿到设计图首先分析应该怎么做，应该有哪些模块，哪些模块可以通用，一定要经过设计之后再动手去写。所谓磨刀不误砍柴工，结构分析一定要先做的。
3、不考虑增删元素的状态
稍微大一点的公司，往往是多个需求并行，所以设计稿可能有超前的部分，或者中间由于各种原因实现不了的功能。作为一个合格的前端工程师，在实现页面的时候，就要做到一些可能变动的部分就算删掉也不会对页面造成大面积影响。
4、不考虑可维护性
能自适应的地方尽量用自适应，以便应付需求变更。比如多个楼层，宽度调整，加个icon等等。举个简单例子，比如一个框框中间有个居中的按钮，很多新手是直接用 margin-left 来定位的，这样如果外层框框宽度调整，这个 margin-left 值就得跟着调整。虽说调个宽度也不麻烦，但是当开发大型复杂页面的时候，这些联动的小改动也足够搞死人了。
5、不仔细看设计稿
最常见的错误就是，设计稿上有边框，但是颜色太淡没看到。或者设计稿没边框，由于迭代样式，加了深色背景，忽略了边框没有去掉。还有一种情况就是设计稿上的色块是盖住边线的，但是实现的时候没有盖住，就导致那一部分看起来像凹进去一样。
6、1px也很重要
很多新人都觉得要对齐 1px 的差距好难，听上也有点吹毛求疵了。但是你想想，假如你是设计师，辛辛苦苦做出来个设计稿，哪哪都对不齐，你不会觉得不爽？其实只要你认真仔细看，再加上一些练**，差几像素几乎一眼就可以看出来。实在不行感觉不确定，可以截图到 PS 里面放大，再用参考线对比。
7、不考虑可扩展性
很多时候我检查页面还原，无非是多加几个项目，多填些文字先试试看，但是很多人这一关都过不了。加了项目，要么就是没有设置多行时候的下边距，要么就是再多一行边框变了，或者结尾的项目又要单独设置样式。加了文字，就直接顶出去毁了结构。
转载于:https://www.cnblogs.com/xiangqianjin/p/6515546.html