文章目录

在当前的大数据时代,了解如何可视化数据是UI/UX设计师技能的重要组成部分。今天几乎所有的公司都需要良好的数据可视化作为参考来确定业务方向和做出决策。清晰的可视化有助于理解数据,但结论仍取决于数据质量、统计口径和解释方式。

图表进入产品页面后,还要与标题、筛选和说明一起组织。在界面布局与数据展示中先确定读者要作出的判断,避免仅凭图表看起来丰富就把它放上仪表板。

按比较、趋势与构成三个问题选择条形、折线与占比图

什么是数据可视化

数据可视化是将信息或数据转换为视觉上下文的概念,使数据更容易、更快速地被大脑理解。这涉及以人脑可以从中提取见解的方式呈现信息或数据,从而更容易识别大型数据集中的模式和趋势。

数据可视化也被定义为一种视觉艺术形式,它抓住了我们的兴趣并让我们关注信息,使我们能够内化数据中存在的信息和趋势。最常见的数据可视化形式有:条形图、地图、折线图、柱形图、面积图、子弹图、信息图表等。Pixso总结了10种常用的数据可视化设计形式,以及其应用场景,有助于提升数字分析类产品的设计思维。

数据可视化形式

1. 条形图

按日期比较数值的柱形图

条形图是最流行的数据可视化方法之一。条形图将数据组织成矩形条,便于比较相关数据集。你可以在以下情况下使用条形图:

  • 比较同一类别中的两个或多个值

  • 比较各类别的数量、金额等同口径数值

横向条形图适合较长的类别名称;下图按数值排列条形,属于排名比较,而不是实际值对目标的子弹图。

按类别数值排序的横向条形排名图

2. 地图

用地理区域色块展示分布的地图

要显示有关地理数据分布的信息,使用地图是一个非常合适的选择。你可以在以下情况下使用地图:

  • 显示涉及特定位置的客户数据

  • 让你的客户查看他们附近的数据点

  • 显示客户数据的清晰地理分布

3. 折线图

多条时间序列折线与末端标签

折线图通常用于通过以简洁准确的图表线格式可视化数据来帮助用户扫描信息和了解趋势。你可以在以下情况下使用折线图:

  • 让用户了解数据的趋势、模式和波动

  • 在相同时间范围与统计口径下,比较多个数据系列的变化

4. 散点图

下图进一步用点的大小表示第三个量,是气泡图形式;如果只有两个数值变量,点大小可以保持一致。

以横纵轴与点大小编码数值的气泡图

散点图是一种二维数据可视化,它使用点来表示为两个不同变量获得的值——一个沿 x 轴绘制,另一个沿 y 轴绘制。你可以在以下情况下使用散点图:

观察两个数值变量之间的关系

查找聚集、离群点与相关趋势;相关不等于因果

5. 饼状图 

饼图是一个圆形图,它被分成多个段(即饼片)。这些片段代表每个类别对显示整体部分的贡献。

你可以在以下情况下使用饼图:

  • 计算出某物的构成

  • 展示少量类别占同一整体的比例;类别应互斥且合计为整体

6. 仪表

活跃用户与非活跃用户数值的环形指标卡

仪表用于突出单项指标及其范围或目标。图中是环形指标卡,展示活跃用户与非活跃用户的数值;若没有明确目标刻度,就不能据此判断完成率。

你可以在以下情况下使用仪表:

  • 跟踪具有明确目标的单一指标

  • 你要显示的数据不需要与其他数据集进行比较

7. 表格

表格

表格按行和列显示数据,适合查询具体值、核对记录和比较多个字段。

你可以在以下条件下使用该表:

  • 显示可以分类组织的二维数据集

  • 按业务需要提供排序、筛选或进入记录详情的入口

8. 热图

热图也可以覆盖在页面或空间上表达密度。下方网页热区属于这一类,不是行列矩阵;没有研究方法与样本说明时,不能只凭颜色推断用户为什么关注某处。

热图

热图主要通过色彩变化来显示数据。适合用来交叉检查多变量的数据,方法是把变量放置于行和列中,再将表格内的不同单元格进行着色。

你可以在以下条件下使用热图:

  • 对实验数据进行质量检查和差异展示,如比较全年多个城市的温度变化,看看最热或最冷的地方在哪儿

  • 展示重点研究对象的表达量数据差异变化情况

9. 子弹图


子弹图在紧凑空间中展示实际值、目标标记和可选的背景区间,用于判断实际表现与目标的差距。它不是普通横向条形图换一个名称。 

你可以在以下条件下使用子弹图:

  • 可用于将度量的绩效可视化,并与目标值和定性刻度做比较

  • 例如比较本月实际完成80与目标100,并明确背景区间代表的业务含义

10. 面积图

面积

面积图有多种,包括堆积面积图和重叠面积图。

你可以在以下条件下使用面积图:

  • 表示多个时间序列

  • 使用颜色高光和中性色的组合来提供对比和强调

设计这些可视化形式时,可以从以下方面检查:

  • 指标:明确数值代表什么,以及单位、统计时间和口径。

  • 简单:先突出读者需要回答的问题,减少与当前判断无关的干扰。

  • 简洁:信息简短明了,没有可见的不必要信息。

  • 关联:组合多个数据集之前,检查统计口径和关联条件,不能把同时变化直接解释为因果。

  • 颜色:为了吸引读者注意最重要的信息,使用了清晰易懂的调色板。

  • 美学:图形生动,设计精良,赏心悦目。

数据可视化为最初可能看起来无趣或难以理解的内容提供了一个有趣的新视角。选择图表时,需要同时考虑数据类型、业务问题和可读性,而不只追求新奇形式。如果认为你可以在数据可视化设计领域一展所长,不妨在Pixso进行设计测试吧,Pixso精细化钢笔工具、组件级自动布局、矢量网格等工具,足以让你发挥想象力!

同一份门店数据,三个问题需要不同图表

假设运营团队有各门店的月订单量、销售额和城市信息。想比较本月哪家门店订单更多,可以用按订单量排序的条形图;想观察某家门店近半年的变化,可以用折线图;想知道销售额是否与订单量一起增长,可以用散点图,把两个数值分别放在两条轴上。

如果只是询问某一家门店的精确销售额,表格通常比让用户估读柱高更直接。城市字段存在也不代表必须画地图:只有空间分布本身影响问题时,地图才有额外价值。展示各地发生率时还要明确分母,不能把总量大的地区直接解释为比例更高。

Carbon图表说明可用于核对条形、折线、散点与面积等基本用途。散点图若再使用点面积表示第三个数值,就属于气泡图的表达;读者需要额外图例,不能只看到大小不同的圆点。

选对图后,再检查读者会不会读错

  • 比较长度的柱形或条形图通常需要清楚的零基线;截断坐标轴时要评估是否夸大差异。
  • 饼图各项应来自同一整体,类别不能重叠;比例因四舍五入出现尾差时,应有一致的精度规则。
  • 缺失数据不是零。时间序列中断要有明确表达,不能用连接线暗示中间数值已被观测。
  • 堆叠面积图适合看总量与构成变化,但中间系列的精确比较并不直观;需要比较各系列趋势时,可改用分面或折线。

多条折线还应让系列名称、线型或点形共同承担识别,具体可以参考不只靠颜色区分折线系列的方法。颜色可以辅助,但不应成为唯一线索。

在 Pixso 中,可以给同一组数据做条形、折线和表格三种版式,让同事回答同一个业务问题,再比较哪种最容易找到答案。图表旁保留指标定义、时间范围和单位,不把关键解释藏在图片里。