热评 白阿白

大佬太棒了!这个系列受益匪浅!!!求速速更新!

前言

声明:文章中所有的色彩规范都只针对可视化大屏设计,后台可视化以及 B 端可视化的规范可能会有差异;此处只是个人看法,如有错误欢迎指正;部分内容有参考百度以及相关资料;文中部分配图内容来自网络;

读者朋友们大家好呀!又鸽了!非常抱歉!距离上次《字体篇》已经 5 个多月了,由于工作原因搁置了很久,终于给大家更新啦!本期给大家带来的就是《可视化十要素-色彩篇》。

往期回顾:

整体架构

色彩篇主要分为:色彩三要素、配色方法、可视化中的颜色扩展、色彩选用原则、行业配色。

主要想通过色彩的原理,配色的多种方法,以及如何拓展可视化界面中的元素颜色(文字,装饰,背景,弹框等),最后总结了颜色的记忆属性(行业配色)。

超全面的数据可视化设计指南:色彩篇

色彩三要素

1. 色相

色相是色彩的首要特征,是区别各种不同色彩的最准确的标准。比如红色、黄色、蓝色等。色相可以具体到各个行业所代表的不同颜色,比如公安为蓝色,党建为红色,金融为橘色等。

色相只是颜色的另一种说法。

超全面的数据可视化设计指南:色彩篇

2. 明度

明度可以简单理解为颜色的亮度,不同的颜色具有不同的明度,例如天蓝色就比红色的明度高,如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。

明度定义了颜色的明亮程度,从黑色到白色。

超全面的数据可视化设计指南:色彩篇

3. 饱和度

饱和度也叫纯度,通常是指色彩的鲜艳度。

色彩的纯度强弱,是指色相感觉明确或含糊、鲜艳或混浊的程度。色彩的纯度变化,可以产生丰富的强弱不同的色相,而且使色彩产生韵味与美感。

超全面的数据可视化设计指南:色彩篇

配色方法

1. 图片配色法

图片配色法可以运用 PS 工具,选择你钟意的一张图,拖进 PS 里,执行:滤镜-像素化-马赛克,就可以得到基于图片的马赛克像素点,然后吸取颜色即可。

超全面的数据可视化设计指南:色彩篇

2. 插件配色法

插件配色法可以通过 Eagle、美叶等软件直接获取图片色,非常之方便,此种方法相比较于图片配色法,更具科学性和准确性。

超全面的数据可视化设计指南:色彩篇

3. 色环配色法

利用色环配色大家可能都知道,但是我们需要做到的是如何灵活的配色以及进行适量的处理。

邻近色配色法

三种颜色组成,观感更加舒适,色系搭配更舒服。

超全面的数据可视化设计指南:色彩篇

补色配色法

补色是指色环中两个对称的色块,他们是色环中相隔最远的两个颜色,因此两种颜色的对比也是最大的。

超全面的数据可视化设计指南:色彩篇

补色分割配色法

补色分割与补色配色相似。首先选定一个颜色,然后使用它一个邻近色,最后找出它的补色。(也叫等腰三角形配色)

超全面的数据可视化设计指南:色彩篇

三角配色法

三角色由三种颜色组成,是色环上平均分布的三种颜色,共同在色环上连接成三角形。这种方法更适合色彩鲜艳。

超全面的数据可视化设计指南:色彩篇

四角配色法

这种方法由两对补色组成,共 4 种颜色,其中只有一个是主色,另外三个颜色是辅助色。

超全面的数据可视化设计指南:色彩篇

可视化中的颜色扩展

通过对主色的叠加不同透明的黑色与白色(扩展白度和扩展黑度),可以扩展出背景、弹框、装饰、文字等颜色。

1. 扩展白度

扩展白度就是为所有颜色创建出更多较浅的颜色(增加白色透明)。比如我们通过大幅提升主色的白度,可以作为项目的文本色,那么我们该如何增加白度呢?

超全面的数据可视化设计指南:色彩篇

2. 扩展黑度

扩展黑度就是为所有颜色创建出更多较深的颜色(增加黑色透明)。比如我们通过大幅提升主色的黑度,可以作为项目的背景色和卡片底色,那么我们该如何增加黑度呢?

超全面的数据可视化设计指南:色彩篇

3. 扩展背景

我们通过将主色增加黑度的方式,去定义背景色。具体数值:主色增加 90%-95%黑色,作为背景色。

超全面的数据可视化设计指南:色彩篇

4. 扩展弹框

我们通过将主色增加黑度的方式,去定义弹框色以及模块背景色。具体数值:主色增加 75%-85%黑色,作为弹框色和模块背景色。

超全面的数据可视化设计指南:色彩篇

5. 扩展装饰线

我们通过将主色增加黑度的方式,去定义装饰线色。具体数值:主色增加 50%-70%黑色,作为装饰线的颜色。

超全面的数据可视化设计指南:色彩篇

6. 扩展装饰点

我们通过将主色增加黑度的方式,去定义装饰点色。具体数值:主色增加 30%-50%黑色,作为装饰点的颜色。

超全面的数据可视化设计指南:色彩篇

7. 扩展文字

我们通过将主色增加白度的方式,去定义正文文字色。具体数值:主色增加 90%-95%白色,作为正文的颜色(辅助文字可以减少一半透明度)。

超全面的数据可视化设计指南:色彩篇

8. 扩展辅助色

饼图中可以会用到很多的颜色去配置,那我们应该如何去配置呢?

超全面的数据可视化设计指南:色彩篇

大屏色彩原则

遵守“631”“三不”“两多”这几个原则,可以让你在可视化中的色彩搭配能力更加自如。

1. “631”原则

运用配色 631 法则,将配色定义为主色 60%,辅助色 30%,对比色 10%去贯穿整套界面。文字的颜色通过重要,普通,次要去分配,带有色彩倾向丰富页面视觉。

超全面的数据可视化设计指南:色彩篇

2. “三不”原则

不选用同一色系

同色系会使画面看起来对比度非常弱,色彩指代感弱,色彩之间不好拉开层级。

超全面的数据可视化设计指南:色彩篇

不选用颜色接近

邻近色会使画面感觉偏弱,没有强对比,画面层次感不足。

超全面的数据可视化设计指南:色彩篇

不选用同色透明

同色透明会让画面非常的灰,是可视化中的大忌,切勿使用。

超全面的数据可视化设计指南:色彩篇

3. “两多”原则

多选用对比色

强对比可以拉开视觉层级,突出画面,视觉至上。

超全面的数据可视化设计指南:色彩篇

多选用黑白灰

黑白灰可以使画面变的非常高级,并且画面细节度拉满。

超全面的数据可视化设计指南:色彩篇

行业大屏配色总结

色彩具有很强的记忆属性,因此用户会将他们感受到的内容与色彩联系起来。可以从大量资源池中去寻找灵感,比如金融行业,我们可以从已知的金融元素都是红黄搭配的,因此我们在配色时肯定需要注意这一特征的。

超全面的数据可视化设计指南:色彩篇

1. 交通行业

交通一般以蓝色为主调,配合红黄绿(红绿灯颜色)三种代表着道路拥挤程度,蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力,它是数字产品设计中最常用的颜色(除了黑色和白色)。

含义: 平静、和平、安全、宁静、信任。

适用: 交通,公安,监控,政府机关。

缺点: 由于其流行性与适用性,作为品牌主色很难脱颖而出。

超全面的数据可视化设计指南:色彩篇

2. 文旅行业

文化旅游代表着健康,和谐,自然,户外,绿色是大自然的颜色,人们对绿色的喜爱程度仅次于蓝色,绿色具有绝佳的亲和力。

含义: 健康、自然、平静、放松、成长。

适用: 医疗康复、生态、旅游。

缺点: 当绿色作为主色时,你可能需要再找一个颜色表示成功消息了。

超全面的数据可视化设计指南:色彩篇

3. 公安行业

蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力,它是数字产品设计中最常用的颜色(除了黑色和白色)。

含义: 平静、和平、安全、宁静、信任。

适用: 公安,监控,交通,政府机关。

缺点: 由于其流行性与适用性,作为品牌主色很难脱颖而出。

超全面的数据可视化设计指南:色彩篇

4. 电力行业

电力行业一般以国家电网的绿色系为主,给人一种安全可靠,绿色环保的电力行业。

含义: 安全、可靠、绿色、环保。

适用: 电力,电网,网络安全。

缺点: 当绿色作为主色时,你可能需要再找一个颜色表示成功消息了。

超全面的数据可视化设计指南:色彩篇

5. 生态行业

生态代表着健康,和谐,自然,绿色是大自然的颜色,人们对绿色的喜爱程度仅次于蓝色,绿色具有绝佳的亲和力。

含义: 健康、自然、平静、放松、成长。

适用: 医疗康复、生态、旅游。

缺点: 当绿色作为主色时,你可能需要再找一个颜色表示成功消息了。

超全面的数据可视化设计指南:色彩篇

6. 金融行业

金融行业非常注重属性搭配,暖色系可以增加购买欲望,使人有温暖的感觉。橙色被认为是一种非常有活力和热情的颜色, 它促进活动和创造性思维。

含义: 创意、能量、热情、活跃、烦躁。

适用: 金融,证券,货币,党建。

缺点: 当橙色作为主色时,你可能需要另一种颜色作为警告色。

超全面的数据可视化设计指南:色彩篇

知识点总结

  1. 加强对色彩三要素:色相、明度、饱和度的认知;
  2. 掌握三种配色方法:图片配色法、插件配色法、色环配色法,以及了解配色的原理;
  3. 可视化界面中如何扩展颜色(白度,黑度,背景,弹框,装饰,文字,辅助色等);
  4. 配色 631 原则,主色、辅助色、对比色应用原则;
  5. “三不”原则:不选用同一色系、不选用颜色接近、不选用同色透明;
  6. “两多”原则:多选用对比色、多选用黑白灰;
  7. 不同行业配色注意事项,通过元素搜集以及情绪版,配置不同行业可视化配色;
  8. 颜色的含义以及适用的地点;
收藏 404
点赞 93

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。