3种圆环图样式
标准圆环图
图表中间空心的部分用来展示数据的总数,用圆环的弧长和颜色表示不同数据的占比,图表旁边有图例用来解释说明。
布尔圆环图
布尔圆环图就像是给圆环图做了布尔运算,只表示正负两个值。
比如想重点突出完成率,就使用绿色圆环来表示68%的完成率,圆环其他部分为灰色,同理想重点突出反弹率,就使用红色圆环来表示83%的反弹率,圆环其他部分为灰色。
圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。
标签圆环图
圆环图交互状态分析
悬停状态
在标准圆环图中,鼠标悬停在圆环图上时,跳出分段名称+百分比+数量值的弹窗。在标签圆环图中,悬停的圆环部分突出显示,其余部分淡出处理。
点选状态
图表段可以是交互式的,点击对应的分段时,右侧的图例也会同步高亮显示。
焦点状态
焦点状态和上面提到的悬停状态类似,唯一的区别在于,焦点状态选中分段后有一个放大+描边的圆环效果,突出展示数据。
空状态
当没有可用的数据时,应该在图表上表明这一点,并给出提示引导用户去点击。
错误状态
圆环图使用指南
使用分类颜色
保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据,同色系颜色常用在直方图中。
最多使用五个分段
当圆环图包含多个数据分段时,图标会变得难以理解,为保证图标的清晰,尽可能将分段控制在 2-3 段,不要超过5段。如果数据过多,可以考虑使用柱状图、条形图等其他形式的图表。
保证数据准确
圆环图的所有分段加起来的数值应该始终为 100%,没有有多段数据占比过小,可以一起汇总到“其他”分段中。
按顺序排列数据
圆环图的份分段应从12点位置开始按最大值排序,然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。
不要将时间分段
原文地址:Clip设计夹(公众号)
作者:Clippp
转载请注明:学UI网》数据可视化图表设计指南:圆环图
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司