为什么你的品牌主色，在数据图表里如此“刺眼”？

在可视化设计中，我们常被告知“主色要沿用品牌色以保持统一”。但你是否也遇到过这样的窘境：一个在按钮和标签上看起来充满活力的品牌蓝，一旦铺满整个柱状图，却变得异常刺眼，甚至让用户感到视觉疲劳？

本文将从我亲历的一个项目出发，深入探讨这一现象背后的科学原理，并提供一套可行的‘主色微调’方法，帮助你找到既符合品牌调性又适于数据阅读的完美主色。

建立一个清晰、有效的可视化色板时，通常最先需要确定的是主色应该选什么？因为主色是在可视化中使用频率最高的一个颜色，能确定整个可视化设计的基调。

从视觉和谐的角度考虑，通常可以选和产品主色相同的颜色。

然而有些情况，产品的主色并不适合直接用于可视化当中。比如我最近遇到的一个案例：产品的主色为蓝色，在HSB色彩空间中，B（亮度）为100，S（饱和度）也接近90，属于非常鲜艳的蓝色，代表了产品的活力、生动和科技。

实际应用到可视化图表时，在折线图、环形图时并没发现什么问题，但当直接将这个颜色用于柱状图时（尤其柱子数量较多时），会发现页面非常刺眼。

通过

在一定程度可以削减这种视觉不适，然而遇到堆叠柱状图、漏斗图时，也没法应用这些手段。

阅读一些人因资料，发现了如下原因。根据生物结构，人眼的晶状体可以看做是一个可以变焦的镜头。不同颜色的光折射率不同，通过晶状体后会以略微不同的角度折射，因此无法聚焦在同一个点上。

当背景是光谱边缘的纯红色或纯蓝色时，眼睛的睫状肌必须不断地收缩和放松，试图将这些模糊的边缘“拉”回焦点。

B端场景的可视化是需要用户长时间查看，反复对比来进行使用的。而在常规组件中，组件高亮更多代表了一种状态或提醒，用户并不需要长时间盯着看，这也就解释了为什么在组件（如：按钮）中使用同样的蓝色，不会出现类似的问题。

这里找了两个经过产品主色微调后作为可视化主色的案例。

VISA当前的品牌色是一个特别亮，饱和度极高的蓝色，而在它的可视化规范中，可视化主色经过调整后，饱和度中等。

直接使用产品LOGO中的亮蓝色和亮青色，整个仪表盘较为刺眼。

找一个图表组合多样，数据极端的可视化场景，将品牌主色直接应用，感受其视觉压力。

在HSB色彩空间下，优先保证H（色相）不变，调整S（饱和度）和B（亮度）。这样能最大限度地让微调后的可视化主色与品牌主色调性一致（后面可做微小调整使其在色板中更和谐）。

品牌色为了在市场中脱颖而出，饱和度通常很高，富有冲击力。降低饱和度，相当于为颜色“降噪”，让用户的焦点回归到数据内容本身。

根据具体颜色特性，微调亮度（B值），像本身

，需要降低亮度，而对于

通常可以略微提升亮度，使其在浅色背景上不那么沉重。

将微调后的颜色带回场景中，检查是否仍能和品牌产生关联，和其他组件和谐共存。当然无论如何调整，最终的颜色都必须通过对比度检查（如WCAG检查），确保其作为数据载体是清晰可读的。

搭建可视化色板时，

，如果不适合直接作为可视化主色，可以在

。

参考：

颜色偏差，https://en.wikipedia.org/wiki/Chromatic_aberration

京东数科，https://findesign.jd.com/pro/#/home

VISA，https://design.visa.com/data-visualization/charts/dumbbell-plot/