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

一个产品完整的设计流程中,交互与视觉定稿后,后续视觉规范的输出、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

相关推荐

  • 高保真VS线框图,哪一种交互稿更能清晰准确地描述产品

    很多产品经常会纠结怎么把原型画得好看,哪个原型工具要彻底学会并熟练使用等等。但是团队的其他成员并不会关心你的原型画得多好看,也不关心用什么工具画,如果你能准备清晰表达出产品框架内容,也许在纸上画他们…

    2016-01-15
  • 1.6万字诚意之作|如果你想成为一名交互设计师,这篇文章值得慢读

    关于交互设计,这是一篇很全很全很全(重要事情要说三遍)的科普文章。作者写了1.6万字,实在是诚意之作。如果你打算走进交互,此文值得真的真的真的(重要事情要说三遍)值得一读^_^ by 小编目录导读:
    1. 交互设计概念
    2. 交互设计输出物
    3. 交互设计相关理论
    4. 交互设计流程及方法
    5. 交互设计常见案例分析
    6. 交互设计规范及趋势
    7. 交互设计师进阶之路举个例子就是:小明饿了,他需要填饱肚子(目标),他跑到楼下的餐馆进行点餐、吃饭、结账(任务),吃完了出门的时候推门(行为)出去,然后过马路回家。交互指的是产品与它的使用者之间的互动过程,而交互设计师则是秉承以用户为中心的设计理念,以用户体验度为原则,对交互过程进行研究并开展设计的工作人员。——百度百科①初级交互设计师<10k:俗称「线框仔」,出没于小公司和外包公司,没有设计决策权,专门配给不会画图的产品经理使用。门槛低,只需要熟练使用原型软件,会看着其它APP抄设计即可。无发展前途,看到此类岗位请远离。
    ②中级交互设计师10k-15k:除了画线框图外参与一定的产品层面的工作,有一定设计决策权,通常为知名院校应届毕业生,可以对设计决策提出异议,但不一定被接受。
    ③高级交互设计师15k-25k:通常可以参与整个产品的概念过程,工作职能与产品经理更为接近,有更多的设计决策权,通常工作经验超过2年,可以和产品经理、视觉设计师、用户研究员及开发人员进行「激烈讨论」,并有能力维护设计师的尊严。
    ④资深交互设计师>25k:通常出没于BAT、财大气粗的创业公司及设计咨询公司。有着丰富的成功设计案例,通常工作经验超过5年,有主流大公司工作经验,有大型项目的设计管理经验,业内有一定名气。
    ——以上分级,参考寺主人在知乎的回答《如何成为交互设计师?》“你在设计的生涯中,有没有用到或者总结出哪些设计方法?”“以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。”“关于弹窗中的“推荐选项”应该放在左边还是右边,分了两种情况:如果推荐选项有破坏性,那么应该放在左边。如果没有破坏性,则应该放在右边。但到了iOS10的时候,却变成了推荐选项都应该放在右边。”

    2017-05-06
  • 4种用户体验研究方法,提升最优化测试

    本文讲述的是户研究与A/B测试相结合,发现问题的真实原因,并进行有效的判断处理。“实验可以证实一个理论,但实验永远无法创造出一个理论。   ” —— 爱因斯坦

    2017-05-09
  • 用户体验交付中心,最美不过回家路

    众意,坚持为中国高品质整装奋斗不歇!长按识别二维码即可预约体验爆款福利已经在向你挥手了戳阅读原文,报名预约抢豪礼!

    2018-03-12
  • 译文 | 如何通过讲故事来简化用户体验设计

    原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”

    2017-05-27
  • [转]设计智能推送通知的要点|译文

    当你安装一款新的应用时,有多大比例是允许收到推送通知的呢?我已经被无数的推送通知搞烦了!我甚至有在凌晨被推送通知吵醒的经历!这怎能让我爱上那款应用呢!推送通知的逻辑应该更加智能化才是!本文就阐述了设…

    2016-07-15
  • 你如何设计交互?

    进行界面设计时,很显然我们一上来就会想着画出整个流程。但这真的是最好的方法吗? 我曾偶然进行了编写一个具有想象的人机对话,之后我再继续使用画流程的方式。 编写人机对话的方法改变了我的思维方式,我再也没…

    2015-08-12
  • 用户体验设计师是做什么的

    用户体验设计师的责任UX设计师如何每天工作?这个问题的答案,正如许多问题一样,是:这要看情况而定。用户体验设计师的职责从公司到公司,甚至同一公司不同项目各不相同。尽管角色各不相同,但有一些职能是期望用户体验设计师去做的,这与他们所工作的公司无关。下面为总结的用户体验设计师的6个主要职责:1.产品研究产品研究(包括用户和市场研究)是每个用户体验设计师的用户体验设计项目的出发点。它为伟大的设计提供了基础,因为它允许设计师避免假设和做出信息驱...

    2018-03-03
  • 用微妙动效改善用户体验的简单方法

    译者:zyl0127     应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧, 这些都是过去的事情了。 当…

    交互专题 2017-08-07
  • 由UI/UX设计师向产品设计师演变

    为了创造出伟大的产品,UI/UX设计师应该期待并成为能够生成和处理更多额外信息以获得最佳设计成果的产品设计师。

    2017-05-09