产品经理用理性与数学,推导产品色彩系统

1、UI 设计师中，只有极少数天赋异禀的人可以凭借感性与直觉就做出惊艳的色彩搭配，而这份天赋显然不是每个设计师都有的，那么对于大多数设计师来说，有什么方法可以帮助我们制定一套优质的色彩系统呢？本文将为你揭晓答案。各行各业的设计师每天都在和颜色打着交道， UI 设计师设计用户界面也不例外。用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制，界面可能会显得花哨而没有主次；但过于拘谨又容易使界面保守，难以激发用户情绪。所以如何让色彩的搭配平衡，是UI 设计师需要修炼的一课。但色彩毕竟是感性的元素，我们总是仰慕一些对色彩天赋异禀的设计师，总能不拘绳墨给作品带来惊艳的视觉效果。

2、我们难以偷习他们的天赋，但或许你有没有想过，干脆我们另辟蹊径，用理性的推导来制定一套色彩系统？那么今天我用我的项目示例，教给大家一个科学推导颜色搭配的方法。也许能够带你发现一些色彩背后的数学秘密。在此之前我们需要先熟悉一下颜色模式。在PS菜单栏的图像-模式”下可以看到非常多的颜色模式：RGB、 CMYK、Lab等等那是因为PS是一个需要满足设计行业水平领域的软件，要 解决各类设计师需求，所以涵盖的颜色模式非常丰富。但 UI 大多数时候需要关注的是线上场景，成果的展示渠道一般是自发光设备。所以弄明白垂直领域软件Sketch 中的几种颜色模式其实就足够了。分别是RGB、 HSB 和 HSL。RGB

3、是指通过R （Red:红）、G （Green：绿）、B （Blue：蓝）三个颜色 通道的变化以及它们相互之间的叠加得到各式各样的颜色。三个通道分别有 “0 - 255”这 256 个值，这些值分别代表着各通道的亮度层级。虽然 RGB 在机器表现上很友好，但并不够人性化。因为人们判断颜色，往往是通过 “这是什么颜色？是不是太鲜艳了？亮了还是暗了？ ”这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了HSB 模式和 HSL 模式。HSB是指通过H （Hue：色相）、S （Saturation：饱和度）、B（Brightness：明度）来才5制颜色。Hue （色相）

4、的取值范围是色环上 0-360的 圆心角度；而Saturation （饱和度）与Brightness （明度）是在0-100%的量占 比。HSL中的H、S与HSB相同，都是指 Hue （色相）、Saturation （饱和度）。但L所指的则是Lightness （亮度）。HSL 和 HSB 稍微有一些不同，我们在两个颜色模式下输入相同的数值，会发现颜色实际是不一样的。虽然 H、S指代的都是色相和饱和度，但 L（Lightness：亮度）与B （Brightness,：明度）分别被认为是 颜色中白色的量” 和 “颜色中光线的量” 。Lightness和Brightness的概念要深度研究下去的话

5、其实是计算机算法领域的问题了，感兴趣的朋友可以查阅更多资料，但我个人认为对于 UI 来说没有太 大必要。关于HSB、 HSL 的使用场景，与UI 务必记住以下两点即可：支付宝 Alipay Design 团队提出过一个配色原则：以同色系配色为主导 多色搭配为辅同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。那么知道了这

6、个原则，我们又该如何科学、合理地得出产品的色彩系统呢？接下来我就用我的一个项目示例给大家做讲解。我负责的该项目主要业务与高校支付、缴费相关，所以希望整个产品视觉风格首先要给用户带来安全感。又因为主要用户群体是高校师生居多，新潮、年轻化是主要用户的一大标签，所以我们选择了用饱和度较高的蓝色来作为品 牌色。最终选择品牌色的 Hex值为#1585FF , H S B= （211,92,100）。选定了品牌色之后，以品牌色的H （色相）为基础，不断地递增、递减15，在0-360之间可以得出 24个颜色。也就是将360色环分割为 24份，可以得到 24 色。为什么要提取24 色，并且以 15 为公差呢？

7、我们知道，想得到邻近色、类似色、互补色这一系列的颜色，我们就会使用到色环。而 24 色色板是帮助我们提取辅助色的便捷工具。同色系是指与品牌色H （色相）一致，通过改变 S （饱和度）与B （明 度）变化产生的色组。同色系色组的推导需要借助拾色板坐标。我们建立一个基于S （饱和度）与B （明度）的平面坐标系，设定当前品 牌色为色值为（S?, B?）,连接品牌色色值点与右上纯白点（0, 100）、右下 纯黑点（ 100， 0），得到两条线段。我们各在两条线段上均分取得 5 个点坐标（包含首位两点）。这样两条线段一共就会产生11个（S, B）坐标值，对应着11个同色系色组。经过上图的计算，我们可以得

8、到基于品牌色的同色系色阶。用于搭配的辅助色应满足以下两个条件：于是根据以上条件，基于品牌色可衍生出 3 个辅助色：一个与品牌色传递调性有明显区分的类似色；两个互补色的邻近色。经过计算后，我们已经得出了品牌色和三个辅助色。可以看出，虽然我们提取出的辅助色明度色值都一致，但因为颜色本身自带的感官明度属性有所区别。为了让辅助色和品牌色的感官明度尽量一致，我们要对第一次提取出的辅助色进行感官明度校准。校准方式是：依次在辅助色上叠加一层纯黑图层，将该纯黑图层颜色模式调整为Hue （色相），就可以通过无彩色系下的明度色值，进行对比。这样我们终于得到以品牌色为基准的 3 个辅助色了。将得到的辅助色依次进行步骤三的计算，可以得到辅助色的同色系色阶。但因为明度过低时，颜色已经非常接近于黑色，色相在肉眼上几乎已经趋于一致。所以删除最左边的三种同色系颜色。最后得到基于品牌色推导出的全色系色阶色板。完成了以上的工作，当然还不算结束。一套标准的色彩系统还会包含中性色规范、颜色的使用规范等