最近我在想一个问题:假如设计师负责一款全新的产品,不受已有规范的束缚,我们该如何定义产品的色彩体系呢?有些设计师可能会凭自己的主观想法定义色值,觉得这个颜色在界面里好看就用了,但是我觉得这样是不够规范的,更多应该考虑到全局的通用性和科学性。

基于这个问题点,我网上查看研究了一些资料文章,参考了 Ant Design 和 Material Design,学习到了一些定义色彩 ID 的理论知识,来看看吧。

色彩

色彩是设计系统的重要组成部分,可以使用在品牌感、信息层级、操作指引、交互反馈的场景。在细分层面,色彩可以分为主色、辅助色和中性色。

设计师调整颜色的时候,建议使用 HSB 模式,调整色彩更直观,符合心理预期,因为人脑也是通过这个模式来辨别颜色的。

其中,H 代表色相,S 代表饱和度,B 代表亮度。色相是区别各种不同色彩的标准,通过 360°圆形色环来取色,每一度代表一个色相。饱和度指色彩的纯度,饱和度越低,越往白色过渡。亮度指色彩的明亮程度,亮度越低,越往黑色过渡。

这是常用软件 HSB 模式调整颜色的截图,帮助大家理解。

主色

主色一般和产品的品牌色相关联,很大程度决定了产品整体的调性和视觉风格,常用于主按钮、文字高亮、强调操作等界面场景。

产品 1.0 版本以上,Logo 一般都会有定义好的品牌色,界面设计中的主色和品牌色保持一致即可,可以传递统一的理念。如果从 0 开始的新产品还没有定义 Logo 和品牌色,界面要先设计开发,这时我们可以结合产品行业特性、产品理念、产品名称、用户特征等进行思考,提取关键字和情绪板,从而提取多个色系,最终和多角色沟通确定主色系,避免后续反复调整的成本。

确定主色系后,设计师该如何定义具体色值呢?可能大部分设计师都是直接吸取同色系的大厂产品色值,再微调下参数做出差异性就确定了。这确实是一个取巧方法,毕竟不容易出错。但我觉得设计师需要有自己的思考过程,所以进行了国内外大厂产品主色的调研分析,总结了一些共同点和差异点。

我发现 Apple 系和国内产品的主色倾向于饱和度和明度较高的颜色,基本分布在横竖向三等分的右上角,我认为主色取值可以参考这个区域。

看下部分产品字色、按钮色、深色模式的效果,还可以。

而谷歌系、微软系产品倾向于明度稍低的颜色。从设计层面来看,颜色有点暗、有点脏,不太建议。

我有点不太理解国外设计师的视觉审美,研究了 WCAG 2.1 无障碍标准后,才发现他们在为障碍(色盲)用户着想,主色都符合 WCAG 2.1 的 4.5:1 最小对比度(AA 级)。这个标准涵盖了使 Web 内容更易于访问的各种建议,遵循这些准则将使更多残疾人更容易获取网站内容。从分析的国内产品中,我只发现知乎的主色符合这个标准。

这其实就引发了我们的思考,视觉效果和无障碍人群体验,哪个更重要呢?我觉得两个层面都挺重要的,不过在实际场景中,建议设计师更多是结合品牌调性、视觉效果去定义具体色值,在美感、可读性、可用性之间得到平衡。注意一点,明度不宜太低,颜色会比较脏,也不太符合年轻用户的审美。

如果我负责一款产品,已经确定蓝色系为主色,我会选择明亮一点的色值,在文字、按钮、深色模式等常用场景下保证可读性和可用性。色值定为#247FFF,后面讲辅助色的时候会用到。

辅助色

辅助色,可以用于特定功能、状态反馈、应用图标等场景,反馈的成功、失败、警告状态最常用到了。

基于主色,我们怎么定义辅助色呢?我总结了点小方法。

1. 以主色的色相为基础,差值为 15°,围绕 360°色环提取 24 色。(差值 15°的颜色属于同类色临界点,有利于我们划分色度层级,又不会失去想要的色系)

2. 参考常用配色理论:相似色、邻近色、三分色、互补色,得出部分色值。

3. 结合界面场景和使用效果,对颜色进行删减和补充,最终确定所需要的辅助色。(建议最多 12 种,避免色彩太多,不利于设计师理解使用)

4、将辅助色和主色对比,进行视觉感官明度校正。(虽然色彩的饱和度和明度一样,但不同色相的视觉感官明度是不一样的,绿色、黄色、青色实际看起来特别浅,所以我们要手动调整)

校准方式:在颜色上面叠加纯黑色图层,图层模式选择色相,就可以直观地看到无彩色视觉感官明度。相差大的颜色可以以 5 为差值调整饱和度或明度,最后再根据效果进行微调。(色相的差值能被 5 整除,饱和度和明度同样适用)

调色板

为了满足界面对色彩的需求,需要对主色和辅助色进行色板延伸,建立不同梯度的调色板。

这里有两种计算方法:

1. 浅色调色板,在颜色上依次叠加 20%、40%、60%、80%、90%不透明度的白色;深色调色板,在颜色上依次叠加 20%、40%、60%、80%不透明度的黑色。

2. 浅色调色板,色相(H)往感光明度高的色相依次差值 2,饱和度(S)依次减少 15,明度(B)依次增加 5;深色调色板,色相(H)往感光明度低的色相依次差值 2,明度(B)依次减少 15,饱和度(S)依次增加 5。(Ant Design 和 Material Design 调色板也都加了色相旋转)。

从对比效果来看,比较建议使用第 2 种方法,使用 HSB 模式的值进行递减/递增得到完整渐变色板,颜色更加明亮通透。Ant Design 官网也有在线生成调色板功能,和第二种方法逻辑类似,可以快速生成,大家可以去使用。

最终生成主色和辅助色的调色板,效果如下。

中性色

中性色包含黑、白、灰,合理地使用中性色能够使界面信息层级主次分明,助力于浏览体验,常用于字色、控件色、背景色的场景。

由于纯灰色显得比较脏,人眼对偏蓝的灰色阅读体验更好,在桌面端更建议使用灰色相加点蓝。

计算方法:

1. 选择和主色视觉感官明度相同的灰色,按调色板方法建立梯度色板。

2. 将蓝色调色板不透明度调为 10%,灰色调色板不透明度调为 90%,两个色板叠加,最后吸取颜色,再加入黑白两个色板,就确定了从白到黑的 12 种颜色。

最终,我们就确定了一款产品的色彩体系,界面中使用的颜色需要遵循调色板色值,一致性设计。

总结

以上就是设计系统中建立色彩体系的思考总结。设计师调整颜色时,建议使用 HSB 模式,调整色彩更直观,符合心理预期。主色需要结合品牌调性、视觉效果定义具体 ID 色值,在美感、可读性、可用性之间得到平衡。注意,明度不宜太低,颜色会比较脏。辅助色、调色板、中性色定义 ID 色值过程中,建议遵循一定的色彩理论准则,科学地定义颜色,更有说服力。

还有许多不足,继续学习去了。