UI 设计师如何让设计稿100%还原(上)

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


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

UI 设计师如何让设计稿100%还原(上)

五大核心关键因素

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

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

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 设计师如何让设计稿100%还原(上)

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

总结

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

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

【未完待续】

 

作者:Tony,华为音乐UI设计师。

本文由 @Tony 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21609/

(0)
CatherineCatherine
上一篇 2017-04-28 19:33
下一篇 2017-04-28 21:44

相关推荐

  • 减少返工!如何发现交互设计中的思维盲区?

    作为入行不久的交互设计师,我发现自己在交互设计的实践中无法顾及到方方面面,是存在思维盲区的。其中有欠缺经验的原因,也有自身知识局限的问题。进入开发阶段后,每次需要修改交互时,心里都会有些惭愧,感觉为…

    交互设计 2015-11-03
  • 如果想做好产品,你懂人性心理吗?

    来源:市场部 作者:IT精英 众所周知,产品研发的过程除了必备的资源配给外,都离不开人的参与,需要有客户,需求分析人员,开发人员,测试人员等角色参与其中,才能使一个产品研发的过程顺利开展。既然离不开人的…

    2014-09-21
  • 小优姐姐,大家都在说的交互设计,它日常工作内容究竟是啥?

    封面设计:vivien bertin每次亲朋好友来问我,做什么工作的啊?自豪的回答:交互设计然后然后就没有然后了。。。朋友每次看完俺的文章都会说很好啊还会给我打赏但是最后的最后会补充一句没看懂,太高深以及最近被一波接地气的央视海报刷屏大家纷纷表示看到了希望先来两张海报让大家感受一下连一向以严肃正经形象示人的央视好像被触发了某个开关变得越来越不正经亲切可爱咱们交互设计师是不是也要走下神坛来说说交互设计师每天那点事9:00查看邮件确认是否有...

    2018-01-31
  • 如何制作交互组件库

    曾几何时,每次交互稿都是徒手画,或者截个图在现有的界面上改造。渐渐感到同一平台,每个版本都有很多重复劳动,是时候做个交互组件库了~ 什么是组件库? 就是类似axure左侧栏的这一坨标准控件,方便直接拖拽使用…

    2017-07-24
  • 屏幕尺寸越来越多,“首屏为王”还有效么?

    作者:Amy Schade@nngroup,翻译:小球娘   几句话概述:把什么内容放在页面顶部(第一屏的位置)以及把什么内容藏在第一屏位置之后将始终影响用户体验——无论屏幕大小。有平均84%的用户会区别对待页面第一屏内容和…

    交互专题 2017-08-07
  • 四个小故事 每一个都是“极致用户体验”的用心诠释(上)

    古老的印第安人有个习惯当他们移动得太快的时候会停下脚步,安营扎寨耐心等待自己的灵魂前来追赶而身为现代人的我们在开启一段旅程前最重要的事情莫过于挑选一家“想客户所想”的旅行社只有这样才能安心这次我们透过四个小故事向你娓娓道来为什么说驴妈妈客服是“极致用户体验”的先行者即便是大家族,也“一个都不能少”王女士来自苏州,今年40多岁,她十分看重亲情,每隔一段时间,就会带上全家出国旅游——由于出身于一个大家族,王女士每次在驴妈妈报团,几乎没有少于...

    2018-04-11
  • iOS系统设计细节|人性化带来更好的产品设计

    从今年3月份使用苹果以来,偶尔会在某个不经意的瞬间,感受到ios系统设计的人性化之处,深刻感受到了简约不简单的魅力。

    2017-05-22
  • 美甲店如何做好用户体验?【下】 | 互联互生

    上周的一篇文章我们说到了“用户体验”对于美甲店铺的重要性,文章中我提出了一个“峰值和终值的一个概念”,以及举了几个服务性的行业的例子,它们是如何利用“多数被遗忘,偶尔特漂亮”这个心理给用户带来不一般的体验感。今天这篇文章我们重点来谈谈咱们美甲店可以怎样在“用户体验”上有一些创新。好客服的法则随着网络越来越普及和重要,大部分美甲店主都开始注重自己的店铺在网络上面的评价,我们就先拿大众点评这个平台作为例子。一个店铺在大众点评上面肯定有很多的...

    2018-05-06
  • 视觉设计师应该修炼的五个交互设计技能

    现在,所有基于Web进行设计的人都需要对交互设计 原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依然会大大提高了你设计的成功机会。这一点对视觉设计师尤为明显。大多数视觉设计师都在艺术学校或者在培训机构经过正式或者非正式的训练。

    2017-05-27
  • 网页设计中的极简风格—无的力量

    作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

    2017-05-25