18577975379 在线客服 联系我们 返回顶部
企业动态 技术分享 行业动态

为可视化数据寻找最般配的配色

2020-09-07

  1wG4NGJ_Q3qKm6lyznGMrxQ

  虽然如今好的配色方案已经唾手可得,但为数据可视化找到合适的配色方案,却仍是一项巨大挑战。

  在Graphiq,事情甚至更加棘手,因为我们要通过上千种各不相同的数据集合来传递信息,它们有着各自迥异的视觉表现。

  目前的问题

  我们没有立刻开始建立自己的配色表,而是发起了一些调查,研究网络上已存在的配色方案。令人惊讶的是,我们发现其中只有少数是为复杂的图表和数据可视化而设计的。我们发现一些不能使用现有配色的原因。

  问题1:辨识度低

  我们看过的许多配色方案都不适用于数据可视化。不仅由于颜色的明度差异不大,其实它们在创造时就没有考虑过辨识度。Flat UI配色是最广泛使用的配色之一,原因显而易见:它非常优秀。但是,正如它名字所述,这是为界面而设计的。使用Flat UI配色的话,色盲者就难以辨认出数据图像。

  1KvDEGIpfwdJtUFwB5acYEA 1agD5sQvrMt6GqRmIg6zKQA 1PyjFTbCq6JBTx1oymoXeEw

  Flat UI配色的完整色彩、红色盲模式、灰度模式。

  问题2:色彩不够多

  另一个问题是,许多现有配色方案没有足够的颜色。创造Graphiq的数据可视化时,我们需要至少6种颜色的配色方案,甚至有时需要8到12种颜色,才能满足所有的应用场景。我们看过的许多配色方案都没有足够多的色彩供选择。

  下面是Color Hunt里的一些例子:

  1ypvRymT0ECQ3pYwtqlfHZw

  虽然这些都是很棒的配色,但它们都不够灵活,无法提供丰富的色系。

  问题3:难以区分

  不过等一下,还有一些配色方案看起来像是渐变——理论上说可以创造出任意数量的颜色,对吧?

  不幸的是,它们明度差异通常不大,其中许多颜色很容易变得无法区分,就像这一组,同样来自Color Hunt:

  1S85p-zgE9OM9xLTLEKhbng

  我们试着选第一组,把它扩展为10级色彩:

  1623V9z7Xzs1Q3Uyf0qoq-A

  如果普通用户能正确的区分出这些颜色,并与相应的数据项对应起来,我就服了,尤其是能区分出左边的4种绿色。

  我们的方式

  在Graphiq,我们以数据为生命,并且投入了大量时间寻找能够用于数据可视化的配色方案,不是一组,而是许多组。我们在这个过程中受益良多,并且打算分享这些能够创造出灵活配色的准则:

  第1条:色调与明度的跨度都要大

  要确保配色非常容易辨识与区分,它们的明度差异一定要够大。明度差异需要全局考虑。选择一种单色系的配色,并且测试它在红色盲、绿色盲与灰度模式下的表现。你就能迅速了解这个配色的辨识度水平。

  1hGvw1suMqgupk8EgD068aA 1HnC6oy_l_8t4bHxg1mMyhw 1Op_34KD5WNhPdqxZs0TsVQ

  Google Material配色中的浅蓝色的完整色彩、红色盲模式与灰度模式。

  但是,有一组明度跨度大的配色还不够。配色越多样,用户越容易将数据与图像联系起来。如果能善加利用色调的变化,就能使非色盲用户更加轻松。

  1wgC_dBB1C2w3G6jaSFpZPQ

  对于明度与色调,跨度越大,就能承载越多的数据。

  第2条:仿照自然的配色

  设计师都知道一个小秘密,对于理性派们而言这似乎不符合常识:并非所有颜色都是均等的。

  从纯数学的角度来看,淡紫到深黄的过渡,与淡黄到深紫的过渡,感觉大概相似。但我们在下面可以看到,前者感觉很自然,后者则不是。

  1lL_koW3jH7nYf6_ZbFx3WA

  这是由于我们已经习惯于那些长期存在于自然界中的渐变。在华丽的日落中,我们就能看到明黄色向深紫色的渐变,但却没有哪里能看到淡紫色向深黄色的过渡。

  1oIa-7FvHZYgGxPp0ytfY6w 1PPPHMucunVmHYzFJBJW45Q 1Jhvmh70U7q8P-_MajshKew

  照片来源于Kyle Pearce、Wesley Fryer、和Jon Sullivan。

  类似地,还有浅绿色到藏蓝色、鹅黄色到深绿色、棕红色到蓝灰色,等等。

  1NUUVVX2MpC4Y1_nP8CHjWA 1W5vjfZydrhjBbKQ4R9tl3A 1_dsL23-byBssnWm7aFAKdg

  照片来源于Kbh3rd、Ian Britton、和Jon Sullivan。

  由于我总能看到这些自然的渐变,所以当我们在可视化图表中看到对应的配色时,会感觉熟悉和愉快。

  第3条:使用渐变,不要选择一系列固定颜色

  渐变配色结合不同色调,对两者都最好。无论你需要2种颜色还是10种,渐变中都能提取出这些颜色,让可视化图表感觉自然,同时保有足够的色调与明度差异。

  改用渐变的思维并不容易,不过有个好方法,可以在Photoshop中拉辅助线到断点位置,与数据的数量对应上,然后持续对渐变进行测试与调整。以下是我们在修正渐变时产生的屏幕截图。

  1wgvwormxteQ6jdT4De63Hg

  可以看到,我们将配色表紧挨着顶部的灰度渐变,调整渐变叠加(之后就能得到精确的渐变色值),然后从那些断点处选取颜色,测试配色在实际运用中的效果。

  我们的配色方案

  我们对最终成果感到兴奋。下面是我们使用的部分配色,它们都有从纯白到纯黑的渐变,以达到最大限度的明度差异。

  1B29h3NSglI42HGhWZA-5Mg 1-Vgr9hPpUU3PYtg_B4rd2g 1pH2QoOf47OqwtG9suWaRJw

  冷色、暖色和霓虹色。

  配色的实际运用

  1 2 3

  长话短说

  尽管优秀的配色方案越来越多,但并非所有都适用于图表和数据可视化。我们的配色方法就是创建色调与明度变化都足够大的自然渐变。这么做能使我们的配色便于色盲辨识,对其他人则更明显,并且可以满足1到12种数据。

  阅读、工具和资源 [更新]

  这个过程中,我们发现了一些很棒的资源和文章,与我们得出的结论类似,但他们采用了更精确的方法,甚至钻研了色彩理论。我们觉得应该分享出来,供大家深度阅读:

  阅读

  如何避免等差的HSV颜色,作者Gregor Aisch

  通过chroma.js控制多色调的色彩比例,作者Gregor Aisch

  微妙的颜色,作者Robert Simmon

  翠绿配色方案,作者Bob Rudis、Noam Ross和Simon Garnier

  MATLAB色彩地图,作者Steve Eddins

  工具

  数据颜色采集工具——一件很趁手的工具,让你保持浓度不变的同时轻松选择配色

  Chroma.js——一个处理色彩的JavaScript库

  Colorbrewer2——热点图与数据可视化颜色工具,自带了多色调与单色调的方案

  其他资源

  我们还找到一些其他爱不释手的配色资源。虽然它们并非专为数据可视化而设计,不过我们觉得或许对你有帮助。

  ColorHunt——高质量配色方案,能够快速预览,如果你只需要4种颜色,这是绝佳的资源

  COLOURlovers——很棒的颜色社区,其中有许多工具可以创建配色方案,还有设计模式

  ColorSchemer Studio——强大的桌面取色应用

  Coolors——轻量级随机配色生成器,你可以锁定你想要的颜色,然后替换其他的

  Flat UI Colors——很棒的UI配色,这是最流行的配色之一

  Colors——另一套优秀的UI配色。它不仅提供了跨度巨大的颜色,也为每种颜色提供了不同的“色深”,或者说明度

  Palettab——一个Chrome插件,在每个标签页里呈现一套新的配色方案和字体灵感

  Swiss Style Color Picker——另一个优秀的配色方案集

  希望本文对你有所帮助!你建立配色方案的过程是怎样的?你还用到其他的工具吗?我们想听听你在配色与可视化图表方面的经验。

  想了解更多我们的工作流程,请订阅我们的刊物:Graphiq Engineering 。

  原文链接: medium

  译文地址: 可乐橙

在线咨询
  • Copyright © 2013-2020 南宁华寇网络科技有限公司
  • 技术支持: