Motion (Translated by MartinRGB) Material motion

Material motion

在 Material Design 的世界中,优美流畅的动态效果可以描述空间关系,展示功能,体现产品意图

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

动态效果能够展示 APP 元素是如何组织到一块的,也能体现出这些元素的功能性。

动效提供了:

  • 在不同视图之间引导用户有效聚焦
  • 在用户完成手势操作后,暗示用户操作可能的结果
  • 展示了不同元素之间的层级和空间关系
  • 缓解用户的等待,让应用处理数据(例如抓取内容或者读取新视图)
  • 个性化,新鲜感,愉悦感

Material 元素如何移动? Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Material Design 的动画系统灵感来自现实世界中力的相互作用,例如重力和摩擦力。我们动画系统中这些“力”体现在用户交互时,操作对于屏幕上元素的影响,以及元素之间的反应。

Material 的设计理念在动效设计中,主要通过以下几个特点体现:

迅速响应

Material 是充满能量的. Material 元素可以快速在用户输入处触发反馈。

一般来说,移动设备上,幅度较大的动画时间 300~400ms 为佳,幅度较小的动画可以短至 150~200ms。如果持续时间过长或过短,会让用户感到反应迟钝或者无法跟上。

更多可见 通用持续时间.

在用户触控点处迅速向外扩散,涟漪效果能够让用户确认输入有效。卡片升起,提示用户卡片处于激活状态。

更多可见 径向反馈.

展示了元素和材质(Material)之间的关系,或者展现材质面(Surface)和元素被创建的过程和行为

更多可见 创建.

自然

真实世界中的运动受力的影响,同理,Material 的动画应该是自然的。

在真实世界中,受重量和表面摩擦力的影响,物体在运动时,能够迅速加速或减速。因此,在 Material Design 中,物体不能突然开始运动,也不能突然结束运动。

更多可见 自然的缓动曲线.

这个动画的灵感来自真实世界中的重力,物体的运动呈一条弧线,而不是直线。

更多可见 元素的运动.

Material 的变形也呈弧线趋势。

更多可见 Material 的变形.

感知性

Material 能够感知到周围的元素和用户的输入。它能够被其他物体吸引,也能够根据用户的操作意图适当的的响应。

更多可见 动画的组织.

当元素通过过渡动画进入视图时,元素的运动有序一致,动画根据彼此之间的关系进行了组织。

Material 可以将其他材质(Material)推到一边。

当元素互相接近时,元素可以吸引其他元素加入。

动画意图

Material 的动画可以指引用户在合适的时间聚焦在合适的位置上。

更多可见 连贯性.

这个过渡动画可以引导用户进行下一步的交互。

利用动画的运动感,向用户传递不同的信号,比如提示用户操作是否不可用。

动画可以让用户聚焦重要元素

如何设计优秀的转场效果? Expand and collapse content An arrow that points down when collapsed and points up when expanded.

优秀的动效设计具备以下几个特点:

迅捷

交互动画不应让用户等待时间过长。

Do.

动画迅捷,用户基本不需要“等”动画

Don't.

迟钝、且大量元素参与的动画,会增加用户的等待时间。

清晰

过渡动画应该清晰、简洁、一致。添加动画的元素不宜过多。

Do.

在转场进入下一个视图时,动画维持清晰的运动轨迹,大量元素成组,以便连贯组织动画。

Don't.

当动画元素过多,且运动方向杂乱交叉时,转场会让用户感到混淆。

一致

Material Design中动画元素的速度感、反馈感和意图性应该高度一致。在自定义设计 APP 的动态体验时,应该考虑整体应用的动态一致性。

尽管这些应用的功能不同,但是相似的动画体验,让用户感觉这几个应用有关联。

动效的提示作用 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

我们可以通过接下来的两个案例比较出这些动效设计模式的好处,其中一个遵循了这些设计模式,另一些并未遵循。

Do.

在转场过程中,用户被有效的引导进入下一个视图。新的材质面(Surface)的变形体现了层级,用渐现的方式呈现内容,减少用户在读取数据时的感知时间,减少焦虑

Don't.

这个动画中,因为缺乏过渡动画,现有的动画效果也没有清晰的视觉焦点,新旧视图之间的关系并没有清晰的展现。界面元素之间的层级关系也没有体现,圆形旋转读取动画过于明显。