恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
将配色数据可视化
0.0°
2017-03-30 自译外文 经验/观点 原作者: Samantha 举报 2804 6 8 0

      好的调色板很容易出现,但为数据可视化找到正确的调色板是很具有挑战性的。
在Graphiq(一家技术公司,可以根据需要立即从中立即获取相应的数据。),可以说事情变得更加困难,因为我们需要在许多不同类型的可视化布局中传递数千万个独特数据集的信息。

          “并不是所有的调色板都适用于图表和数据可视化。”

       我们开始对网络上现有的调色板进行一些研究,而不是首先潜水并创建自己的调色板。令人惊讶的是,我们发现,很少的调色板实际上是为复杂的图表和数据可视化而设计的。 我们确定了为什么我们无法使用现有调色板的几个原因:

问题1:低可访问性
       我们查看的许多调色板不是为可视化设计的。它们的亮度不但没有足够的变化,而且往往不是在无障碍地创造出来的。扁平化配色是最广泛使用的颜色调色板之一,很容易看出为什么:它看起来不错。但是,正如其名称所示,它是为用户界面而设计的。那些有点色盲的人会很难将扁平化配色使其数据可视化并使用它。

                                   Flat UI Colors 全色,幻影模式和灰度。


问题2:颜色不足
      另外一个问题:许多现有的调色板没有足够的颜色。当我们构建Graphiq可视化时,我们需要一个调色板,至少提供6种颜色,如果不是8到12种颜色,以覆盖我们所有的用例。之前看过的大多数调色板都没有提供足够的选择。


以下是Color Hunt(配色网站)的几个例子:

虽然它们都是不错的配色,但它们不够灵活,不能呈现复杂的数据系列。


问题3:难以区分
      但是…...假如有调色板就像阶梯一样,理论上你可以创建任意数量的颜色,对吧?
不幸的是,亮度通常没有足够的变化,其中许多变化很快就会变得无法区分,就像这些(也来自Color Hunt):

先尝试第一个将其扩展到10个数据系列:我们的方法

      在Graphiq,我们认为,吃饭和呼吸数据,我们投入了大量的时间找不到一个,但是多个调色板为我们的可视化工作。我们在这个过程中学到了很多东西,我们想分享我们发现的用于生成灵活调色板的3个规则:


规则1:在色相和亮度方面都有广泛的范围
为了确保调色板是辨识度高,它们的明度必须足够大。明度差异是普遍的。采取任何单色的调色板,并测试它在红绿色盲和灰度模式中的外观。您将很快就能够了解该调色板的可访问性。

          “要极其方便,调色板的明度必须有所不同。”


       然而,只有在明度上变化的调色板远远不够。您的调色板的差异越大(即明度对比),用户将数据映射到可视化文件就越容易。如果我们能利用色相的变化来映射数据信息的话,那么对于对于大多数人(色盲除外),他们更乐意接受。


       对于明度变化和色相变化,那我们可以找到更多层次,同理可以支持的数据信息也就越多。
规则2:遵循自然的颜色模式
      设计师知道的秘密是,人的左脑并不总是会对所有颜色立即做出直观的反应:

“并不是所有的颜色都是平等的。”

      从纯粹的数学角度来看,从浅紫色到深黄色的颜色渐变应该与从浅黄色到深紫色的过渡相似。但是正如我们在下面看到的那样,前者感觉过渡自然,而后者给人视觉上并不舒服。


       这是因为已经通过色相上做了色阶调整的原因。我们在华丽的日落中看到明亮的黄色过渡到深紫色,但地球上真的没有地方可以看到淡紫色过渡到深棕色的黄色。

             从左到右的照片:Kyle Pearce,Wesley Fryer和Jon Sullivan。

同样,浅绿色至紫色蓝色,浅黄色至深绿色,橙色棕色至深灰色等。


来自Kbh3rd,Ian Britton和Jon Sullivan的照片。

       因为我们一直看到这些自然的过渡,当我们看到在可视化中使用相应的调色板时,感到熟悉和愉快。
规则3:使用渐变而不是选择静态颜色
       渐变调色板包含并提供了两个最好且不同的色调世界(即色相变化和明度变化)。 无论您需要2种颜色还是10种颜色,都可以从这些渐变中战略性地提取颜色,以产生感觉自然的可视化,还具有足够的色调和亮度变化。

       但是有一个好办法是通过设置网格线断点的数据系列的每个数字在Photoshop中,不断测试色阶和作出调整;以下是我们用来完善渐变过程的快照:       您可以看到,我们将调色板置于灰度顶部,调整渐变叠加(因此我们可以稍后获取准确的转换代码),并从这些断点中选择颜色来测试调色板在现实生活中的工作原理。

我们的调色板

我们对于最终的结果感到非常兴奋。以下是我们使用的一些调色板。它们都以纯白色开始,以纯黑色结束,达到最大的明度变化。                     酷                                    温暖                                 霓虹色

工具

数据颜色选择器:一种方便的色彩工具,您可以在其中保持色度常数,轻松挑选调色板

Chroma.js:一个用于处理颜色的JavaScript库

Colorbrewer2:用于查找热图和数据可视化颜色的好工具,内置多色调和单色调调色板

其他资源

       这里再推荐一些不错的其他调色板资源。虽然它们不一定是为数据可视化而设计的,但您可能会发现它们很有用。

ColorHunt  - 具有快速预览功能的高品质调色板,如果您只需要四种颜色,就可以获得极好的资源

COLOURlovers  - 伟大的色彩社区与各种工具,以创建调色板以及图案设计 ColorSchemer Studio  - 强大的桌面颜色选择应用程序 冷却器  - 轻巧的随机调色板发生器,您可以锁定您想要的颜色,并将其他颜色交换出来

Flat UI Colors(扁平化配色)  - 伟大的UI颜色集,最受欢迎的颜色之一

Material Design Colors  - 另一个伟大的UI调色板。它不仅提供广泛的颜色,还提供不同的饱和度或每种颜色的明度

Palettab  - Chrome扩展程序,可显示每个选项卡的全新调色板和字体灵感

Swiss Style Color Picker  - 另一个好的调色板的集合


更新:2017-03-30

收藏

6人已收藏

i笑我愚i

思则灵、灵则通、通则达

  • 10

    作品

  • 14

    粉丝

  • 46

    关注

  • 飞机稿
  • 你该知道的网页布局技巧
  • 夕阳无限好
  • UI设计需要的平面基础

    猜你喜欢

      2017-03-30 自译外文 经验/观点 原作者: Samantha 举报 2804 6 8 0

      将配色数据可视化

      0.0°

      你确定要举报将配色数据可视化

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年03月30日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录