动效 Material 动效

Material 动效

在 Material Design 的世界中,动效用于以优雅流畅的方式表达空间关系、功能与意图。

为什么动效很重要? Expand and collapse content An arrow that points down when collapsed and points up when expanded.

动效展示了应用的组织方式和功能。

动效可以:

  • 引导用户在视图中的视觉焦点
  • 提示用户完成手势操作后会发生什么
  • 暗示元素间的层级和空间关系
  • 让用户不必关注系统背后发生的事情(比如获取内容或加载下一个视图)
  • 使应用更有个性、更优雅、更令人愉悦

材质如何移动? Expand and collapse content An arrow that points down when collapsed and points up when expanded.

材质环境的灵感来源于现实世界的力学原理,例如重力和摩擦力。这些力量体现在用户输入如何影响屏幕元素,以及元素之间如何相互作用。

运动中的材质有以下特性:

响应式

材质通常充满活力。它能在用户输入的位置快速而准确地做出响应。

在移动设备上,较长的动画时长宜在 300-400ms 之间,较短的则在 150-200ms 之间。动画时长太长会让用户感觉迟钝,太短则难以跟上。

更多信息详见常见时长

用户输入时会立即出现涟漪,从用户的触点向外扩散。卡片抬起以表示激活状态。

更多信息详见径向反馈

展示新表面与创建它的元素或操作之间的联系。

更多信息详见创建

自然的

材质的运动方式受真实世界力学启发,显得自然而合理。

在现实世界中,物体的加速度和减速度会受到其重量和表面摩擦力的影响。因此,在 Material Design 中,物体不会突然开始运动,也不会突然停止。

更多信息详见自然缓动曲线

现实世界中的力(如重力)会启发物体沿着曲线运动,而不是直线运动。

更多信息详见移动

材质的形变也遵循曲线的运动轨迹。

更多信息详见材质变换

可感知的

材质能够感知周围环境,包括用户和周围的其他材质。它可以被吸引到其他材质上,并以此响应用户的意图。

更多信息详见动效编排

当元素过渡到视图中时,它们和周围的元素会以某种方式编排在一起,以此来定义它们之间的关系。

材质能够将其他材质推开,从而为自身腾出空间。

元素可以吸引其他元素,并在彼此接近时与其结合,形成一个新的元素。

有目的性的

运动中的材质会指引用户在正确的时间聚焦于正确的位置。

更多信息详见连续性

过渡可以指引用户前往交互的下一步。

移动可以传达出不同的信息,例如操作是否不可用。

动效可以将用户的注意力引导到需要关注的元素上。

什么是好的过渡? Expand and collapse content An arrow that points down when collapsed and points up when expanded.

成功的动效设计需要遵守以下规则:

动效应保持快速

每一次交互都不应该让用户等待过长的时间。

推荐做法

动画要迅速,这样用户不必等待动画完成。

不推荐做法

错开元素的动画以及减慢元素的移动速度,都会导致动画时长过长。

动效应保持清晰

过渡应清晰、简单且连贯,避免同时做太多事情。

推荐做法

过渡到下一个视图时要保持清晰的路径,即使下一个视图是由多个元素编排而成。

不推荐做法

当有多个元素沿不同的方向或路径移动时,过渡会变得很混乱。

动效应保持一致性

材质元素的运动速度、灵敏度和意图都是统一的。应用中任何自定义的动效体验都应保持一致。

虽然这些应用有不同的功能,但相似的动效体验让它们看起来彼此相关。

动效的影响 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

动效带来的好处可以在下列两个案例中观察到:一个使用了动效,另一个则没有。

推荐做法

在过渡期间,用户被引导到下一个视图。通过表面的变换来传达应用的层次结构。加载过程在后台进行,以减少用户感知上的延迟。

不推荐做法

没有过渡效果,很难看出新视图和旧视图之间有什么关联,也无法传达层次结构;同时,圆形加载指示器会让加载过程显得更为明显。