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


时间: 2021-07-30 10:22:43 人气: 15 评论: 0

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

五大核心关键因素

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

  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设计中,如何更专业管理设计命名系统?

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

总结

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

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

【未完待续】

 

作者:Tony,微信公众号:洞见设计,人人都是产品经理专栏作家。百度设计师。很乐意帮助年轻设计师成长,简历指导,每周分享最有价值的设计经验,擅长产品体验设计,关注【洞见设计】后台回复“彩蛋”领取设计资料。

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

题图来自 Pexels,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
5人打赏
---蛙鱼源码WAYUYM.COM---专业提供网站模板,网站源码下载,教程培训,程序插件,网站素材等建站资源,主要收集各类精品源码资源,包含CMS程序模板、网站源码、游戏源码、APP源码等 ,所有资源都没有水印适合搬运,我们致力于打造一个优秀的建站资源共享学习平台!

专业厂家,设备先进,技术力量雄厚,自动化生产技术先进,产品质量符合国家标准,价格合理,https://www.69shenlan.com/,具有质量保证,生产及时,交货快捷的特点。 我们的宗旨:做我们擅长的事,希望用我们的创意和创意为客户实现战略定位,塑造品牌,强化形象!
我们的要求:坚持“优质产品、优质服务、优惠价格、快速交货”的经营方针,努力开拓市场,真诚为客户服务! 我们的发展:以独特的专业和专业精神,https://www.69shenlan.com/1:1--

UI 设计师

评论