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