Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.
使用动画能够平滑地引导用户在不同内容之间跳转,并解释屏幕上元素排布的变化,以及加强元素的层级感。
视觉连续性(Visual continuity)
1.转场的类型和行为:
入场元素:新产生或被转换的元素需要被引入或重新建立。
出场元素:和接下来的上下文不相关的元素需要被移除。
公共元素:在转场中从开始到结束都一直出现的元素,这样的元素可以细微到如一个图标,也可以显著到如一张从相册中展开到全屏幕的照片。
2.思考点:
引导用户注意:用户的注意力应该被怎样引导?什么元素和动效支持这个目标?入场元素、出场元素和公共元素在转场中应该被强调还是弱化?
可视化地连接转场:通过颜色和公共元素来建立转场中不同状态之间的联系。
谨慎地使用动画:思考如何移动一个特定元素,使得转场更加清晰和令人愉悦
有层次的时序(Hierarchical timing)
考虑动画的时序,以保证动画能够表达信息层级,通过形成用户视觉焦点路径来传达出什么内容是最重要的。但这并不代表动画就是按照重要性依次移动的简单公式。
统一的编排(Consistent choreography)
过渡元素应该以一种协调的方式运动。元素的运动路径应该是合理而有顺序的。
1.最佳实践:
避免线性运动,除非运动限制在一个坐标轴上,或者元素与其它元素一起移向/离一个点
令元素的运动方向在转场中是协调一致的,避免冲突的移动和重叠的运动路径。
思考元素在哪个景深/高度(depths)上运动,以及为什么。
如果所有运动的元素在屏幕上留下它们运动路径的痕迹,这些痕迹看起来会漂亮而有组织吗?它们能否让用户明确应该看哪里?
通过新旧元素的连贯性的动画加强元素之间的空间关系。