浅析设计图表色彩的简单方式

译者按:对色彩的研究通常要么太过随意缺乏逻辑,要不太过理论化难以理解,这篇文章用非常浅显易懂的方式,讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程,给出有力的论证,并得出很棒的结论,非常值得一读。对色盲色弱来不够友好*:原文中问题一的标题是“Low Accessibility”,通常用形容来产品对残障人士的友好度不够,这一点在欧美国家经常作为需要重视的产品硬指标(也是由于他们的色盲色弱发病率比亚洲高很多)。因为在中文里没有简短精准的说法,所以我在写的是“对色盲色弱不够友好”。
逻辑性较强的人*:原文的写法是“left-brained folks”,直译是左脑型的人。通常左脑型的人被认为逻辑严谨,右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用,所以我写的是“逻辑性较强的人”。


译者按:对色彩的研究通常要么太过随意缺乏逻辑,要不太过理论化难以理解,这篇文章用非常浅显易懂的方式,讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程,给出有力的论证,并得出很棒的结论,非常值得一读。

浅析设计图表色彩的简单方式

虽然现在要获取的色彩搭配并不难,但是寻找图表(可视化数据)的配色依旧有难度。

Graphiq (用可视化的形式提供全球各种数据的一家公司,也是作者工作的地方),设计图表色彩就更难了,因为我们的图表需要用各种各样的形式传达上千种数据。

现在的问题

我们一开始并没有直接着手设计,而是调查了现在网上已有的色彩搭配。惊喜的是,我们发现其中有一些确实是为复杂的图表和可视化数据而设计的。当时我们发现了几个问题,让我们不能直接使用这些已有的配色。

问题一:对色盲色弱不够友好

很多这些配色并不够可视化,不但在明度上差别不大,而且设计它们的人并没有考虑到清晰的问题。 Flat UI Colors 被使用最多的色板之一,你可以轻易发现:这些配色看起来很棒,但是色如其名,它们是为 UI 而设计的。对色盲和色弱用户而言,要在图表上分辨这些颜色恐怕有困难。

Flat UI Colors 的一个色板:

浅析设计图表色彩的简单方式

该色板在红色盲眼中的样子:

浅析设计图表色彩的简单方式

该色板在色盲眼中的样子:

浅析设计图表色彩的简单方式

问题二:不够清晰

另一个问题是这些配色里面并没有足够的颜色。在设计 Graphiq 的视觉样式时,我们需要一个提供至少6种颜色的配色方案,多一点的话甚至是8到12种,这样才能覆盖所有使用场景。

这里有一些 Color Hunt 的例子:

浅析设计图表色彩的简单方式

虽然这些配色很好,但是却不能够用来展示复杂的数据。

问题三:难以分辨

等等,也有一些搭配是渐变色,理论上这种搭配可以衍生出很多种颜色,不是吗?

遗憾的是,这些渐变色的明度变化通常不够,例如下面这些也是从 Color Hunt 来的:

浅析设计图表色彩的简单方式

让我们用其中第一个测试一下,看如果用它来展示有10个维度的数据会怎样:

浅析设计图表色彩的简单方式

这样看来一般用户几乎不可能在图表中分辨这些颜色,尤其是最左边哪四个绿色实在太像了。

我们的方法

Graphiq ,我们以各种方式理解并感受数据,并且我们投入了大量时间寻找了很多适合我们图表的配色方案。在这个过程中我们学到了很多,并且我们愿意向大家分享我们发现的以下三条原则:

原则一:在色相和明度上都要有足够大的范围

为了保证配色容易辨识,且对色弱和色盲来说足够友好,颜色之间在明度上要有足够的差异。因为对明度的辨识最容易的,不论是红色盲、绿色盲还是完全色盲来说。

谷歌 Material Colors 中的 Light Blue:

浅析设计图表色彩的简单方式

红色盲看到的样子:

浅析设计图表色彩的简单方式

色盲看到的样子:

浅析设计图表色彩的简单方式

然而,如果配色中只有明度差异恐怕不够。颜色间中变化的维度越大,用户就越容易在图表上进行数据比对。如果能够利用色相的差异,对视力正常的人来说肯定更好。

浅析设计图表色彩的简单方式

如上图,明度和色相上跨越范围越大,配色就能支持越多维度的图表。

原则二:借鉴自然色彩

设计师们都知道一个秘密,可能对逻辑性较强的人来说不太容易理解:颜色之间并不是平等的。

从纯粹的数学角度来看,一个从亮黄到暗紫的渐变与一个从亮紫到暗黄的渐变相比,给人的感受应该是相似的。但是当我们实际看到下图时,会觉得前者比后者要自然很多。

浅析设计图表色彩的简单方式

这是因为我们已经习惯了自然界中的渐变。我们在日落余晖中可以看到从亮黄到暗紫的渐变,但是地球上却无处可见从亮紫到暗黄的渐变。

以下图片来自 Kyle Pearce

浅析设计图表色彩的简单方式

同样,从亮绿到蓝紫色,从亮黄到暗绿色、从橙棕色到冷灰色……都是如此:

来自 Kbh3rd

浅析设计图表色彩的简单方式

来自 Ian Britton

浅析设计图表色彩的简单方式

来自 Jon Sullivan :

浅析设计图表色彩的简单方式

因为我们长期以来都能看到这些自然渐变,我们在配色中看到它们时也感到熟悉而愉悦。

原则三:使用渐变而不是零散的颜色

渐变配色是最好的,不论你需要的是2种还是10种颜色,都可以从渐变中获取到。这样一来不但能够保证色彩的感觉自然,而且还有足够的色相和明度差异。

从色板模式转为渐变模式并不容易,你可以尝试着在 Photoshop 中给渐变画几条分隔线,然后对分割点进行测试并微调。这里有一个截图可以向大家展示我们是如何修正我们的渐变的:

浅析设计图表色彩的简单方式

你可以看到,我们把渐变色板放到最顶上,与灰度渐变相邻,并从分割线上取色来测试这些真实的使用情况。

我们的色板

我们对成果非常满意。下面展示了一些我们正在使用的色板,他们都以纯白为起始,以纯黑为终点,这样才能最大限度地利用明度的差异。

冷色:

浅析设计图表色彩的简单方式

暖色:

浅析设计图表色彩的简单方式

霓虹色:

浅析设计图表色彩的简单方式

使用我们的色板

浅析设计图表色彩的简单方式

浅析设计图表色彩的简单方式

总结

现在配色越来越多,但是他们并不都时候图标和可视化数据。我们研究的方法是让色彩渐变在色相和明度上范围竟可能广。这样一来我们的色彩就适合色盲和色弱了,对实力正常的人来说更是如此,并且可以运用于维度数量从1到12的图标。

相关文章、工具和资源

研究过程中,我们发现了一些很棒的资源和文章。它们得出了与我们相似的结论,但是使用的方法更加数据化,并且甚至延伸至了色彩理论。我们认为应该分享给大家作为扩展阅读。

文章:

  1. How To Avoid Equidistant HSV Colors
  2. Mastering Multi-hued Color Scales with Chroma.js
  3. Subtleties of Color (Part 1 of 6)
  4. The viridis color palettes by Bob Rudis, Noam Ross and Simon Garnier
  5. A New Colormap for MATLAB – Part 1 – Introduction

工具:

  1. Colorpicker for data :可以在 Chrome 上获取渐变色,并立即在图表上查看效果的工具
  2. chroma.js:处理颜色的JavaScript库
  3. Colorbrewer2:用来为图表选择颜色的工具,既支持多种色相也支持单色相
  4. gradStop.js:生成单色方案和等距渐变点的 JavaScript 库
  5. Color Oracle:免费的色盲测试工具, Windows 、 Mac 和 Linux 都能使用。

其它资源:

这里还有一些好的配色资源,尽管它们并不一定适合可视化数据,但是你也许会觉得有用。

Color Hunt :高质量的色板,方便快速查看,如果你只需要4种颜色的话会很有用。

COLOURlovers :很棒的色彩交流社区,还有各种工具可以用来做配色设计。

ColorSchemer Studio :功能强大的PC取色工具

Coolors :一个轻量的色板生成工具

Flat UI Colors :最流行的的界面色板之一

Material Design Colors :也是一个色板,不但提供广泛的颜色,还提供每个颜色的“重量”和亮度。

Palettab :提供颜色和字体方案的 Chrome 扩展工具

Swiss Style Color Picker :也是一个很好的色板

标注:

对色盲色弱来不够友好*:原文中问题一的标题是“Low Accessibility”,通常用形容来产品对残障人士的友好度不够,这一点在欧美国家经常作为需要重视的产品硬指标(也是由于他们的色盲色弱发病率比亚洲高很多)。因为在中文里没有简短精准的说法,所以我在写的是“对色盲色弱不够友好”。

逻辑性较强的人*:原文的写法是“left-brained folks”,直译是左脑型的人。通常左脑型的人被认为逻辑严谨,右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用,所以我写的是“逻辑性较强的人”。

 

原文:Finding the Right Color Palettes for Data Visualizations by Samantha Zhang

译者:Z Yuhan

来源:https://zhuanlan.zhihu.com/p/26651293?group_id=842031998401929216

本文由 @Z Yuhan 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-01 09:05
下一篇 2017-05-01 11:26

相关推荐

  • 一只设计师的工作小结:在想好之前,先克制你的表达欲

    我一直觉得做设计,其实是在克制,潜移默化是最好的。在你没有想好如何表达,最稳妥的做法是克制你的表达欲。

    2017-05-05
  • 【总结】阿里UED内部资料 ▏优秀的交互设计师这样养成

    一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。 大约五年前选择了这个职业,一路走来,质疑过、探讨过…

    2015-12-04
  • 写给新手的情感化UI设计简明指南

    “仔细看这个情感色轮,你会发现,距离中心越远,情感的强度越弱,但是在进行色彩的设计之时,几乎没人探讨这个问题。我们在做设计的时候,常常会探讨如何传递或者影响基本的情绪,但是我们从未探讨过用户的情绪是否会被强化或者逐步减淡。”

    2017-05-17
  • 移动端文字与排版设计的六个原则

    .space-betw {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }

    - (NSDictionary *)demoTextAttributes {
    NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
    ps.alignment = NSTextAlignmentJustified;
    // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
    return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
    }

    2017-05-31
  • sketch都能设计海报了?PS爸爸慌了...

    sketch只能做界面设计?曾经我也这么觉得,自从我知道了他的这款插件——looper惊!呆!了!大写的“服”,sketch你越来越接地气了,废话不多说了,让我们先欣赏一张我用这款插件做的一张海报:不得不说,他打破了我对sketch的偏见,对线条的处理过渡很自然到位,我做的时候只花了5分钟,没错!5分钟搞定!所以重点来了:如何用looper做到这张海报的效果呢?第①步1.下载安装包2.双击  looper.sketchplugin完成安...

    2018-03-09
  • 餐馆与UX中的用户引导

    Gordon Ramsey因为烧焦的食物冲别人咆哮,这和用户引导之间有什么关系?这个问题和事情本身一样有趣,优秀的用餐体验非常玄妙,远不止是食物那么简单:这就是用户引导的体验。

    本文中,我们来一窥餐馆顾客引导的魔力,思考如何将它们运用到体验设计中。

    2017-04-28
  • 交互设计相关岗位-用户研究(实习)——杭州海康威视

    杭州海康威视招聘 用户研究(实习)    职位要求: 1、人机交互、认知心理学、计算机、设计艺术或相关专业研究生在读。 2、熟悉研究方法论,熟悉一般研究步骤,了解各种研究方法,有坚实的统计和数据分析基础 3、较…

    交互设计招聘 2018-03-13
  • 为什么你越来越爱用那些看起来丑而贱的表情?

    好奇心研究所的微博(@好奇心研究所)和微信公众号(ID:QLab42)全面上线啦,微信直接搜索「好奇心研究所」就可以订阅,关注与所长亲密接触,赶紧的。

    2017-06-02
  • web图像的常见应用策略与技巧

    本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。data-src
    data-srcset
    在加载到的时候更换为
    src
    srcset容器元素的尺寸:elW * elH
    单张图片的尺寸:imgW * imgH
    Sprites图片的尺寸:spritesW * spritesH
    单张图片在Sprites图上的位置:imgPosX, imgPosY点的位置为 (x, y)
    容器上的(x, y)点与容器左上角的距离为 cX, cY
    Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
    cX = sX, cY = sYcX = elW * x
    sX = spritesW * x – imgPosX
    elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
    y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

    2017-05-01