Material Design(三)

动效——材料动效

目标

• 为什么动效很重要？
• 材料如何移动？
• 什么是好的转换？
• 动效的影响

材料动效

在 Material Design 的世界中，动效用于描述空间关系、功能以及提供优雅流畅的交互效果。

目标1——为什么动效很重要

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

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

目标2——材料如何移动

材料环境从现实世界的力学中吸取灵感，如重力和摩擦力。这些力显示了用户如何和屏幕上的元素交互，以及元素之间的相互影响。 运动中的材料有以下特性：

• 反映敏捷
  材料通常充满活力,它可以快速准确地在用户输入的位置做出响应。
  

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

• 自然的
  受到了真实世界中的力学的启发，材料会很自然的移动。
  

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

  

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

  

  材料的形变也遵守曲线的运动轨迹。

• 有意识的
  材料可以感知周围环境，包括用户和周围的其他材料。它可以被吸引到其他材料上，并以此响应用户的意图。
  

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

  

  材料可以把其他材料挤出视图。

  

  元素可以吸引其他元素，并在接近一个元素时加入到这个元素中，成为一个新的元素。

• 有意图的
  运动中的材料会指引用户在正确的时间聚焦于正确的位置。
  

  转换可以指引用户前往交互的下一步。

  

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

  

  动画可以把用户的焦点聚集到需要用户注意的元素上。

目标3——什么是好的转换

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

• 动效是快速的

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

  • 正确的
    

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

  • 错误的
    

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

• 动画要简单明了

  转化要简单明了，并保持连贯。避免同时加入太多效果。

  • 正确的
    

    转换到下一个视图时要保持清晰的路径，即使下一个视图是由很多元素编排成的。

  • 错误的
    

    当有多个元素沿不同的方向、或不同的路径移动时，转换会变得很混乱。

• 动效是一个整体

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

  

  虽然这些应用有不同的功能，但是相似的动画体验使用户觉得它们是相关的。

目标4——动效的影响

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

• 正确的
  

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

• 错误的
  

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