新版MATERIAL DESIGN 官方动效指南(二)

Material Design的动效设计 是响应式的,自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。

Material Design的动效设计是响应式的,自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。

速度

某个元素移动或者改变状态的时候,运动速度应该足够快,使用户不用等待。出现频率高的转场动画应该短一点,而有些转场动画要慢一点,来保证用户能理解它。

新版MATERIAL DESIGN 官方动效指南(二)

正确:动效应该足够快,让用户不用等待动画完成。

新版MATERIAL DESIGN 官方动效指南(二)

错误:不要做无意义的拖延。

动态持续时间

应该调整每个持续时间,来适应不同的移动距离、每个元素的速度、和表面的变化。而不是所有动画都用同样的持续时间。物体离开屏幕应该是一个很短的持续时间,这样用户就会减少对他的注意力。

新版MATERIAL DESIGN 官方动效指南(二)

当物体需要移动较大位移,或有很巨大的变化时,应该占用更长的持续时间。

新版MATERIAL DESIGN 官方动效指南(二)

当物体移动较小距离,或者有很微小的变化时,应该减少持续时间,这样就不会使动效看起来很慢很迟钝。

通用持续时间

移动设备

移动设备上,动画通常会持续300ms左右:

大而复杂的全屏移动设备上,通常需要更长的持续时间,375ms左右。

物体进入屏幕的持续时间大概是225ms。

物体离开屏幕的持续时间大概是195ms。

动画超过400ms会显得慢而拖沓。

大屏幕移动设备

在大屏幕移动设备上,同一时间段内,物体移动较长的距离速度比移动较短的距离更快。越大的屏幕物体移动的持续时间应该更长,这样动效不会显得太快。

平板设备

平板设备上动效的持续时间应该比移动设备长30%左右。移动设备上300ms的持续时间,在平板设备上应该是390ms左右。

可穿戴设备

可穿戴设备上的动效时间应该比移动设备上短30%左右。移动设备上300ms的持续时间,在可穿戴设备上应该是210ms左右。

新版MATERIAL DESIGN 官方动效指南(二)

动效元素在大屏幕设备上会移动很大的距离,动画可能会比小屏幕设备上看起来略为放缓。

桌面

桌面动画应该比移动设备上的动画更快、更简单。通常只会持续150ms到200ms。

由于桌面动画可能不太引人注目,他们的响应应该更敏捷、更迅速。

复杂的网页动画肯能会导致掉帧(除非他们专门为GPU加速)。更短的持续时间可以让动效快速完成,减少注意。

新版MATERIAL DESIGN 官方动效指南(二)

桌面动效明显看起来更快。

自然的缓动曲线

缓动曲线可以对物体的速度、透明度、大小产生效果。

新版MATERIAL DESIGN 官方动效指南(二)

加速和减速变化应该是应该是平滑的贯穿于动画的持续时间之中的,使动效看起来不会那么机械化。(红色无缓动,蓝色有缓动)

新版MATERIAL DESIGN 官方动效指南(二)

当加速和减速不对称时,动效会看起来更自然,更令人愉悦。(红色对称,蓝色不对称)

缓动曲线

缓动曲线可能会在不同的平台或者软件上有所不同。不同平台上的缓动曲线准则会涉及到普通缓动曲线、减速缓动曲线、加速缓动曲线,和急转缓动曲线。

标准缓动曲线

这是最常见的缓动曲线。物体可以根据在屏幕上的位置迅速加速或缓慢减速。这个曲线适用于增加或减少元素,和其他属性的变化。

新版MATERIAL DESIGN 官方动效指南(二) 新版MATERIAL DESIGN 官方动效指南(二)

减速曲线(“缓出”)

物体全速进入进入屏幕时,然后慢慢减速静止在屏幕上的某个点。

在减速过程中,物体可能从很小变到正常大小,也可能从透明变到不透明。有时候,当物体透明进入屏幕,可能从稍大的大小缩小到正常的大小。

新版MATERIAL DESIGN 官方动效指南(二) 新版MATERIAL DESIGN 官方动效指南(二)

加速曲线(“缓进”)

物体离开屏幕是以全速离开,他们离开屏幕时不会减速。

新版MATERIAL DESIGN 官方动效指南(二) 新版MATERIAL DESIGN 官方动效指南(二)

急转曲线

急转曲线被用于随时离开屏幕随时回到屏幕的情况。

物体可能会在屏幕上某一点迅速加速,然后以一个对称的曲线快速减速运动到屏幕外的某一点。减速会稍快于标准曲线,因为他们不会尊循于一个准确的路径到屏幕外的某一点。物体可能会随时回到原点。

新版MATERIAL DESIGN 官方动效指南(二) 新版MATERIAL DESIGN 官方动效指南(二)

本章到此结束,如果想提前阅读可到:https://www.google.com/design/spec/motion 查看。

 

译文来自:优设

原文地址:google.com

译者:@平行煎餅

 

系列文章直达电梯

1)新版Material Design 官方动效指南

2)新版MATERIAL DESIGN 官方动效指南(二)

3)新版MATERIAL DESIGN 官方动效指南(三)

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

(0)
CatherineCatherine
上一篇 2017-05-23 13:34
下一篇 2017-05-23 15:33

相关推荐

  • 用户界面缓解曲线

    由于采用扁平设计,动画的质量是创造伟大的界面更是必不可少的因素。通过动作设计,可以影响产品的整体体验,并从市场上把它分开。动画可以使复杂的相互作用简单,把好设计成令人难忘的用户体验。但是,我们如何创…

    2015-05-26
  • 100本UI设计/交互设计PDF电子书资源,UI设计师进阶必读书目,还在持续更新哦【024期】

    好素材,不加班今天小编为您精选了【100本UI设计/交互设计PDF电子书】大小:3.07G提供方式:百度网盘获取方式:请查看文章底部部分书籍展示领取素材的方式长按二维码回复:024长按二维码回复:024长按二维码回复:024无需分享直接获取素材热门素材推荐▶UI设计师作品集模板,PSD格式【001期】▶设计项目展示经典范例四套【002期】▶三套2.5D插画设计素材合集【003期】▶C4D设计素材包含建筑【004期】▶100多套欧美网页设...

    2018-05-07
  • 摧残人类的交互

    特仑苏:积分系统 购买每箱牛奶都会有一张积分卡片,上面有一行验证码。如果你认为在官网输入验证码就能获取积分,那就想的太简单了。你要拿起手机,编辑短信“CZ+长长的16位数字的验证码”,发送到长长的16位数字的…

    2014-12-24
  • 针对敏捷开发中用户体验的5点建议

    根据最近惠普针对600多个专业的软件开发人员做的一个调查,由于能够加强协作,增加用户的满意度以及缩减成本,所以敏捷开发是目前大多数被调查的组织采用的工作方式。然而当把用户体验集成到敏捷开发的周期中时,很多公司会问我们采取什么样的方式才能在满足每一个敏捷时间框架要求的同时确保成功。

    2017-05-24
  • 内部教程|6步透视网易设计规范(附规范PDF下载)

    LOFTER这份精而美的设计规范,页数不多,但每页都是经过三思后得出的总结,推荐一看。

    2017-05-20
  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

    2015-03-10
  • 一个小小城市选择控件引发的深度思考

    很早以前小Q在《用好的交互设计来管理复杂-“筛选器”》一文,较为全面的剖析了筛选器的各种分类及其利弊。本文会继续筛选器的城市选择控件继续分析。A-Z index(字母索引)适用于对数据量为几十到几千之间的单词、词组或短语等类型的导航,且用户能对这些数据的首字母进行精确回忆。例如:国家、省份或城市的名称、姓名、昵称等。在移动端设计中A-Z index通常以竖轴形式出现在屏幕右侧,点击字母能将内容滚动到该字母的锚点位置。

    2017-06-07
  • 搜狐交互设计师:我常用的一套交互设计工具

    刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

    2017-05-25
  • 用户体验设计师必备的4种UX文档

    当谈及用户体验 相关的文档之时,线框图和原型相关的文档无疑是其中最重要的。但值得注意的是,用户体验 所涵盖的范畴不止于此,它们也仅仅只是个开始。实际上,我们发现还有四份文档也是日常用户体验 设计中极其实用的文档。这四种文档的诞生,是为了帮设计人员更容易了解用户,更方便作出争取的设计决策,打造优秀的设计和成功的产品。

    2017-06-05
  • 人鸡交互Vs人机交互

    很多人听说我是学人机交互的,都会问我一个问题,什么是人机交互? 答:human-hen(人-鸡),当然这是一些朋友的戏谑之作。但是现在看来,又似乎有些道理,至少有一半是对的,人(human)。至于另一半么,他们想的…

    交互设计 2017-03-08