数据可视化：如何为数据寻找适合的配色.pdfVIP

数据可视化：如何为数据寻找适合的配色 虽然如今好的配色方案已经唾手可得，但为数据可视化找到合适的配色方案，却仍是一项巨大挑战 。 在 Graphiq ，事情甚至更加棘手，因为我们要通过上千种各不相同的数据集合来传递信息，它们有着 各自迥异的视觉表现。 目前的问题 我们没有立刻开始建立自己的配色表，而是发起了一些调查，研究网络上已存在的配色方案。令人 惊讶的是，我们发现其中只有少数是为复杂的图表和数据可视化而设计的。我们发现一些不能使用 现有配色的原因。 问题 1 ：辨识度低 我们看过的许多配色方案都不适用于数据可视化。不仅由于颜色的明度差异不大，其实它们在创造 时就没有考虑过辨识度。 Flat UI 配色是最广泛使用的配色之一，原因显而易见：它非常优秀。但是 ，正如它名字所述，这是为界面而设计的。使用 Flat UI 配色的话，色盲者就难以辨认出数据图像。 Flat UI 配色的完整色彩、红色盲模式、灰度模式。 问题2 ：色彩不够多 另一个问题是，许多现有配色方案没有足够的颜色。创造 Graphiq 的数据可视化时，我们需要至少 6 种颜色的配色方案，甚至有时需要 8到 12种颜色，才能满足所有的应用场景。我们看过的许多配色 方案都没有足够多的色彩供选择。 下面是 Color Hunt 里的一些例子： 虽然这些都是很棒的配色，但它们都不够灵活，无法提供丰富的色系。 问题3 ：难以区分 不过等一下，还有一些配色方案看起来像是渐变 —— 理论上说可以创造出任意数量的颜色，对吧？ 不幸的是，它们明度差异通常不大，其中许多颜色很容易变得无法区分，就像这一组，同样来 自Color Hunt ： 我们试着选第一组，把它扩展为 10 级色彩： 如果普通用户能正确的区分出这些颜色，并与相应的数据项对应起来，我就服了，尤其是能区分出 左边的 4 种绿色。 我们的方式 在 Graphiq ，我们以数据为生命，并且投入了大量时间寻找能够用于数据可视化的配色方案，不是 一组，而是许多组。我们在这个过程中受益良多，并且打算分享这些能够创造出灵活配色的准则： 第 1条：色调与明度的跨度都要大 要确保配色非常容易辨识与区分，它们的明度差异一定要够大。明度差异需要全局考虑。选择一种 单色系的配色，并且测试它在红色盲、绿色盲与灰度模式下的表现。你就能迅速了解这个配色的辨 识度水平。 Google Material 配色中的浅蓝色的完整色彩、红色盲模式与灰度模式。 但是，有一组明度跨度大的配色还不够。配色越多样，用户越容易将数据与图像联系起来。如果能 善加利用色调的变化，就能使非色盲用户更加轻松。 对于明度与色调，跨度越大，就能承载越多的数据。 第 2条：仿照自然的配色 设计师都知道一个小秘密，对于理性派们而言这似乎不符合常识：并非所有颜色都是均等的。 从纯数学的角度来看，淡紫到深黄的过渡，与淡黄到深紫的过渡，感觉大概相似。但我们在下面可 以看到，前者感觉很自然，后者则不是。 这是由于我们已经习惯于那些长期存在于自然界中的渐变。在华丽的日落中，我们就能看到明黄色 向深紫色的渐变，但却没有哪里能看到淡紫色向深黄色的过渡。 照片来源于 Kyle Pearce 、Wesley Fryer 、和Jon Sullivan 。 类似地，还有浅绿色到藏蓝色、鹅黄色到深绿色、棕红色到蓝灰色，等等。 照片来源于 Kbh3rd 、Ian Britton 、和 Jon Sullivan 。 由于我总能看到这些自然的渐变，所以当我们在可视化图表中看到对应的配色时，会感觉熟悉和 愉快。 第 3条：使用渐变，不要选择一系列固定颜色 渐变配色结合不同色调，对两者都最好。无论你需要 2种颜色还是 10种，渐变中都能提取出这些 颜色，让可视化图表感觉自然，同时保有足够的色调与明度差异。 改用渐变的思维并不容易，不过有个好方法，可以在 Photoshop 中拉辅助线到断点位置，与数据的 数量对应上，然后持续对渐变进行测试与调整。以下是我们在修正渐变时产生的屏幕截图。 可以看到，我们将配色表紧挨着顶部的灰度渐变，调整渐变叠加（之后就能得到精确的渐变色值） ，然后从那些断点处选取颜色，测试配色在实际运用中的效果。 我们的配色方案 我们对最终成果感到兴奋。下面是我们使用的部分配色，它们都有从纯白到纯黑的渐变，以达到最