动态

图表设计:用不同颜色编码正负值

TLDR

  • 正负数可以分别设置不同颜色,便于区分,有利于快速传递洞察
  • 兼顾电子稿与打印稿
  • 要考虑灰度打印的呈现效果

 

案例来源

本文的案例讲解与改进设计,来自一个专业机构的行业研究报告:中国线上消费品牌指数CBI(2023-2025)

原设计图

动态 1

 

原文图片说明

从季度环比看,如图3所示,中国线上消费品牌指数呈现出与线上市场相符的季度波动规律。

分析

季度环比有正负值,可以用色彩编码,以提高识别度,让读者更加容易理解。

第一次改进设计

动态 2

 

第一次改进设计要点

  • 为正负值柱子分别设置不同颜色

第二次改进设计

这种饱和色的红蓝设计,在灰度图时,会由于两种色彩的高饱和,会存在一种情况:当图片的灰度打印稿(打印文档时很常见的)时,出现无法区别红蓝色的情况,两者可能都是很深的灰色。所以,可以考虑除了色彩,在饱和度上也适当调整一下。

再次改进设计如下。

 

这张再次改进图与上一次改进相比,主要差异就是调整柱子色彩的饱和度,使得其灰度打印也可以看到差异。

上图的灰度效果如下:

动态 3

 

第二次改进设计要点

  • 调整柱子色彩

  • 差异化柱子色彩的饱和度

  • 有利于灰度印刷稿,根据具体情况选择

结论

  • 正负数可以分别设置不同颜色,便于区分,有利于快速传递洞察
  • 兼顾电子稿与打印稿
  • 要考虑灰度打印的呈现效果

免责声明

  • 本文内容是从图表设计角度出发的讨论、阐述
  • 本文包含的任何业务观点都是服务于图表设计分析
  • 本文不包含对 图形来源报告、文章的内容、观点 的任何否定意图