![写给UI设计师看的数据可视化设计](https://wfqqreader-1252317822.image.myqcloud.com/cover/705/38209705/b_38209705.jpg)
2.2.6 图形用色技巧
1. 单色色块图更具易读性
色块图是热力图的一种,当设计此类图形时,最好能用单色表示数据大小或权重,因为单色比多色更易理解。如图2-53所示,过多的颜色会增加观者的认知成本,因为色块图的数据结构会让不同颜色色块的位置有随机性。在密集的区域内没有规律地呈现不同颜色的色块,第一感觉是没有强弱的对比,不容易分辨数据的大小或权重。
通过改变颜色的饱和度和明度,单色系色块能够很好地在视觉上表现出对比关系,这非常符合色块图所表达的语意。当设计色块图时,由于色彩的饱和度和明度呈现递增或递减,色块上的文字容易与色块失去对比性,导致易读性差,因此最好能给字体加描边或投影,增强其对比性。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/076-1.jpg?sign=1739502971-4NYVuNfI9G2jN8l4suJQwcprltYaLygj-0-946ad2e3a8f68e5fbdd26fa209c30537)
图2-53
2. 用色有规律
如果色块图的色块位置不可控,就会导致多色展示不佳,而对于位置可控的图形就需要有规律地呈现色彩。如图2-54中的分组柱状图,每个柱体的颜色可控,且有规律的颜色在视觉上会非常舒适,容易建立观者的色彩认知,而无规律的多柱体会导致用户的色彩迷失。另外,类似于分组柱状图的图例,一定要与图形的顺序一致,这样便于参考浏览。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/077-1.jpg?sign=1739502971-ic7O7xE6yeJA2YM49FhYxdaQ4hIfokkc-0-fe7c171942d41e69fd0722335ff29da0)
图2-54
分组柱状图要慎用同色系颜色,否则不容易辨别分类。如果需要使用同色系,就一定要有规律地呈现,这样在视觉上不容易混淆,如图2-55所示。不只是分组柱状图,类似于这样分类过多的图形,都需要使用有规律的颜色,只有这样才不会因为用色接近而出现呈现上的混乱。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/077-2.jpg?sign=1739502971-zOE6cCT0mp8SCrUGFO6lMRXhP9gx4STT-0-62bc46861925ad1a487f4ef837d86a49)
图2-55
3. 通过分类属性配色
通过分类属性配色,是迎合用户认知的一种配色技法。比如,提到天空会想到蓝色,说起草坪会想到绿色,这就是人们共同的认知,而把这种认知运用到配色上,就会符合人们的心理预期。在图2-56所示的有序柱状图中,柱体的配色分别运用分类属性的色彩,如蔬菜类使用绿色、海鲜类使用蓝色等。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/078-1.jpg?sign=1739502971-J46J43q5TpwyCNk6gAShRdIvwKyYk691-0-d113060e369dcaabbe3a9716b34e4285)
图2-56
另外,通过属性的寓意配色也是一种配色方法。例如,小孩的标签是活泼可爱的,因此就会想到其对应的颜色是黄色,而提到老人会想到用灰棕色、女人使用粉色、男人使用黑色和蓝色等。这种配色方法的专业名称为“情绪板”,在第3章我们会着重讲解。
另外,由于不同的行业、不同的人群对事物常常有不同的认知,就像设计师与非设计师对透明元素的理解不同一样(这个设计师都懂)。因此,在配色时要考虑行业属性、产品属性、用户属性,因为只有找准特征才能把配色运用得更合理。