UI设计中的颜色:一个实用框架

作者:Erik Kennedy 作为一个自学成才的UI设计师,我常常会奇怪,为什么这么多书籍和文章都在谈论色彩理论和调色板。根据我的经验,用那些“分割补色调色板 […]

2018年4月22日

作者:Erik Kennedy

作为一个自学成才的UI设计师,我常常会奇怪,为什么这么多书籍和文章都在谈论色彩理论和调色板。根据我的经验,用那些“分割补色调色板”之类的理论基本上不会做出好看的设计来。

“如果色彩理论不能给界面设计中的色彩搭配提供坚实的依据,那什么会呢?”

我的看法是:颜色调整。是要将有用的颜色进行细微的调整,而不是随便根据什么色彩理论挑几个出来。

换句话说就是,界面设计中色彩的基础技能就是,需要能够从一个基础的色彩调整变化出多个不同的变化。

这听起来可能有点奇怪,听我说,我会给你一个UI设计中色彩调整的方法框架。

这个框架将会:

  • 帮助您修改一个主题颜色,基本上能用于界面设计中所有的用途(这非常强大,我们将看到,像   Facebook这样的App已经在做了)
  • 帮你预测什么颜色的变化看起来会不错。
  • 让颜色(的使用)不那么主观。(主观的意思是,“我还没搞明白颜色的原理是什么”,这个词也是非专业人士讨论颜色的时候常常会提到的)

这是不是很酷!

颜色深浅的变化

我注意到在很多看上去很棒的界面中的一个共同点就是,在一个颜色主题里都包含着颜色深浅的变化。

 

你不会觉得这个搜索栏只是一个半透明的黑色叠加,是吧?偷偷的告诉你,确实不是。任何一种叠加在蓝色背景上透明的黑色都不会给你这个案例中的搜索栏的感觉。这是用其他的魔法挑选出来的蓝色的变化色。

下面这个例子是Swell Grid,一个漂亮的海浪预测APP。

好多种蓝!有多少种呢?看看他们的网站数一数吧。实际上,这个页面上的所有内容都是蓝色的变体。

这里是另一个例子:

这个元素的不同状态也是通过一个颜色的变化而来的。

那么问题来了,究竟是如何调整颜色才能得到好的结果呢?

我会告诉你的,但我希望你能从头理解这些东西。

这里是我们总结的两条可靠的原则:

  • 我们会寻找真实的世界中的参照物。尽管界面是虚拟的,我们还大量的从现实世界中找灵感。因为我们在现实世界中几十年的经验,我们只会期待光线和颜色的效果按特定的方法显示。
  • 我们将使用HSB颜色系统。简而言之:它是最广泛使用的颜色系统(用于Sketch和Photoshop等等)。如果你不知道是什么色调、饱和度和亮度,后面会讲解到。

现实世界的颜色变化

环顾你的周围,每次你看一眼你的房间,都会发现几十种颜色变化的案例。

那就是阴影。

你可以将阴影想象成一个基本颜色的较暗的变化。

 

现在,让我们用拾色器获取颜色,并仔细地分析当阴影落在珊瑚色墙上的色彩变化  。就像我刚才提到的那样,我们将在HSB中进行分析。

注意:监视器/图像颜色配置文件可能会使这些确切的测量值与您不同。

可以看出亮度明显是下降了,现在我们看看另一个案列。

这里的影子是否和上面的变化一样呢?

通过比较这两个例子,我们可以发现一个模式。

如果想得到一个颜色的较暗的变化,可以将亮度调低,将饱和度提升。虽然我们仅仅研究了两个案例,但据我所知,这是一个的可靠的方法。

规则

较深的颜色=更高的饱和度+更低的亮度

 

如果你回头看看我们的Facebook搜索栏例子,也是这样运用的。

随着亮度下降,饱和度上升。搜索栏不能用黑色覆盖的的原因是在HSB中,添加黑色相当于降低亮度。相反,我们希望在降低亮度的同时也增加饱和度。但事实上黑色不会为的颜色添加任何饱和度!

为什么在现实世界中,拥有较高饱和度的颜色比较深?这是因为当光的亮度 的强度超过饱和度的强度的时候,颜色必然变得更加清晰,反之亦然。

较轻的颜色=更低的饱和度+更高的亮度

你可能猜到,相反的变换会给我们带来更亮的变化。如果我们一直继续降低饱和度并提高亮度,最终会变成白色。

有两种非常简单的方法可以将白色添加到颜色中:

  • 减少元素的不透明度(如果它在白色背景上)
  • 在元素顶部添加一层半透明的白色

最重要的一条

如果您只能记得本文中的一个知识点,那请记住:“通过降低亮度和增加饱和度来实现较深的颜色变化。反之,会使颜色变化更明亮。“

有了这个简单的想法,你就可以用一种颜色做出很棒的设计。

看看这个标题悬停状态较轻。所选状态较暗。或者残奥绿色的New Entry按钮。

悬停状态是一个较暗的变化 ,较高的饱和度,较低的亮度。你会多次使用这个想法,也并非所有的设计在百分之百遵循这个规则。在上面的Harvest标题中,所选状态只是较低的亮度(饱和度不变),悬停状态只是较低的饱和度(亮度不变)。但是我们已经研究过现实世界中的颜色是如何运作的,而且我们知道为什么这些设计看起来不错,是因为它们与这里列出的原则相近似。

关于色相?

说到这里所说的原则,我们应该谈谈色相。色相在整个饱和度和亮度方向上都是次要的,因此在进行颜色调整时,通常可以完全忽略它。

这里是最简单的解释。

首先,每种颜色都有一种“感知亮度”。这就是所谓的光度。

即使这个蓝色和这个黄色都是100%HSB亮度,黄色看起来是不是更亮?

即使你保持亮度和饱和度不变,只是变化色调,你也会得到光度不同的结果。

 

这些是我们的色调,间隔30°,全部都是100%饱和度和100%亮度。

再将色调复制,放入亮度混合模式(如果使用软件,首先设置白色背景),并覆盖灰色的亮度,这就是测量原始颜色亮度的方法。在光度混合模式下,明亮的灰色意味着高亮度,暗灰色意味着低光度。

Sherlock,一个例子。

这个典型回答了我们上面的疑惑。还记得我们是怎么看到的吗?对于一个影子来说,色调会下降,有时也会改变。为什么会这样?

那么,请大家首先注意,这个图有三个最高点和三个最低点。高点是青色,品红色和黄色。低点是红色,绿色和蓝色。这些特定的颜色是不是听起来很熟悉?这些颜色是RGB和CMY色彩系统,但暂时忽略它,因为会误导你。

重要的是:如果不计算饱和度和亮度,那么红色(0°),绿色(120°),或蓝色(240°)亮度和明度将会降低。将色调移向黄色(60°),青色(180°)或品红色(300°),感知亮度便会增加。

诀窍就是让色调、饱和度、亮度的变化一致。如果您想要较暗的颜色,就将色调偏向红色(0°),绿色(120°)或蓝色(240°)(取其最接近者),反之亦然。(当然,假设这里你也在降低亮度并增加饱和度)

这就是为什么珊瑚墙上的阴影色调下降,是因为,它正在向0°方向移动,这是最接近21°的最小点。

这就是为什么蓝绿色墙上的阴影色调上升,是因为,它正在向240°偏移,这是最接近194°的最小点。

总结:

因此,当涉及到颜色变化时,问问自己:我是否需要在我已经拥有的颜色上做些简单的变化?(如果你想要完美的,答案往往是的。)

更深的变化:

  • 亮度下降
  • 饱和度增加
  • 色调(经常)转向最小亮度(红色,绿色或蓝色)

更轻的变化:

  • 亮度增加
  • 饱和度下降
  • 色调(通常)转向光度最大值

 

 


责编:季佳宁   翻译:沈明清   编辑:戈妍悦

发表评论

电子邮件地址不会被公开。 必填项已用*标注