用数据讲故事——可视化在数据产品界面中的妙用

原创吕翩翩微盟技术中心

前言

可视化的范畴可以分为信息可视化及科学可视化。科学可视化旨在利用计算机图形学，从而帮助人们理解关系复杂的、数据量大的科学关系，最常见的如：等高线、磁感线等，在科学可视化中，利用一些手段将不可见的关系进行可视化，帮助人们对复杂的科学原理进行理解或进行研究。

而信息可视化旨在将抽象的信息以形象具体的图形方式表达出来，从而帮助人们高效、准确地分析数据，最常见的如：流程图、结构图、数据图表等。与科学可视化相比，信息可视化更侧重于将抽象内容形象化。数据可视化作为信息可视化的重要部分，将更侧重于数据在传播中情感化的表达。据研究表明，正常人获得的信息大概有80%来自视觉，对于人类而言，视觉信息最容易理解。

背景

在工作中会涉及到产品设计和界面设计，以及一些对内对外的材料输出，为了能够更高效地传递较为复杂的产品逻辑、业务信息，除了对材料因人而异进行差异化处理，将内容进行可视化呈现也是一种高效的途径。

市面上已经有很多可视化的工具，如各类 BI 工具、D3.js、各个大厂的开源组件等，本文着眼于“设计”，并对数据图表，以及典型可视化案例进行分析，结合工作内容和经验探讨可视化设计的落地方法，并提炼出一般性的可视化结论，使用户能够以直观的方式抓住重点。

第一步：了解常用图表

这里介绍我在设计中常用并且表现力较强的几类图表。其他常用的一些图表类型可参考 WOS 应用“数据”的使用文档（https://help.weimob.com/os/article/7527），涉及20余种常用图表和使用场景的介绍。

1.1 漏斗图

漏斗图通常使用在流程比较规范、周期长/环节多的分析中，通过漏斗各个环节数据结果比较，能够直观地发现和定位问题。在 WOS 数据的漏斗分析里已经落地该分析模型，分析者可以自定义期望流程，通过可视化图表定位用户的流失环节，有针对性地进行环节优化。

在下图中，第一步到第二步的流失用户较多，可以考虑营销落地页是否有可优化的空间。最后提交订单后仍有不少用户没有完成支付，可以查看用户是否在提交订单的页面遇到了阻碍。

1.2 热力图

热力图使用不同程度高亮的形式来表现具有区域或地理位置属性分布的数据。常见于地图或者页面点击热力图。

下面两张图中，左侧可以一目了然地定位用户对什么内容更感兴趣，右侧可以快速获取人群密度的情况。

1.3 桑基图

桑基图是一种特定类型的流程图，图中延伸的分支的宽度对应数据流量的大小。它可以用在任何独立的系统流程中。因1898 年Matthew Henry Phineas Riall Sankey绘制的“蒸汽机的能源效率图”而闻名，此后便以其名字命名为“桑基图”。桑基图的始末端的分支宽度总和相等，即所有主支宽度的总和应与所有分出去的分支宽度的总和相等，保持能量的平衡。不同的颜色可以用来区分不同的类别，或者用来表达数据从这一个阶段流向了另一个阶段。

著名的拿破仑东征图，它被认为是最早的桑基图。通过此图可以直观地感受到在东征途中40万大军历经长途跋涉后节节败退的场景。图中的6个数据信息：军队人数、行军路线、气温、地理位置、行军到具体地点的时间及距离。黄色和黑色线条分别代表进军路线和撤退路线，线条粗细表达了人数的变化。同时线条上还标注了所到之处的经纬度以及特定日期所处位置。底部标注了返程时每天的温度。

用户行为路径分析是桑基图在用户行为分析中的应用。使用行为流分析，可以获得以下信息：

洞察用户在进入首页后进行操作的分布情况（如直接搜索、访问信息流、关注营销位等）。
发现用户被卡住的环节，根据循环路径可以识别用户是否在某些页面之间来回跳转，帮助改进用户体验和导航流程。
或者指定一个特定事件（例如按钮点击、表单提交等），并查看用户在该事件发生后的路径和行为。

1.4 韦恩图

韦恩图是一种用于表示集合和它们之间关系的图形工具。它以数学家约翰·韦恩（John Venn）的名字命名，用于可视化集合的交集、并集和差集等关系。

如下图，在拼合关系型数据库中的两张数据表时，需要指定关联关系：左关联、右关联、内关联。通过下方的可视化方式，可以一目了然地知道几张表中数据记录的存留：内关联即取交集；左关联即左表全部+交集；右关联即右表全部+交集。

1.5 力导向布局图

力导向布局图是利用力导向算法绘制的网络图，由多个节点和连线组成，节点代表数据的实体，连线代表关系。力导向布局图可以被看作是展示关系的分组气泡图。

在力导向布局图中，节点的颜色和大小可以用来展示不同的变量或属性。通过选择不同的颜色方案或使用渐变色，可以为节点分配不同的类别或数据种类。这样可以帮助观察者更直观地理解数据的不同特征或分类。

此外，连线的存在可以表示节点之间的关系强度或连接程度。连接的线条可以采用不同的样式或线宽来表示不同的数据类型或关联程度。例如，粗细的线条可以表示更强的关联，而细线可能表示较弱的关联。

数据血缘图是力导向图的变体，通过血缘图可以直观了解数据的完整历史和演变过程，以及数据在不同环节中的变化和状态。对于数据质量管理、故障排查、合规性审计以及数据分析和决策过程中的可信度评估都非常重要。

1.6 南丁格尔玫瑰图（玫瑰图）

南丁格尔玫瑰图是一种以圆形为基础的统计图表，用于可视化数据的分布和频率。它以19世纪英国护士和统计学家 Florence Nightingale 的名字命名。

南丁格尔玫瑰图通常用于表示分类数据的频率或比例，并以圆形为基础。它的外围是一个圆圈，代表总体或总数。然后，从圆心向外辐射出一系列扇形，每个扇形代表一个分类或组别。扇形的长度或角度表示该分类或组别的频率或比例。

下方由南丁格尔创作的可视化图形描述了1854年4月～1856年3月期间士兵死亡情况。右边是1854年4月～1855年3月，左边是1855年4月～1856年3月，用蓝、红、黑三种颜色表示三种不同的情况，蓝色代表可预防和可缓解的疾病治疗不及时造成的死亡、红色代表战场阵亡、黑色代表其他死亡原因。

蓝色，红色，黑色的区域以圆心为公共顶点测量。图表各扇区角度相同，用半径及扇区面积来表示死亡人数，可以清晰地看出每个月因各种原因死亡的人数。显而易见，1854~1855年，因医疗条件而造成的死亡人数远远大于战死沙场的人数，这种情况直到1856年初才得到缓解。

1.7 用户体验地图

用户体验地图本质上是一个工具（旨在帮助设计团队和产品团队理解用户在与产品或服务交互的过程中的感受、需求和期望。它是通过绘制用户在整个用户旅程中的关键触点和情感状态，来呈现用户体验的全貌）。在下图的应用中，它也是一个能够很好地串联角色和使用场景的可视化方式。

1.8 和弦图

和弦图最初是为了可视化基因组数据而设计的工具。它提供了一种独特而强大的方式来显示复杂的关系和模式，特别适用于基因组学、癌症基因组学、比较基因组学和分子生物学的分析。将数据表示为圆环上的区域，并使用线条、弧线和颜色等元素来展示不同数据之间的关系，弧线厚度表示关系的强弱。和弦图的变体也可以将圆环切割为弧形，以适配不同的排版场景。

下图来自http://circos.ca/，描述了和弦图的绘制技巧，另外该站点内还提供了很多和弦图的可视化作品。

1.9 泳道图

泳道图用于展示多个参与者在流程中的职责、活动和交互关系，常用于项目管理的可视化项目里。它提供了一种清晰的方式来理解和分析复杂流程中各参与者之间的协作和责任分配。它通常由水平或垂直的泳道组成，每个泳道代表一个参与者、角色、部门或组织单位。在每个泳道内，可以绘制活动、任务、决策、事件等，以显示参与者的职责和行动。

下图是泳道图的简化版本，它省略了复杂的流程关系，重点突出项目内容。并且支持用户切换泳道的查看视角，来多视角进行任务内容的比对，进行优先级决策。

1.10 旭日图

旭日图可以被视为环形图的一种变体，它相当于将弧形区域的内容进行了下钻，更侧重于表现数据的层次结构。它将数据划分成多个层级，并使用内向外的延伸来表示层次结构。每个层级由内部的圆环表示，而每个圆环又由扇形区域组成。每个扇形区域的大小表示该层级下数据的比例或重要性。

第二步：数据准备，并结合用户的心理模型选择合适的数据图

2.1 什么是心理模型？

实现模型：有关机器和程序如何实际工作的表达被称之为“实现模型”。在数据可视化中，大量、复杂、多维的数据可以看作是“实现模型”。

心理模型：而在用户看来，他们所看到的是可视化图形传递给他们直观、高效的信息。这便是用户的“心理模型”。用户在获得可视化图形中的信息时，并不需要了解图形背后庞大的数据，因此可视化图形在这里为用户创造出一种认知上的简洁解释方式。对于一般的可视化图形，只需满足用户的心理模型，向他们传递直观的信息。

表现模型：表现模型是设计者如何将程序的功能展现给用户的方式。在本文的场景下，即采用什么样的可视化方式来表达数据的含义。

对于设计一个可视化图形的目标之一就是要使表现模型和用户的心理模型尽可能接近。

2.1 数据准备：

根据对传统的数据可视化图形属性的研究，结合用户的心理模型，在进行数据可视化前，通常需要对手头的数据理清楚以下几点：

明确目的：明确可视化的目标，和信息传达的优先级。
数据维度：结合目的来决定查看数据的角度。如果一份数据有位置和时间的维度，通常是不错的可视化切入点。如果只想表达主要几个维度的信息，可以考虑按维度拆分为几个不同的故事场景。
数据度量：通常会用尺寸、不透明度等来映射数据的范围。
元素关系：手头这些信息之间的关系是什么。常见的关系类型：并列关系、递进关系、条件关系、因果关系、对比关系、包含关系、解释说明关系、线性流程关系等。两个毫无关系的元素尽量不要在一个可视化场景内出现，确保故事的完整性。

第三步：利用恰当的视觉隐喻手法进行信息映射，用故事的形式传递数据的价值。

隐喻界面依赖于用户对界面视觉提示和功能之间直觉联系的建立，以帮助用户解释界面中的信息并减轻其认知负担。通过将用户熟悉的事物与视觉隐喻联系起来，人们能够更快地理解其含义。在进行数据信息映射时，可以从以下几个方面入手进行优化：

1）明确的符号和图标。

使用直观和易于理解的符号和图标来代表特定的数据或信息。确保它们与用户之前的经验和文化背景相一致，这样用户可以迅速理解它们的含义。

2）将不同指标间的关系进行可视化，提升可视化的深度。

首先可以利用指标本身的关系，例如，在显示某导演所拍的电影时，我们可以按照“导演——所拍电影种类——电影名称”的关系来设置显示深度，同时指标图形的大小也可以表示数量的关系。

列举一些常见关系可以考虑使用的可视化方式：

并列关系：和弦图，词云图
递进关系：树状图、力导向布局图（如上方电影的举例）、旭日图（环形图变体，逐层下钻）
因果关系/条件关系：玫瑰图、力导向布局图
包含关系：韦恩图、矩形树图
线性流程关系：桑基图、体验地图、泳道图、甘特图

其次，对于没有直接关联的指标，我们可以创建生活中常见的、易于理解的关系场景。例如，显示男女比例失衡的场景可以用失衡的天平来表达。

3）与熟悉的概念进行对比。

对于一些特殊的数据，将其与熟悉的、可以感知的数据进行对比时，才能加深用户对该数据的感知。例如：香飘飘奶茶年销量超过5亿，杯子加起来可以绕地球3圈。

4）可视化作品的可交互性。

运用交互操作来增强用户对界面中元素之间关系的理解。例如，使用点击、悬停、滑动、平扫等来表示元素之间的转换或关联。这样的视觉提示可以帮助用户更清晰地把握信息的结构和演变流程。

隐喻依赖于用户在界面视觉提示与功能之间建立的直觉联系，而不必了解界面背后复杂的机制。用户之所以理解界面中隐喻的含义，是因为用户在认知上将他们和熟悉的事物联系在了一起。这是一种借助了大脑进行推理的高效方式，但这取决于用户在认知上已经熟悉的事物，因此在选择隐喻时，同样需要注意隐喻的局限性，确保设计的可视化图形与用户之间有相似的联想方式。

在我看来，信息隐喻及故事性是可视化中最难的部分，如何将数据放置到一个故事中自洽而不突兀，依赖于日常的观察和积累。

案例

上文中提到了一些我在产品和界面设计里的可视化实践。在工作中部分对内对外的材料里，我也进行一些可视化的尝试。

案例一：这个案例侧重于关键指标的可视化

1）原始需求：数据应用提供了138张看板、11个自助取数模型和3大自助分析功能，帮助商家进行多视角精细化运营。

2）目标拆解及优先级：体现“数据应用的能力强大”、“多视角分析能力”

3）数据维度：多视角维度、数据看板维度、自助取数

4）关系：这个案例中的维度关系是逐层递进的，给我的第一直觉可以选用一张呈“放射状”的图。

5）故事：最终采用了“星轨”这一故事载体，我们面对大数据时，犹如仰望浩瀚星空，深不可测。不同时刻、不同视角、不同途径看到的星星（数据）都给了我们不同的答案。

6）隐喻：除了上面的故事，星轨的长度恰好给明细的内容提供了展示的空间。

案例二：这个案例更侧重信息间关系的可视化呈现

1）原始需求：以DPaSS为基座，体现上层产品由内而外释放的数据能力。需要体现各个产品之间的业务关系。

2）目标拆解及优先级：体现业务逻辑，三租户共享的内核能力。

3）故事：“由内而外”、“内核/外壳”联想到娃绘本上的地球解剖图，以此为基础表现由内而外的能力。

4）关系，在3）的基础上结合玫瑰图、旭日图进行分类内容和层级下钻的呈现，另外使用箭头配合文字描述等形式表达业务流向。

后话

好的可视化呈现能帮助达到事半功倍的效果，但数据可视化的目的不仅仅是可视化，可视化只是一种帮助人们加深对数据认知的手段，最终是要帮助人们从可视化中高效有利的得出结论，为决策提供服务。因此，在采用视觉隐喻手法对数据进行信息映射时，不意味着我们要为了功能而设计成枯燥的功能型图表，也不意味着仅仅是追求视觉上的美感而设计出华而不实的图形。这就要求在设计时取得功能和美感上的统一。

参考资料

https://charts.ant.design/
http://circos.ca/
Information is Beautiful
FlowingData | Data Visualization and Statistics
Visual Business Intelligence
Datavisualization.ch
http://www.visualcomplexity.com/vc/
Cool Infographics
https://help.weimob.com/os/article/7527

推荐阅读

继续滑动看下一个