动效 材料动效

材料动效

在 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.

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

正确示例

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

错误示例

没有过渡效果,很难看出新视图和旧视图之间有什么关联。也无法感知到应用任何的层次结构,并且使用圆形旋转器的加载让加载过程显得太突兀。