为什么页面跟设计稿差距这么大?是啊!为毛啊? - 优设网 - UISDC

为什么页面跟设计稿差距这么大?是啊!为毛啊?

2015/09/29 24234评论区

design-just-stay-design-1

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

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

设计师

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

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

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

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

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

3,活字用了非系统字体

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

4,版本不清晰

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

5,这个应该这么切

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

cj20150929

前端开发

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

1,不考虑溢出

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

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

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

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

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

4,不考虑可维护性

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

5,不仔细看设计稿

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

6,看出 1px 没那么难

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

7,不考虑可扩展性

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

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

作者微信号:

qrjxg

【程序员和设计师的那点事儿】

《刀光剑影!那些年射鸡师与程序猿的“斗争史”》

《一像素的恩怨情仇!程序猿与设计狮之间的那些事儿》

《什么仇什么怨!程序员设计师与产品经理的爱恨纠葛》

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量101万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/design-just-stay-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 扁平化设计 版式设计 交互设计师 界面设计 排版布局 优设大课堂 职场 优设专访 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里