加载中…
个人资料
relaxkaka
relaxkaka
  • 博客等级:
  • 博客积分:0
  • 博客访问:36,140
  • 关注人气:24
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

原创技术贴 - 数据可视化组件中的色彩研究与应用(节选)

(2012-08-12 23:35:01)
标签:

文化

色彩

互联网

可视化组件

标准化

通用化

无障碍设计

分类: 原创地带

引言:

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



关键词:

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



立场与角度:

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

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



当下的问题:

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

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



部分结论:

好了,介绍完立场与角度,分析完当下问题,咱寒暄之语也就不多说了,直接上干货。干活货分为“基本原则”、“拓展应用”2部分来呈现可视化组件设计中色彩研究与应用。


 

基本原则:

1、基于HSB调色原理降噪后的20色环指数的应用规则。

方法:

a、调整色相(H)划分不同区段;

b、调整亮度(B),增加颜色区段的差异性;

c、调整饱和度(S),增加各颜色区段可读性,减少视觉疲劳。


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


原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

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



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

方法:

a、依据波段的相隔位置、频率关系取色,避免相邻波段频繁取值。

b、在选取的波段之间进行色值运算,平滑过度。


目的:方便开发计算 / 提高通用化程度。


原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图2:最终选取的20色种基础色


原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图3:在20个基础色中进行筛选,根据波段选取7个主应用基础色




拓展应用(基于7色值):

a、基础色的应用

  • 表示区分类别:以波段相隔的原则选取色彩(常规基础色7种)。如,2色选取采用RGB3大波段中的任意2波段内7大基础色。,3-4色采用奇偶原则选取色彩,5-6色以上则采用1357+x规律选取。(如图4所示)

原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图4:基础色的应用



b、邻近色的应用

  • 表同类属性:选取7色,并于20色值中选取其相邻波段色从而产生H(色相)接近,且(S)饱和度、(B)明度相似的同类色。数据运算时,7色为起始值,邻近色为结束值,两者间平滑过度的色值为计算值。(如图5所示)

原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图5:邻近色的应用



c、同色渐变拓展的应用

  • 表程度延生:在a、b的基础上,拓展渐变色渐变方法又2种,一种依据透明度-10%的梯度递减规律,一种依据HSB中H(色相)值不变,而变换S(饱和度)与B(明度)值的函数关系递减规律。(如图6,图7所示)

原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图6:同色渐变拓展的应用



原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图7:同色渐变拓展的应用,色彩矩阵



案例与比较:

    次色彩应用的算法在JS组件库中的8大组件中均有优化体验效果,介于篇幅,此处仅以Stream图为例,展现之前的2种色彩应用与当下研究后色彩应用的比较,各有利弊,但从之前提及的立场与角度而言,毫无疑问,本次研究还是取得了期望的效果。(如图8/图9/图10所示)


原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图8:依靠设计师取色,虽然色相区分明显,但需要前端工程师一一填色的色彩输入。且从美学上看比较杂乱,从拓展性上看缺乏规律,从开发的角度,缺乏色彩主题性与规范性。



原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图9:依靠简单的色彩渐变,从识别上看蓝绿色彩区分度并不明显,从美学上看,中间的过度颜色也很脏



原创技术贴 <wbr>- <wbr>数据可视化组件中的色彩研究与应用(节选)

图10:依靠当下的波段算法,清晰有效的将蓝绿2种接近的色彩做了有效区分,且有延续的渐变效果



    终于写完了,感谢一下负责开发的工程师宁朗同学,也感谢一下主导这次进程的主管知秋,在我们3人的合力下,这种算法终于从概念慢慢落地,并将为之后可视化组件库的用户们提供更多更好的体验,加油!

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
前一篇:, 。 ,
后一篇:用研扫盲
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

    < 前一篇, 。 ,
    后一篇 >用研扫盲
      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有