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

FIT2CLOUD飞致云 FIT2CLOUD飞致云     2023-02-16     259

关键词:

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种颜色。虽然颜色有直观的差异,但是相互有延续性,过渡会更自然。色环中有三角标识的圆形色块为基准色。拖拽色环中基准色会整体变换色彩搭配,拖拽非基准色可以改变颜色之间的角度间距。

  1. 单色

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

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

  1. 三元群

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

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

  1. 补色配色(撞色)

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

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

  1. 分割互补色

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

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

二、主题色提取

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

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

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

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

三、渐变色提取

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

四、协助工具(对比分析工具)

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

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

总结

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

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

模板学堂丨禅道业务数据分析大屏(代码片段)

DataEase开源数据可视化分析平台模板市场(https://dataease.io/templates/)于2022年6月正式发布。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表... 查看详情

模板学堂丨数据大屏模板设计的间距细节

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场(https://dataease.io/templates/)。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表... 查看详情

模板学堂丨zabbix监控告警大屏(代码片段)

DataEase开源数据可视化分析平台模板市场(https://dataease.io/templates/)于2022年6月正式发布。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表... 查看详情

模板学堂丨dataease用户操作日志分析大屏

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场(https://dataease.io/templates/)。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表... 查看详情

模板学堂丨妙用tab组件制作多屏仪表板并实现自动轮播

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场(https://dataease.io/templates/)。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表... 查看详情

真屏实据丨数据大屏设计实战—揭秘企业级数据大屏设计过程

...一种新的媒体形式,在品牌推广、政务接待、商业沟通、数据监控等各个场景发挥重要作用。本文主要整理了一些大屏设计过程中的方法和原则,希望能够为大家提供一些借鉴思路。 大屏是什么?大屏设计是最近比较流行的... 查看详情

整理全网可视化大屏有关资料,学习大屏设计,大屏原型参考,大屏设计参考(代码片段)

...片三、一些优秀大屏参考案例3.1大屏HTML3.2DataGear大屏看板模板3.3模板参考项目3.4特种设备综合监管大屏3.5Echarts电商平台数据可视化大屏3.6AJ-Report-可视化拖拽图表工具3.7Vue大屏数据可视化3. 查看详情

h5+echarts大屏数据展示经验总结

...出适合自己的方案。3.echarts实例,图表可以很直观的表示数据特征,同事又很具有观赏性,因此大屏制作中常用到许多图表,https://gallery.echartsjs.com/explore.html提供了很多漂亮的echarts图例子,通常我们只需在该网站上找到适合自... 查看详情

可视化大屏|如何理解“科技感”设计?

在可视化大屏的制作过程中,什么样的设计才能称得上是科技感十足,并且兼顾酷炫的呢?在做大屏项目时不难发现,“甲方爸爸”通常更喜欢“科技感”的设计,那在可视化大屏的制作过程中,什么样的设计才能称得上是科技... 查看详情

100+大屏模板免费领!葡萄城bi行业应用方案重磅发布!

近年来,数字经济的蓬勃兴起为企业在数据智能领域的创新发展构筑了广阔的舞台,数据作为基础战略资源和关键生产要素的地位日益凸显。数据可视化大屏作为一种用于数据分析的热门应用,能够帮助企业有效挖掘... 查看详情

如何把握ppt模板配色?

...们应该从哪里着手呢?下面这几个技巧,帮你如何把握PPT模板配色。配色的误区错误:配色越绚丽越专业正确:配色越舒服越专业一、如何使配色看起来舒服?1、颜色饱和度低--因为太亮易引起视觉疲劳2、颜色数量适中--同一页... 查看详情

大屏设计系列之五——大屏设计语言分析

...验的同时,也在不断的学习和丰富关于大屏设计的特点及数据可视化的表达方式。 数据可视化过滤了非常 查看详情

100+大屏模板免费领!葡萄城bi行业应用方案重磅发布!

...为您提供各类典型、易用多行业“数据可视化大屏”经典模板,并为专业数据人剖析“行业可视化大屏设计”背后的行业痛点,针对不同行业“对症下药”,进 查看详情

大数据可视化大屏设计经验,教给你!

 前言  大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的... 查看详情

win7命令终端基础配色指南

   微软对控制台字体的元数据有严格的限制,https://support.microsoft.com/zh-cn/help/247815/necessary-criteria-for-fonts-to-be-available-in-a-command-window Window7终端字体必须符合以下标准,以便在命令会话窗口中可用字体必须是固定间... 查看详情

建议收藏!数据可视化大屏设计必备步骤

相信对于从事大数据相关的人员来说,数据的可视化大屏是最能展现自己工作价值的一个途径。可视化大屏就是数据分析的最后成果的展示,而如果能设计出更直观、更酷炫、更具有科技感的大屏,更能获得客户的青... 查看详情

20张最新可视化大屏模板,各行业数据直接套用(含源码)

最近有不少小伙伴问我:有没有数据可视化大屏模板,而且要B格很高的。这不,立马安排。特地给大家准备了20张精美、炫酷而且十分实用的可视化大屏模板,涉及机械、加工、零售、银行、交通等行业。只要你... 查看详情

整理了20个数据可视化大屏模板,拿来即用

整理了一波数据可视化大屏模板,而且都是B格很高的。下载到本地后,直接运行文件夹中的index.html,即可看到大屏。以下是部分截图,大家根据自己的需要去获取吧。01智慧物流服务中心主要图表:柱状图、... 查看详情