可视化数据配色常见问题

by 少年2021-03-01
  • 1 赞
  • 1 收藏
  • 设计
  • 570 评论
  • 7147 阅读
© 本文 by 少年 转载自 网络,如有任何版权问题可联系管理员进行处理。
笔记

虽然如今好的配色方案已经唾手可得,但为数据可视化找到合适的配色方案,却仍是一项巨大挑战。通过调查网络上已存在的配色方案发现,只有少数配色方案是为复杂的图表和数据可视化而设计的。可视化配色视觉表现设计是必不可少的环节,在为可视化数据寻找适合的配色时经常会遇到很多问题,下面对这些问题做一下整理:


问题1:辨识度低


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


Flat UI配色





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


问题2:色彩不够多


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


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



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


问题3:难以区分


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


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



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



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


解决方案:


以上是可视化数据配色设计时会遇到的问题,怎么解决呢?我们一般通过以下几个方法来解决


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


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





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


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



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


第2条:仿照自然的配色


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


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



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





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


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





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


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


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


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


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



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


我们的配色方案


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





冷色、暖色和霓虹色。


总结


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


---

转载请注明本文标题和链接:《 可视化数据配色常见问题
评论
Lhsctg
clobetasol tablet cordarone 100mg sale buy cheap amiodarone

2023-05-29 18:12:42回复

Oubnfi
clobetasol order amiodarone canada buy amiodarone without prescription

2023-05-29 09:00:24回复

Hybokx
olmesartan online order generic depakote purchase divalproex online cheap

2023-05-29 05:47:11回复

Seergy
flagyl metronidazole over counter metronidazole gel cost topamax 25mg sprinkle capsules

2023-05-27 20:03:38回复

Rxnkhk
mesalamine order avapro us buy generic avapro for sale

2023-05-27 15:36:28回复

12345678 ... 114(有 570 条评论)