技术贴教程,利用色彩做数据可视化波段图

色彩的运用

引言:
提及色彩,人人皆有自我喜好与发言权,不同领域的从业者亦有各自维度的认知。画家眼中色彩是艺术情感的传达,科学家眼中色彩是光谱原理的分析,心理学家将色彩与性格特征相链接,时尚大师则视色彩为一种流行趋势… …尽管这话说的有些主观,但不可否认,基于不同的立场,从业者对于色彩的研究与运用必然是有所侧重的。当色彩遭遇到互联网海量数据、信息可视化的展示时,设计师们将站在何种立场,如何演绎这种维度的认知呢?本文以淘宝数据可视化组件库的色彩研究为实践案例,节选部分章节与结论,与众阿里大牛们共同探讨色彩在数据可视化领域中的应用。

关键词:
标准化、通用化、无障碍设计、色彩算法、拓展运用

立场与角度:
正如首节所言,色彩这一司空见惯的常识性认知看似简单易懂任君所选,实则变换无穷乃至局限重重。尤其是作为设计从业者,并不像外界想象的那样可以如艺术家那般依据内心情感的指引的来选择色彩、肌理、表现方式等。作为一家互联网公司,首当其冲,就要面对上亿的大众用户,同时,还必须考虑到色盲色弱用户的无障碍使用。因此,其色彩的选择与运用必然是尽可能的追随客观与科学的法则,而非主观的情感表达。通用化、标准化、无障碍,即是解决问题的第一要义。而数据可视化组件库中的色彩运用则更体现了这种必要性。因为组件库的色彩应用不仅仅像网页那样要面对最直接上亿的用户,让对方能够减少视觉疲劳的进行操作,同时又要面对那些间接的数据开发用户,让其能用尽可能简单的逻辑语言进行编程与操作,进行海量数据的处理。

因此,这并不是 “ 找到一张世界名画或微博美图,并用PS的取色工具选取几个主色来搭配一下 ” 就可以完成的工作。在面对上述局限与需求时,标准化、通用化、无障碍的设计立场毫无疑问是第一位的。

当下的问题:
正如上一段落末尾所讲,在有了各种傻瓜图形软件的今天,设计师的配色方案似乎就是选一张有“情感”的图片,选一下其中的颜色,屏幕端将其转化成RGB编号,印刷厂将其转化成CMYK,然后出一套方案,运用在产品设计乃至VI\CI中。 这个做法当然没错,毕竟是一种最质朴的“源于自然”的设计过程,七年前我进美院读书时,老外教授也是这样教导我们的。只不过,在这种应用法则风靡的同时,同行们却渐渐淡忘了色彩的原始要义。色彩本就是一种光谱,本就是一门看的科学。在周围的同行中,很少有人真正的从“识别性”的角度,从原始色环开始,做一遍又一遍的实验,得出一个维度,乃至一个公式,有底气的对产品经理说这就是标准化的方案,对开发工程师说这就是通用化的算法,对用户说这就是无障碍的识别。

基于那些需求与局限,本次研究采用了HSB的运算法则,以波段运动频率的方式,相对科学的分析原色的变换规律,使得在不同的色彩区间内都优化了识别性,并寻找出期间的算法规律,以尽可能标准化、通用化的方式输出,使得后期遇到海量数据处理时亦能够丰富拓展应用。

部分结论:
好了,介绍完立场与角度,分析完当下问题,咱寒暄之语也就不多说了,直接上干货。干活货分为“基本原则”、“拓展应用”2部分来呈现可视化组件设计中色彩研究与应用。
基本原则:
1、基于HSB调色原理降噪后的20色环指数的应用规则。
方法:

a、调整色相(H)划分不同区段;
b、调整亮度(B),增加颜色区段的差异性;
c、调整饱和度(S),增加各颜色区段可读性,减少视觉疲劳。

目的:最大程度的区分相邻的色相值 / 色盲模式下通用性无障碍。

数据可视化

图1:HSB取色原则与基础色优化

2、以RGB的色彩波段分布形式,优先选取基础色。

更多详细信息,请您微信关注“计算网”公众号: