动态效果能够展示 APP 元素是如何组织到一块的,也能体现出这些元素的功能性。
动效提供了:
- 在不同视图之间引导用户有效聚焦
- 在用户完成手势操作后,暗示用户操作可能的结果
- 展示了不同元素之间的层级和空间关系
- 缓解用户的等待,让应用处理数据(例如抓取内容或者读取新视图)
- 个性化,新鲜感,愉悦感
在 Material Design 的世界中,优美流畅的动态效果可以描述空间关系,展示功能,体现产品意图
动态效果能够展示 APP 元素是如何组织到一块的,也能体现出这些元素的功能性。
动效提供了:
Material Design 的动画系统灵感来自现实世界中力的相互作用,例如重力和摩擦力。我们动画系统中这些“力”体现在用户交互时,操作对于屏幕上元素的影响,以及元素之间的反应。
Material 的设计理念在动效设计中,主要通过以下几个特点体现:
Material 是充满能量的. Material 元素可以快速在用户输入处触发反馈。
一般来说,移动设备上,幅度较大的动画时间 300~400ms 为佳,幅度较小的动画可以短至 150~200ms。如果持续时间过长或过短,会让用户感到反应迟钝或者无法跟上。
更多可见 通用持续时间.
真实世界中的运动受力的影响,同理,Material 的动画应该是自然的。
在真实世界中,受重量和表面摩擦力的影响,物体在运动时,能够迅速加速或减速。因此,在 Material Design 中,物体不能突然开始运动,也不能突然结束运动。
更多可见 自然的缓动曲线.
这个动画的灵感来自真实世界中的重力,物体的运动呈一条弧线,而不是直线。
更多可见 元素的运动.
Material 的变形也呈弧线趋势。
更多可见 Material 的变形.
当元素通过过渡动画进入视图时,元素的运动有序一致,动画根据彼此之间的关系进行了组织。
Material 可以将其他材质(Material)推到一边。
当元素互相接近时,元素可以吸引其他元素加入。
这个过渡动画可以引导用户进行下一步的交互。
利用动画的运动感,向用户传递不同的信号,比如提示用户操作是否不可用。
动画可以让用户聚焦重要元素
优秀的动效设计具备以下几个特点:
交互动画不应让用户等待时间过长。
动画迅捷,用户基本不需要“等”动画
迟钝、且大量元素参与的动画,会增加用户的等待时间。
过渡动画应该清晰、简洁、一致。添加动画的元素不宜过多。
在转场进入下一个视图时,动画维持清晰的运动轨迹,大量元素成组,以便连贯组织动画。
当动画元素过多,且运动方向杂乱交叉时,转场会让用户感到混淆。
Material Design中动画元素的速度感、反馈感和意图性应该高度一致。在自定义设计 APP 的动态体验时,应该考虑整体应用的动态一致性。
尽管这些应用的功能不同,但是相似的动画体验,让用户感觉这几个应用有关联。
我们可以通过接下来的两个案例比较出这些动效设计模式的好处,其中一个遵循了这些设计模式,另一些并未遵循。
在转场过程中,用户被有效的引导进入下一个视图。新的材质面(Surface)的变形体现了层级,用渐现的方式呈现内容,减少用户在读取数据时的感知时间,减少焦虑
这个动画中,因为缺乏过渡动画,现有的动画效果也没有清晰的视觉焦点,新旧视图之间的关系并没有清晰的展现。界面元素之间的层级关系也没有体现,圆形旋转读取动画过于明显。