在UI设计中，我一直都是自学成才的，我总想知道为什么这么多文章和书籍谈论色彩理论和调色板。根据我的经验，使用“分割补色调色板”对于我制作漂亮外观设计的预测大约为0%。
对于这种事我还有另一个词：无效的
因此，如果色彩理论不能为UI设计中的颜色提供坚实的基础，那么会发生什么呢？
让我对你抛出一个意见：颜色修改。这是对颜色的调整，而不是从颜色理论中挑选出来。
或者，另一种说法:着色界面设计的基本技能是能够将一种基本颜色修改成许多不同的变体。
我知道这听起来优点奇怪。听我说，我将给你一个调整UI设计颜色的框架
该框架将：
允许你修改一个主题颜色，基本上可以用于您的用户界面的任何目的（这是非常强大的，而且，正如我们将看到的，像facebook这样的应用程序已经在做什么）
·帮助你预测什么颜色的变化会看起来很好。
·让颜色看起来不那么主观
我们很酷吗？我们很酷？
酷
深和浅的变化
我注意到一个很好到界面是，它们在特定到主题上经常有深和浅的变化
你不认为这个搜索栏只是一个半透明的黑色叠加，是吗？剧透警告：事实并非如此。黑色叠加在蓝色上的不透明度会给你搜索栏的颜色。这是一种魔法的变化。
快，现在看看Swell Grid，美丽的冲浪预测应用程序。
我们刚刚遇到了一大堆变化。那里有多少？去网站，并自己数一数。实际上，此页面上的所有内容都是最初蓝色的变体。
或者，这里是另一个简单的例子：
即使元素状态也是颜色的变化。这不是最好的描述为“3蓝调”。这是一个蓝色的变化。
但是这引出了一个问题：你如何修改颜色以获得良好的变化？
我们会讲到那里，但我希望你从头开始理解这些东西。所以这里是我们的2个可靠的原则来解决这个问题：
1.我们将在真实的世界寻找参照线索。尽管我们的界面是“假的”，但我们仍然像现实世界中的疯狂一样复制，因为在现实世界中经过几十年的观察，我们只希望光线和颜色在某些方面起作用。
2.我们将使用HSB颜色系统。它的缺点是：它是最直观的颜色系统，具有广泛的用途（Sketch和Photoshop）。如果你不知道是什么色相，饱和度和亮度，让我们休息一下。10分钟之后见面。
真实世界的颜色变化
好吧，环顾四周。什么“颜色变化”，你无疑每次看到你的房间周围看到二十几个实例？
阴影。
你可以将阴影想象成基本颜色上深的变化。
跟着我
现在，让我们跳到sketch并获取我们的拾色器，并确切了解当阴影落在我们的珊瑚墙上时发生的情况。
就像我刚才提到的那样，我们将在HSB中进行分析。
亮度下降 - 好吧，这很明显。但是，坚持下去 - 在我们推断太多之前，让我们看看另一个例子。
摄影：Matthias Uhlig
这幅图的阴影效果如何？我们即将发现。
好的，现在我们可以比较和对比。注意到一个模式。
当有一个颜色的阴影变化，你可以期望亮度下降和饱和度上升。我们只是在两个例子中看到了这一点，但就我所见，这是一条可靠的规则。
现在的色调有点疯狂-它向下延伸到珊瑚墙的阴影处，然后向上延伸，形成了一层墙的阴影。对此有一个解释，但它比饱和度/亮度更不重要，也更深奥一些——所以我们稍后会回到色相。
让我们再解开一下这些概念。
深的颜色变化=较高的饱和度+较低的亮度
如果你回头看看我们的Facebook搜索栏例子，你会发现这正是发生了什么。
色调从360°移动1°，这实际上是一个舍入误差。
随着亮度下降，饱和度上升。搜索栏不能是覆盖在基本蓝色上的不透明度的原因是因为在HSB中，添加黑色等同于降低亮度。相反，我们希望在减少亮度的同时增加饱和度。黑色不会为我们的颜色添加任何饱和度！
为什么在现实世界中，深颜色与较高的饱和度有关系？我一点都不知道。但我总是可以有一些想法：这是因为随着光线强度（亮度）超过颜色强度（饱和度），颜色必然变得更加清晰 - 反之亦然。
这可能是完整的BS，但它那种是有道理的，对不对？
浅的颜色变化=更低的饱和度+更高的亮度
现在，作为你是挑剔的，博学的读者，你可能会猜到，相反的变化给了我们更深的变化，会给我们更浅的变化。
你真高兴地钉上了它。
当然，我们可以更进一步。如果我们继续降低饱和度并提高亮度直到顶部，我们最终会在哪里结束？
这里：
我们以白色结束。
你可以考虑做更浅的变化，因为增加白色。在Sketch中，有两种非常简单的方法可以将白色添加到颜色中：
1.减少元素的不透明度（如果它在白色背景上）
2.在元素顶部添加一层半透明的白色
最重要的事情
如果您只记得本文中的一件事，请记住这一点：
通过降低亮度和增加饱和度来实现较深的颜色变化。通过增加亮度和降低饱和度来实现更浅的颜色变化。
有了这个简单的想法，你将能够用一种颜色做出令人惊叹的事情。
事实是，元素之间颜色的多种变化 - 甚至是相同元素的状态 - 只是简单的颜色修改。
这里是收获，对爱的时间跟踪应用程序。
看看标题。悬停状态较浅。所选状态较深。
或者看看绿色的New Entry按钮。
悬停状态是一个较深的变化 - 较高的饱和度，较低的亮度。
你会一次又一次地使用它。
公平地说，并非所有的设计都100％的遵循这个规则。在上面的Harvest标题中，所选状态只是较低的亮度（饱和度不变），悬停状态只是较低的饱和度（亮度不变）。但是我们已经研究过现实世界中的颜色是如何运作的，而且我们知道为什么这些设计看起来不错，因为它们与这里列出的原则相近似。
关于色相？
说到这里所说的原则，我们应该谈谈色相。我也是这样说过的，但需要重申的是：色相在整个饱和度和亮度方向上都是次要的，因此在进行颜色调整时，通常可以完全忽略它。
这里是最简单的解释。
首先，每种颜色都有一种“感知亮度”。这就是所谓的光度。
即使这个蓝色和这个黄色都是100％HSB亮度，看起来更亮？
我的意思是，像在街上问任何人：哪个更明亮？
“嗯。黄色。黄色？”
谢谢。你刚刚发现光度。
“所以我是对的？”
是的，是的，你是。即使你保持亮度和饱和度不变，只是变化色调，你也会得到一系列亮度或感知亮度，我们测量的亮度值在0到100之间。
这些是我们的色相，间隔30°，全部在100％饱和度和100％亮度。
而这里是我们的色调复制，投入光度混合模式（在白色背景上-这是至关重要的，如果你沿着sketch以下添加），并用所得灰色的亮度覆盖。这给了我们一个原始颜色亮度的度量。
在亮度混合模式下，明亮的灰色意味着高亮度，深灰色意味着低亮度。如果你想一下，这是非常合理的。
现在，我已经为您打印了这些数字，但图表值得一千个数字，对吧？
看，Sherlock，一种模式。
这个特定的模式。请记住我们刚看到的上面的案例，如果有影子，色调会向下移动，有时它会向上移动？它为什么这样做？
那么，首先请注意，这个图有三个最大点和三个最小点。低点是红色，绿色和蓝色。高点是青色，品红色和黄色。
这些特殊的颜色会让人想起什么？是。RGB和CMY是流行的色彩系统，但暂时忽略它，因为它将你引向歧途。
重要的是：如果不计算饱和度和亮度，则将色调移向红色（0°），绿色（120°）或蓝色（240°）会降低发光度或感知到的颜色亮度。将色调移向黄色（60°），青色（180°）或品红色（300°）会增加颜色的感知亮度。
诀窍就是让色调的运动与饱和度和亮度的运动相匹配。如果您想要深色的变化，请将色调朝向红色（0°），绿色（120°）或蓝色（240°）（取其最接近者），反之亦然（青色，品红色和黄色）以获得浅色的变化。（当然，这也假设你也在降低亮度并增加饱和度）
这就是为什么珊瑚墙上的阴影以色调向下移动- 它正在向0°移动，这是最接近21°的最小点。
这就是为什么蓝绿色墙上的阴影以色调向上移动- 它正在向240°偏移，这是最接近194°的最小点。
颜色的方式
所以当谈到颜色变化时，问问自己：我需要一种颜色变浅或变深的颜色，我已经有了吗？
（如果你想要一些干净而简单的东西，答案是如此，往往是的）
更深的变化：
·亮度下降
·饱和度增加
·色调（经常）转向最小亮度（红色，绿色或蓝色）
更轻的变化：
·亮度增加
·饱和度下降
·色调（通常）转向光度最大值
这将允许你采取一种色调，但为了所有的用户界面需求，无限修改它，在适当的地方使用较暗和较淡的变化。
与接口一个颜色和许多修改
我只是在这里举了一个快速示例。整个界面由单一颜色构成。说...... 那深青色的眼影看起来很熟悉吗
加我微信一起讨论设计问题：
更多的设计请关注：
Dribbble：https://dribbble.com/yanruijiao2
原文出处：
https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e
网友评论