Saas产品升级-构建更加包容的色彩体系

北京/UI设计师/4年前/3150浏览

版权

本文主要阐述了Saas产品数培通，在升级过程中对色彩体系的探索

经过之前的迭代设计，产品功能上已经实现了移动端和web端的协同，在3.0的设计中，数培通致力于构建随时随地的培训空间，打破线上线下和不同设备的界限。随着企业的数字化转型进程的加速，互联网的产品生态越发多元丰富，我们希望，新的品牌色可以有更加包容的品质，来匹配产品未来无限的可能性。

在这篇文章中，阐述了数培通色彩体系的构建以及应用规范，以便建立工作流程，达到在产品使用场景中一致且具有品质感的页面，有效提升使用效率。

Chapter 1 品牌标准色进化

数培通代表着更加高效的可视化管理培训系统，从员工后台管理到前台多端协作。数培通当前主要服务人群为煤炭、建筑等传统国企，人群年龄跨度大，使用设备也有的较为老旧。在未来的产品规划中，业务扩张的需求也对设计提出了更高的要求。

在3.0的设计关键词中，我们定义了包容，此处的包容具体又可分为对使用场景更加包容和对使用人群更加包容。

因此，在3.0的色彩定义中，我们将标准色进行了调整，由柔软的天蓝色升级为更加生动的科技蓝。为保证品牌的一致性，在HSB的色值中，仅针对S值进行了调整，增加了颜色对比度，并经过了WCAG2.0（Web Content Accessibility Guideline，Web内容无障碍指南）的测试。

在早期的界面设计中，为适应设备屏幕不同的巨大的显色差异，设计师常用#333333，#666666，#999999等不带有颜色倾向的灰色，经过多年的科技发展，目前屏幕的显色技术对于带有颜色倾向的灰度是友好的。我们也可以在现在的头部设计团队中看到很多带有颜色倾向灰色值的应用。

同样，在数培通的设计中我们也认同，灰色在色彩系统中也非常重要，可以有效得为界面结构，边界表达服务，并且能传达产品稳定可靠的特性。在这次的改版中，加入了经推导得出的蓝灰色#3E3E4F，作为重要的使用色彩之一。

Chapter 2 辅助色的设计

众所周知，在一套完整的色彩系统中，必然需要一系列的辅助色，共同搭配组成有层次的页面视觉，辅助色的出现也缓解了主色反复出现的视觉疲劳。

在市场日趋成熟的大趋势下，对于辅助色的搭配有各种类型的开源资源，包括种类繁多的配色网站和各大厂的色彩推导系统。经过对比之后，我们借鉴了腾讯文档的辅助色构建方式。以标准品牌色#445EFF（H 232 S 73 B 100) 为起始点，S（饱和度）、B（明度）保持不变，H（色相）起点，以15°为增量或减量标准，生成24色色板作为选取辅色的重要依据。

由此我们经由24色相得到了原始的9色相，但是因色彩本身带有的色彩感官属性，原始的9色相在视觉感受上感官无法同频，可以看到黄色和绿色的光感较强，而蓝色、紫色则相对偏暗，同时红色和橘红色色彩区分度不大。这个时候就需要设计师进行主观上的调整，来保证感官体验更加和谐。

在调整过程中，使用了Color Oracle和ps内置色彩测试工具进行了多形式的校正（tips：经过实践，ps内置的模拟器更加简便易用，视图→校样设置）校正后得到了更加清晰易分辨的辅助色体系。

下图中做了简单的色彩展示，在实际的调试过程中，笔者分别使用了ps，sketch，以及手机，pad的不同色彩配置和功能，查看色彩的展示效果，有趣的是，每一种尝试都会得到不同的带有细微差别的色彩表现，甚至在这张图的导出和上传过程中，都发生了细微的变化。可见，就如同我们无法知道他人内心世界一样，我们也同样无法精准得知在实际用户的使用中，对方眼中的色彩是什么样子。这也是在实际的色彩探索中，我们更加想要研究的“如何让色彩更加包容”，并且尽最大的可能去靠近用户。

【配图-页面颜色使用】

之后需要建立更加丰富完整的色彩层级来满足不同场景下颜色的使用，以便更好传达品牌精神。在这里我们直接使用了Ant design3.0的计算方式，得出了完整的调色板。

Chapter 3 中性灰色的设计

在chapter1中我们将蓝灰色纳入到品牌色系中，作为实际应用中品牌表现的一部分。我们会需要有梯度的、丰富的灰色调色板，以便在实际产品中各种各样的容器、面板、列表等使用。

在色彩梯度的生成中，常用的方式是使用Ant design “tint/shade 色彩系统”，在此次的优化过程中，品牌色色阶我们直接使用“tint/shade 色彩系统”升级之后的Ant design3.0的色彩计算方式，而这种方式在蓝湖色的选取上却是不适用的，因此，以此为基础，做了色彩的叠加来得到更加科学的色彩体系。

tint/shade 色彩原理：

将主色与纯白色(#fff)混合，主色与纯白色之间分成 100 份， 20/40/60/80 的位置分别分割，得到 4/3/2/1 号色;
将主色与纯黑色(#000)混合，主色与纯黑色之间分成 100 份， 20/40/60/80 的位置分别分割，得到 6/7/8/9 号色;

——from：Ant design色板生成算法演进之路

为了保证足够的对比度，我们对调色板进行了可用性测试，来指导在实际应用中灰色调色板的使用。

Chapter 4 色彩系统的应用

经过前面的推导过程，我们现在构建了涵盖品牌色、辅助色和灰色的调色板，但是在实际的工作中，仅有调色板也无法支撑我们流畅的协同工作，设计师会困惑于在什么情况下到底该用哪个颜色，若都基于设计师主观选择，也会导致界面的混乱。

首先我们针对任务性色彩进行了图形和文本测试。因颜色感官的不同，在此次的测试中，可以看到黄色和绿色的对比度监测并不完全可通过测试，因此我们在原有的色板基础上，增加了#CC8100和01A839作为文本高亮色，而在图形的颜色选取上，使用了比文本浅一个梯度的#F1B891和#17BD54。之后我们对其他颜色也进行了更加具体的规定。