首页 > 资讯 > 行业新闻>新版MATERIAL DESIGN 官方动效指南(二):位置

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

Date 2025-04-06 14:47:48

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

速度

当一个元素移动或改变状态时,移动速度应该足够快,这样用户就不必等待了。高频转移动画应该更短,而一些转移动画应该更慢,以确保用户能够理解它。

16motion20160513

正确:动态效果要足够快,让用户不用等动画完成。

15motion20160513

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

动态持续时间

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

14motion20160513

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

13motion20160513

当物体移动距离较小或变化较小时,应减少持续时间,以免使动态效果看起来非常缓慢和缓慢。

一般持续时间

移动设备

自然缓动曲线

缓动曲线能对物体的速度、透明度和大小产生影响。

10motion20160513

加速和减速的变化应该顺利地贯穿动画的持续时间,使动态效果看起来不那么机械化。(红色没有缓动,蓝色有缓动)

9motion20160513

当加速和减速不对称时,动态效果看起来更自然、更愉快。(红色对称,蓝色不对称)

缓动曲线

缓动曲线可能在不同的平台或软件上有所不同。不同平台上的缓动曲线标准包括普通缓动曲线、减速曲线、加速曲线和急转缓动曲线。

标准缓动曲线

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

8motion201605137motion20160513

减速曲线(“慢出”

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

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

6motion201605135motion20160513

加速曲线(“缓进”)

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

4motion201605133motion20160513

急转曲线

急转曲线用于随时离开屏幕返回屏幕。

物体可能会在屏幕上的某一点快速加速,然后以对称的曲线快速减速到屏幕外的某一点。减速会比标准曲线快一点,因为它们不会在屏幕外的某一点上遵循准确的路径。物体可能会随时回到原点。

2motion201605131motion20160513

这一章到此结束,如果要提前阅读可以到达:https://www.google.com/design/spec/motion查看。