就UI设计而言，我非常自学，我总是想知道为什么这么多的文章和书籍谈论色彩理论和调色板。根据我的经验，使用“拆分互补调色板”约为0％预测我制作漂亮的设计。

对于那种事我还有另一个词：没用。

因此，如果色彩理论不能为UI设计中的色彩提供坚实的基础，那么它是什么呢？

让我对ya'发表意见：颜色修改。这是对颜色的调整，而不是从颜色理论帽子中挑选它们。

或者，换句话说：着色界面设计的基本技能是能够将一种基色修改为许多不同的变化。

我知道这听起来有点奇怪。听我说。我将为您提供一个在UI设计中调整颜色的框架。

该框架将：

* 允许您为UI中的任何目的修改一种主题颜色（这非常强大，而且，正如我们将看到       的，像facebook这样的应用已经在做什么）

* 帮助您预测哪些颜色变化看起来不错

* 使色彩显得更客观（“主观”往往是“我还没有想出如何工作的”一个字-这是一个字，你听到吨，当人们谈论的颜色）

更暗更轻的变化

我注意到许多外观漂亮的界面有一件事是它们通常在特定的主题颜色上有更暗更轻的变化。

您不认为搜索栏只是半透明的黑色叠加层，是吗？剧透警报：事实并非如此。在该蓝色上没有覆盖黑色的不透明度将为您提供搜索栏的颜色。这是一些其他魔法挑选的变种。

快点，现在看看漂亮的冲浪预测应用程序Swell Grid。

沙BAM。我们刚刚遇到了大量的变化。那里有多少？前往网站和你自己算他们。实际上，此页面上的所有内容都是初始蓝色的变体。

或者，这是另一个简单的例子：

甚至元素状态也是颜色的变化。这不是最好描述为“3个蓝调的调色板”。这是一个蓝色的变化。

但这引出了一个问题：你如何实际修改颜色以获得良好的变化？

我们会到达那里，但我希望你从头开始理解这些东西。所以这是我们的2个可信赖的原则来解决这个问题：

1、我们将以现实世界为参考线索。即使我们的界面是“假的”，我们仍然会像现实世界       一样疯狂地复制，因为经过几十年在现实世界中看到事物，我们只希望光和颜色以       某种方式工作。

2、 我们将使用HSB颜色系统。缺点是：它是最直观的颜色系统，具有广泛的用途           （就我的目的而言，Sketch和Photoshop）。如果你不知道什么是色调，饱和度          和亮度，让我们休息并在10点回来。

真实世界的颜色变化

好吧，环顾四周。什么“颜色变化”你无疑会看到你每次浏览房间时的二十几个实例？

阴影。

您可以将阴影视为基色的较暗变化。

现在，让我们跳进素描和让我们的拾色器，并找出究竟发生了什么，当一个影子落在我们的珊瑚墙。

就像我提到的那样，我们将在HSB中解决这个问题。

注意：显示器/图像颜色配置文件可能会使这些精确测量值与您不同。

亮度向下移动 - 好的，这很明显。但是坚持 - 在我们进行过多概括之前，让我们看看另一个例子。

摄影：Matthias Uhlig

阴影在古巴的运作方式是否相同？我们即将发现。

好的，现在我们可以比较和对比。注意一个模式？

当颜色存在阴影变化时，您可以预期亮度会下降并且饱和度会上升。我们只是在两个例子中看过这个，但据我所见，这是一个可靠的规则。

现在的色调有点疯狂-它去下来的珊瑚墙的影子，而向上的水鸭墙的影子。还有就是对于一个解释，但重要的是要少得多，有点比饱和度/亮度更深奥的-所以我们会回来以后色调。

规则

让我们更多地解开这些概念。

较暗的颜色变化=较高的饱和度+较低的亮度

如果你回顾我们的Facebook搜索栏示例，你会发现这正是发生了什么。

随着亮度下降，饱和度上升。搜索栏不能覆盖在基础蓝色上的黑色不透明度的原因是因为在HSB中，添加黑色相当于降低亮度。相反，我们希望在增加饱和度的同时降低亮度。黑色不会为我们的颜色添加任何饱和度！

为什么在现实世界中，较暗的颜色与较高的饱和度相关？我没有丝毫想法。但我总能做出一些事情：这是因为随着光线强度（亮度）超过颜色强度（饱和度），颜色必然会变得更加褪色 - 反之亦然。

这可能是完整的BS，但它那种是有道理的，对不对？

较浅的颜色变化=较低的饱和度+较高的亮度

现在，作为精明且博学的读者，你是，你可能猜到了相反的变换，它为我们提供了更暗的变化会给我们带来更轻的变化。

然后你把它钉在了一边。

当然，我们可以更进一步。如果我们继续降低饱和度并提高亮度直到奶牛回家，我们最终会在哪里？

这里：

你能想到的制作更轻的变化作为加入白。在Sketch等人中有两种非常简单的方法可以将颜色添加到颜色中：

1、减少元素的不透明度（如果它在白色背景上）

2、在元素顶部添加半透明的白色层

最重要的事情

如果您只记得本文中的一件事，请记住：

通过降低亮度和增加饱和度来实现更暗的颜色变化。通过增加亮度和降低饱和度来实现更亮的颜色变化。

有了这个简单的想法，你就可以用一种颜色做出惊人的事情。

事实是，元素之间的颜色变化很多 - 甚至是相同元素的状态 - 只是简单的颜色修改。

这是Harvest，我使用和爱的时间跟踪应用程序。

看看标题。悬停状态较轻。选定的状态更暗。

或者查看绿色的New Entry按钮。

悬停状态是更暗的变化 - 更高的饱和度，更低的亮度。

你会一次又一次地使用它。

公平地说，并非每个设计都100％遵循此规则。在上面的Harvest标题中，所选状态只是较低的亮度（饱和度不变），而悬停状态只是较低的饱和度（亮度不变）。但我们已经看过颜色在现实世界中是如何工作的，我们知道为什么这些设计看起来很好是因为它们接近这里列出的原则。

顺化怎么样？

说到接近这里提出的原则，我们应该谈谈色调。我也在上面说过，但是需要重复一遍：色调是整个饱和度和亮度向相反方向移动的次要因素，你可以在进行颜色调整时完全忽略它。

话虽这么说，这是最简短的解释。

首先，每种颜色都有一种“感知亮度”。这称为光度。

即使这个蓝色和这个黄色都是100％的HSB亮度，它看起来更亮？

我的意思是，就像在街上问任何人：哪个更亮？

“嗯。黄色。黄色？”

谢谢，rando。你刚刚发现了光度。

“所以我说对了？”

是的，是的，你是。即使你保持亮度和饱和度不变，只是改变色调，你也会得到一系列的亮度或感知的亮度，我们测量的值在0到100之间。

这些是我们30°间隔的色调，均为100％饱和度和100％亮度。

而这里是我们的色调复制，投入光度混合模式（在白色背景上-这是至关重要的，如果你沿着素描以下添加），并用所得灰色的亮度覆盖。这使我们可以测量原始颜色的亮度。

在Luminosity混合模式中，亮灰色表示高亮度，深灰色表示低亮度。如果你考虑一下，这是完全合理的。

现在，我已经为你打印了这些数字，但是图表价值一千，对吗？

看，Sherlock，一种模式。

这个特殊的模式从上面回答了我们的问题。还记得我们看到的有时候，对于阴影，色调会向下移动，有时它会向上移动吗？为什么这样做？

嗯，首先，请注意此图表有三个最大点和三个最小点。低点是红色，绿色和蓝色。高点是青色，品红色和黄色。

这些特殊颜色会响铃吗？是。RGB和CMY是流行的颜色系统，但暂时忽略它，因为它会让你误入歧途。

重要的一点是：如果您不计算饱和度和亮度，将色调偏向红色（0°），绿色（120°）或蓝色（240°）将降低亮度或感知颜色的亮度。并且将色调移向黄色（60°），青色（180°）或品红色（300°）将增加颜色的感知亮度。

诀窍是让色调的移动与饱和度和亮度的移动相匹配。如果您想要更暗的变化，请将色调移向红色（0°），绿色（120°）或蓝色（240°），取最近者 - 反之亦然（青色，品红色和黄色），以获得更轻的变化。（当然，这假设你也降低了亮度并增加了饱和度）

这就是为什么珊瑚墙上的阴影在色调上向下移动- 它在0°时向红色移动，这是最接近21°的最小点。

这就是为什么青色墙上的阴影在色调上向上移动的原因- 它在240°时向蓝色方向移动，这是最接近194°的最小点。

心灵吹了吗？

颜色的方式

因此，当谈到颜色变化时，问问自己：我是否只需要对我已有的颜色进行更浅或更暗的变化？

（如果你想要一些干净简单的东西，答案是这样的，所以经常是的）

更暗的变化：

* 亮度下降

* 饱和度增加

* 色调（经常）向最低光度（红色，绿色或蓝色）移动

更轻的变化：

* 亮度增加

* 饱和度降低

* 色调（经常）向最大光度移动

这将允许您采用一种色调，但可以根据您的所有UI需求无限修改它，在适当的情况下使用更暗更轻的变体。

具有一种颜色和许多修改的界面

我刚刚在这里掀起了一个简单的例子。整个界面由单一颜色构成。说...... 那种深青色的阴影看起来很熟悉吗？

现在我对所有这些都非常简短。仍有许多主题需要涵盖：

在梯度和数据可视化中，色调如何更为重要？

*  当你在素描（等）时，你使用什么技术来制作更暗的变化？

*  你更多地移动饱和度或亮度吗？

*  你如何找到与你的配色方案相匹配的灰色？

*  你如何选择看起来很好的完全不相关的颜色？

*  当颜色发生冲突时，你如何解决它？

而且，当然，只是，为什么是在光度曲线RGB和CMY低/高点？

你问我很高兴。

介绍...学习UI设计

在过去的11个月里，我一直在努力创建最全面的在线视频课程，用于学习界面设计的实用技巧。

我们在这里谈论一切：

* 颜色

* 活版印刷

* 布局

* 处理

* 响应式设计

* 和更多…

该课程包含超过30个视频课程中的16个小时以上的视频。

在几乎每个视频中，你都会看到我在Sketch中的设计。这个很重要。我这里没有教授一些理论框架。相反，我向您展示的是我每天用来设计界面的提示，技巧和框架。把它想象成看着我的肩膀，因为我教会了你所知道的一切。

例如，在Spacing视频中（是的 - 这是一个完全在空白上的50分钟视频），我从一个简单的基于文本的示例开始，讨论如何处理字母间距，行距，段距，空格标题和正文之间，文本旁边的空间等

---

三米工作室“大吉大利”小组的每周优质设计文章汉化计划--10篇--《Color in UI Design: A (Practical) Framework》。

Medium英文原文链接:https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e