Alice

大家好,我是Clippp,今天为大家分享的是「数据可视化图表-圆环图」。圆环图(Donut chart),是饼图的一种变体,指将两个及以上大小不一的饼图叠加,挖去中间部分构成的图形。因为中间区域被挖空,看着很像🍩,所以圆环图也叫做“甜甜圈”图。饼图大家应该都很熟悉,通过对比各个扇形面积的大小来进行数据的对比。但是饼图只能对比一组数据,无法对比多组不同的数据。这个时候就可以考虑使用圆环图,圆环图的空间利用率比饼图更高,能对比多组数据,而且圆环中间空心的部分还可以用来显示文本信息,标题等。

 

3种圆环图样式 

标准圆环图

图片

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

 

布尔圆环图

图片

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

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

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

 

标签圆环图

图片

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

 

圆环图交互状态分析 

悬停状态

图片

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

 

点选状态

图片

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

 

焦点状态

图片

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

 

空状态

图片

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

 

错误状态

图片

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

 

圆环图使用指南 

使用分类颜色

图片

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

 

最多使用五个分段

图片

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

 

保证数据准确

图片

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

 

按顺序排列数据

图片

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

 

不要将时间分段

图片

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

 

最后 

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

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

 

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

领取方式:关注公众号,后台回复【13样机】获取源文件

图片

慢慢来比较快,希望对你有帮助!

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网 » 数据可视化图表设计指南:圆环图

登录收藏
 
你可能喜欢的:
工作经验|设计组件的更新和优化,需要哪些流程?工作经验|设计组件的更新和优化,需要哪些流程?
我是万万没想到,这么复杂的效果,竟然是用这么简单的工具做出来!我是万万没想到,这么复杂的效果,竟然是用这么简单的工具做出来!
B类新品场景设计B类新品场景设计
想要优化好UI作品,这14个设计细节一定要检查到位!想要优化好UI作品,这14个设计细节一定要检查到位!
探索节日运营新思路探索节日运营新思路
2021-16篇 | 产品细节剖析,让你看看大厂是如何做设计的2021-16篇 | 产品细节剖析,让你看看大厂是如何做设计的
总监说我的画面太平了!结果同事和我说了几个小妙招!总监说我的画面太平了!结果同事和我说了几个小妙招!
品牌广告创意测试方法论品牌广告创意测试方法论
Behance 首页推荐的作品集为什么这么高级?彩云为你拆解其中7个秘密Behance 首页推荐的作品集为什么这么高级?彩云为你拆解其中7个秘密
交互设计师专业能力体系交互设计师专业能力体系