图表设计:玫瑰图好看不好用

TLDR

  • 南丁格尔玫瑰的设计元素与数据映射很复杂,容易引起误解

  • 与其用饼图,不如用甜甜圈图

案例来源

本文的案例讲解与改进设计,来自一个HackerRank的年度研究报告:HackerRank 2020 Developer Skills Report

原设计图

用南丁格尔玫瑰图,展示招聘经理正在雇佣来自训练营毕业生的比例情况。图中三个花瓣,展示了“否”、“是”、“不确定”三个占比,分别是48.9%、31.7%和19.4%。

动态 1

原文图片说明

近三分之一的招聘经理已雇佣过训练营毕业生

招聘经理正在录用编程训练营毕业生:32% 的招聘经理曾雇佣过通过编程训练营掌握编码技能的开发者。但并非所有招聘经理都挖掘了这个不断壮大的人才库 —— 近半数(49%)的招聘经理从未雇佣过训练营毕业生,且该结果在各规模企业中趋同。

随着年轻一代逐渐被训练营吸引,这种观念可能需要改变。Z 世代比前几代人更倾向于通过训练营学习编码技能,而训练营的参与率在过去十年增长了 11 倍。综合来看,这表明训练营毕业生数量将持续增加,且可能成为日益重要的人才来源。

分析

南丁格尔玫瑰图是数据可视化里的经典图形,对于南丁格尔来讲,以两朵花瓣大小不同的玫瑰,展示人员死亡主要原因和次要原因,自有其使用场景和主观用意。

在原设计中,花瓣的角度表达了三个占比数据,合成为100%。但是,在花的径向上,三个花瓣的半径大小不同,观众会因此误解其中存在另外的意义——实际上,花瓣的径向尺寸并无实际映射的数据。所以,这里直接采用类似饼图这种表示占比的常用图形,就可以完全准确表达。

第一次改进设计

考虑到饼图有些沉重,我们通常都用甜甜圈图来替代饼图;而且,甜甜圈图中间的空白处,还可以增添文字,添加一个主要观点。

具体设计如下:

第一次改进设计要点

  • 用甜甜圈图替代饼图

  • 甜甜圈图中间空白处可以添加一个主要观点

  • 调整甜甜圈的粗细到恰当的尺寸,避免太粗或者太细

  • 用深蓝色、深橙色表示“是”和“否”,用深灰色表示“不确定”,颜色与语义相互映射

  • 甜甜圈各部分上标注类别信息和比例数值

  • 比例数值圆整,降低观众视觉负担,但不会影响得出正确结论

以下是来自该报告中的一张甜甜圈图,可以与上面的甜甜圈对比。

动态 2

 

存在的问题是:

  • “圈”有点细,还可以加粗一些

  • 三段圈的色彩太亮,在黑色背景下,显得太过刺眼(这当然与整个报告的风格有关,整体都是黑色背景的,所以没法单独修改图的色彩)

可以发现,同样还有改进的空间,改进的思路设计样式参见前一改进图样式。

第二次改进设计

如果跳开这个报告,我们还可以有更加自由的设计,如下图所示。

第二次改进设计要点

  • 用堆叠条形图替代甜甜圈图

  • 相较于角度到数据的映射,人们对长度映射到数据大小更加容易

  • 以更小的空间呈现比例值

  • 用深蓝色、深橙色表示“是”和“否”,用深灰色表示“不确定”,颜色与语义相互映射

结论

  • 南丁格尔玫瑰的设计元素与数据映射很复杂,容易引起误解,不要使用

  • 展示比例构成的,可以选择观众容易理解的饼图,但我们更加推荐的是甜甜圈图

  • 甜甜圈图中间空白处可以增加一个主要观点

  • 可能的条件下,确保色彩与语义的映射,增强观众的接受程度

免责声明

  • 本文内容是从图表设计角度出发的讨论、阐述

  • 本文包含的任何业务观点都是服务于图表设计分析

  • 本文不包含对 图形来源报告、文章的内容、观点 的任何否定意图