11.1 动态交互图表简介
动态交互图表是指能够实现数据动态缩放呈现、人机动态交互参与的新型图表。相比上一章介绍的静态图表,动态交互图表不仅可以帮助用户控制图表特定数值或范围的呈现,也可以实现数据的多维渐进披露或动画动效。
相较于静态图表,动态交互图表主要通过渐进式披露、用户参与操作以及动画动效三种方式优化并提升用户的数据可视化认知水平。
·渐进式披露:提供按用户需求逐步展示详细信息的途径与手段。
·用户参与操作:允许用户直接对UI元素进行操作,最大限度减少屏幕所需的操作数量,包括页面缩放和平移、信息分页和数据控件控制等。
·动画动效:通过动画动图设计提高不同用户对数据的感知和认知层级。
1.渐进式披露
渐进式披露可以显示图表详细信息,允许用户根据需要查看特定数据点,PC端和移动端渐进式披露图表对比如图11-1所示。在PC端中,悬停状态可以显示更多详细的数据。在移动端上,触摸并按住手势会在图表上方显示提示框。
2.缩放和平移
缩放和平移是常用的图表交互,它会影响用户对图表数据的深入研究和探索。
缩放改变界面显示的远近,设备类型决定了如何执行缩放:在PC端,通过单击、拖动或滚动进行缩放;在移动端,通过捏合进行缩放。当缩放不是主要操作时,可以通过单击和拖动(在PC端)或双击(在移动端)来实现。
平移能够让用户看到屏幕之外的界面,它应该合理地展示数据的价值。例如,如果图表的一个维度比另一个维度更重要,则平移的方向可以仅限于该维度。
平移通常与缩放同时使用。在移动端,平移通常通过手势实现,如单指滑动。PC端图表的缩放和平移示例如图11-2所示。
图11-1 PC端和移动端渐进式披露图表对比
图11-2 PC端图表的缩放和平移示例
3.分页
在移动端,分页是一种常见模式,它能让用户通过向右或向左滑动来查看上一个或下一个图表。在移动端,用户可以通过向右滑动查看前一天的数据,动态交互图表的分页示例如图11-3所示。
4.数据控制
我们可以使用切换控件、选项卡和下拉菜单筛选或改变数据。用户调节控件时,这些控件还可以显示指标。动态交互图表的数据控制示例如图11-4所示。
5.动画动效
具有动画动效的图表可以强化数据之间的联系,提升人机交互体验。在交互式图表中有针对性地引入动画动效,可以反映不同状态数据间的联动特点。值得注意的是,动画动效应以不妨碍用户使用为原则,缩放适度,响应及时。
图11-3 动态交互图表的分页示例
图11-4 动态交互图表的数据控制示例
动态交互图表的动态示例如图11-5所示,在图11-5中,图表数据从按天显示动态切换到按周显示,且转换期间不会显示所选日期范围之外的数据,从而降低了复杂性。
图11-5 动态交互图表的动态示例
此外,动画动效也应该体现两个不同图表的联动性,如图11-6所示。
图11-6 动态交互图表的联动示例
6.空状态
图表数据为空的情况下,可以提供相关数据的预期。在合适的情况下,可以通过展示角色动画提升动态交互图表的生动有趣性,空状态图表示例如图11-7所示。
图11-7 空状态图表示例