B端图表视觉设计思考(四)
三、数据色板设计
色板作为常见的数据表达手段,能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途
图表的配色工具。我们经过大量探索尝试,梳理总结出图表色彩的两个关键维度:辨识度与统一性。既需要颜色间突出强烈
可清晰辨别,又需要颜色整体能形成统一风格,以达到清晰传递和美观的目标。如何平衡辨识度与统一性,是我们遇到的难
题。
1. 辨识度
辨识度在图表中有两方面:颜色与页面底色的辨识度,各颜色之间的辨识度。对于第一种,我们采用控制颜色的明亮程度来
确保色彩辨识度,尤其对于黄色、青色等本身较亮的颜色,降低颜色的明度,确保在浅色背景下颜色可辨识。
对于第二种也就是各颜色之间的辨识度,通过实验发现单纯的颜色色相变化,例如红色与橙色的区分,人眼不容易分辨。所
以采用了色相变化+明度变化的方法,既深红色与亮橙色,深蓝色与亮紫色等,这样用户能在第一眼就明确分辨,保证颜色
间的辨识度。
最终把颜色映射到色彩空间的三维坐标中,运用欧几里得距离公式测算颜色间的距离长短,来衡量各颜色间色差数值。颜色
间距离越远代表色差越大,利用数据辅助衡量辨识效果。
2. 统一性
色彩统一性的作用在于确保图表整体风格一致,色彩搭配舒适,从而带来美观、统一的视觉感受。为达目的,我们首先提炼
商业产品设计风格为明亮、强对比,其次把设计风格转化为色彩数值。
经过实验,把颜色明度限制在50%-70%,把饱和度限制在75%-85%,并在区间内不断波动。这样既保证了色彩视觉感受
的统一,各颜色间又能够有清晰的辨识度。
3. 颜色量化与工具
量化颜色,将色彩转化为数值,利用数值来验证设计师的「感觉」,能够保证方案合理性,保证设计质量。但通过尝试,我
们常用的色彩模式均不能科学合理的量化颜色。
通过查阅大量资料,我们最终决定以小众的HCL色彩模式来衡量色彩。其中H表示色相、C表示饱和度、L表示明度。HCL区
别于传统的RGB或HSB模式,它能够将人眼对颜色的感知精确的量化为数值,例如黄色相比蓝色明度更高,都能如实的反馈
到数值上。也由于此特性,HCL模式在诞生距今不到20年间,已被一些先锋设计师用于数据可视化的呈现中。
但是HCL作为小众色彩模式,目前设计软件鲜有支持,造成了HCL色彩不直观、不方便调色等的问题。为解决此问题,我们
已初步完成智能配色程序,只需输入品牌色,就能自动生成图表色版,并在风格上与品牌色匹配,达到整体色彩的统一。我
们也将一套调配好的色板及HCL实用小工具附在文末,帮助大家直观的查看和使用HCL模式颜色。
数据价值就像不为人知的宝藏,隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙,是发掘数据价值的强有力
武器。通过对图表的不断探索优化,我们希望能够最大化数据的价值。通过图表,让数据最直观的展现;通过图表,让其背
后的规律浮出水面被人探知;通过图表,让B端不再有难懂的数据。
附:色板及HCL工具

