1.饼图的定义
由一组或者多组数值按照百分比扇区组成的圆形图,最终圆形图的比例为100%,意味着所有数据都是大于等于0,没有负值。
饼图通常由标题、扇区、数据标识三要素组成。
2.饼图的应用
用于体现各个项之间的占比情况,例如某公司职工一共有100人,其中70后10人,80后20人,90后70人,则可以用饼图反应每个年龄段职工的占比情况。
3.饼图的类型
(1)饼图
传统的饼图,常见于工作汇报中,一般网页设计中,该类饼图被弃用,用更美观和好用的圆环图代替。

(2)圆环图
饼图的升级版,特点是中间部分镂空,用更少的环状来代表比例关系,留白的设计让饼图看起来更美观,中间空白区域可以放置简短的标题,节省页面空间;同时不影响用户对其是“饼图”的感知(根据格式塔原理闭合原则:人们在观察熟悉的视觉形象时,会把不完整的局部形象当作一个整体的形象来感知)。

4.设计一个饼图
(1)定义饼图的类别(标签)
首先,需要具体了解该组数据是否可以用饼图来表达,例如:是否总占比为100%且没有重叠部分?如果每个项都有交叉就不适合。如果数据类别过多(超过10项),也不适宜用饼图来表达,这对饼图数值的标记和饼图的色值设计是一个重大的挑战。
(2)饼图的数值标记
有两种处理方式,第一种是在环形上标记比例,适用类别较少的情况,且任何一个类别的值不能占比过低,否则无法放下标记。

第二种是较为通用的处理方式,使用引导线,在饼图周围合适位置显示数值,适用于某一类别占比过低还有展示更多具体值的情况。

(3)提高饼图的可读性
参照用户的认知习惯(阅读钟表时间),饼图的扇区分布设计,应从12点钟方向开始,顺时针从大到小排序,让用户优先注意到占比最大(可能也是最重要)的指标。

(4)饼图色值设置
属于视觉设计范畴,但是属于优秀的交互设计师都必须掌握的内容。
为什么一些饼图的上色会觉得很丑?因为配色没有规律可言,完全脱离了色环理论,如下图所示:

正确做法是采用色环的类似色(色环上距离相近的颜色)组合成饼图的色值,如下图所示,色环理论可以自行搜索了解。

姊妹篇:
网友评论