为什么页面跟设计稿差距这么大？是啊！为毛啊？
|
前端开发 前端开发，也有称页面仔，切图仔，在还原设计的过程中，容易遇到的问题就更多了： 1，不考虑溢出 关于溢出这里有个基本的法则，就是只要是动态输出内容，或者有用户输入的，就一定要考虑溢出状态的展示。文字溢出，列表溢出等等。当拿到设计稿时，确认好布局之后，就是各种溢出状态的确认了。 2，不分析设计稿就动手写代码 作为新手拿到设计稿之后，往往都想很快写代码，因为写代码才有快感。殊不知，页面结构的分析就跟程序架构一样重要，分析透彻才能兼顾各种情况以及部分的需求变更，所谓磨刀不误砍柴工，结构分析一定要先做的。 3，不考虑增删元素的状态 稍微大一点的公司，往往是多个需求并行，所以设计稿可能有超前的部分，或者中间由于各种原因实现不了的功能。作为一个合格的前端工程师，在实现页面的时候，就要做到一些可能变动的部分就算删掉也不会对页面造成大面积影响。 4，不考虑可维护性 能自适应的地方尽量用自适应，以便应付需求变更。比如多个楼层，宽度调整，加个icon等等。举个简单例子，比如一个框框中间有个居中的按钮，很多新手是直接用 margin-left 来定位的，这样如果外层框框宽度调整，这个 margin-left 值就得跟着调整。虽说调个宽度也不麻烦，但是当开发大型复杂页面的时候，这些联动的小改动也足够搞死人了。 5，不仔细看设计稿 最常见的错误就是，设计稿上有边框，但是颜色太淡没看到。或者设计稿没边框，由于迭代样式，加了深色背景，忽略了边框没有去掉。还有一种情况就是设计稿上的色块是盖住边线的，但是实现的时候没有盖住，就导致那一部分看起来像凹进去一样。 6，看出 1px 没那么难 很多新人都觉得要对齐 1px 的差距好难，听上也有点吹毛求疵了。但是你想想，假如你是设计师，辛辛苦苦做出来个设计稿，哪哪都对不齐，你不会觉得不爽？其实只要你认真仔细看，再加上一些练习，差几像素几乎一眼就可以看出来。实在不行感觉不确定，可以截图到 PS 里面放大，再用参考线对比。 7，不考虑可扩展性 很多时候我检查页面还原，无非是多加几个项目，多填些文字先试试看，但是很多人这一关都过不了。加了项目，要么就是没有设置多行时候的下边距，要么就是再多一行边框变了，或者结尾的项目又要单独设置样式。加了文字，就直接顶出去毁了结构。 好了，吐槽这么多大家一定已经够了，相信大家在工作流程中都会遇到各种各样的细节问题，还有一些反反复复一遍又一遍遇到的问题，比如忽然一阵捉急的跑来：这个页面怎么乱了啊啊啊，麻烦快看看~~~答：ctrl+0，你放大了…… So，你有没有什么想吐槽的呢？ 延伸阅读：
（编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
