实用干货!如何让设计效果高还原度落地?

一个产品完整的设计流程中,交互与视觉定稿后,后续视觉规范的输出、UI控件的整理与标注、开发的高还原度,都会影响产品最终的用户体验。作为视觉设计 师,在视觉设计 的最后阶段则是繁琐且像素级别的精雕细琢,设计讲究的不仅是美感还有严谨态度与逻辑。


一个产品完整的设计流程中,交互与视觉定稿后,后续视觉规范的输出、UI控件的整理与标注、开发的高还原度,都会影响产品最终的用户体验。作为视觉设计师,在视觉设计的最后阶段则是繁琐且像素级别的精雕细琢,设计讲究的不仅是美感还有严谨态度与逻辑。

实用干货!如何让设计效果高还原度落地?

最近半年在大司(华为)参与一个重点项目,且将会上线到全球各个局点(本司专称,指某个国家)中,涉及多端多屏协同问题。临时组成的设计作战团队, 人员投入少、时间紧迫、任务量大高强度的状态下摸索前行。为时五个月过去了,项目推进良好Phone端ios与Android也到测试阶段,“大视频”端 的开发工作也即将开始。五个月的时间,与优秀的同事一起协力合作,参与Phone端“大视频”端的视觉与多端规范输出。这里分享一下这几个月的累积与沉淀 --视觉设计师, 如何让设计效果保持高还原度的开发落地?给用户呈现一个设计精致与体验良好的产品?

在一个产品完整的设计流程中,交互与视觉定稿后,后续视觉规范的输出、UI控件的整理与标注、开发的高还原度,都会影响产品最终的用户体验。作为视觉设计师,在视觉设计的最后阶段则是繁琐且像素级别的精雕细琢,开发出来的精美页面需要视觉设计师做到以下几点。

一、视觉与交互之间应衔接无缝,即时刷新视觉页面

一般产品设计流程包括不同的阶段,不同的阶段其涉及的范畴内容不一样,作为设计师面对所有步骤不能一蹴而就,而是按部就班,计划行事。

  1. 前期准备阶段:确定设计需求的目标,竞品分析,用户研究,市场评估等;
  2. 设计需求分析阶段:设计需求的理清,业务逻辑的推敲,产品的架构的搭建;
  3. 设计执行阶段:交互设计原型的输出,视觉设计风格与方案确定,开发落实与测试上线,这构成一个不断迭代刷新的流程;

在以上阶段中,业务需求的变更与澄清,交互的迭代,视觉的刷新,是设计过程中最繁琐的阶段。设计启动前了解多端的适配情况(分辨率/屏幕精度),综 合考虑优先出什么分辨率;接着视觉设计师需面对庞大的页面工作量,且常会遇到与交互原型不一致的问题,需及时反馈并拉通讨论。这就需遵循一个清晰可见的迭 代流程,对视觉设计而言,需求的变更与澄清-交互的迭代-视觉的刷新-设计的迭代构成的是一个闭环无缝的路线,只有这样才能为开发的启动,打下扎实的根 基。

实用干货!如何让设计效果高还原度落地?

当然作为视觉设计师,设计过程中主动出ABC…方案而不是只拿出一个唯一的方案,只有将想法用画面来表达,才是够合格的设计师,特别是视觉设计师,好处可以锻炼自己的设计表达力,方便评审定稿,避免反复修改被人牵着走。

二、适当时,为开发开启更多的话语权,避免更多的无用功

视觉规范、视觉标注、视觉控件库的整理与输出目的只有一个:那就是指导开发,让设计100%还远落地;回到项目中,对于设计团队与开发团队通常会体现以下两种情况出现:

  • 开发团队对项目有丰富经验,设计团队对此项目经验少-开发话语权大于视觉
  • 设计团队拥有多次项目经验,并有一定的设计沉淀累积-设计话语权大于开发

从视觉设计而言,如果是设计团队拥有丰富的经验这是最好的,用经验累积设计沉淀与创造性指导项目,话语权大,反之亦然。

在这里结合最近参与的项目,情况为第一种来进行思考;交互视觉设计过程与规范输出中,让开发提供更多正确的方向引导,借鉴开发团队以往的宝贵经验, 如:设计文档的共享与即时性、设计规范的专业性,开发认同的设计规范去指导开发、设计相关问题单的及时跟踪与解决、设计需求变更流程(变更流程包括:变更 需求提出人-交互-视觉-开发-产品经理(SE or PM)敲定-执行变更-关闭问题单-变更完成)等,都能有效指导开发,提高产品开发落地的高还原性。

三、用80%场景的视觉设计+视觉控件规范+切图+标注+宣讲来指导开发

1. 视觉设计的场景

由交互提供具体场景的典型页面,视觉稿进行输出,多次迭代评审敲定后,再由开发提出缺失场景的视觉设计,视觉进行场景补充;

2. 视觉UI控件规范的输出

必须是经过多次评审与迭代的最终视觉稿;但通常情况下,为了赶进度视觉设计与规范是同步进行,这导致规范反复修改的问题。

  • 根据项目经验是,在视觉迭代中期时,先输出基础控件元素规范,包括(颜色/文字/图标/蒙板/投影/按钮/输入框/或个别控件)约占控件规范30%,与开发进行第一次规范评审,确定规范输出的正确性与专业性。
  • 让开发选取所有视觉页面中需要标注的UI控件,因为开发选择的UI控件也为通用样式,开发代码写成UI控件库(可以对应视觉的控件列表)并由其它 分模块统一调用;且所有UI控件必须基于最终视觉效果进行控件抽取与迭代输出。最后,layout用文档(pdf)的方式总结,避免单独模块单独页面传 递,更能将规则一目了然;规范是一个庞大而繁琐,极需耐心的工作;过程中注重每一个细节的精准与合理性。

实用干货!如何让设计效果高还原度落地?

3. 切图与整理

切出所有视觉页面中涉及到的图标与辅助图形;图标大小如:24px/ 32px/48px/72px/128px等,根据图标具体场景中的大小、颜色、状态来切。换句话说,每一个图标都有它对应的具体场景,特定的尺寸、颜色 和状态;记得曾与开发gg对规范与切图的时候,他说:页面的图标切图,需要的是一个具体的拿来就用的,我们不会去画一个图标或去特定写一个图标的颜色。

4. 标注

视觉页面的标注基于UI控件规范的基础上进行,抛弃以往每个页面细无巨细的具体尺寸/色值/大小的标注。其实每一个视觉页面皆由不同的UI控件组 成,在页面中将对应控件用UI控件规范中的编号来标注,开发gg拿着视觉页面标注去敲写代码时,再在UI控件规范文档中寻找相对应的控件规范细节;这样, 视觉设计师避免在视觉页面中做那密密麻麻的尺寸标注,而开发gg拿到标注清爽的视觉页面也不会产生视觉疲劳。

5. 规范宣讲

以上4步完成后项目开发启动前,用视觉规范对开发做统一的宣讲,避免遗漏造成规则传达不一致;这样,还设计原度还是问题么?(后续会有一篇文章专门分享大司项目经验是如何做标注的。)

四、与开发近距离接触,面对面解决问题

最后一个方法是与开发来个亲密接触,即如果有条件允许的话,请与开发坐一起;遇到问题及时面对面澄清、拉通指导、达成共识、修改、敲定、解决。

1. 设计规范做得再完善,开发问题依然存在

试想一下,如果不和开发坐在一起,即使开发面对再完善的设计规范,基于开发本身对设计美感的欠缺,开发过程多多少少都会产生理解偏差。开发过程每遇 到一个细节问题,开发gg都得拉着视觉问:这个按钮上的左右箭头是无限循环吗?图标缺少了一个状态,那个状态是什么等;发个信息问拉会或者电话讨论,有时 候还解释不清楚,效率低且事倍功半。

2. 视觉设计师直接进组到开发团队中

结合当前项目的做法是视觉设计师直接进驻到开发团队中,与开发团队坐在一起,举个例子此项目视觉在深圳,开发在异省南京或是异国,视觉也出差飞过去 长期进驻,遇到问题面对面商议解决;大大提高了开发的进度与也节约了时间,视觉还原度还是问题么?当然,如果设计与开发本来就附近办公,则不需无休止的出 差,项目成本节省不少。

设计过程还是和开发gg们来一个“亲密接触”吧,永远不要把开发拒之门外;觉得交互与视觉完成后则就万事大吉。设计讲究的不仅是设计美感还有严谨的 态度合理的逻辑,要想一个产品始终保持是那个细节精致,创意精彩,且用户体验好;需要的是交互-视觉-开发三者之间是无缝合作,各个环节的周考考虑。

 

本文由 @Rabbit(微信号:candice_huang) 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-24 08:17
下一篇 2017-05-24

相关推荐

  • 报名最后12小时|6周快速玩转axure,同时提升产品和交互

    众所周知,Axure是产品经理必备的工作软件。薪资越高的产品经理(比如月薪18k+以上的产品经理),不仅能高效玩Axure,更能用Axure体现产品思维。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期报名最后12小时!从第1期到现在,2000多位同学学习成长,好评如潮。来看看同学们的成长。下图是0基础同学,学习后制作的“冲顶大会”高保真原型(福利资料:添加班主任Sara为好友,可获取“冲顶大会”原型文件。Sara微信见文末)...

    2018-04-11
  • 叶云燕:不懂用户体验,没有互联网思维的代理人,迟早会被淘汰!

    第1937期|编发/保险论坛互联网时代,到处都在谈如何用互联网思维做生意。有人用互联网思维卖奶茶,销售额翻倍;有人用互联网思维开理发店,已获得数千万融资;有人用互联网思维卖衣服,年利润过亿;而当我第一次提出要用互联网思维卖保险时,很多人都感到茫然,认为这不过是赶时髦,蹭热点。保险代理人的新机遇事实上,互联网时代的到来,对保险代理人来说是一个前所未有的机遇,它让代理人的品牌形象更加丰满,展业渠道更加多样化。更重要的是,互联网思维的核心是以...

    2018-04-25
  • 案例分析:怎样避免交互设计中的「刻板印象 」

    刻板印象有好有坏。在合适的场景、时间、项目中,去最大化它的积极作用,尽量避免它的消极作用,才能真正的平衡设计、工作,甚至生活。

    2017-08-04
  • 专业干货!一个特别好用的搜索框必须考虑的五个方面

    编者按:今天@励定洲 这篇译文开门见山,从搜索框的可见性、范围搜索、局部搜索、高级搜索以及输入五个方面聊聊如何设计出一个特别好用的搜索功能,内附大量实例(想知道谷歌搜索有哪个交互不好吗),结合实践,深入浅出,帮你掌握在线搜索的这五个方面。

    2017-06-02
  • 交互设计专业排名最高的大学有哪些

    上周四,康石石在《珠宝设计专业排名最高的大学有哪些》中,为同学们于世界范围(英、比利时、美、意大利、荷兰、挪威、瑞典、德国、爱沙尼亚)内梳理了22所顶级珠宝名校,并在文末许诺阅读量达1000,即为最热情的上墙读者解答艺术留学问题。本周四,康石石兑现承诺,继续为大家推荐货真价实的全球顶级院校,供所有希望出国深造交互设计专业的同学们,提供一份足以信赖的院校清单。写在前面的话交互设计,对于90%同学而言,其实都是一个未知的概念,这直接导致了各...

    2018-02-02
  • 逐渐兴起的对话式设计,你了解多少?

    对话式交互将逐渐改变人类的生活和习惯,未来的生活是怎样的正是我们所兴奋和期待的:)我以为使机器能与人沟通的关键是发展更好的对话系统。但我这想法并不对。成功的对话需要共通的知识和经验。它需要对四周环境、前后脉络、导致目前情况的历史背景以及当事人众多不同的目标和动机等都要有所领悟。现在我认为这正是当今科技的根本局限,这种局限阻碍了机器全面、拟人化地与人互动。人与人之间要建立共通的了解本来就很难,那我们如何寄望于机器建立这种关系?——唐纳德·A·诺曼

    2017-05-19
  • 如何利用动效提升用户体验

    我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。

    2017-05-16
  • 【交互体验】让你事半功倍的交互体验自查清单

    点击上方“蓝字”可以订阅哦!小编推荐:刚画完的原型自我感觉良好,当到了评审的时候发现在用户体验槽点非常的多。如果你遇到上面的情景,那么这篇文章对你绝对有用。事不宜迟,请看下文。体验清单起因去年底看朋友出国前用‘穷游清单’给自己列清单,她说列的清单可以帮她在出行前检查一下是否有遗漏东西,避免因遗漏东西使整个旅行变得很糟。既然旅游清单可以使旅游提前避免问题发生,是不是我们在工作中也可以采用这种方式使自己的产出物交付前保证万无一失。在平时设计...

    2018-01-30
  • 设计原则:组织信息的方式

    我们的设计必须显示展现出组织性良好的信息,这样用户才能很容易地理解所显示的内容。这是提供良好用户体验的关键。“信息可能是无限的,但信息的组织是有限的,因为它只能由LATCH组织:Location位置,Alphabet字母,Time时间,Category类别或Hierarchy视觉层级。”
    – Wurman,1996“我已经尝试了一千次找到其他方式来组织信息,但我最终仍使用这五种之一。” – Wurman,1996年

    2017-04-30
  • 中国交互设计“教父”辛向阳老师首次线上分享会来啦

    应集创堂的邀请,中国交互设计“教父”辛向阳老师将在4月20日为大家带来首次线上分享会!辛老师是卡耐基梅隆大学设计哲学博士,是目前很少数在美国获得设计哲学博士、并首个回到中国内地的华人之一。有着跨多个学科的教育和工作背景,包括机械、建筑、平面设计、油画、交互设计以及艺术史。同时,辛老师还是IXDC(交互设计国际大会)大会主席,提出了“交互设计五要素”和“行为逻辑”等交互设计领域的重要理论和方法,并在香港理工大学成功创办了中国首个交互设计专...

    2018-04-17