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

为什么页面跟设计稿差距这么大  

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

  设计师  

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

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

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

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

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

  3，活字用了非系统字体  

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

  4，版本不清晰  

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

  5，这个应该这么切  

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

  前端开发  

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

  1，不考虑溢出  

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

  2，不分析设计稿就动手写代码  

  作为新手拿到设计稿之后，往往都想很快写代码，因为写代码才有快感。殊不知，页面结构的分析就跟程序架构一样重要，分析透彻才能兼顾各种情况以及部分的需求变更，所谓磨刀不误砍柴工，结构分析一定要先做的。  

  3，不考虑增删元素的状态  

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

  4，不考虑可维护性  

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

  5，不仔细看设计稿  

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

  6，看出1px没那么难  

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

  7，不考虑可扩展性  

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

Powered by Froala Editor