热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

色彩是通过人的印象或者联想来产生习理上的影响,而配色的作用就是通过改变空间的舒适程度和环境气氛来满足消费者的各方面的要求。今天我们来给大家详细解说一下大屏可视化的配色

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

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

1、色彩的三属性

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

b446df08888c998760068a71f2b6a925.png

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

5add4312e1141c4fabe0dd353e7dfcf9.png

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

185edd4156d63d792859bd3899fc4550.png

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

9f9290e343fe5602cc152886c62be75a.png

2、色彩的特性

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

f458eafebf3918218a0466899fb81823.png

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

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

酷屏的几大特点:

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

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

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

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

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

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

a5bc55cccb788be706b2d0d2cd1ad07d.png

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

622a0f41353ccc0c9636b8684df42f3e.png

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

7cce5b1c13860841ca5d9d0042f5d352.png

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

c661d1d41f31be57de852500c5ab81bd.png

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

d023259802309411648bb751ffb77a7e.png

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

如果想要亲自用酷屏制作炫酷的可视化,请移步体验亿信ABI的在线demo!



推荐阅读
author-avatar
envmm_884_836
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有