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