动效——材料动效
目标
- 为什么动效很重要?
- 材料如何移动?
- 什么是好的转换?
- 动效的影响
材料动效
在 Material Design 的世界中,动效用于描述空间关系、功能以及提供优雅流畅的交互效果。
目标1——为什么动效很重要
动效展示了应用的组织方式和功能。动效可以:
- 引导用户在视图中的视觉焦点
- 提示用户完成手势操作后会发生什么
- 暗示元素间的等级和空间关系
- 让用户忽视系统背后发生的事情(比如抓取内容、或加载下一个视图)
- 使应用更有个性、更优雅、更令人愉悦
目标2——材料如何移动
材料环境从现实世界的力学中吸取灵感,如重力和摩擦力。这些力显示了用户如何和屏幕上的元素交互,以及元素之间的相互影响。 运动中的材料有以下特性:
-
反映敏捷
材料通常充满活力,它可以快速准确地在用户输入的位置做出响应。
在移动设备上,长一点的动画时间在 300-400ms 之间,短一点的动画时间在 150-200ms 之间。动画时间太长会让用户感觉迟钝,太短会感觉难以跟上。
-
自然的
受到了真实世界中的力学的启发,材料会很自然的移动。
在现实世界中,物体的加速度和减速度会受到物体自身的重量和表面摩擦力的影响,因此在 Material Design 中,物体不会突然开始运动,也不会突然停止。
现实世界中的力,如重力,会启发物体沿着曲线运动,而不是直线运动。
材料的形变也遵守曲线的运动轨迹。
-
有意识的
材料可以感知周围环境,包括用户和周围的其他材料。它可以被吸引到其他材料上,并以此响应用户的意图。
当元素转换到视图中时,它们和它们周围的元素会以某种方式编排在一起,以此来定义它们之间的关系。
材料可以把其他材料挤出视图。
元素可以吸引其他元素,并在接近一个元素时加入到这个元素中,成为一个新的元素。
-
有意图的
运动中的材料会指引用户在正确的时间聚焦于正确的位置。
转换可以指引用户前往交互的下一步。
移动可以传达出不同的信息,例如操作是否不可用。
动画可以把用户的焦点聚集到需要用户注意的元素上。
目标3——什么是好的转换
成功的动效设计需要遵守以下规则:
-
动效是快速的
每一次交互都不应该让用户等待过长的时间。
- 正确的
动画要迅速,这样用户不必等待动画完成。
- 错误的
错开元素的动画,以及减慢元素的移动速度,都会导致动画时间过长。
- 正确的
-
动画要简单明了
转化要简单明了,并保持连贯。避免同时加入太多效果。
-
正确的
转换到下一个视图时要保持清晰的路径,即使下一个视图是由很多元素编排成的。
-
错误的
当有多个元素沿不同的方向、或不同的路径移动时,转换会变得很混乱。
-
-
动效是一个整体
材料元素的运动速度、灵敏度和目的都是统一的。应用中任何自定义的动效体验都应保持一致。
虽然这些应用有不同的功能,但是相似的动画体验使用户觉得它们是相关的。
目标4——动效的影响
这些动效带来的好处,可以在下列两个案例中观察到,这两个案例一个使用了动效,一个没有用动效。
- 正确的
在转换期间,用户被引导到下一个视图。通过平面的转换来传达应用的层次结构。加载过程在后台进行,以减少用户感知上的延迟。
- 错误的
没有过渡效果,很难看出新视图和旧视图之间有什么关联。也无法感知到应用任何的层次结构,并且使用圆形旋转器的加载让加载过程显得太突兀。