图表交互设计之饼图

1.饼图的定义

由一组或者多组数值按照百分比扇区组成的圆形图，最终圆形图的比例为100%，意味着所有数据都是大于等于0，没有负值。

饼图通常由标题、扇区、数据标识三要素组成。

2.饼图的应用

用于体现各个项之间的占比情况，例如某公司职工一共有100人，其中70后10人，80后20人，90后70人，则可以用饼图反应每个年龄段职工的占比情况。

3.饼图的类型

（1）饼图

传统的饼图，常见于工作汇报中，一般网页设计中，该类饼图被弃用，用更美观和好用的圆环图代替。

（2）圆环图

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

4.设计一个饼图

（1）定义饼图的类别（标签）

首先，需要具体了解该组数据是否可以用饼图来表达，例如：是否总占比为100%且没有重叠部分？如果每个项都有交叉就不适合。如果数据类别过多（超过10项），也不适宜用饼图来表达，这对饼图数值的标记和饼图的色值设计是一个重大的挑战。

（2）饼图的数值标记

有两种处理方式，第一种是在环形上标记比例，适用类别较少的情况，且任何一个类别的值不能占比过低，否则无法放下标记。

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

（3）提高饼图的可读性

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

（4）饼图色值设置

属于视觉设计范畴，但是属于优秀的交互设计师都必须掌握的内容。

为什么一些饼图的上色会觉得很丑？因为配色没有规律可言，完全脱离了色环理论，如下图所示：

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

姊妹篇：

《图表交互设计之柱状图》

《图表交互设计之折线图》