UI 设计中的颜色 —— 一个（实用的）框架

2017-03-13 10:17:00

对于文中会有歧义的地方我都给出了原文用词，不方便科学上网阅读原文的同学又不明白的仍然可以在留言里告诉我，我会将相应的原文贴出来。

进入正文啦！

作为一个基本是靠自学在UI之路上走到现在的人，我经常好奇为什么那么多文章和书在讲色彩理论和调色盘。在我看来，使用一个“互补色盘“跟我是否能做出一个好看的设计基本没啥关系。

这就是我通常说的无用功。

那色彩理论都没给UI设计提供一个可靠的根据，又有什么可以参照呢？

听我一句话：色彩调整，是对于重要的颜色进行微调，而不是从色轮里挨个选。

或者换句话说：彩色界面设计中的基础技巧是可以通过修改调整一个基础色从而得到很多不同的色差。

我知道这听起来有点奇怪，听我说完，我会给你一个框架来调整你的UI设计中的色彩。

这个框架将：

让你可以针对任何功能的都可以做出一个主题颜色（这个非常有用，并且我们会看到，哪些app——比如Facebook——已经在这么做了）帮助你预测什么样的颜色改变会带来更好的效果让颜色看起来不那么主观（“主观”常常表示“我自己不知道这么做的道理是什么”——这也是众多同行们讨论颜色时经常挂在嘴边的词）

你还好吗？我们继续？

Great！

明暗上的变化

看过这么多好看的界面之后我发现常常有一个共同点就是它们在一个特定主题色之下从颜色明暗度的差别上来着手设计。

你不会认为这个搜索栏只是一个半透明的黑色叠加吧，剧透一下，不是的。调整黑色的透明度来叠加在蓝色上是不会给你这个效果的，这个颜色是通过其他方式来选出的。

来看一下Swell Grid，一个出色的天气app。

啊哈，我们刚刚和一堆近似色碰上。有多少呢？可以去网站上自己数去。几乎页面上的所有东西都是这个初始蓝色的变体。

或者，这里有另外一个简单的示范：

尽管组件的状态在颜色上有差异，但并不能描述为“三种蓝色组成的色板”，这是由一种蓝色及它的近似色组成。这就引申出一个问题：究竟怎样才能调整一种颜色来得到理想的细微变化？

我们会说到答案的，但我希望你可以从基础开始了解。下面先讲两个靠谱的原理：

1.我们会以现实世界为参考提示。尽管UI界面是“虚拟”的，我们仍然疯狂在从现实世界中拷贝，毕竟看了几十年的真实事物，我们对光影及色彩的存在形式都有既定的预期。

2.我们会用到HSB色彩系统。简单来说：这是最直观的色彩系统，应用范围也很广（我自己的话就是在Photoshop和sketch里面用）。如果你不知道色相，饱和度，明度是什么，可以休息一下我们十秒钟后再见（自己去查的意思啦）。

现实世界中的颜色变化

看看你四周有哪些“色彩变化”，毫无疑问你每次扫一眼你的房间，都会看到几十种例子。

阴影

你可以把阴影当作一个基础色的一种近似（变体）色。

能跟上吗？

现在我们再回到Sketch里面然后用你的拾色器来弄明白当阴影投射到珊瑚色的向上时到底发生了什么。

就像我之前提到的，我们会使用到HSB。

明度降低了——这是肯定的。稍等——在我们得出结论之前，再来看另外一个样本。

在古巴这阴影还是同样的原理吗？马上就知道了。

好了，现在我们可以对比一下，你是否能注意到这个模式了呢？

当有一个颜色的阴影变体色时，你可以判断出明度会降低，饱和度会增加。虽然我们只看了两个例子，但在我至今为止的观察里，这是个很靠谱的原则，所以放心参考。

但色相值就有点不正常了——它在珊瑚色的墙上降低了，但在蓝绿色的墙上又增加了。这会有相应的解释，但比起饱和度和明度来说这没那么重要，但也更深奥难懂一些——所以我们稍后会再讲回色相。

原理

让我们来拆解一下这个概念。

暗（深）一些的变体色=更高的饱和度+更低的明度

如果你回去看一下Facebook那个搜索栏的例子，就更能明白我说的意思了。

饱和度增加明度降低。搜索栏之所以没有直接将黑色叠加在在基础的蓝色上，是因为在HSB里，叠加黑色等于是降低明度。而我们在降低明度的同时也要增加饱和度。但黑色叠加不会给颜色的饱和度带来任何变化！

为什么？难道现实世界中，暗些的颜色是和更高饱和度息息相关吗？我不会说这么肤浅的话啦，但硬要我说的话：是因为光线的强度（明度）取代了部分颜色的强度（饱和度），所以颜色被洗刷掉了——反之亦然。

这个也许就能解释BS了，也是有点道理的吧？

亮（浅）一些的颜色变体=更低的饱和度+更高的明度

现在，有辨别能力且博学的读者如你，可能已经猜到了这种相反的转变了吧。

天呐你太厉害了

当然，我们可以再往深层次走一步。如果我们继续无止境地降低饱和度并且提高明度，最后结果是什么？

这个

就得到了白色。

你可以把一个更浅的变体色等同于白色叠加。这有两种非常简单办法再Sketch等软件里操作：

1.降低透明度（如果在白色背景上面）

2.覆盖一个半透明的白色在上面

最重要的事情

如果说你看完这篇文章只需要记住一件事，那就是：

暗一些的变体色由降低明度提高饱和度得到。浅一些的变体色由提高明度降低饱和度得到。

通过这个简单的办法，只需要一种基本颜色你就能做出令人赞叹的设计。

事实上，有太多的不同组件之间的近似色——或者只是同一个组件的不同属性——只是简单的颜色微调。

这是Harvest，一款我很喜欢用的时间追踪app。

看这个Header，悬浮状态是更亮的颜色，选中状态是暗一些的颜色。

或者是看那个绿色的New Entry按钮

悬浮状态是暗一些的近似色——更高的饱和度，更低的的明度。

你之后会反复用到的。

公平的说，并不是所有设计都百分百遵循这个原则。在上面的Harvest的Header里，选中状态只是单纯的降低了明度（饱和度不变），悬浮状态也只是降低了饱和度（明度不变）。但我们已经看到了颜色在现实世界中的变化，所以我们知道为什么这个设计看起来很棒，是因为他们基本遵循了现实中的规律。

说回色相

说到这个现实世界中的规律，我们应该来讲讲色相了。虽然上面已经说过，但在这里还是该重复一下，色相相比起来真的很次要了，以至于你通常可以直接忽略掉。

话虽如此，这还是会有一些简短的说明。

首先，每一种颜色都有自己的“感官明度”，这被称作发光度（Luminosity）。

尽管图中蓝色和黄色在明度和饱和度上都是百分百。谁看来更亮呢？

我的意思是，可以随便问街上一个人。

“额，黄……黄色？”

谢谢，这个路人甲已经明白发光度了。

“所以？我说对了？”

是的，尽管明度和饱和度不变，只有色相差异，你会发现发光度的变化，或者说是感官上的明度，我们也将其从1-100来进行衡量。

这是以30度为间隔的色轮，都在百分百饱和度及明度。

这是将色轮复制后放到发光混合模式下（白色背景上-如果你是在Sketch里操作的话这点很重要），并对生成的灰色标注了明度。这让我们可以衡量原始色的发光度。

在发光混合模式下，浅灰色以为这高发光度，深灰色以为着低发光度。你稍微想一下，就会明白这非常合理。

虽然我已经把数据列出来了，但图表比一千个数字都管用，对吧？

看，夏洛克，一个模式出来了

这个特定的模式就回答了我们上面的问题。还记得我们之前说过对于阴影来说，色相值却忽高忽低，为什么会这样呢？

首先，注意这个图里有三个最大值点和三个最小值点。相对低的三个点是红色、绿色、和蓝色。相对高的三个点分别是青色、洋红、和黄色。

这着特定的颜色有没有让你想起来什么？对啦，RGB和CMY是常用的色彩制式没错，但却省略了这点，因为这些会让你很困惑。

重要的是：如果你不算上饱和度和明度，把色相值调到红（0度）绿（120度）蓝（240度）会减少发光度，也被称作颜色的感官明度。而调到黄（60度）青色（180度）洋红（300度）时，会增加颜色的感官明度。

这个小技巧只是为了让色相更匹配明度和饱和度的调整。如果你想要一个更暗的近似色，把色相值朝红绿蓝移动，反之就朝青黄洋红移动。（当然，前提是你调低了明度并增加了饱和度）

这就是在珊瑚色墙体上的阴影色相会降低-其实是更接近红色（0度）。

而在蓝绿色墙体上的阴影色相增加-是更接近蓝色（240度）。

有没有感觉恍然大悟！

色彩之道

当需要一个色系时，问问自己：我是要在已有颜色的基础上找一个更深或更浅的颜色吗？

（如果你希望简洁的感觉，答案就是肯定的，所以大部分情况都是Yes）

更深的近似色：

明度降低
饱和度增加
色相向低发光度颜色靠近（红绿蓝）

更浅的近似色：

明度加强
饱和度降低
色相向高发光度颜色靠近

这样你可以只选择一个色相，但无限的延伸出所有UI界面上所需要的颜色，在合适的场景使用更深或更浅的颜色。

界面里的一种颜色和许多微调后颜色

上面就是我做出的一个快速的案例，整个界面由一种颜色而来。这个蓝绿色的渐变有没有很眼熟啊？

我已经解释的很清楚了，但仍然有一些话题值得继续讨论：

为什么在渐变色和数据可视化种色相会更重要呢？

当你在Sketch中，你使用什么技巧来做一个更深的近似色？

你是怎么将完全不相干的颜色放在一起却看起来很舒服？

颜色互相冲突时怎么解决？

还有，为什么RBG和CMY会在发光度图表中分别有高低的差异？

这些都是好问题！

原文作者在文末给出了自己的课程介绍，我就不翻译了，因为如果看不懂的话，这个课程就更看不懂了……

原文：

Introducing… Learn UI Design

I’ve been working hard the last 11 months to create the single most comprehensive online video course for learning the practical skills of interface design.

We’re talking everything here:

Color
Typography
Layouts
Process
Responsive
Design And more…

The course is 16+ hours of video in over 30 video lessons.

In almost every video, you’ll watch me design in Sketch. This is important. I’m not teaching some theoretical framework here. Instead, everything I show you is the tips, tricks, and frameworks I use to design interfaces every day. Think of it as watching over my shoulder as I teach you everything I know.

For instance, in the Spacing video (and yes — that’s a 50-minute video entirely on whitespace), I start with a simple text-based example, talking about how to approach letter-spacing, line-spacing, paragraph-spacing, space between the title and the body, space alongside the text, etc.

“Learn UI Design is like learning how to fly a plane by actually sitting in the cockpit with the pilot — Erik is constantly designing/redesigning real-world examples right in front of you, explaining why X is good or bad, and how to go about making it even better.”

“Learn UI Design’s straightforward approach, illustrated with real-life examples and tutorials, was extremely helpful and eye-opening. I would highlyrecommend this course for UX designers wanting to add UI design to their toolkit.”

“Erik’s pragmatic approach to design has taught me infinitely more than what reading any design books ever did! Away with the books, and one more video please.”

If you’re a dev, UX designer, or PM, and want to add visual design to your skillset, this course is tailor-made for you. Hop on over to learnui.design for more.

And yes, I do have the best domain name ever — thanks for mentioning it.

Two final plugs before we say our farewells: I have a Design Newsletter to which I intentionally send out very few but very high-value design articles (like the one above). If you want to see stuff like this every month (or 6) in your inbox (basically all of it unpublished anywhere else), you should take a moment and sign up.

Finally: need a freelance UX/UI designer? Hire me.