所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

纳尼?产品色彩系统居然可以套数学公式?

各行各业的设计师每天都在和颜色打着交道,UI设计师设计用户界面也不例外。用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制,界面可能会显得花哨而没有主次;但过于拘谨又容易使界面保守,难以激发用户情绪。所以如何让色彩的搭配平衡,是UI设计师需要修炼的一课。

但色彩毕竟是感性的元素,我们总是仰慕一些对色彩天赋异禀的设计师,总能不拘绳墨给作品带来惊艳的视觉效果。我们难以偷习他们的天赋,但或许你有没有想过,干脆我们另辟蹊径,用理性的推导来制定一套色彩系统?

那么今天我用我的项目示例,教给大家一个科学推导颜色搭配的方法。也许能够带你发现一些色彩背后的数学秘密。

 

一、区分颜色模式

在此之前我们需要先熟悉一下颜色模式。

在PS菜单栏的“图像-模式”下可以看到非常多的颜色模式:RGB、CMYK、Lab等等…那是因为PS是一个需要满足设计行业水平领域的软件,要解决各类设计师需求,所以涵盖的颜色模式非常丰富。

UI大多数时候需要关注的是线上场景,成果的展示渠道一般是自发光设备。所以弄明白垂直领域软件Sketch中的几种颜色模式其实就足够了。分别是RGB、HSB和HSL。

RGB是指通过R(Red:红)、G(Green:绿)、B(Blue:蓝)三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。三个通道分别有“0-255”这256个值,这些值分别代表着各通道的亮度层级。

虽然RGB在机器表现上很友好,但并不够人性化。因为人们判断颜色,往往是通过“这是什么颜色?是不是太鲜艳了?亮了还是暗了?”这样的感官维度,而很难通过红绿蓝的亮度层级去判断。所以人们后来基于RGB衍生出了HSB模式和HSL模式。

HSB是指通过H(Hue:色相)、S(Saturation:饱和度)、B(Brightness:明度)来控制颜色。Hue(色相)的取值范围是色环上0-360°的圆心角度;而Saturation(饱和度)与 Brightness(明度)是在0-100%的量占比。

HSL中的H、S与HSB相同,都是指Hue(色相)、Saturation(饱和度)。但L所指的则是Lightness(亮度)。

HSL和HSB稍微有一些不同,我们在两个颜色模式下输入相同的数值,会发现颜色实际是不一样的。虽然H、S指代的都是色相和饱和度,但L(Lightness:亮度)与B(Brightness:明度)分别被认为是“颜色中白色的量”和“颜色中光线的量”。

Lightness和Brightness的概念要深度研究下去的话其实是计算机算法领域的问题了,感兴趣的朋友可以查阅更多资料,但我个人认为对于UI来说没有太大必要。

关于HSB、HSL的使用场景,与UI务必记住以下两点即可:

  1. 前端CSS代码里支持的是HSL,而不是HSB。如果和前端对接时UI给到的是HSB的色值,那么最终落地的颜色效果会与设计稿有出入;
  2. 我们接下来讲到的配色推导,是基于HSB颜色模式的,因为它更容易理解,数值变化在色系坐标中的产生的结果更加直观。

 

二、配色推导

支付宝Alipay Design团队提出过一个配色原则:

以同色系配色为主导 多色搭配为辅

同色系为统一的色相,使用中可以加深品牌色的感知,可以让界面更有层次,同时可以让界面保持色彩上的一致性;由于业务的多样化,我们需要多色搭配为辅;多色的辅助颜色,也可称之为功能色,可设定不同的任务属性和情感表达;再搭配中性色黑白灰,赋予更多的变化和层次。两种配色通过主次、使用比例,可灵活运用在业务的各个场景中,具有非常好的延展性。

那么知道了这个原则,我们又该如何科学、合理地得出产品的色彩系统呢?接下来我就用我的一个项目示例给大家做讲解。

步骤一

找到符合产品调性的品牌色

我负责的该项目主要业务与高校支付、缴费相关,所以希望整个产品视觉风格首先要给用户带来安全感。又因为主要用户群体是高校师生居多,新潮、年轻化是主要用户的一大标签,所以我们选择了用饱和度较高的蓝色来作为品牌色。

最终选择品牌色的Hex值为 #1585FF ,H S B = (211,92,100)。

 

步骤二

提取24色

选定了品牌色之后,以品牌色的H(色相)为基础,不断地递增、递减15,在0-360之间可以得出24个颜色。也就是将360°色环分割为24份,可以得到24色。

为什么要提取24色,并且以15为公差呢?

我们知道,想得到邻近色、类似色、互补色这一系列的颜色,我们就会使用到色环。

  • 邻近色 色相差值15°以内的颜色为邻近色;
  • 类似色 色相差值30°以内的颜色为类似色;
  • 互补色 色相差值180°的颜色为互补色。

而24色色板是帮助我们提取辅助色的便捷工具。

 

步骤三

找到同色系配色

同色系是指与品牌色H(色相)一致,通过改变S(饱和度)与B(明度)变化产生的色组。同色系色组的推导需要借助拾色板坐标。

我们建立一个基于S(饱和度)与B(明度)的平面坐标系,设定当前品牌色为色值为(S₀,B₀),连接品牌色色值点与右上纯白点(0,100)、右下纯黑点(100,0),得到两条线段。

我们各在两条线段上均分取得5个点坐标(包含首位两点)。这样两条线段一共就会产生11个(S,B)坐标值,对应着11个同色系色组。

经过上图的计算,我们可以得到基于品牌色的同色系色阶。

 

步骤四

多色搭配

用于搭配的辅助色应满足以下两个条件:

  1. 和品牌色有明显区分:尽量避免所选辅助色感官上给用户视觉区别与品牌色差距不大,传递的调性太过一致;
  2. 不能过于突兀:根据色彩原理来说,互补色是最能与品牌色本色产生视觉感官对比的颜色,但可能会有些突兀。为了让颜色的辅助起到丰富画面的作用,而不是反而让整个版面显得不和谐,所以我们选择互补色的邻近色作为辅助色,而不要直接使用互补色。

于是根据以上条件,基于品牌色可衍生出3个辅助色:一个与品牌色传递调性有明显区分的类似色;两个互补色的邻近色。

 

步骤五

感官明度校准

经过计算后,我们已经得出了品牌色和三个辅助色。

可以看出,虽然我们提取出的辅助色明度色值都一致,但因为颜色本身自带的感官明度属性有所区别。为了让辅助色和品牌色的感官明度尽量一致,我们要对第一次提取出的辅助色进行感官明度校准。

校准方式是:依次在辅助色上叠加一层纯黑图层,将该纯黑图层颜色模式调整为Hue(色相),就可以通过无彩色系下的明度色值,进行对比。

这样我们终于得到以品牌色为基准的3个辅助色了。

 

步骤六

全色系输出

将得到的辅助色依次进行步骤三的计算,可以得到辅助色的同色系色阶。

但因为明度过低时,颜色已经非常接近于黑色,色相在肉眼上几乎已经趋于一致。所以删除最左边的三种同色系颜色。最后得到基于品牌色推导出的全色系色阶色板。

 

完成了以上的工作,当然还不算结束。一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。但相信解决了大部分的需求,剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法,色彩的使用最终还是要融合设计师个人的共情能力。

比如许多产品有了一套自己的色彩方案后,设计师还会根据具体的业务场景去赋予icon、卡片背景等元素不一样的色彩方案。

希望这个方法能够带你发现一些色彩背后的数学秘密。

 

原文地址:UCD耍家(公众号)

作者:UCD耍家


 

本页地址:https://www.uime.cn/29407.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 99898566@qq.com。如果下载失败可提交工单哦。
0
分享海报

早鸟限时特价,年会员半价,限量1000份哦

点击购买

没有账号?注册  忘记密码?