可能性范围：首选 UI 颜色指南

没有办法：颜色是视觉设计中最具影响力的创意元素。 从布景设计的迷人风景背景到像素艺术的错综复杂的构图，对色彩的深刻理解是引人注目的交流的万能钥匙。 需要证明吗？

在最近一项以品牌为重点的研究中，当参与者被要求绘制 10 家标志性公司的徽标时，只有 16% 的人能够回忆起准确的形状和设计特征。 然而，当被要求识别品牌的调色板时，正确回复的数量高达 80%。

颜色在用户界面设计领域也扮演着重要的角色。 我们每天与之交互的数字产品依赖于策略性地使用颜色来传达重要信息，因此 UX 和 UI 设计师了解如何明智地使用颜色至关重要。

在本指南中，我们将：

• 揭开色彩理论的基础，
• 为在数字界面中处理颜色提供坚如磐石的原则，
• 分享有助于建立色彩意识的资源，以及
• 使 UI 设计师能够创建自己卓越的配色方案。

本指南的目标是色彩能力，其次是色彩信心，所有这些都是为了在我们每天遇到的用户界面中实现惊人的色彩执行。

速成课程：UI 设计师的色彩理论

色彩理论是一个广阔的研究领域，拥有自己的术语、方法和科学基础。 它可能很复杂，但这不是我们想要的。 我们想要的是理解可以以闪电般快速的精度应用的颜色。 我们希望以使用形状的方式使用颜色——毫不费力、大胆而有效地。

要以这种方式使用颜色，UI 设计师必须对以下核心颜色理论概念有深刻的理解：

• 颜色是相对的。
• 饱和度过载会破坏色彩活力。
• 同时对比有利有弊。
• 基本配色方案是最好的。
• 色调总是影响价值。

让我们深入挖掘。

颜色是相对的

颜色永远不会孤立。 当人眼和大脑共同观察颜色时，它们总是受到以下因素的影响：

• 灯光照耀在颜色上
• 颜色周围的其他颜色

看看大自然的这个例子：

答：大脑和眼睛协同工作，帮助我们了解整个花实际上是鲜红色的。

B＆C：花朵阴影（B）的深棕色使花瓣脊（C）上的高光看起来比实际的暗栗色要亮得多。 从本质上讲，照射在花瓣脊上的光线和阴影的颜色协同工作，以欺骗眼睛并增强亮点。

这是另一个示例，显示了颜色的欺骗性：

在 UI 设计中，颜色相关性并不总是那么明显，因此方案中的颜色应该相互测试。 为什么？ 因为样式指南中排列精美的颜色选择在应用于界面时可能会出现问题。

大外卖？ 不要溺爱你的色彩概念。 如果在 Sketch 中被空白包围时，强调黄色的样本看起来很茂盛，但与 UI 的主要配色方案发生冲突，请找到不同的解决方案。

饱和度过载会扼杀色彩活力

色彩饱和度是色彩活力不可或缺的一部分。 然而，仅围绕高度饱和的颜色组合的方案会压倒眼睛，并且减少活力。 有了颜色，少即是多。 当与饱和度较低的颜色一起使用时，高度饱和的颜色会变得充满活力。

同时对比有利有弊

当完全相同值的颜色补色彼此相邻放置时，会发生同时对比。 效果如此强烈，以至于两种颜色相遇的点振动或脉动。

对于 UI 设计师来说，同时对比可以产生正面和负面的结果，因此了解如何控制这种视觉现象的效力非常重要。

例如，在围绕各种蓝色设计的界面中，使用与蓝色锚颜色具有相同值的互补橙色将是吸引人们注意通知图标的好方法。

但是，如果用于下拉菜单的文本和背景，同样的橙色和蓝色组合会引起偏头痛。

基本配色方案是最好的

彩虹是美丽的——在大自然中。 在 UI 设计中，必须更有选择性地使用颜色，否则它会压倒体验。 即使品牌拥有具有多种选择的高影响力调色板，最好还是表现出克制并围绕简单的配色方案构建用户界面。

以下是构建基本 UI 配色方案的两个万无一失的计划：

1. 类似的 UI 配色方案

• 这些令人赏心悦目的方案由在色轮上紧密分组的颜色组成。
• 在自然环境的照片中很容易找到类似的配色方案，尤其是植物生命，它们往往在视觉上平静。
• 类似方案的多样性来自饱和度和亮度的变化，而不是主要的色调变化。
• 使用类似方案时，尝试直接从色轮中添加一种高度饱和的颜色，以在界面中创建重点。

2. 互补的 UI 配色方案

• 互补色方案基于在色轮上相互补充的冷色和暖色的相互作用。
• 通过在互补的极端之间改变饱和度和亮度来实现颜色多样性。
• 使用太多明亮、高度饱和的颜色会破坏互补方案的影响。

色调总是影响价值

这听起来可能很奇怪，但颜色有相应的灰度值。 这是证据：

在上图中，我们有一系列亮度和饱和度为 100% 的色调，但看看当这些颜色转换为灰度时会发生什么：

繁荣！ 显示了整个灰度值范围。 为什么这对 UI 设计师很重要？ 一个字：对比。

暂时将您的想法切换到灰度。 如果你想创造对比度，你会在 50% 的基础上使用 40% 的灰度值吗？ 当然不是，但这正是当色调被排除在颜色对比度方程之外时所面临的风险。

请记住，色调总是会影响价值。

数字接口的 4 个基本色彩原则

既然我们已经简化了色彩理论并将其核心概念与 UI 设计相关联，是时候更专注于色彩在数字界面中所扮演的角色了。 这些是从每个 UI 设计项目的最初努力中必须考虑的四个颜色原则。

1. 文字和颜色之间的关系至关重要。
2. 颜色可访问性不容忽视。
3. 对比是必不可少的，但它不是万能的设计。
4. 颜色在按比例应用时效果最佳。

文本和颜色之间的关系至关重要

颜色会影响可读性。 大多数 UI 设计师原则上都理解这一点，这就是为什么我们看不到很多带有红色背景上的绿色正文的界面的原因。 取而代之的是，文本和颜色之间的张力微妙地出现，通过常见的 UI 组件（如表单、按钮、标题和图标）蔓延开来。

遵循以下简单指南，保持健康的文本/颜色关系：

• 始终避免文本和背景之间的低对比度。
• 不要对文本和背景使用互补色，尤其是当颜色具有相似的亮度和饱和度时（例如，紫色背景上的黄色文本）。
• 即使在白色背景上，也不要将正文设置为明亮的颜色。 黑色和深灰色是最容易阅读的。

不可忽视的颜色可访问性

颜色是可以交流的，但它不能是用于在 UI 中传达信息的唯一设计元素。 为什么不？ 因为一些网络用户对颜色的感知与大多数人不同（或根本没有）。

例如，如果图标中的唯一区别是颜色变化，则经历色盲的人可能无法判断产品图标何时处于“按下”状态。

此外，有些人很难看到与界面背景颜色对比度较低的重要 UI 组件。 诸如 Colorable 和 Contrast Ratio 之类的网站允许设计师快速测试一系列颜色配对的对比度可访问性。

对比度是必不可少的，但它不是万能的设计

是的，UI 设计中的颜色对比很重要。 计划，实施，从中受益。 但不要指望像魔杖一样挥动它并修复糟糕的设计。

形状、空间、大小和其他设计元素不容忽视。 颜色对比可以使糟糕的用户界面看起来很吸引人，但它不会解决糟糕的用户体验。

颜色在按比例应用时效果最佳

想象一个新闻应用程序，其中每个文本实例都设置在标题大小写中，或者一个电子商务网站设计在 9x9 图像网格上。 两者都会很糟糕！

精明的 UI 设计师按比例使用排版和重复等设计元素来增强设计层次结构。 颜色值得同样深思熟虑。 在 UI 设计中，使用过多的颜色会混淆信息的感知方式。

持续进步的色彩资源

这是一个不便的事实：用颜色设计是一种技能，必须培养技能。 大多数 UI 设计师天生就知道什么颜色搭配起来很好看（也就是颜色品味），但这并不总是转化为应用程序。

要真正掌握色彩并看到它对 UI 设计的全部影响，设计师必须实践。 幸运的是，有大量资源可以帮助您继续学习色彩和培养技能。

Ctrl+绘画

如果您是一名希望立即获得色彩信心的 UI 设计师，请从 ctrlpaint.com 开始，这是一个致力于数字绘画教学的网站。 数字绘画？ 真的吗？

绝对地。 专业概念艺术家 Matt Kohr 通过快速视频教程和动手练习教授数字色彩的使用。 课程非常简单，以“画你所见”为中心，无论是在现实世界还是想象中。

先从免费的视频库（第 11 节）开始，然后再转到Color Starter Kit中更密集的练习。

Josef Albers 和 Color App 的交互

艺术家/教育家约瑟夫·阿尔伯斯（Josef Albers）的先实践后理论方法对当代色彩相对论的理解进行了大量探索和推进。

阿尔伯斯提出单一颜色可以有“多张面孔”，并鼓励他的学生进行广泛的游戏和实验，希望“睁大眼睛”看到颜色在现实世界中的真实表现（与我们设想的象征性颜色相反）在我们的脑海中）。

1963 年，阿尔伯斯撰写了《色彩的互动》 ，这本教科书在世界艺术和设计教育中继续具有高度影响力。 为庆祝该书出版 50 周年，耶鲁大学发布了一款交互式 iPad 应用程序，该应用程序包含全文，还允许用户玩和试验阿尔伯斯的色板。

对于 UI 设计师，颜色交互应用程序提供了在数字环境中体验模拟颜色练习的机会，并亲眼目睹颜色相对性如何影响用户界面。

安德鲁·卢米斯

在 20 世纪上半叶，安德鲁·卢米斯 (Andrew Loomis) 是芝加哥美国艺术学院的杰出插画家和讲师，但他不朽的遗产是作家的遗产。 卢米斯写了六本关于商业艺术和设计的书，涵盖了从人物绘画到产品放置的一系列主题。

在他的著作《创意插图》和《画家之眼》 （均可在 archive.org 上找到）中，Loomis 删除了许多与现代 UI 设计领域相关的经久不衰的内容：

颜色上最大的错误，也是导致缺乏统一和和谐的错误，就是调色板上的颜色太多了。

当一种或两种颜色都包含另一种颜色时，任何两种颜色都会是和谐的。

颜色比其他任何美的元素都更适合实验。

其他设计师的界面

一旦达到基本的色彩能力水平，配色方案的创作就会变成一种迷人的追求。 遇到的每个界面都成为学习和批评的机会，并且观察比比皆是。

当参考其他设计师的工作变得授权时，这是 UI 设计师的发展阶段。 为何如此？ 因为参考从目的地转移到旅程，从终点转移到灵感。

所有技能水平的 UI 设计师都可以从持续记录找到的 UI 配色方案中受益。 截取屏幕截图、保留物理色彩日志、启动情绪板——无论需要什么来为未来的实施留下色彩照明时刻。

颜色太重要了，不容忽视

在设计数字界面时，颜色不是可选的考虑因素。 即使在使用最少颜色的 UI（或完全是黑白的 UI）中，UI 设计人员也必须了解为什么使用或不使用颜色以及它如何影响用户体验。

UI 设计师能够生成和实施原始配色方案也很重要。 参考其他设计师和数字产品的作品是一种有价值的做法，但当它是设计过程中进行色彩探索的唯一方法时，这就变得有限了。 能够捕捉现实世界或头脑中看到的颜色配对具有巨大的价值。

如果您是一位难以巧妙地使用颜色的设计师，或者您曾经想过“我对颜色真的没有诀窍”，请不要灰心。 用颜色进行设计不是某种形式的创意魔法或特殊的礼物。 这是一门实用的学科，建立在可以重复和改进的简单技术之上。

请记住，颜色是清晰和引人注目的设计交流的万能钥匙。 无论是谨慎实施还是鲁莽放弃，它都会影响转化率、品牌知名度和用户体验。 对于 UI 设计师来说，颜色是一个不容忽视的强大工具。

• • •

进一步阅读 Toptal 设计博客：

1. 颜色在用户体验中的作用
2. 为更好的用户体验创建 UI 样式指南
3. 用户体验和 Web 可访问性的重要性
4. 艺术与设计——一场永恒的辩论
5. 交互环境和智能空间设计