Kibana 数据可视化的新配色方案 —— 我们如何以及为什么创建它

原创于 2025-12-19 09:47:09 发布 · 533 阅读

15 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#信息可视化 #elasticsearch #大数据 #搜索引擎 #全文检索 #kibana

Elastic 同时被 2 个专栏收录

2196 篇文章

订阅专栏

Kibana

200 篇文章

订阅专栏

作者：来自 Elastic Giovanni_Magni

Kibana 数据可视化的新配色方案于 2024 年 11 月在 Serverless 中进行了提前测试，并于 2025 年 4 月在 Kibana 9.0 中作为默认设置引入。

这是对我们整个设计系统进行视觉刷新的一部分。它带来了多项重要改动，旨在充分利用新视觉方案的潜力。通过这篇文章，我们希望解释我们选择背后的理由以及取得的积极效果。

为什么需要新的配色系统？

过去几年中，人们对产品视觉更新和美学刷新有了越来越高的需求，这源于多种同时发生的原因。我们之前的配色系统已无法有效支持 EUI（我们的设计系统）的复杂性。经过多年，人们自然希望获得更现代、更吸引人的美学。此外，设计系统与 Elastic 不断发展的品牌形象和传播方式也越来越脱节。

基础

本文专注于数据可视化的配色，但首先需要解释新配色系统背后的逻辑，以便理解其运作方式。

Elastic-Charts 基于一个包含 10 个不同元素的配色方案，然后根据具体需求和场景进行调整。

这 10 种颜色是我们配色方案的起点。它们帮助团队应对更复杂的场景，例如使用数学生成的色彩尺度（EUI 配色方案）处理发散和收敛的调色板、数据的文本表示或产品中的状态警报，同时配合精心调整的配色变体。

如下图所示，此次更新将我们的图表从左侧示例转变为右侧示例。这是在查看 Kibana 可视化时最明显的变化：颜色更亮、更均匀分布，即使使用的色调更少，但这只是变化的表面。接下来，让我们深入了解这些颜色是如何以及为何被选用的。

它的来源是什么？—— 一个新的色彩谱系

以 Elastic 品牌形象为出发点，设计团队生成了一个新的色彩谱系，作为产品中所有配色组合和使用的基础。按钮、提示信息、图标、文本段落，当然还有图表，现在都遵循相同的规则，因为它们都源自同一套颜色和色阶。这使我们能够构建一个统一的配色系统，既有足够的严格性保证一致性，又具有灵活性，可扩展并适用于 Elastic 设计系统的各种不同使用场景。

这一色阶集合使我们能够构建一个新的配色方案，该方案不是手动挑选的，而是在 OKLCH 色彩空间中通过数学生成的。这意味着每种色阶（或列，例如 shade 60）都具有相似的明度和色度值，与颜色类型无关。这些值经过轻微调整以适应颜色特性（黄色色阶由于非常亮，需要额外注意），但现在为设计团队提供了一个坚实的基础，可根据上下文和需求选择颜色，因为这样可以生成具有一致背景对比度的不同色阶，并且可以轻松互换。

以浅色模式为例，这些色阶的 Shade 90 通常用于按钮背景，而 Shade 100 用于文本标记，因为它们需要更高的对比度以满足可访问性要求。相同逻辑也应用于数据可视化颜色，最终目标是获得一个稳固、灵活、同时与产品和品牌紧密结合的配色方案，确保图表不会显得突兀。

我们的选择

我们选择了一个 10 色配色方案，由五种不同色调（青色、Elastic 蓝、粉色、红色和黄色）的成对色阶组成（shade 60 和 shade 30，或列 60 和 30）。

通常，数据可视化的配色方案会使用 10 到 12 种不同的颜色，因此从同一颜色中使用成对色阶听起来似乎违反直觉。这个决定的目的是避免过度扩展原始色谱，因为那样会需要创建额外的色调。其结果可能导致颜色集合不够一致，偏离品牌风格，并可能产生更多问题。其中一个问题是可访问性 —— 颜色较少的集合更易于处理，并允许我们在深色模式下提供完全可访问的配色方案。这十种颜色与背景的对比度均高于 4.5:1（符合 WCAG 标准），在页面和图表之间提供清晰分隔。在浅色模式下，这一目标通过引入高对比模式得以实现，从而在所有情况下确保图表的可访问性。

另一个重要点是相邻可视形状的表现。深浅交替的色调集合可以在堆叠条形图、面积图和树状图等图表中得到应用，在这些在我们产品中非常常见的可视化类型中，不同颜色之间的对比度更高，增强了可读性和区分度。