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

之前@平行煎餅发了新版Material Design官方动效指南的第一节:《新版MATERIAL DESIGN 官方动效指南(一)》,今天继续第二部分,从动效的速度、动态持续时间、通用持续时间和缓动曲线4个部分,教你创建平滑一致的Material Design动效。再系统的干货都比不上官方的动效指南,西瓜就在这,赶紧来捡。

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

速度

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

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

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

动态持续时间

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

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

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

通用持续时间

移动设备

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

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

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

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

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

大屏幕移动设备

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

平板设备

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

可穿戴设备

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

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

桌面

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

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

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

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

自然的缓动曲线

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

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

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

缓动曲线

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

标准缓动曲线

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

减速曲线(“缓出”)

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

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

加速曲线(“缓进”)

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

急转曲线

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

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

本章到此结束,如果想提前阅读可到:查看。

google.com

文章来源:优设

译者:@平行煎餅

(0)

相关推荐

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

    @平行煎餅:新版Material Design官方动效指南已经翻译到第三章了!今天这部分,从动效的运动和材料形变入手,让你的动效自然真实,贴近现实状态.再系统的干货都比不上官方的动效指南,西瓜就在这, ...

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

    前两天Google 刚发布了新版Material Design官方动效指南,今天@平行煎餅就给大家带来了中文版!全文包括三个部分:为什么说动效很重要?如何制作优秀的Material Design动效及 ...

  • 动效设计也应该有的体验原则

    来新的项目组后发现我司产品很喜欢加动效,动效需求很多,造成了端内各种互斥以及视觉焦点凌乱的情况出现. 站在交互的角度考虑,动效是用来辅助设计的一种形式,而不是作为一个需求来无脑添加的~ 下面这句宝强哥 ...

  • google官方的material design设计指南1

    小编:网络上已经有很多人对该文档进行翻译和研究,但是作为UI小白,想通过翻译过程加强对Material Design的理解,所有翻译内容仅凭个人理解. Material design(原质化设计) 简 ...

  • Material Design的7个重大更新

    本文总结了随着Google I/O的启动,Material Design迎来的7个重大更新 2018年5月9日凌晨1点,谷歌I/O开发者大会如期在美国加州山景城的海滨露天剧场拉开帷幕,谷歌不仅对AI技 ...

  • UI中使用动效的3个关键点

    小编:动效如今也是很受欢迎的一种设计表现形式,它不仅可以缓解用户在等待的焦虑情绪,还能大大的提高用户的使用体验.动效是强大的,好的动效可以让你的作品很快的脱颖而出即使是最常规的交互.一起来看看使用动效 ...

  • 谷歌动效设计师经验,做好动效设计并不难

    今天这篇文章,讲的又是大家感兴趣的动效知识.现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相关的资料,跟大家一起,紧跟趋势,把这块的能力掌握好! 之前有篇比较类似的文章,< ...

  • 腾讯干货!交互微动效设计指南

    导语 本设计指南适用于UI界面中交互微动效,涵盖入场.出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率. 一.本指南的适用范围 ...

  • 动效设计基础(二):动效的应用

    在上一篇文章<动效设计基础(一):运动曲线与缓动>中,我们讨论了动效的几种常见形式以及缓动的重要性.那么,我们为什么要用动效呢?除了酷炫好玩以外,动效在用户体验设计中其实发挥着很重要的作用 ...