颜色是眼睛从光线中感知到的一种感官印象，以不同的形式转化为概念和情感。对于艺术家来说，正确的操作是非常重要的，所以在历史上，它被以多种方式和不同的方法理论化。

绘画、印刷、摄影、平面设计和界面设计都使用颜色理论来激发特定的想法和概念，利用颜色的非语言能力，而不是其他较慢的交流方式。

其中一种用来修改颜色的数字语言是HSL格式。颜色会因其色相、饱和度和亮度而改变。这三个轴为我们提供了数字世界的所有颜色，然后用十六进制数或RGB代码重新解释这些颜色。

在界面设计中，色彩心理学被用来影响用户的感知，从加强品牌认知度到在购买按钮上产生更多的点击。其他重要的结果，如改进的可用性，也可以是良好的色彩掌握的结果。

在这篇文章中，我写了六个我在设计界面时经常使用的颜色选择注意事项。

01、链接

特定的颜色与特定的情绪有关，但并不总是如此。从我们出生，我们的眼睛学习真实世界的颜色，随着时间的推移，记忆将这些颜色与特定的经验和元素联系起来。这种熟悉可以为用户提供一些关于界面目标的上下文。

02、和谐

和谐的颜色给元素以逻辑感。有很多方法可以创造和谐的色彩。其中之一是通过使用类似的颜色，也就是在色轮中相互接近的颜色。

在滚石乐队的网站上，红色和紫色的使用为我们提供了一个类似颜色的例子。在色轮中，红色在一个方向向橙色退化，在另一个方向向紫色退化。

为什么类似的颜色有吸引力?因为这是自然的颜色行为。日落不讨天空的喜欢，从橙色到紫色，海洋可以从蓝色到绿松石色，彩虹包括所有七种颜色在一个和谐的过渡。由此我们可以得出这样的结论:视觉能从类似的颜色中找到一种自然的乐趣。

建议只在温暖或寒冷之间保持这个颜色范围，因为温度也会产生相当大的和谐。在使用类似物时，也可以使用这些颜色中的饱和度和亮度来创建深度。这完全取决于你想要创建的效果和界面显示的内容。

03、对比

颜色对比给界面带来活力。另一种形式的颜色和谐是通过使用互补来实现的，这些互补是在色轮中相互面对的。通过使用互补色元素，你可以在设计中创造一种对比和动态的效果。

在Beats网站上，一个有趣的色彩组合是通过使用红色和绿色的互补色实现的。照片中与红色相邻的淡蓝色天空使购买按钮“震动”。然而，这种效果效果很好。

使用对比色可以给予界面冲击力，赋有能力和运动的效果，以及加强一些希望用户注意的相关的点。要使这些颜色和谐相处并不容易，因为误用这些颜色会造成视觉混乱，让眼睛不舒服。比例是关键。

要了解更多关于色彩对比的知识，我推荐瑞士的约翰内斯·伊滕的书《色彩的艺术》，书中他揭示了七种类型的对比理论:色相、温度、明暗、互补、饱和度、同时性和定量。无论我们选择什么类型的颜色对比，都应该在整个web/app页面中保持设计一致性。

04、规模

色彩标度降低认知负荷。保持色调，但修改闪电在不同的水平有助于分离的元素，而不超载的组成。

在这个来自Bear应用程序的屏幕截图中，我们可以看到白色的文本在第一层，灰色的文本在第二层，这样可以创建层次结构，而不会让具有相同视觉权重的消息超载视图。这也适用于熊的例子。请记住，当它们是同一色调的一部分时，这些音阶的效果很好。

UI设计中的色彩尺度也受到自然的影响，不仅是树叶、天空、海洋等元素，还有物体和阴影的体积。人的眼睛可以根据光线、深度甚至纹理来感知同一颜色的许多变化。人们期望UI颜色就像他们在现实世界中知道的那样，这并不奇怪。

我们可以说，处理颜色尺度的目的是避免添加新的颜色或色调，大脑必须处理和理解不必要的。界面设计越容易理解，就越能给用户带来愉悦。

05、比例

定义一个颜色比例平衡组成。有更多和更少的颜色存在，使明确的风格和避免不必要的颜色冲突。

在Mailchimp的主页上，黄色是主色，只应用了绿色、粉色和黑色。和其他颜色一样，黄色传达了它自己的概念，不应该与其他色调在重量上竞争。

颜色层次对于定义一个氛围是很重要的，同时，一个主要的颜色在构图中支持所有的web元素。在当前的UI设计趋势中，白色是最受欢迎的颜色，因为它保持了界面的简洁，突出了交互的颜色，提高了可读性。然而，如果你想在一个特定的页面上创建一个更有沉浸感和艺术感的效果，选择一个更饱和的颜色效果会很好。

06、交互

交互颜色在执行时要清晰，在界面上要一致。动作调用必须与背景有足够的对比，与其他组件有足够的视觉权重，以便用户可以毫不费力地识别它们。

在这张耐克应用的截图中，对动作的要求突出了构图中最饱和的颜色。在其他屏幕中，柠檬绿被保留为主要按钮，以保证用户学习的一致性。我们还注意到，圆形的形状比经典的矩形更突出。

然而，互动的颜色并不总是最饱和或最亮的，而是从屏幕上的其他元素中脱颖而出的颜色，无论是色调、形状、大小还是对比度。因此，一种交互颜色的有效性将通过用户识别交互区域和执行任务的速度来衡量。

另一方面，对动作的次要调用的权重更小，并且在视觉上更接近于信息元素。在我们的Nike应用程序示例中，配置和声音按钮表示这些交互是由于形状而不是由于颜色。这种按钮层次结构非常重要，这样用户就可以给元素一个自然的顺序，避免每个屏幕有多个主要的操作调用。

综上所述，颜色是事物的最大影响者，它影响着人们对它所处环境的感知，直接影响着其他颜色甚至是它本身。虽然对其理论的深入研究可以提高我们对设计的掌握程度，但专业色彩方案的创作过程很大程度上取决于我们的视觉体验和对现实世界的感知。让我们开始训练我们的眼睛。

作者：Leonardo Moreno