模板学堂丨数据大屏配色设计指南

Posted 2023-01-06 FIT2CLOUD飞致云

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场（https://dataease.io/templates/）。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板，方便用户根据自身的业务需求和使用场景选择对应的仪表板模板，并在优质模板的基础上轻松制作自己的仪表板。

2022年12月上新模板

DataEase模板市场定期进行模板上新，2022年12月共上新3个模板，涉及餐饮运营、智能汽车、供应链金融等主题，欢迎大家在DataEase模板市场下载使用。

模板技巧

本月为大家推荐的模板技巧是教您如何为模板设计美观又合适的配色。颜色是构建信息仪表板和数据可视化的重要组成部分，因此在数据大屏的设计过程中，色彩的搭配使用也有着举足轻重的作用。

在DataEase的社区群中经常有用户提问：如何给自己的数据大屏进行配色？色彩搭配是一门很深的学问，那么色彩搭配方面的小白又该如何给自己的仪表板设计配色呢？

DataEase作为一款主打“人人可用”的开源数据可视化分析工具，自然也想让大家“人人会配色”。本期模板学堂就为大家介绍一款配色的辅助工具，帮助设计零基础用户快速掌握色彩搭配的诀窍，轻松搞定数据大屏的配色问题。

配色辅助工具的网址为：https://color.adobe.com/zh/create/color-wheel。这个名为Adobe Color的网站是Adobe旗下的官方配色网站，和大家所熟知的Photoshop、illustrator、After Effects、Premiere Pro等设计软件出自同一家公司。该配色工具网址主要分为建立、探索、趋势、资料库四个部分。我们日常使用的话只需要使用“建立”模块就够用了，而“预设”和“趋势”模块大家可以用来找图或者找一些配色方案。

下面主要向大家介绍一下如何使用“建立”这部分的主要功能，帮助大家轻松得到想要的配色。

色彩搭配

在Adobe Color的“建立”功能模块中，我们可以进行自由配色，而该模块下也提供了多种工具来辅助我们。下面就为大家逐一介绍如何使用各种工具进行色彩搭配。

一、色轮

色轮是原色以及它们如何组合以形成所有其他可见色彩的直观表示。色轮有助于理解艺术色彩、设计规划色彩和配色方案之间的关系。“色轮”工具这里只能选用五种颜色，颜色下面有色彩代码，如果不太清楚如何配色，可以选中其中一个颜色为基准色，它会自动帮你选择其他四种颜色，保证整个色彩基调的和谐。

“色轮”所采用的默认色彩模式是RGB模式，如有需要也可以在左下角切换为其他模式。RGB色彩模式是工业界的一种颜色标准，是通过对红、绿、蓝三个颜色通道的变化以及它们之间的相互叠加来得到各种颜色。这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。

下面介绍一下常用的几种配色方案和规则。

1. 类比

“类比”色彩规则是指选定一个基准色以其为中轴，向两侧等角度间距延展获得的5种颜色。虽然颜色有直观的差异，但是相互有延续性，过渡会更自然。色环中有三角标识的圆形色块为基准色。拖拽色环中基准色会整体变换色彩搭配，拖拽非基准色可以改变颜色之间的角度间距。

2. 单色

“单色”色彩规则是指在单个轴向上，拾取任何颜色，就会获取一组有层次感的同色系色彩，单色色彩搭配相对来说不会出错。

DataEase模板市场中使用“单色”色彩规则的仪表板：

3. 三元群

“三元群”色彩规则是指在色轮中以120°三等分，获得的任意一组三色轴向都可以形成三元群。此种搭配在仪表板设计中不常用。

DataEase模板市场中使用“三元群”色彩规则的仪表板：

4. 补色配色（撞色）

“撞色”色彩规则是指在光谱色轮中，呈180°的两种颜色。撞色搭配可以用来在仪表板中突出需要重点显示的指标等信息。

DataEase模板市场中使用“撞色”色彩规则的仪表板：

5. 分割互补色

“分割互补色”色彩规则是和“撞色”色彩规则相近的配色方法，指的是在色相环上角度在120° - 180°之间的色彩，但没有“撞色”色彩规则那么严格，所以色彩冲突会变得更加温和。

DataEase模板市场中使用“分割互补色”色彩规则的仪表板：

二、主题色提取

“主题色提取”工具的原理是在操作界面中导入一张图片，工具会自动选取这张图片的五个主题色。一般情况下自动选取就可以满足日常需求，但如果有个性化的需求，也可以拖动图中的圆圈自行选择颜色。在页面左侧可以更改色彩情景，可以选择深色、亮色、柔和等色彩场景。

推荐大家在使用“主题色提取 ”工具时，可以多找一些风景图取色，大自然的配色有非常多值得我们学习和借鉴的地方。

当然也可以找一些经典画作取色，下图就是用敦煌壁画来提取颜色作为配色参考。

此外，也可以从一些游戏场景和科幻场景中提取心仪的配色。

三、渐变色提取

“渐变色提取”的原理同样是在Adobe Color的界面中导入一张图片，工具会默认选取图中的三种颜色并生成渐变效果。用户也可以在界面左上角自定义节点数量，节点数量最少为两个，最多为15个，通过调节节点的数量可以使色彩更加丰富。如果对选取的颜色不满意，还可以拖动图中圆圈拾取新的颜色，而左右拉动图片下方的圆圈即可改变渐变范围。

四、协助工具（对比分析工具）

颜色的选取，可以通过色彩代码、色轮或者RGB值和亮度来选取颜色，文字颜色和背景颜色可以交换，如果操作失误可以在界面右上角选择撤回（注意：不能使用Ctrl+Z组合键进行撤回）。

颜色选取的右边显示的是对比率，文字与背景对比率越高越适合阅读，当符合WCAG标准时，右下角才会出现“✓”的标识。WCAG是一个无障碍指南，简单来说就是让用户更为方便地使用，那么在这里它就是“颜色搭配是否适合阅读”的准则。在Adobe Color中分为AA（低）和AAA（高）标准，用户可自行选择。

总结

DataEase开源数据可视化分析工具重视用户的使用体验，不光要做到“人人可用”，还要做到“人人可配色”。通过使用上述色彩辅助工具，我们可以轻松实现DataEase仪表板的配色设计。

可以看到，整个色彩搭配的过程还是比较简单的，而且Adobe Color工具支持多种途径和色彩规则，在无法自行设计的时候还可以通过提取示例图片颜色来提供思路，弥补了用户在色彩搭配知识方面的不足，极大地降低了色彩搭配的门槛。