作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
迈卡·鲍尔斯的头像

弥迦书鲍尔斯

Micah通过品牌、插图和设计帮助企业打造有意义的参与.

专业知识

分享

这是没有办法的:颜色是最具影响力的创意元素 视觉设计. 从迷人的布景背景设计到像素艺术的复杂构图, 对色彩的深刻理解是令人信服的沟通的关键. 需要证明?

在最近一项以品牌为重点的研究中,参与者被要求画出10家标志性公司的标志, 只有16%的人能够回忆起准确的形状和设计特征. 然而,当被要求识别一个品牌的调色板时,正确回答的数量增加了 飙升至80%.

颜色也起着重要作用。 有影响力的作用 在用户界面设计的世界里. 我们每天与之互动的数字产品依赖于对颜色的战略性使用来传达重要信息, 所以至关重要的是 UX和UI设计师 懂得如何明智地运用色彩.

在本指南中,我们将:

  • 揭开色彩理论基础的神秘面纱,
  • 提供在数字界面中处理颜色的坚如磐石的原则,
  • 分享建立色彩意识的有用资源
  • 授权 UI设计人员 创造出自己独特的配色方案.

本指南的目标是色彩能力, 其次是色彩自信, 这一切都是为了在我们每天遇到的用户界面中实现令人惊叹的色彩执行.

UI调色板可以是彩虹般的颜色.

速成班:UI设计师的色彩理论

色彩理论是一个广阔的研究领域,有自己的术语, 方法, 还有科学基础. 这可能很复杂,但这不是我们想要的. 我们想要的是一种对颜色的理解,这种理解可以以闪电般的速度精确应用. 我们希望像使用形状一样使用颜色——毫不费力、大胆而有效.

以这种方式使用颜色, UI设计师必须对这些核心色彩理论概念有扎实的理解:

  • 颜色是相对的.
  • 饱和度过高会扼杀色彩的活力.
  • 同时对比有利有弊.
  • 基本的配色方案是最好的.
  • 色相总是影响值.

让我们开始吧.

颜色是相对的

颜色从不孤立. 当人类的眼睛和大脑一起工作来看到颜色时,它们总是受到以下因素的影响:

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

看看这个来自大自然的例子:

UI设计中的色彩相关性与自然

A: 大脑和眼睛共同作用,帮助我们理解整个花实际上是鲜红色的.

B & C: 深棕色的花朵阴影(B)使得花瓣脊(C)上的高光部分看起来比暗淡的栗色要亮得多. 本质上, 照射在花瓣脊上的光线和阴影的颜色协同工作,以欺骗眼睛并加强高光.

下面是另一个例子,说明颜色是多么具有欺骗性:

色彩相对性与用户界面设计

在UI设计中,颜色相关性并不总是那么明显,所以方案中的颜色应该如此 相互检验. 为什么? 因为你那漂亮的颜色 风格指南 在应用于接口时可能会出现问题.

App界面设计色彩错误

最大的收获? 不要纵容你的色彩概念. 如果在Sketch中被空白包围的强调黄色看起来很华丽,但与UI的主要配色方案相冲突, 寻找不同的解决方案.

饱和度过高会扼杀色彩的活力

色彩饱和度是色彩活力的组成部分. 然而, 一种由高度饱和的色彩组成的方案压倒了眼睛, 活力减弱了. 有了色彩,少即是多. 高度饱和的颜色与饱和度较低的颜色串联使用时,会变得充满活力.

美丽的调色板,饱和度和亮度

同时对比有利有弊

同时对比发生在完全相同值的颜色补色彼此相邻时. 这种效果非常强烈,以至于两种颜色的交汇点会产生振动或脉冲.

同时对比UI颜色组合

对于UI设计师, 同时对比可以产生积极和消极的结果, 所以了解如何控制这种视觉现象的力量是很重要的.

例如, 在一个围绕各种蓝色设计的界面中, 使用与蓝色锚定色相同值的补充橙色将是吸引人们注意通知图标的好方法.

然而, 同样的橙色和蓝色组合,如果用于下拉菜单的文本和背景,可能会引起偏头痛.

现代UI设计中的同步对比:糟糕的UI调色板

基本的配色是最好的

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

以下是构建基本UI配色方案的两个简单方案:

1. 类似的UI配色方案

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

UI设计色彩类比

2. 互补的UI配色方案

  • 互补配色方案是基于互补的冷色和暖色的相互作用,它们在色轮上彼此存在.
  • 颜色变化是通过改变饱和度和亮度之间的互补极端来实现的.
  • 使用太多明亮、高度饱和的颜色会破坏互补方案的效果.

UI设计色彩互补

色相总是影响值

这听起来可能很奇怪,但是颜色有相应的灰度值. 这是证明:

色彩理论UI设计

在上面的图片中, 我们有一个范围的色调在100%的亮度和饱和度, 但看看这些颜色转换成灰度后会发生什么:

颜色转换为灰度UI设计

繁荣! 显示了整个灰度值范围. 为什么这对UI设计师很重要? 一个词: 对比.

暂时把你的思绪切换到灰度. 如果你想创建对比度,你会在50%的灰度值上使用40%的灰度值吗? 当然不是,但这正是当色调被排除在色彩对比方程之外时所冒的风险.

记住,色调总是影响价值.

招聘美国全职自由UI设计师

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

现在我们已经简化了色彩理论,并将其核心概念与UI设计联系起来, 是时候更专注地看看颜色在数字界面中扮演的角色了. 这是在每个UI设计项目的最初阶段就必须考虑的四个颜色原则.

  1. 文字和颜色之间的关系至关重要.
  2. 色彩可访问性不容忽视.
  3. 对比是必要的,但它不是设计的万灵药.
  4. 颜色在按比例使用时效果最好.

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

颜色影响可读性. 大多数UI设计师原则上都理解这一点, 这就是为什么我们很少看到红色背景上有绿色正文的界面. 而不是, 文字和色彩之间的张力微妙地显现出来, 通过常见的UI组件(如表单)渗透进来, 按钮, 头, 和图标.

遵循以下简单的原则来维持健康的文本/颜色关系:

  • 始终避免文本和背景之间的低对比度.
  • 不要在文本和背景中使用互补色, 特别是当颜色具有相似的亮度和饱和度时.g.(紫色背景黄色文字).
  • 即使在白色背景下,也不要将正文设置为明亮的颜色. 黑色和深灰色最容易辨认.

漂亮的UI与糟糕的颜色对比

色彩可访问性不容忽视

颜色是交流的,但它不能是唯一的 设计元素 用于在UI中传递信息. 为什么不? 因为一些网络用户对颜色的感知与大多数人不同(或者根本没有).

例如, 如果图标的唯一区别是颜色的变化,那么色盲的人可能无法判断产品图标何时处于“按下”状态.

色彩易访问性设计示例

另外, 有些人很难看到与界面背景颜色对比较低的重要UI组件. 等网站 似是而非的对比度 允许设计师快速测试一系列颜色搭配的对比度 可访问性.

对比是必要的,但它不是设计的万灵药

是的,颜色对比在UI设计中很重要. 为它做计划,实施它,并从中受益. 但不要指望像魔术棒一样挥动它就能修复糟糕的设计.

形状、空间、大小等 设计元素 不容忽视. 颜色对比可以让糟糕的UI看起来更有吸引力,但它无法修复糟糕的用户体验.

颜色在按比例使用时效果最好

想象一个新闻应用,其中每个文本实例都设置为标题大小写 电子商务网站 设计在一个9x9的图像网格. 两者都很糟糕!

设计层次的糟糕例子

雇佣精明的UI设计师 设计元素 像排版和重复的比例,以提高设计层次. 颜色同样值得深思. 在UI设计中,使用太多的颜色会混淆信息的感知方式.

持续进步的色彩资源

这是一个难以忽视的事实: 设计 用颜色是一种技巧,而技巧是必须培养的. 大多数UI设计师都有一种天生的颜色搭配感(也就是色彩品味)。, 但这并不总能转化为应用.

要真正掌握色彩并看到它对UI设计的全面影响,设计师必须实践. 幸运的是,有很多资源可以帮助你继续学习颜色和培养技能.

Ctrl +油漆

如果你是一名UI设计师,想要获得即时的色彩自信,那就从下面开始 ctrlpaint.com,一个致力于数字绘画指导的网站. 数字绘画? 真的?

绝对. 专业概念艺术家马特·科尔通过快速视频教程和动手练习教授数字色彩的使用. 课程非常简单,以“画出你所看到的”为中心,无论是在现实世界还是在想象中.

先从 免费视频库 (第11节),然后再进行更密集的练习 彩色入门工具包.

数字色彩理论教程

约瑟夫·阿尔伯斯和色彩应用程序的互动

当代对色彩相对性的理解是由画家进行了大量的探索和发展的 实践中,之前理论 艺术家/教育家约瑟夫·阿尔伯斯的方法.

阿尔伯斯提出,一种颜色可以有“许多面”,并鼓励他的学生进行广泛的游戏和实验,希望“睁开眼睛”,看到颜色在现实世界中的真实行为(而不是我们脑海中想象的象征性颜色)。.

1963年,阿尔伯斯撰写了 色彩的相互作用这本教科书在世界艺术和设计教育中仍然具有很大的影响力. 为了庆祝这本书出版50周年,耶鲁大学发行了一份新书 交互式iPad应用程序 包含全文,但也允许用户玩和实验阿尔伯斯的色板.

UI设计配色方案应用程序

对于UI设计师来说, 色彩的相互作用 App提供了一个在数字环境中体验模拟色彩练习的机会,并亲眼看到色彩相关性如何影响用户界面.

安德鲁。鲁姆斯

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

UI设计色彩来源于传统绘画

在他的书中 创意说明画家之眼 (两者均可于 存档.org), Loomis留下了一些与现代UI设计领域相关的经久不衰的台词:

颜色上最大的错误, 导致缺乏统一与和谐, 调色板上的颜色太多了吗.

任何两种颜色都是和谐的,只要其中一种或两者都含有另一种颜色的一部分.

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

其他设计师的界面

一旦达到基本的色彩能力水平, 配色方案的创造是一种迷人的追求. 遇到的每个界面都成为学习和批评的机会, 观察结果比比皆是.

这是UI设计人员在参考工作时的开发阶段 其他设计师 成为授权. 怎么这么? 因为参照从目的地到旅程,从终点到灵感.

UI配色方案示例

所有技能水平的UI设计师都可以从持续记录已发现的UI配色方案中获益. 截屏, 写彩色日志, 创建一个情绪板——无论如何,它都可以为未来的实现留下色彩照明的印记.

颜色太重要了,不容忽视

当涉及到数字界面的设计时,颜色不是一个可选的考虑因素. 即使在使用最少颜色的ui中(或那些完全是黑白的), UI设计师必须理解这一点 为什么 颜色是否被使用和 如何 这会影响用户体验.

同样重要的是,UI设计师有能力生成和执行原始的配色方案. 参考其他设计师和数字产品的作品是一种有价值的做法, 但当这是设计过程中唯一的色彩探索方法时,这就变得有限了. 能够捕捉在现实世界或心灵之眼中看到的颜色配对具有巨大的价值.

如果你是一名设计师,一直在努力巧妙地使用颜色,或者你曾经想过, “我对颜色没什么特别的感觉,不要气馁. 设计 with color isn’t some form of creative wizardry or special gifting; it’s a practical discipline founded on simple techniques that can be repeated 和 improved upon.

记住,色彩是设计传达清晰和引人注目的关键. 无论是谨慎实施还是鲁莽放弃, 它会影响转换, 品牌知名度, 以及用户体验. 对于UI设计师来说,颜色是一个不可忽视的强大工具.

了解基本知识

  • 什么是调色板?

    在数字设计中,调色板是指设计师可以使用的颜色范围. 然而,这些颜色并不一定是和谐的.

  • 什么是配色方案?

    配色方案是一种有意搭配的颜色的选择,这些颜色彼此和谐. 配色方案通常是根据色轮所建议的逻辑关系来组合的.

  • 用户界面的功能是什么?

    用户界面允许人与计算机进行交互. 这种交互, 这通常是视觉上的, 是否可以通过一系列设备(如移动触摸屏)实现, 一个键盘, 或者控制面板.

就这一主题咨询作者或专家.
预约电话
迈卡·鲍尔斯的头像
弥迦书鲍尔斯

位于 温哥华,华盛顿州,美国

成员自 2016年1月3日

作者简介

Micah通过品牌、插图和设计帮助企业打造有意义的参与.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.