医药数据库色板重构之分类色板

重构背景

• 设计上：

面对越来越多的可视化需求，VI 中原有的品牌色及辅助色已经不能满足各种应用场景需求

• 业务上：

随着可视化种类及数量的增加，色彩大面积应用广泛起来，品牌色系过于年轻化，与行业新增数据类型沉稳冷静的特性不太不契合

基于腾讯《可视化色彩设计指南》一文方法，与百度B端色彩研究一文，扩展研究 Insight 数据可视化色彩分析

色彩设计原则

• 精确：符合行业特征，针对不同类型数据进行配色，并在色彩的语义定义上确保表意准确。

• 清晰：保证在色相的辨识度、色阶的均匀度，最大程度地提升图表数据清晰性。

• 美观：兼顾舒适 & 美观，并实现全局视觉统一。

• 普适兼容：考虑色彩之间、色彩与文字之间的信息可读性，保证色盲用户、极端情况均能有效使用。

建立可视化色板

分类色板

为了找准配色方向，针对数据类型配色，我们首先要去了解可视化的数据类型。根据《数据之美》，我们可以把数据类型划分成分类数据、时序数据和空间数据。

图片来自网络

• 分类数据：指按照现象的某种属性对其进行分类而得到的反映事物类型的数据。

• 时序数据：指统一指标按时间顺序记录的数据列。数据分析的目的一般是通过找出样本内时间序列的统计特性和发展规律性，构建时间序列模型，进行样本外预测。

• 空间数据：指用来表示空间实体的位置、形状、大小及其分布特征诸多方面信息的数据，它可以用来描述来自现实世界的目标。我们接触的更多是地理空间数据，它是空间数据的一种类型，指带有地理坐标的数据，包括经济、社会、资源、环境等一切领域，是地理实体的空间特征和属性特征的数字描述。

针对这些数据类型，通常配色需求也相应可以分为3大类，并且它们的要求各自有所不同：

图片来自网络

• 分类色板：分类色板常见于描述分类数据。常采用不同色相来区分数据类别，所以要求色相之间具有高辨识度、高区分度。

  
  

• 连续色板：连续色板通常用于表示同一事物中的数值大小、梯度的变化。常采用同色相颜色的不同明度和饱和度来表示，所以要求颜色具备高均匀度、大跨度。
  

• 发散色板：发散色板通常用于展示数据从负数到0再到正数的连续变化。常采用从一种颜色经过一个浅色再均匀过渡到另一种对立颜色的表现方式，所以同样要求颜色具备高均匀度、大跨度。

💡Tips：如何区分连续色板和发散色板，首先看两种极端数值是否是对立属性，非对立属性则使用连续色板

同行业用色分析

业界竞品如何定义分类色板呢？这里主要关注了两个问题：分类色板的颜色如何选取？数据量超出色板数量如何处理？带着这样的问题我们挑选了不同类型的竞品进行考察分析

• 通过整理 5+ 同行业产品配色总结：

在提取出这些竞品的分类色板进行对比之后，可以归纳出以下3种不同的选色逻辑：

• 可视化主色选取可能非品牌色，而使用更符合行业特征的临近色
  

• 同行较多使用冷色（如蓝色系、绿色系、冷紫色系）

• 个性化加入语义色板，即便全局单色图表有不统一的情况，单也合理，增强了扩展型

  
  

  
  

图片来自网络

整理药品研发、药品数据分析等产品可视化配色提取同行业的可视化取色方法大致分以下三种

图片来自网络

• 邻近色
  

• 跨越色环取色

• 品牌色及辅助色，突出品牌调性

• 选取颜色跨越色环
  色相覆盖整个色环，大约30度间隔，用更全的色相方式来增加色彩的独特性。再通过增加明度差异来拉大色彩间的区分度。

• 优点：颜色有区分度，饱和度适中，阅读舒适。

• 缺点：明暗差异有时会造成空间感和语义倾向。使用少量颜色时，界面暗淡单一。
  

• 选取颜色色相邻近
  色相覆盖半个色环，以主题色为原点，延色环相邻色相采集配色。

• 优点：颜色和谐统一。

• 缺点：颜色区分度低。

•  选取颜色延续品牌
  从品牌设计体系色板中，选择不同明度的色彩作为可视化色板使用。

• 优点：颜色有区分度，品牌关联强。

• 缺点：由于明度差异大，亮暗模式颜色不同。颜色暗沉，平面感强烈。扩展性不足。

当前我们已经遇到的问题

通过色相跨越全色环、并适当增加颜色间明暗差异的方式能获得更好的色彩辨识度，但需对颜色数量、比例、明度差异进行平衡。

数据量超出色板数量，竞品怎么做？

通常各竞品的分类色板只包括6～14种颜色，但在极限情况下，数据量会超出色板数量，这时竞品是怎么处理的呢？大致也分为三类：

图片来自网络

• 重复使用基础颜色

  缺点：显然是不可取的方法，没有区分度。

• 基础颜色扩展色阶，深浅交替使用
  优点：区分度高
  缺点：视觉上容易形成归类感和断裂感

  
  

• 基础色相扩展色阶，循环使用
  优点：区分度足够，极限情况可用
  缺点：区分度不如方案2

  
  

极限情况采用基础色相扩展色阶使用的方案（即2、3方案），都能保证辨识度和扩展性。

竞品可视化配色数量5-9居多（不算扩展后的色阶），通常具体场景具体分析。

让分类色板更「清晰」

A. 数量

根据以上竞品分析和理论研究，我们建议分类色板的基础颜色数量为10个，通用蓝色扩展4个。当所需颜色数量超出10个时，可按基础色相扩展色阶循环使用，保证扩展性和视觉舒适度。

B. 取色

我们建议包含主题色在内，在色环上每个色域中仅选取一种主颜色，这样能最大程度确保基础色板的辨识度，尽可能提升色相区分度。

图片来自网络

C.关于色彩清晰度

我们可以利用CIELab色彩空间的特性，来准确衡量色彩是否具备足够的辨识度和区分度。因为CIELab具有人类视觉感知下颜色均匀变化的特性，所以在其色彩空间内，两种颜色的直线距离Delta E可以用来描述两种颜色的色差。

ΔE值在1.6到之间3.2，人眼基本上是分辨不出色彩的差异，比如专业级显示器；

ΔE值在3.2到6.5之间，经过专业训练的人士可以辨別其不同，但普通人是观察不到其中的差异的，通常专业级液晶能够轻松达到这个标准，随着技术发展，目前大部分消费级液晶也能进入这个区间；

ΔE值在6.5到13之间时，色彩差別已经可以判別，但色调本身仍然相同。前些年，市面上大多数消费级液晶显示器都在这个档次上，目前已经得到全面升级；

ΔE值在13到25，可以确定是不同的色调的表现，也可辨別出色彩的从属；

ΔE值超过25以上，就代表着是另外一种色彩了。

所以，我们只需要验证，分类色板中相邻颜色的ΔE值大于13就可以辨别色彩从属，对于常用邻近色板内容，不需要一定大于25，具体问题具体分析。

以上计算结果表明，上述分类色板已达到了普通色彩区分标准

注：由于产品特性，从业者皆正常色彩辨别人群，所以设定ΔE值不必过高。