数据可视化:如何为数据寻找适合的配色

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

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

在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中拉辅助线到断点位置,与数据的数量对应上,然后持续对渐变进行测试与调整。以下是我们在修正渐变时产生的屏幕截图。

数据可视化:如何为数据寻找适合的配色

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

我们的配色方案

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

数据可视化:如何为数据寻找适合的配色

数据可视化:如何为数据寻找适合的配色

数据可视化:如何为数据寻找适合的配色

冷色、暖色和霓虹色。

配色的实际运用

数据可视化:如何为数据寻找适合的配色

数据可视化:如何为数据寻找适合的配色

数据可视化:如何为数据寻找适合的配色

长话短说

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

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

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

阅读

  1. 如何避免等差的HSV颜色,作者Gregor Aisch
  2. 通过chroma.js控制多色调的色彩比例,作者Gregor Aisch
  3. 微妙的颜色,作者Robert Simmon
  4. 翠绿配色方案,作者Bob Rudis、Noam Ross和Simon Garnier
  5. MATLAB色彩地图,作者Steve Eddins

工具

  1. 数据颜色采集工具——一件很趁手的工具,让你保持浓度不变的同时轻松选择配色
  2. Chroma.js——一个处理色彩的JavaScript库
  3. Colorbrewer2——热点图与数据可视化颜色工具,自带了多色调与单色调的方案

其他资源

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

  1. ColorHunt——高质量配色方案,能够快速预览,如果你只需要4种颜色,这是绝佳的资源
  2. COLOURlovers——很棒的颜色社区,其中有许多工具可以创建配色方案,还有设计模式
  3. ColorSchemer Studio——强大的桌面取色应用
  4. Coolors——轻量级随机配色生成器,你可以锁定你想要的颜色,然后替换其他的
  5. Flat UI Colors——很棒的UI配色,这是最流行的配色之一
  6. Material Design Colors——另一套优秀的UI配色。它不仅提供了跨度巨大的颜色,也为每种颜色提供了不同的“色深”,或者说明度
  7. Palettab——一个Chrome插件,在每个标签页里呈现一套新的配色方案和字体灵感
  8. Swiss Style Color Picker——另一个优秀的配色方案集

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

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

 

原文链接:https://medium.com/graphiq-engineering/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.s6benocrb

作者信息:Samantha Zhang

Senior UI/UX @GraphiqHQ. Tutorial writer @TutsPlusCode. Product maker. Data nerd. Side project ninja. More at http://samanthaz.me/ and @moyicat

#专栏作家#

可乐橙,微信公众号:可乐橙(colachangreen)。人人都是产品经理专栏作家,UI/UX设计师,关注互联网,关注科技。现居杭州,与小伙伴们正在创业途中。或许不是一名优秀的设计师,至少是个快乐的设计师。

本文原创发布于人人都是产品经理,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31089/

(0)
CatherineCatherine
上一篇 2017-05-31 05:32
下一篇 2017-05-31 09:26

相关推荐

  • 交互师们,每日高效的一天开启了吗?看看别家的交互怎么过今天~!

      编者按:教你高效利用工作时间!今天的主角是曾经在美国雅虎中国腾讯工作现在在华为人设计总监的尤原庆同学,他分别列出了自己在美国、德国和中国的交互设计工作,全都井井有条且轻重得当,最后还附上设计师…

    2014-11-26
  • 2017 年你应该尝试的:七个最有前景的设计工具

    随着新工具的发布,现有工具版本的更新迭代,2016 年显然是设计类工具蓬勃发展的一年。在本文中,我挑选了一些在 2017 年值得我们关注的设计工具。这些工具在设计工具类的社区中都拥有着大量的人气,所以挑选出来与大家一同分享。Have Fun!注:本文版权归原作者所有,仅用于学习与交流。

    2017-05-08
  • 订单流程研究之提交订单

    在上一篇笔者有提到,平台不一定都提供货到付款服务,因此京东、唯品会和亚马逊在提交订单时需要选择支付方式,而淘宝天猫则是在提交订单之后才需要选择支付方式。提交订单之后,每种类型的订单可支持的操作也就不一样了。

    2017-05-31
  • 进阶必读的15本交互与用户体验设计经典书!

    今天小创整理了交互设计与用户体验设计领域的经典书单推荐给大家,不过真的想要在交互、用户体验领域的学习有所提升,除了读书外,多下载APP,多研究热搜榜上的应用,同时iPhone、Adroid等各类设计规范,是最好的交…

    2015-11-03
  • 当你画线框图时,你应该想些什么?

    我们每个人在刚入行的时候,接到项目需求,最初更多的会沦为产品经理的画图工具,帮他画好线框图、补全场景状态反馈等,这时候你可能会彷徨痛苦,感觉自己没有办法实现作为交互设计师的价值,不用彷徨痛苦,你现在需要的只是一个完善的工作流程,下面我就抛砖引玉来讲一下当我在画线框图时,我在想的12345……,希望对刚入行的小伙伴能有所帮助。

    2017-05-21
  • 如何输出一份合格的交互设计文档?

    做一件事之前一定要先想清楚做这件事的目的,为什么要做这件事,只有这样,才能万变不离其宗,不会变成为了做事而做事,这很可怕。拿交互设计文档来看,为什么要写交互设计文档,这是开始写之前要想清楚的。

    2017-05-15
  • 《用户体验可视化指南》视频讲书(5)

    《用户体验可视化指南》书中第2章"绘制基础"的第1部分。服务体验中,避免负面切换波动。从可视化的角度,阐述体验的特点。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享这是本章节的开篇,蓉姐在视频中提了2个重点:切换波动。对应到用户企业的互动上,就是各触点上的体验波动。我自己用App最常发生体验波动的地方就是电商App的活动页,本来选东西选的正爽,结果一不小心进到活动页就会蒙圈,完全想不起来刚才发生了什么,...

    2018-04-09
  • 同样是券商,为什么你家APP用户体验不好?原来还有这一招...

    券业新力量 | 服务所有券业人的梦想当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放As Long As You Love MeBackstreet Boys - Backstreet's Back导言洞察用户喜好,吸引用户,留住用户,让用户满意,是所有服务业的本质。本文以行为数据切入,从三大方面、两个案例,全方位解析如何利用行为数据提升证券App用户体验。用户体验(User Experience)最早被广泛认知和提及,是在上...

    2018-03-30
  • “创造完美的用户体验。” 中国最当红工业设计师 —— 杨明洁

    Designer100是+86设计共享平台推出的中国高端设计师第一推广品牌,致力于设计师推广的全球巡展、设计师大奖、视频计划、沙龙论坛的社会公益项目。杨明洁YANG DESIGN及羊舍创始人福布斯中国最具影响力设计师同济大学及南京大学客座教授融合了德意志逻辑思维与中国人文精神的设计理念,也使得杨明洁成为了包括波音、奥迪、宝马、博世、飞利浦、英菲尼迪、可口可乐等众多国际顶尖品牌的合作伙伴,从眼镜箱包到飞机内舱,从消费电子到交通工具,从茶具...

    2018-02-26
  • Axure遇见大数据

    本期介绍数据可视化工具:Echarts工具地址:http://echarts.baidu.com/examples/Echarts图表适用于哪些大数据可视化场景体重分析访问来源分析下载统计指标分析公交线路分析Echarts图表可满足哪些实际需求和交互效果满足需求:支持对图表标题修改支持对图表数据进行修改支持对图表数据进行可视化调整支持代码的获取支持图表的高清原图下载基础交互:点击主题色块,切换主题配色点击色块,可打开或关闭开关数据展示项...

    2018-04-06