新版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

相关推荐

  • 读书会第一期:《简约至上-交互设计四策略》

    你有多久没有静下心来好好读一本专业书了?谁都知道读书重要,然而“工作忙没有时间”、“不知道该看什么“常常成了借口,读书还是一再被耽搁。本周起,集创堂推出“设计经典书籍阅读”系列,每周解析一本设计类好书,深入浅出,提炼精华。也许,看完简介之后,你就有了读原著的欲望,那么我们做这件事的目的就达到了。《简约至上-交互设计四策略》这本书是我罗列的推荐书单里专门描写信息架构的书籍,书籍作者Giles Colborne是物理学出身,参与过航空航天项...

    2018-04-07
  • 关于工作效率的心得分享?(拖延症患者必看!)

    来源:Tencent CDC 作者:milaky 这是去年11月底在小组里分享过的工作效率心得,在这里也跟大家分享一下工作“快”感哈哈。我相信大家应该都有过工作效率的些许烦恼。而这个效率啊伴随我很长时间的痛苦。每每到PDI的…

    2014-09-21
  • 你的QQ暴露了你的心——QQ大数据及其应用介绍PPT

    PPT概述: QQ大数据规模: QQ月活跃用户数超过 8.4亿 QQ最高同时在线超过 2.0亿 QQ空间月活跃用户数超过 6.5亿 QQ好友关系链对超过 900亿 活跃数据: 一天QQ总发消息超过 100亿 一天发空间说说、个签超过 1亿 数据…

    2016-01-27
  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08
  • 这是我作为交互设计师一年来的总结

    毕业后加入百度成为一名交互设计师已经整整一年了,现在把一些和工作、职场的相关经历和感受写下来。希望能对即将踏进职场的学弟学妹有所帮助。

    2017-05-22
  • 团队设计沉淀:做好 Style Guide 不容易

    说起 Style Guide (即设计规范),大部分人的第一反应就是 Material Design 和 iOS Human Interface Guidelines,我自己就是靠读这两份文档逐渐入门设计领域,国内外的设计师、开发者们自然也是对它们了然于胸。来大公司实习之后,接到的第一个任 务就是维护、优化团队的设计规范网站,同时最近也经常和饿了么、随手记等互联网公司的设计师或产品经理探讨如何沉淀团队的设计。

    2017-06-04
  • 阿里UCAN2017用户体验设计论坛的总结与感悟

    五一假期前的两天有幸参加了阿里UCAN2017用户体验设计论坛,很荣幸的领略了业内大牛们对于体验设计的理念与趋势的见解。本次论坛的主题是“新设计x新商业”,由阿里提出的新零售、新金融、新创造、新能源和新技术为起点,借助用户体验的设计赋能,来连接用户、商业与技术,实现最大化的商业目的。在沉淀了两天之后,我将从中学习领悟到的一些看法总结了下来。“利用人类的现实感官作为交互体验的手段,模拟与现实世界相似的场景,让体验特征表现的更加直观,真实。正是借助于科技的创新,一体性、真实性的交互体验才得以实现,人类与虚拟信息的交流才会越来越自然。”在既要满足一群人,又要满足个体中的一个人,包容一个人到参与群体的场景多样性。就是现在设计思维中所需要逐渐形成机器学习的共生方式。— 阿里妈妈UED总监 萧健兴“全链路设计是新技术发展下的必然趋势。”

    2017-05-01
  • 交互设计连载1:什么是交互设计?

    三年前...当时我还是一名刚入行的UI设计师。在一个无聊的周末,看到一篇介绍交互设计的文章,一时间特别兴奋。这篇文章大致告诉了我什么是交互,什么是交互设计。从那以后,我把注意力的侧重点逐渐往交互上靠拢,以至于后来有机会转行成为了一名交互设计师。下面po出这篇文章:《从零开始成为优秀的交互设计师》,可以去网上搜一下这篇文章,干货满满。回到主题,什么是交互设计呢?交互设计英文称之为Interaction Design。你来我往视为交互。你点...

    2018-02-07
  • 你可能忽略掉的Sketch使用技巧

    Sketch毕竟没有什么学习曲线,颇易上手,相应的也时常导致新手在一开始就忽略掉一些重要的、高频的使用小技巧,而将一些稍许费力耗时的方式一路沿用下去。这篇内容所针对的便是这样的情况。几乎没有进阶的要点,只针对初学的同学培养正确习惯,还望各位老司机们见谅。

    2017-05-03
  • 【酒店设计】关注用户体验的酒店设计永不过时

    位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极致的设计感。一楼的moriki餐厅...

    2018-04-07