写给UI设计师看的数据可视化设计
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

2.1.2 类别比较图形

类别比较图形主要用于两个或两个以上类别数据的比较。常见的类别比较图形有柱状图、分组柱状图、气泡图、平行坐标图、多条折线图、子弹图。

1. 柱状图

柱状图不仅可以用于表示时间维度的数据变化,还可以用于类别的对比。图2-8所示为店铺内各类商品销售量的比较,以长度为变量,比较两个或多个不同类别的情况。与随时间变化柱状图不同,它可以表示类别数据的大小。

图2-8

2. 分组柱状图

分组柱状图可以在同一数轴上展示各个分类下的不同分组数据。图2-9所示为三家企业产品开发部门的产品部、设计部、技术部的人数对比情况,由此可以清晰地看出C企业设计部的人数最少、技术部的人数最多。

图2-9

3. 气泡图

气泡图可以轻松驾驭二维到多维的数据展示,其中二维气泡图类似于柱状图中两个维度的数据展示,3D气泡图中气泡的大小可以表示相对维度的数据变量。图2-10所示为从三个维度作数据的对比分析,即用每个季度的广告费支出来反映销售额的变化。

多维气泡图则是用不同颜色、大小的气泡代表不同维度的数据。除此之外,气泡图还可以用于地图,表示不同地理位置的数据变化。

图2-10

4. 平行坐标图

平行坐标图常用于克服笛卡儿坐标系,但不能多维展示数据的分布及关系。它可以用多个垂直平行坐标轴来展示不同维度的数据,其中坐标轴上的折线变化表示不同维度的对应值,以颜色区分类别。图2-11所示为某个企业的三个销售部门在四个城市的销售得分,最后根据得分平均值得出一个等级结论。

图2-11

5. 多条折线图

多条折线图不仅可以表示数据随时间变化的趋势,还可以展示多组数据的对比情况。图2-12所示为公司在两个年份中每月的销售额变化趋势。

图2-12

在设计多条折线图时,要考虑数据的主次关系。在图2-12中,2019年的数据用有颜色的折线重点突出,因为它们是最新数据,也是重点关注的数据,而往年的数据只是作为参考,在设计上可以弱化处理。在设计图形时,很多时候设计师可以通过设计手段助力数据的表现。

6. 子弹图

子弹图,顾名思义,就是样子很像发射子弹后带出的轨道的图表。子弹图的数据展示类似于仪表盘,它的优势是可以表达丰富的数据信息,并且在UI设计中占用的空间相对较小。子弹图的数据值是提前设定好的,图2-13中所示的差、良、优及目标值和实际值都可以作为动态数据呈现。子弹图是线性表达方式,相对于圆形,其更能高效地传递信息。

图2-13展示了企业年度的运营情况,如营收、利润率、新客户,并将这些数据展示得一目了然。不仅如此,子弹图还可以继续向下罗列类别,展示更多维度的信息。

图2-13