态势环形图设计：让数据展示更全面直观,AlibabaDesign,可视化

态势环形图设计：让数据展示更全面直观

一、前言

在IEEE VIS 2019 世界顶级可视化分析大会上，克里斯博士(Chris Oehmen)提出“随着系统自主决策的增加，人类对可视化的需求也越来越大。系统的复杂性、互联性和自治性增加，新的可视化形式对安全有效的操作和控制必不可少。”这段话很好的表达了目前人工智能时代的情况，很多产品都是透过系统自主运行做决策，而人的角色更多是基于系统的数据信息做深层次的决策与判断，因此随著系统的复杂性增加，数据信息量增加，对可视化的需求也越来越多样，这样海量多维度的复杂数据信息展示，正是我们需要去探索研究的议题。

二、设计面临的挑战

面对多维度的复杂数据信息展示，在设计上会遇到几个难点：

1.维度多信息量大

大量的数据指标，多样化的类型维度，要将信息特点在图中表达是很困难的，需考虑如何在有限的空间中进行展现，同时要让数据的组织有其意义。

2.映射表达难度高

可视化的挑战来自于过多的数据维度，仅能依赖相对有限的视觉编码来呈现，因此当需展示的数据指标越多，运用各种视觉元素表达数值时，越需要明确的区分映射关系，降低各维度数据间的编码互相干扰。

3.认知理解成本高

数据信息含量越大，视觉元素越多，对观察者认知理解的成本就会越高，但在视觉感官新鲜度上会越新颖，因此在设计上需要进行权衡，在信息量、简单性和精确性之间找到平衡，最好让观察者不需要过度思考理解就能看懂。

三、场景分析与设计目标

针对所在CRO业务线(安全部等)进行场景分析，可以发现部门的业务存在场景特性：为横向支撑的BU，产品建设需同时考虑集团中各BU的场景情况；系统自主运行做决策，有大量将人为的经验转化成规则算法，由系统自主运行控制的业务场景；业务存在链路关系，多产品间存在流程关系，部分情况需在流程阶段中做决策进行处理。基于上述的业务特性，拟定对应的设计目标：

全面性：能全面的展现完整的情况，帮助用户掌控全局。

透明化：明确反映系统过去、现在的状态，使用户建立信任，并能在短时间内对复杂的信息进行理解。

可推理：能透过数据对业务未来可能的趋势状态进行预判。

四、设计方法：态势可视化感知模型

态势可视化的概念，不只是看数据表象的情况，更重要的是运用可视化的表现形式，将多维度数据的内在联系展现出来，让观看者能充分感知到这些关系，从而发现某些规律、趋势和异常，进而获取有价值的信息辅助决策。简单来说，「态」展示的是数据的当前状态，「势」为判断数据背后的业务趋势。

基于信息可视化模型的研究，将可视化过程融入到态势感知框架中，提出态势可视化感知模型，模型包括五个阶段：需求目标分析、数据与知识提取、可视化编码、态势感知、决策制定执行。

1.需求目标分析

需求目标分析是一个逐步细化的过程，分析过程中要专注于环境本身和决策者的目标，将目标划分为具体的信息要素，界定了数据源、可视化编码和态势感知的范围与内容，是进行态势认知的基础。

2.数据与知识提取

从决策需求目标出发，有目的地提取信息要素数据，并向决策者提供更高层次的信息数据，包括数据间的关联、时间维度的统计等综合信息，让决策者在态势感知过程中，能调用相应的知识与分析方法，提升理解和预测的能力。

3.可视化编码

分为三个阶段：表层信息是与感知层次对应的可视化视觉呈现，是用户首先接触可视化界面时，直接进入感知系统的信息；结构信息是与理解层次对应的可视化结构信息，是用户探究信息结构及关联的部分，包含分组、从属、对比和连结等关系；深层信息是与预测层次对应的可视化信息解码，是用户结合自身认知以获取信息含意。

4.态势感知

包括三个层次：感知是可视化信息感知过程，其步骤依次为感觉、知觉和注意；理解是逻辑思维的过程，其步骤依次为识别、记忆和思维；预测是信息解读的过程，其步骤依次为预测、判断和反应。

5.决策制定执行

决策者进行充分的态势感知后，则进入决策执行阶段，执行过程会改变现有的情况，因此会需要对数据进行新的解析，开始新的可视化感知流程。

五、什么是态势环形图

可视化中的认知负荷与认知绩效

人类的记忆可以被看作一个信息处理系统，外在信息首先通过感觉记忆进行处理，只有被注意捕获的信息才能够进入短时记忆中，为了记住感觉记忆中输入的信息，需要从长时记忆中提取有效的认知策略，这种对信息进行暂时加工与储存的活动方式称作工作记忆，是面对复杂任务处理联合运作的一种机制。而在信息处理进程中的瓶颈就是工作记忆的持续性和有限的容量，是影响人们认知理解能力的决定关键因素。

认知负荷理论最早是由澳大利亚心理学家 Sweller 所提出，指的是一个人在工作记忆中所使用的注意力或脑力劳动总量，大量的认知负荷会使得人们难以记忆重要的细节与做出决定完成任务。Huang WD 等于2015年提出认知负荷、认知绩效和记忆投入关联模型，在可视化读取任务中，按照用户的认知负荷程度，分为五个阈值区域：

认知负荷过低区：任务简单因缺乏兴趣而需保持注意力集中，投入很少记忆资源可得到高的认知绩效。

绩效稳定区：记忆资源的投入保持在舒适的范围内，无需投入过多的注意就可得到较高的认知绩效。

投入受益区：为得到高绩效，用户须多投入些注意，占用工作记忆资源，但此投入产出是有其价值。

绩效下滑区：所需记忆资源超过认知主体的最大值，因此即使投入增长，认知绩效仍出现大幅下滑。

认知负荷超载区：任务过于复杂，用户即使投入了最大程度的记忆资源却得到很低的绩效值。

在此模型中可以看到，在一定范围内的认知负荷程度对于保持高的认知绩效是有利的，过低和过高的认知负荷都不利于可视化的理解。因此，在进行多维度的数据可视化时，透过降低认知负荷，将可视化效果落在投入受益区是核心的目标，让用户只需多付出一些精力，就能从可视化图形中获得较高的信息效益。

现有的多维度数据可视化方法分析

目前针对多维数据的可视化展示，基本可分为三类具有代表性的方法：基于几何、图标及其他混合形式，分析发现多数形式仍是基于传统图表使用笛卡尔坐标系，只有部分采用极坐标系及其他特殊的形态。极坐标系是指在平面内由极点、极轴和极径组成的坐标系，是基于环形布局来展示，很多图形优势可以用在多维度数据可视化中。

态势环形图的特性

基于业务上对全面性、透明化与可推理的设计目标，解析环形布局的图形特点。

1.基于全面性的环形布局特性

环形布局能在有限的空间展示大量数据信息，适合全面性的信息做聚合展示：角度支持无限细分，可作为多种数据分组维度的划分；径向支持无限伸展，可作为多种数据指标展示的轨道，或用来表征时间趋势发展的变化；局部放大展示细节，能支持在局部信息上放大倍率展示，强化信息内容或支持更多细节显示，缩放能在整个区域内平滑过渡；内外空间塑造布局，封闭的圆环图形可区分成“内部”与“外部”空间，可透过两点间连接表达关系等。

2.基于透明化的环形布局特性

根据目标需求差异，透明化数据的形式常使用直方图、热力图、散点图、柱状图、折线图等来进行设计表达，其中直方图、散点图、柱状图、折线图的共性为带座标轴，而热力图可视情况使用带轴或不带轴，运用颜色表示数值涵意。几乎所有的图表类型皆能在环形布局中展示，根据圆形轨道的轨迹从X.Y轴座标的矩形布局转换为曲面的扇形布局。

3.基于可推理的环形布局特性

环形布局的结构切割展示，可以很好的展示各种关系的表达，如运用内外环展示从属关系、时间关系、并列关系等，运用角度切割展示对比关系、时间关系，运用线段关连展示连接关系等，运用局部角度放大增加外环显示递进关系，藉由关系的建立，帮助用户更好的理解信息的含意，进而实现可推理的目标。

4.其他环形布局特性

适合多端适配展示，环形的布局无论在大屏与PC端各尺寸屏幕上，只需依屏幕大小进行等比缩放展示即可，而在小屏幕的移动端上，将圆环缩小展示会看不清，可将环形单边分离，即能符合屏幕尺寸的长方形布局展示。

因此，结合态势可视化的概念，我们使用环形布局产出一种聚类视角的可视化形式，将其名称命名为「态势环形图」，定义为基于极坐标系的环形布局，透过一张图做到在有限的界面空间中，将信息分层聚合表达，建立全面性、透明化与可推理的信息感知，帮助业务感知现象，预测未来发展做决策。

六、态势环形图项目案例

UTT用户时间旅行

此可视化需求主要用途为产品体验的分析，希望运用一张图表的信息整合帮助技术人员与产品经理全面了解各项目的情况，如看到用户浏览使用量、后续功能迭代需求量、产品性能问题及发布状态等，藉此分析哪些产品用户量大，需求缺陷多，需要投入更多的资源做开发维护，判断系统是否健康等，能作为决策资源配比情况的参考依据。

依需求目标对数据与知识进行提取归类，将指标维度分为四大维度，分别是发布、系统性能、需求缺陷与页面浏览，依关联性分布于轨道上进行可视化编码，表层信息运用颜色区分项目创建时间属性、用线条长短代表各指标数值、用圆圈大小代表PVUV值等；结构信息运用位置区分类型等。具体指标映射到可视化展现的形式，请看下图所示：

其他项目案例

七、设计关键要点

从前面对工作记忆的理解，可以知道过于有限的工作记忆广度，对于人的认知能力是一种限制，因此，在设计具备多维度数据的可视化时，最关键的原则为尽可能降低用户的工作记忆负荷，以下提出五点设计时需注意的要点：

1.基础图表组合运用

新型态的表达形式一开始会较难被理解，因此最好参照用户对基础图表的认知来设计，以帮助用户学习和建立有效的认知。在环形布局中，常使用直方图、热力图、散点图、柱状图、折线图等来进行数据表达。

2.信息排布结构有序

在保持呈现信息的内容数量和表征方式不变的情况下，按照某种维度来排序，如按数值高低排序、指标严重程度排序、分组排序等，这种呈现方式使数据信息展示结构性较强，有利于帮助用户快速识别整体趋势情况的分布。

3.信息凸显引导注意

采用视觉凸显设计来强化关键目标信息，能让有用的信息和其他内容产生分离，让人迅速注意和识别一些信息，可以加快任务进程和精确率，提高整体任务绩效。设计需突出目标与其他干扰物之间的差异程度，表达方式包含以形状区别如尺寸大小与形状本身的差异；以色彩区别如色相和饱和度；以空间区别如位置、立体纵深等表达形式等。

4.编码输出保持一致

由于多维度的数据指标在可视化呈现时相对复杂，因此在设计呈现时，同维度的可视化编码颜色、形状、表达方式等都需要保持一致，除了图形表达外，也包含文本标注需采用同样的编码元素方便识别，以降低整体认知理解的成本。

5.提供标注帮助理解

数据量大维度多，放在一起展示时，需使用标注帮助信息的理解。基本作法主要有三种：第一种，在环形布局轨道上预留空间显示指标名称，此作法能直观知道每个轨道环上代表的含意；第二种，在页面中进行图例标注，明确告知每个编码的含意；第三种，透过交互形式以气泡或动态图层等辅助控件形式，来提示指标含意与数值。

八、创造的价值用途

在进行多个业务实际场景的探索应用后，态势环形图的核心价值用途主要有以下几点：

1.信息全面解释现象：

在有限的空间中，能同时展示多维度数据量大的信息，展示全面完整的情况，运用可视化形式来表达现象与过程，帮助用户能具备全局的视角，来理解现象。

2.透出问题辅助决策：

提取组织多维度的数据信息，运用可视化的形式展示其关联性、对比性，并运用信息凸显元素把问题强化透出，在用来解释问题的同时，也能更好的辅助进行决策。

3.视觉刺激变化无限：

视觉的展示效果令人惊叹，根据不同的需求，展示出来的最终效果有各种可能性，不仅可以吸引人们的注意力，同时也能将抽象概念转化为有形的存在，使用户获得更深层次的思考和美观的视觉体验。

九、总结

面对多维度巨量复杂的数据信息，可视化作为人和信息之间沟通的桥梁尤其重要，人们需要通过可视化来窥探出信息的规律性、特异性、关联性和发展趋势，从中挖掘信息价值从而对未来的决策做出有效的判断。本文提出的态势环形图，就是希望透过一张图表的信息聚合表达，做到在有限的界面空间中，依据目标进行信息过滤展示，将信息分层聚合表达，使用户建立全面性、透明化与可推理的信息感知，高效进行信息交互做决策。此种可视化形式不仅适用于CRO业务线，也适合用在需要展示全局视角的各类场景。

原文：https://mp.weixin.qq.com/s/oSYR6hDIg_vqLDz9SoELRA