数据可视化图表设计指南：圆环图

关注▲Clip设计夹后台回复“进群”加入设计成长群

设计夹的第105篇文章分享

大家好，我是Clippp，今天为大家分享的是「数据可视化图表-圆环图」。

圆环图(Donut chart)，是饼图的一种变体，指将两个及以上大小不一的饼图叠加，挖去中间部分构成的图形。因为中间区域被挖空，看着很像，所以圆环图也叫做“甜甜圈”图。

饼图大家应该都很熟悉，通过对比各个扇形面积的大小来进行数据的对比。但是饼图只能对比一组数据，无法对比多组不同的数据。

这个时候就可以考虑使用圆环图，圆环图的空间利用率比饼图更高，能对比多组数据，而且圆环中间空心的部分还可以用来显示文本信息，标题等。

3种圆环图样式

标准圆环图

图表中间空心的部分用来展示数据的总数，用圆环的弧长和颜色表示不同数据的占比，图表旁边有图例用来解释说明。

布尔圆环图

布尔圆环图就像是给圆环图做了布尔运算，只表示正负两个值。

比如想重点突出完成率，就使用绿色圆环来表示68%的完成率，圆环其他部分为灰色，同理想重点突出反弹率，就使用红色圆环来表示83%的反弹率，圆环其他部分为灰色。

圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。

标签圆环图

直接在对应的圆环上加入标签比使用图例更容易理解。在屏幕空间允许的情况下，可以直接在圆环上添加「名称+所占比例+数量」的标签形式。

圆环图交互状态分析

悬停状态

在标准圆环图中，鼠标悬停在圆环图上时，跳出分段名称+百分比+数量值的弹窗。在标签圆环图中，悬停的圆环部分突出显示，其余部分淡出处理。

点选状态

图表段可以是交互式的，点击对应的分段时，右侧的图例也会同步高亮显示。

焦点状态

焦点状态和上面提到的悬停状态类似，唯一的区别在于，焦点状态选中分段后有一个放大+描边的圆环效果，突出展示数据。

空状态

当没有可用的数据时，应该在图表上表明这一点，并给出提示引导用户去点击。

错误状态

获取数据时偶尔会出现发生错误的情况。发生这种情况时，向用户提供有用的、可操作的解释，说明发生错误的原因并告诉用户可以采取哪些措施来解决问题。

圆环图使用指南

使用分类颜色

保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据，同色系颜色常用在直方图中。

最多使用五个分段

当圆环图包含多个数据分段时，图标会变得难以理解，为保证图标的清晰，尽可能将分段控制在 2-3 段，不要超过5段。如果数据过多，可以考虑使用柱状图、条形图等其他形式的图表。

保证数据准确

圆环图的所有分段加起来的数值应该始终为 100%，没有有多段数据占比过小，可以一起汇总到“其他”分段中。

按顺序排列数据

圆环图的份分段应从12点位置开始按最大值排序，然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。

不要将时间分段

时间是一个顺序变量，不能用作圆环图中的类别。例如每个季度的时间是相同的，但是每个季度访客却不一样，使用圆环图会给用户造成一定的困扰。如果以时间作为基本单位，可以使用直方图、条形图等图表。

最后

以上就是圆环图的基本介绍，在之后的分享中，会为大家介绍折线图、面积图、条形图、直方图等一系列数据可视化图表文章~

如果大家想看更多「数据可视化图表」系列内容，记得及时关注接下来的文章~

最后给大家分享一份最新的iPhone13样机模型源文件，有PSD、Figma和Sketch三种格式可以选择，特别适合用来包装作品集。

慢慢来比较快，希望对你有帮助！

领取方式：

1）在看&分享让更多小伙伴看到这篇文章

2）公众号后台回复13样机获取样机源文件

添加微信,邀你进设计成长群

不错过任何干货分享

---

Tips:这里会持续更新设计干货，包括但不限于交互日记、设计法则、答疑解惑、读书笔记…感兴趣的同学可以扫码加入，一起成长！⬇️⬇️⬇️

文章合集

致2021：设计文章合集

致2020：设计文章合集

除非注明，否则均为UIED用户体验学习平台-Clip设计夹的原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.uied.cn/24675.html