移动界面动效设计的全方位科普指南

读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。


读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。

移动界面动效设计的全方位科普指南

动效在用户体验设计中正变得越来越重要,那么动效能带来什么好处呢?

  • 体现交互层级:动态界面使人更容易理解交互层级关系,减轻了人们的认知负担
  • 给予反馈:给人感觉界面是活的,让体验流畅
  • 弥补静态页面的表达不足:在内容优先的设计趋势下,用户界面变的更加简洁。这将给用户带来操作上的盲目感;动效则可以在不打破界面美感的前提下,弥补认知的损失

原则

设计是为了解决问题,动效设计作为设计的手段之一,能解决一些静态界面设计无法解决的问题。但是,它并不是万能的,动效要克制,过多、过慢或不适合的动效,只能让界面失去重点,让团队和用户怨声载道。

在实际项目中应用的动效,只有精准地对齐需求,才能使动效带来真正应有的价值。那么,如何评估一个动效是否有价值呢?

  1. 动效是否必要
  2. 动效是否带来体验提升
  3. 动效开发的成本是否过高

如果都没有问题,送给工程师一个飞吻吧。

动效工具

Adobe After Effect

视频特效软件,被普遍使用的动效和 MG 制作软件,功能强大,和其他 Adobe 软件无缝配合,可做的效果也是不限量的。

Quartz Composer + Origami Studio

Apple 的可视化编程软件,搭配 Facebook 的 Origami 可以非常好的模拟机器效果,做单页面的动效可以用它,Origami 还可以导出直接可实施的代码。

Hype 3

可交互的 Demo ,虽然是 HTML5 制作工具,但是做动效也算是一只[好猫]吧。

其他的还有原型工具 Framer、Pixate、Form 等和 QuartzCode、PaintCode 也都可以用来做动效。具体工作时候可以选用适合的来做,目前还没有一站式解决的软件出现。

数值化动效

只谈制作动效,不谈实现都是耍流氓,动效设计师同样需要为动效标注。

常规的值包括:

  1. 属性:移动距离 旋转角度
  2. 时间:运动持续时间 延迟出现时间 重复时间
  3. 曲线Android:插值器曲线
  4. iOS:运动曲线
  5. 自定义曲线

移动界面动效设计的全方位科普指南

动效标注模版,包括常用动作、曲线、表格。 Sketch 格式,Sketch 的快速、矢量特性也非常适合进行动效标注。

动效标注技巧

移动界面动效设计的全方位科普指南

有些运动需要分解成多种值标注。比如 Material Design 里面的「重力运动」

设计师的思维是 Position 到 Position 的弧线运动,但实现时并没有运动轨迹的开发方式。

那么如何表述这个运动轨迹呢?

两种方法

时间错位:

移动界面动效设计的全方位科普指南

延迟单个值的时间(真实运动曲线为绿色虚线略有夸张)

不同曲线:

移动界面动效设计的全方位科普指南

两个值持续时间相同,但应用的曲线不同

曲线 / 插值器

刚才提到了曲线是什么呢?

在 Android 系统内,调用系统内置曲线插值器,改变动画的播放速率,可以实现大部分动态速率的效果。

移动界面动效设计的全方位科普指南

图为 Android 插值器

自定义曲线

插值器默认的速率无法完全符合需求时,还需要给它进行数值调整。

调整 Factor 的值,就可以快速改变速率:

移动界面动效设计的全方位科普指南

当然,你也可以尝试使用自定义的去曲线,将曲线换算成二次贝塞尔曲线,可以直接用于开发。

如下图,为 cubic-bezier (.82, .25, .29, .78)

移动界面动效设计的全方位科普指南

Android 和 iOS 都支持二次贝塞尔和三次贝赛尔曲线。

交互与动效

动效和交互联系很紧密,这也要求动效是先于视觉考虑的。

移动界面动效设计的全方位科普指南

如上图,在内容优先的设计中常用的共享元素样式,从交互层面就需要对动效有一定的规划,否则会遇到动效很牵强或视觉返工的情况。

动画与动效

动效不同于动画,动效常发生在过场或操作之后,有趋向于表现更快的倾向。动画中看上去恰到好处的运动时间,直接套用在动效中应用会显得拖沓沉冗效率不高。显然,简单粗暴的把动画中的时间直接应用在动效中,是不合适的。

在 Material Design Motion 中,对动效时间有比较详细的定义,对各种设备的动画时间都有推荐,实际应用时还需要考虑元素变化的范围,给出合适的时间。

虽然 Android 动效已经支持 60fps 的速度,但是在实际应用中,有时运动不够平滑*确实存在,甚至为了达到理想效果,要同之前标注时间相差很大。这时,可能需要对部分标注时间进行修改,不过我一般会遵循一个原则:尽量保持时间之间的比例,倾向相信模拟中的时间。因为机器的个体差异导致的问题很难被量化。当然,解决这种问题,需要工程师和设计师的通力配合。

项目中的动效

就好像工业设计师需要懂材料、平面设计师需要了解印刷知识,动效设计同样需要设计师具有「跨专业」的视野。

在 iOS 和 Android 上,系统其实已经帮你完成了不少工作,很多常见的、被经常使用的动效,可能已经有做好的「轮子」,这些「轮子」往往经过多次验证,效果和性能都说的过去,有些稍加改动就可以满足项目要求。

在实现这类动效的时候:

除非有信心实现的比已有的好,不然还是直接使用吧。

使用已有的「轮子」、将常用基础动效控件化,减少整个团队重复工作,提高效率,设计师和工程师也可以把精力用在能让项目更为出彩的地方。

 

作者:顾小犊

来源:http://www.uisdc.com/mobile-motion-design-guideline

版权声明:人人都是产品经理尊重行业规范,所转载的文章都注明作者和来源,若标注有误,请联系主编QQ:419297645更改。

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

(0)
CatherineCatherine
上一篇 2017-05-13 10:34
下一篇 2017-05-13 12:55

相关推荐

  • 腾讯2016年度7个创新功能,你最爱哪个?

    作者:腾讯   那么,在你眼里,创新是什么样的? 是对产品的颠覆式变革?是将原有技术植入新的领域?是新的产品和领域的开拓?抑或,只是某一个让你会心一笑的新功能? 在腾讯,每月都有微创新奖的评选,在内部开启…

    交互专题 2017-08-07
  • 从智能手机说起,看设计风格演变的趋势

    长期以来,大多数人对 UI设计趋势的理解,都是扁平化。可这容易引来两种误解:一群人理解扁平化,是一股潮流,这潮流就像流行时尚一样,会不断更替,原来的拟物风会重出江湖;另一群人,认为扁平化就是平,对设计的理解局限在表达手法上。

    2017-05-17
  • 打造美观清晰易使用的交互文档

    在检查交互文档的时候,我有句口头禅是:“这交互稿画得太丑了。”听到这句话的小朋友,有些回了句“哦…”,有些则会问“交互稿也要考虑美么,交互稿不是逻辑ok就行了么”,脸上是不甚理解的。

    2017-05-20
  • 资源贴|2016年Top20 UX设计博客和资源网站

    全球用户体验和用户界面的发展从未停止,并引领潮流,似乎每个人都知道该行业的流行语。尤其重要的是要时刻更新行业最新想法和会谈结果,但很难从众多的资源中找到真正有帮助的材料,所有撰写该文,这就是博客的方便之处。

    2017-05-19
  • 为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”

    点击关注36氪,置顶公众号专业的行业新闻及深度报道,不容错过━━━━━━这是著名分析师Ben Thompson对谷歌近期宣布的一组数据的评论,原标题为“THE AGGREGATOR PARADOX”以下为谷歌宣布的这组数据:现在共有3100万个网站加入了加速移动页面(AMP)计划,自去年10月以来增长了25%。在2月的第1周,谷歌向出版商发送了4.66亿个页面浏览量——比2017年1月增加了近40%。我们希望通过这样一篇文章,来带你了解...

    2018-02-27
  • 通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

    不单是视觉扁平,交互层级也更加扁平啦~

    2017-05-09
  • 以服务设计视角推动设计赋能

    作者:阿里UED 周静&谢辉敏小编说:未来的设计都应该归纳服务设计的范畴,包括用户体验设计、交互设计等,比如新零售设计就是一套完整的服务设计体现,不要等服务设计成熟了再去设计,谁先先学习,谁就抢占了先机~~为未来充点电!本文较长,读完需要点耐心~~近两年随着UED团队的探索,沉淀出了业务协同、设计增值、设计驱动三个层次的价值模型,深入剖析了设计师价值实现的不同阶段与方式。同时越来越多的设计师也逐渐意识到了只有在协同业务的全流程中利用体验...

    2018-02-13
  • 9个关于设计的关键要素,帮你设计出更加优秀的作品

    之所以把设计和Jalebi放在一起说,就是因为设计本身其实和制作Jalebi如出一辙,设计师的经验和对设计投入的思考才是核心所在,而两者结合之下则往往能产生一些颇有价值的指导思想。Above examples are of apps with the same domain and you can judge which one is looking better.A good example visual typo hierarchy in the above graphic .

    ——Source: SuperDryCleartrip is a very good example of what I am talking about……

    2017-05-17
  • 在交互设计中,极简设计的四种策略

    本文将介绍交互设计中的极简设计4策略,帮助产品经理或产品设计人员在进行产品设计时,可以打造一款真正为“用户”设计的产品。

    2017-05-01
  • 淘宝UED:如何高效输出移动APP产品原型

    如何高效输出移动app产品原型? 清晰的产品思路,顺畅的协同合作,齐备的素材元素,真实的体验感受…保证过程的高效,更要保证有效的成果。下面我们将分三步走,来完成高效输出移动app产品原型。 一、输出以界面为单…

    2015-07-10