实战五步走!UI设计师如何让设计稿100%还原(上)? - 优设-UISDC

实战五步走!UI设计师如何让设计稿100%还原(上)?

2017/08/25 6195评论区

Tony(作者):大部分新手设计师可能都会遇到一个问题,设计效果很赞,为何还原效果那么差?是开发不行?然后就吐槽开发傻X,可很少有人想过是否是自身的原因,在开发过程中就不断和开发撕逼。今天我介绍一些关键点,通过这套系统的方法来解决你的视觉还原度,希望这篇文章能帮助到你。

五大核心关键因素

关于如何能让设计稿还原度像我们原版视觉一样,这里我总结了几大点,从我个人多次和开发交流过程中所总结的一些经验。

  • 定稿前的评审
  • 整理一份标注文档
  • 向开发宣讲标注
  • 积极响应开发的每一个疑问
  • 开发还原度检视

1. 定稿前的评审

和谁评审?这里当然是和产品经理,设计领导,还有开发同学,测试妹妹们(为什么没有boss,因为boss你根本看不到啦)。

当然在最开始初期不需要叫这么多人,直接和设计领导就好了,因为版落地设计,是需要多次评审的,所以前期这里我们就不谈了,那么在设计中期评审就一定要拉上产品链中的关键角色。

首先评审的时候一定要把改版视觉变化最大的要和开发说明清楚,布局框架改变都会增加开发工作量,能否实现或者实现是否功耗很高(一般有高级动效就会有很大功耗),这时候开发leader 就会在这里提前预估判断下,因为这个环节如果不把握好,到后期如果出现意外,实现难度大,那么就又得重新修改视觉,那时候,时间是非常紧张的,所以一定要把握好各个关节环节

这里有人会问,框架前期不是交互已经和开发评审了吗?这个不一定的,因为如果我们在设计过程中,灵感爆发,有些之前想的不到位的,这时候可能会做一些改动啥的,搞不好就把局部框架改了一些,所以一定要注意这些细节点。

这个环节把握好了,那基本都能实现出来,特殊情况除外,比如前期忽略了一些后台数据的问题。

2. 整理一份标注文档

为什么要整理一份标注文档?

这里文档不一定要十分严格的按照交互文档或者视觉规范文档来做,可以简易的做,关键是能让开发看得懂。

文档里面放什么?是全部放?

如果是小版本迭代,那么相对简单一些,因为前面基本控件已经有了,只要标注里面写清楚了,可以不需要写文档。

那如果是大版本迭代呢?比如7.0到8.0一个全新的视觉语言,那么这时候就必须整理一份文档。

文档里面就把这次更新迭代的共同的页面整理出来,公共控件,整理出来标注一份就好了,然后说明细节处理问题。

比如:

  • list几种类型,单双行高度,如果是动态list,那么写明字符截断规则,如果可以允许换行,那么写清楚最多换几行,一般最多3(多语言时候用),超大模式如何处理?一般list文字上下都会标有一个高度,这样即使是超大模式,超大字体也不会导致控件穿插。
  • 导航在超大模式下处理规则如何,多语言如何换行(比如阿语),换行规则是什么?先缩小字体,在换行?等等。
  • 图片宫格布局类型的如何处理,小屏和大屏显示几个(指的是phone和pad),横竖屏显示规则是什么,如何实现自适应布局等。
  • 记住banner一定要给出比例,常用21:9,16:9,4:3。
  • 非常关键的一点,设计师标注一定要把点击区域标注出来,如果你不标注出来,开发直接拿你切图填充进去,然后最后导致可用性非常差,最后导致来回调试。

这个环节是标注的核心部分,非常细微的还原实现这步非常关键

3. 向开发宣讲标注

为什么要向开发走读layout? 因为有些细微的地方需要我们特别像开发说明,也加深他们的映像,在实现时候就减少出错,像开发走读的时候,只把关键核心点,规则讲清楚,我们前面每走一步,都是为了后面我们检视还原度的时候要轻松一些,开发也轻松一些,就比如前期基础没打好,后面深入很难。(如果大视觉没还原好,如何叫开发打磨细节?)

4. 积极响应开发的每一个疑问

在开发紧张环节中,即使我们前面所有工作都准备好了,也很难避免开发不找我沟通,这时候我们要积极回应他们,并且和他们一起处理问题,比如某些难度大一点的页面,开发实现效果和设计稿差异不小,那么这时候,开发会截一张他们实现的效果图给你看,这时你就要仔细去找问题,不要一口咬定就是开发的原因,先沟通具体原因,然后找出解决办法,如果是标注出现问题,比如标注标死了,页面不灵活,适配局限性很大。

那么你就要思考layout的问题了,比如间距是否能标成百分比关系等等

5. 开发还原度检视

经过前面和开发的各种协同作战到最后一步验收环节了,还原度检视,这时候你必须要有一双火眼精金,那怎么检视?

检视是有一套科学方法的,部分同学,估计拿着手机就开始看页面的问题了,这样检视是很容易漏掉场景的。

那么如何科学检视还原度?

按场景检视,我前面写了一篇文章,关于app 命名系统,这里就派上用场啦!APP设计中,如何更专业地管理设计命名系统?

比如,我可以就按我画布上面这些顺序来检视,这样就避免漏掉场景,异常场景等等。更高级的做法,可以做一个测试用列,这样百分之百不漏掉场景。

总结

五大黄金步骤,如果每步把握好了,基本能实现高还原度的开发成果,这是一个细心的活,期待你们产品百分百还原。

  • 定稿前的评审
  • 整理一份标注文档
  • 向开发宣讲标注
  • 积极响应开发的每一个疑问
  • 开发还原度检视

关于还原UI设计稿这件事,很多前辈都分享了他们的经验:

  1. 《解决这13个问题,可以实现99.9%的设计稿还原》
  2. 《实用干货!视觉设计师如何让设计效果高还原度落地?》

原文地址:http://www.woshipm.com/u/691425

原文作者:Tony

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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