前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >大屏可视化的2大配色技巧,选对颜色就成功了一半

大屏可视化的2大配色技巧,选对颜色就成功了一半

原创
作者头像
用户7220666
修改2020-05-08 17:41:50
2.5K0
修改2020-05-08 17:41:50
举报

色彩是通过人的印象或者联想来产生习理上的影响,而配色的作用就是通过改变空间的舒适程度和环境气氛来满足消费者的各方面的要求。

今天我们来给大家详细解说一下大屏可视化的配色技巧。

1、色彩的三属性

色相是指色彩的相貌,是色彩最大的特征。如我们所说的红色、黄色、蓝色,这些是色彩的相貌,即色相。一般色相环有十二色相环、二十四色相环、四十八色相环、九十六色相环等。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

饱和度是指色彩的鲜艳程度,也称色彩的纯度,表示色彩中所含色彩的比例。含有色彩的成分比例越大,纯度就越高,反之,则纯度就越低。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

明度表示色彩所具有的亮度和暗度。明亮的颜色明度高,暗淡的颜色明度低。明度最高的颜色是白色,明度最低的颜色是黑色。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

具体这三属性对色彩会产生一个什么样的结果,我准备了一张示意图,可以给大家解释一下。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

2、色彩的特性

红色给人积极、悦动、温暖的感觉。蓝色给人低静、消极的感觉。绿与紫是中性色彩刺激小,效果介于红与蓝之间。中性色彩使人产生休憩、轻松的情绪。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

人对色彩的冷暖感觉基本取决于色调。色系一般分为暖色系、冷色系、中性色系三类。色彩的冷暖效果还需要考虑其他因素。例如,暖色系色彩的饱和度越高,其温暖的特性越明显;而冷色系色彩的亮度越高,其特性越明显。

酷屏是亿信华辰自主研发的新一代数据可视化产品,内置近百种炫酷组件和3D特效,六十余种风格各异的表格、导航、统计图等组件及SVG特效可供用户选择,给用户带来震撼的视觉体验。

酷屏的几大特点:

面积巨大——用户站在远处才能看全内容,所以字体也不能太小。

深色背景——让视觉更好的聚焦。

不可操作——酷屏主要用来给来用户看的。用户一般不会直接操作大屏。

空间局限——酷屏不像网页有滚动条,它的长宽都是固定的。

独立主题——每块酷屏都有具体想表达的某个主题。

话不多说我们上实例来看看,以下图为例。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

我们先要提取出酷屏的主要指标与次要指标,然后将主要指标放置在屏幕的中间,然后在一次将次要指标围绕其周围。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

然而我们将统计图放上去后发现一个问题,全部都是一个颜色,完全区分不了主次,这时候我们就要对每个统计图及文字来配置颜色了。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

根据以下配色方案,我们在加以组合形成渐变在组合配置到对应图形中去。这样我们一个酷屏配色就完成了。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

应使用色彩明度与饱和度差异显著、对比鲜明的配色,尽量避免使用邻近色配色。当然如果颜色过于相似(例如浅灰与更浅的灰)也要避免,因为人们难以发现两者间的区别。相反,也要避免强烈的对比色,例如红配绿或蓝配黄。

大屏可视化的2大配色技巧,选对颜色就成功了一半
大屏可视化的2大配色技巧,选对颜色就成功了一半

当然配色也不是千篇一律的五色花海,如下面案例我们也可以用单一色系来配置这是利用了单一色系的明暗关系来实现的,是不是看了你也想跃跃欲试的来试一把了,下期我们在说。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档