0.0°

将配色数据可视化

经验类型经验/观点原作者：Samantha
经验属性自译外文
经验版权署名-非商业性使用-相同方式共享

关注

3154 0 8 2017-03-30

好的调色板很容易出现，但为数据可视化找到正确的调色板是很具有挑战性的。
在Graphiq（一家技术公司，可以根据需要立即从中立即获取相应的数据。），可以说事情变得更加困难，因为我们需要在许多不同类型的可视化布局中传递数千万个独特数据集的信息。

“并不是所有的调色板都适用于图表和数据可视化。”

我们开始对网络上现有的调色板进行一些研究，而不是首先潜水并创建自己的调色板。令人惊讶的是，我们发现，很少的调色板实际上是为复杂的图表和数据可视化而设计的。我们确定了为什么我们无法使用现有调色板的几个原因：

问题1：低可访问性
我们查看的许多调色板不是为可视化设计的。它们的亮度不但没有足够的变化，而且往往不是在无障碍地创造出来的。扁平化配色是最广泛使用的颜色调色板之一，很容易看出为什么：它看起来不错。但是，正如其名称所示，它是为用户界面而设计的。那些有点色盲的人会很难将扁平化配色使其数据可视化并使用它。

Flat UI Colors 全色，幻影模式和灰度。

问题2：颜色不足
另外一个问题：许多现有的调色板没有足够的颜色。当我们构建Graphiq可视化时，我们需要一个调色板，至少提供6种颜色，如果不是8到12种颜色，以覆盖我们所有的用例。之前看过的大多数调色板都没有提供足够的选择。

以下是Color Hunt（配色网站）的几个例子：

虽然它们都是不错的配色，但它们不够灵活，不能呈现复杂的数据系列。

问题3：难以区分
但是…...假如有调色板就像阶梯一样,理论上你可以创建任意数量的颜色，对吧?
不幸的是，亮度通常没有足够的变化，其中许多变化很快就会变得无法区分，就像这些（也来自Color Hunt）：

先尝试第一个将其扩展到10个数据系列：我们的方法

在Graphiq，我们认为，吃饭和呼吸数据，我们投入了大量的时间找不到一个，但是多个调色板为我们的可视化工作。我们在这个过程中学到了很多东西，我们想分享我们发现的用于生成灵活调色板的3个规则：

规则1：在色相和亮度方面都有广泛的范围
为了确保调色板是辨识度高，它们的明度必须足够大。明度差异是普遍的。采取任何单色的调色板，并测试它在红绿色盲和灰度模式中的外观。您将很快就能够了解该调色板的可访问性。

“要极其方便，调色板的明度必须有所不同。”

然而，只有在明度上变化的调色板远远不够。您的调色板的差异越大（即明度对比），用户将数据映射到可视化文件就越容易。如果我们能利用色相的变化来映射数据信息的话，那么对于对于大多数人（色盲除外）,他们更乐意接受。

对于明度变化和色相变化，那我们可以找到更多层次，同理可以支持的数据信息也就越多。
规则2：遵循自然的颜色模式
设计师知道的秘密是，人的左脑并不总是会对所有颜色立即做出直观的反应：

“并不是所有的颜色都是平等的。”

从纯粹的数学角度来看，从浅紫色到深黄色的颜色渐变应该与从浅黄色到深紫色的过渡相似。但是正如我们在下面看到的那样，前者感觉过渡自然，而后者给人视觉上并不舒服。

这是因为已经通过色相上做了色阶调整的原因。我们在华丽的日落中看到明亮的黄色过渡到深紫色，但地球上真的没有地方可以看到淡紫色过渡到深棕色的黄色。

从左到右的照片：Kyle Pearce，Wesley Fryer和Jon Sullivan。

同样，浅绿色至紫色蓝色，浅黄色至深绿色，橙色棕色至深灰色等。

来自Kbh3rd，Ian Britton和Jon Sullivan的照片。

因为我们一直看到这些自然的过渡，当我们看到在可视化中使用相应的调色板时，感到熟悉和愉快。
规则3：使用渐变而不是选择静态颜色
渐变调色板包含并提供了两个最好且不同的色调世界（即色相变化和明度变化）。无论您需要2种颜色还是10种颜色，都可以从这些渐变中战略性地提取颜色，以产生感觉自然的可视化，还具有足够的色调和亮度变化。

但是有一个好办法是通过设置网格线断点的数据系列的每个数字在Photoshop中,不断测试色阶和作出调整；以下是我们用来完善渐变过程的快照：您可以看到，我们将调色板置于灰度顶部，调整渐变叠加（因此我们可以稍后获取准确的转换代码），并从这些断点中选择颜色来测试调色板在现实生活中的工作原理。