为什么你的设计稿落地还原度不高?

用户头像
上海/设计爱好者/8年前/1389浏览
为什么你的设计稿落地还原度不高?

设计稿明明美美哒,一旦开发落地却丑爆,不想东西拿不出手,应该怎么办?

终于做完设计稿了,自己欣赏一下觉得很满意,沾沾自喜一番。过稿ok,评审ok。之后给到了开发。然而看到开发最后呈现出来的效果却不禁怀疑这是我当初给你们的东东吗?你们是不是拿错稿了??别说挫不挫了,有时甚至面目全非了!



这种情况UI设计师们肯定多多少少碰上过,不幸的还经常。肯定有人说是开发水平不行,不给力,偷工减料,管我什么事?当初我的设计稿可是美美的呢!然而有时你需要把成品展示给别人。可能是产品的用户,可能是好奇你都捣鼓了点什么NB产物的朋友同行。最郁闷的可能要数出去面试碰上的面试官,他把玩了两下产品就评价“怎么这么丑/low?”你只能尴尬地解释再一边拿出设计稿,然而面试官并不一定买账。人家当然直接看成品,不高兴麻烦地一张张去翻设计稿。毕竟人家外人可不管这么多七七八八。更何况很多公司都要求设计师跟踪保障设计的还原度啊。于是这账分分钟就算设计头上了。

不想东西拿不出手,到底应该怎么破呢?具体来说,需要注意以下几点:


1.  开发说“这锅我们不背” 

首先我们要反思一下一切果真都是开发的错么?事实上绝大多数的开发小哥/小姐姐们都是比较尽职负责的。就算有不那么尽然的,人家也不想反复修改,肯定希望早点了事,谁会故意做得烂?所以放下陈见,我们也应该尽可能帮助他们更容易地把事情做到位。


2.  周全地考虑各种情况下的效果,不要只展现个最完美效果。

俗话说“事后补救不如事先预防”。所以在最初设计时就需要考虑一个设计在各种情况场景下的样子。例如,某块区域用于放置文字,那么如果文字不是正好的一段,内容空白,文字太少,太多?超出区域时应该怎么处理呢?或是这块面板收起时长这样,展开时呢?它周边受影响的元素又该如何相应变化呢?这些都需要有应对之法,单纯讨巧地做个理想效果没用。实际情况绝不会那么正正好好。UI和平面的最大不同之处之一就是需要动态地去思考。


3.   顾及设计延展性

在产品初期功能比较简单时,框架结构导航等结构都没那么复杂,画图元素也少。于是设计就此走了极简风格,显得很高大上。可是好景不长,随着项目的推进,各种功能都来了。要求在原图上加这加那。此时时间和人力资源又不允许大改。可是这类风格就是一旦画蛇添足立马就不简约不美了。不伦不类赶脚比吞个苍蝇还难受。因此最初设计时要考虑到后期加功能变复杂时该如何延展。不要为了追求极简搞得之后下不了台。还有一点大家经常忽视,知道后期会加功能等等和想想如何延展,就可以先和开发通气了。曾经有个前端小姐姐和我说过“延展性什么要事先知道有那么一回事,才能在开发中顺便,否则很难想到。” 提早告知开发,让他们心里有数,在写代码时注意采取恰当的方式。要不然人家写死了,后面要再改就费劲了。


4.   认清设计本身好看还是里面的素材高大上?

自从数年前Airbnb掀起了整屏大图的风格形式,有些设计不分青红皂白照搬了。殊不知人家的图片每张都是经过精挑细选,甚至还有专业团队跑去房东家里专门拍照。而实际开发出来使用时,很多图片需要由用户自发上传或是交由公司运营人员上传。这样良秀不荠,顿时视觉效果就被拉低了好几个档次。因此设计时需要考虑日后的图片来源,是否合适采用大面积铺图。


5.    搞清可设计的范围

很多时候开发为了提高效率不重复造轮子常常会直接套用框架或调用控件。例如我见过很多视觉稿都精心绘制了地图,然而现实开发都是直接调取高德地图谷歌地图,必然不会如视觉稿那般。诸如此类需要询问开发,确定哪些是套用不能改的,哪些是在一定程度上可以修改外观的,划定设计的范围。避免做无用功。


6.    制定设计规范

其实这已经是老生常谈,大家都知道的事情了。只不过实际项目时间紧,任务重,上层要求设计尽快出图或是边出图边开发。很难等到万事俱备再开干。而设计规范是归纳总结不断更新维护的产物。这导致设计一时出不了完整的规范。然而这一搁就产生了不少问题。比较切实可行的方法是,在项目初期先输出一部分规范,包括:配色、文字、图标、布局、导航菜单、tab等等基础元素。然后一有时间就归纳总结更新规范不断去完善它。并把最新版同步给开发。


7.    千万不要“一心只做图,两耳不问窗外事”,要多和各方人员沟通

比如千万不要制定好规范就单单一个文件丢给开发了,人家可能看得不仔细或是理解有偏差。给他们宣讲解释一下规范,花的功夫绝对远比之后修改要少得多得多。再比如听听产品经理对项目背景、产品功能和他的一些构思。和交互设计师讨论一下原型,提出一些建议供他参考。再或者了解一下开发人员个人的一些开发习惯,这些信息都可以帮助设计少走弯路,进而事半功倍。

设计过程中有疑惑应尽快询问相关人员,不要憋着或自己瞎揣测。有的设计会腼腆不好意思,此时就想“我多问一句对方又不能管我要咨询费”就能给自己打气了,逐渐就能克服羞涩。


8.   给开发提修改意见要注意措辞

最后,如果问题已经产生或者半路接手一个项目要优化迭代,此时需要向开发提出修改意见。不要截个图画个圈让开发自己找错。人家又没有像素眼,而且关注点和我们也不同,这么干效率低下。要具体清楚地描述问题并详细地告知应该改到什么样子,尽量用数字说话。比如“加长10px”而不是”长一点“。一点是多少?难道还让人家自己看着办么o(╯□╰)o


11
举报
|
10
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
【新年UI图标】体育icon
【新年UI图标】活动icon
UI界面 组件
盲盒APP UI设计
高级感金属拟物 UI设计组件库
【新年UI图标】相机icon
【新年UI图标】美食icon
手表表盘UI系列
森系3D渐变流体抽象矢量UI背景图
智能家居中心 简约 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI通用设计素材1
【新年UI图标】银行卡icon
户外旅行飞机情侣假日出行
我的钱包-UI界面设计-app
【新年UI图标】旅行icon
【新年UI图标】积分icon
Security Camera UI kit
新拟态风格 UI设计组件库
钱包ui模板
你可能喜欢
大家都在看
登录注册