3-3 Animation:Meaningful Transitions

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)上运动,以及为什么。

如果所有运动的元素在屏幕上留下它们运动路径的痕迹,这些痕迹看起来会漂亮而有组织吗?它们能否让用户明确应该看哪里?

通过新旧元素的连贯性的动画加强元素之间的空间关系。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容