可视化大屏中的交互设计

      在数据可视化的分析过程中，用户是所有行为的主体，通过获取的可视信息形成认知，在交互分析过程中获取解决问题的方法。

     在这个过程中，感知和认知能力直接影响着信息的获取和处理进程，进而影响用户对外在世界环境做出的反应，这也是设计数据可视化产品服务蓝图的基础逻辑。

     从数据到知识有两个途径:交互的可视化方法和自动的数据挖掘方法。

     我们可以看到，下图展示的便是一个典型的可视分析流程图和每个步骤中的过渡形式。这个流水线的起点是输入的数据，终点是提炼的知识。

     可视化的首要任务是准确地展示和传达数据所包含的信息。根据预期和需求，提供有效辅助手段以方便用户理解数据，从而完成有效的可视化。

     但是当出现数据尺寸大、结构复杂的情况时，有限的空间大大限制了静态可视化的效果，有限的可视化空间和数据过载之间的处理是非常复杂的。有时我们会通过物理环境的变化来改变服务模型，但是更多时候我们需要通过交互设计来完成对复杂信息的处理，提升用户对数据解读的便捷性。

     那么当我们在设计一张数据大屏时，我们该如何通过交互提升用户获取有效数据的效能呢，下面我们一起来探讨如何完善大屏设计中的交互设计：

一、信息架构

1、清晰易理解、可拓展的信息架构

2、清晰易理解的导航关系

3、清晰易理解的层级关系

案例分析：

在我们收到原型图时，首先我们需要梳理清楚大屏的信息架构，比如整个大屏的模块比例是按照1:1:1还是1:3:1的结构。又或者是如何设计重要功能的入口，比如整屏的导航tab选项，在布局设计上用户是否可以明晰它是是否是全屏筛选，在交互逻辑上用户是否可以通过最短的路径快速筛选抵达内容。那么当用户进行了导航的切换后又返回到上一页面，整个行为是可以形成路径闭环的。

二、流程设计

1、可下钻的模块需给用户以引导

2、相同功能的用户体验路径需保持一致

3、逆向流程的功能设计能形成闭环

案例分析：

我们经常会在大屏中间设计地图的样式来展示某个省的数据情况，比如，如图所示，当业务侧需要从湖北省跳转至武汉市，查看武汉市的详细数据，那么我们可以在省级地图轮播的数据气泡上给予用户以提示，用户可以清楚获取到跳转市级大屏的路径方法。

三、界面展示

1、一致可控的图表组件

可视化大屏中最核心的数据展示形式就是图表模块，我们需要正确地展示图表组件外观与组件关系，把控好相似功能的横向一致性，我们可以细分为以下几点。

（1）选择正确清晰的图表组件

（2）正确表达组件元素之间的关系

（3）一致性的组件样式和交互行为

（4）不要忽视组件的不可用状态（按钮）

（5）删减影响用户视线和注意力的冗余元素

案例分析：

当一个模块内需要展示数据的多个维度，我们如何将该模块设计得更加清晰呢。如下图，根据人从左往右的阅读习惯，在左边展示数据1和数据2的总指标数，在右边展示数据1和数据2的详细走势，右上角我们还可以添加tab选项，用户可以进行tab切换查看更多维度的数据内容。

所以，我们可以将用户使用习惯和交互行为很好地结合起来，不仅免去了图表多乱杂的场景，用户也可以更快地查看到想要获取的数据信息。

2、清晰的数据展示

配合图表展示的就是我们的“数据数字”内容了，在我们将设计稿传递给前端同事后，填充真实数据后的视觉效果可能看起来没有效果图规整，一方面在进行绘制效果图之前，可以与产品业务侧共同探讨数据内容，尽量给视觉设计师提供真实的数据，另一方面，在我们作图搬砖的时候，也要注意一下几点：

（1）不要遗漏了“无数据”的缺省空界面，当无法获取到数据时，我们需要给前端提供这样的缺省图；

（2）清晰的数据排序规则，比如环形图中，总起始点到终点，数据对应的数值量应该是递减的排序规则；

（3）考虑数据的极值情况，比如在搜索列表中学校名称文字的极限字数是多少，超出多少字用省略号显示，这些我们都需要考虑到；

（4）是否需要标明数据的更新时间节点，有的大屏强调数据实时性，我们经常会在右上角增加数据截止更新时间来来引导用户；

（5）特定的数值按照特定的格式和单位显示，比如羊字符能让用户第一时间识别到是人民币，而如果金额数字过长后面再加元会降低识别效率。

案例分析：

3、选择与输入的信息反馈

（1）展示合适的首选项或默认值

（2）输入前有效的文本提示

（3）输入完成后需及时反馈

案例分析：

4、用动效进行有效的交互引导

     利用动效进行交互引导，即使大屏操作链路过长，也可以让用户快速上手操作，减少流程学习时间。进入下一场景后，又会有对应的区域提示用户返回全局或查看其他场景；当做到层层有响应，就能减少用户在每一步操作上的困惑时间，帮助用户快速上手操作流程，并且大大提升工作效率。

     但是我们需要注意的是，不要为了酷炫而做太多无用的动效，不仅会让页面加载速度慢，也会让用户觉得杂乱无重点。

     总结：

     交互可提高可视化系统的效率，帮助用户处理更多的数据，完成更复杂的任务。然而，实现交互本身也有额外成本。互动的系统可以使用户能探索更大的信息空间，但随之而来的成本是用户需要花费更多的时间与精力去浏览和探索数据。

     因此，可视化系统应当采用数据挖掘算法自动发现用户可能会关心的数据或者模式；并通过可视化呈现给用户，用户在这个基础上通过互动进行更深入的挖掘。设计师的设计决定了系统的可理解性，一旦掌握了这个逻辑，再复杂的页面也会变得有条不紊。

     我们仍需在数据可视化的道路上不断探索挖掘数据价值，给决策者提供有效的数据分析支撑，让设计驱动数据价值最大化。