各种可能性（Go-To UI颜色指南） _UI

本文概述

速成课程：UI设计师的色彩理论
数字接口的4种基本颜色原理
持续发展的色彩资源
颜色太重要了, 不可忽略

无法解决：色彩是视觉设计中最具影响力的创意元素。从迷人的布景场景背景到复杂的像素艺术构图, 对色彩的深刻理解是吸引人的交流的主要关键。需要证明吗？
当最近参加一项针对品牌的研究的参与者被要求绘制10家标志性公司的徽标时, 只有16％的人能够回忆起准确的形状和设计特征。但是, 当被要求识别品牌的调色板时, 正确答复的数量高达80％。
颜色在用户界面设计领域也起着重要的作用。我们每天与之互动的数字产品依赖于色彩的战略用途来传达重要信息, 因此, UX和UI设计师必须了解如何明智地运用色彩, 这一点至关重要。
在本指南中, 我们将：

揭开色彩理论的基础,
提供在数字接口中处理颜色的坚实原则,
共享有用的资源以增强色彩意识, 以及
使UI设计师能够创建自己的出色配色方案。

本指南的目标是色彩能力, 然后是色彩置信度, 所有这些都是为了在我们每天遇到的用户界面中实现出色的色彩执行效果。

文章图片
速成课程：UI设计师的色彩理论颜色理论是一个具有自己的术语, 方法论和科学基础的广阔的研究领域。可能很复杂, 但这不是我们想要的。我们想要的是对颜色的理解, 可以以闪电般的精确度应用它。我们希望轻松, 大胆且有效地使用颜色, 就像使用形状一样。
要以这种方式使用颜色, UI设计人员必须对以下核心颜色理论概念有扎实的理解：

颜色是相对的。
饱和过载会杀死色彩鲜艳度。
同时进行对比有利弊。
基本的配色方案是最好的。
色相总是会影响价值。

让我们深入。
颜色是相对的
颜色永远不会孤单。当人的眼睛和大脑共同努力观察颜色时, 它们始终受以下因素影响：

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

从大自然中查看以下示例：

文章图片
观察自然界中的阴影和高光是查看工作中颜色相对性的简便方法。
答：大脑和眼睛协同工作以帮助我们了解整个花朵实际上是鲜红色的。
B和C：花朵阴影(B)的深棕色使花瓣的脊(C)上的高光看上去比暗淡的栗色更为明亮。本质上, 照在花瓣脊上的光线和阴影的颜色可以协同作用, 欺骗眼睛并增强高光。
这是另一个显示欺骗性色彩的示例：

文章图片
两个内部盒子的色相, 饱和度和亮度都相同。但是, 左侧的内部框似乎比右侧的内部框暗, 因为其周围的颜色较浅。
在用户界面设计中, 颜色相对性并不总是那么明显, 因此, 方案中的颜色应该相互进行测试。为什么？因为将样式表中排列精美的颜色选择应用于界面时可能会出现问题。

文章图片
作为孤立的色板看起来不错的颜色并不总是在用户界面中协同工作。在UI设计过程中, 彼此之间测试颜色(尤其是对比)是一个简单但至关重要的步骤。
外卖？不要混搭你的色彩概念。如果在Sketch中的空白包围时, 带有黄色的重音色看起来很郁郁葱葱, 但与UI的主要配色方案相冲突, 请找到其他解决方案。
饱和过载可消除色彩鲜艳度
颜色饱和度是颜色鲜艳度不可或缺的部分。但是, 仅在高度饱和的颜色周围组装的方案会使眼睛不知所措, 并且减少了鲜艳度。有了颜色, 少即是多。当与饱和度较低的颜色串联使用时, 高度饱和度的颜色将变得鲜艳。

文章图片
左：该组中的颜色具有100％的饱和度和亮度, 但没有一种颜色比其他颜色更鲜明, 并且总体方案是华丽的。
右：左上方的橙色和右上方的紫色没有改变, 但是两者都显得更加鲜艳, 并且由于周围的色彩饱和度较低, 因此该方案更加和谐。
同时对比有利弊
当完全相同值的颜色补码彼此相邻放置时, 会发生同时的对比度。这种效果非常强烈, 以至于导致两种颜色相遇的点发生振动或脉动。

文章图片
注意蓝色和橙色相交处的视觉张力。这是同时对比, UI设计人员可以利用动态色彩效果来获得极大的优势。
对于UI设计师而言, 同时进行对比会产生正面和负面的影响, 因此了解如何控制这种视觉现象的效力非常重要。
例如, 在围绕各种蓝色设计的界面中, 使用与蓝色锚定颜色具有相同值的互补橙色将是吸引注意通知图标的好方法。
但是, 如果用于下拉菜单的文本和背景, 则相同的橙色和蓝色组合将引起偏头痛。

文章图片
同时对比并不适合每个UI设计决策, 尤其是涉及文本的地方。
基本的配色方案是最好的
在自然界中, 彩虹是美丽的。在UI设计中, 必须更加有选择地使用颜色, 否则颜色会给用户带来沉重的负担。即使品牌拥有具有多种选择的高影响力调色板, 最好还是表现出克制并围绕简单的配色方案建立用户界面。
【各种可能性（Go-To UI颜色指南）】这是用于构建基本UI配色方案的两个简单计划：
1.相似的UI配色方案

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

文章图片
通过在暖色和冷色之间进行选择并进行饱和度试验, 很容易以类似方案创建” 视觉情绪” 。
2.互补的UI配色方案

互补的配色方案基于色轮上彼此相对存在的冷色和暖色的互补作用。
通过在互补的极端之间改变饱和度和亮度来实现颜色的变化。
使用太多明亮, 高度饱和的颜色会破坏互补方案的影响。

文章图片
红色和绿色是互补色, 并且选择了一些不那么饱和的变体, 将方案结合在一起。
色相总是影响价值
这听起来可能很奇怪, 但是颜色具有相应的灰度值。这是证明：

文章图片
在上图中, 我们在100％的亮度和饱和度下具有一系列色相, 但请看一下将这些颜色转换为灰度时会发生什么：

文章图片
即使第一行的颜色具有100％的亮度和饱和度, 它们相应的灰度值也会发生很大变化。
繁荣！显示了整个灰度值范围。为什么这对UI设计人员很重要？一句话：对比。
暂时将你的想法切换为灰度。如果要创建对比度, 是否会在50％的基础上使用40％的灰度值？当然不是, 但这恰恰是色差方程中遗漏了色相时的风险。
请记住, 色调总是会影响价值。
数字接口的4种基本颜色原理现在, 我们已经简化了颜色理论并将其核心概念与UI设计相关联, 现在该更加集中地研究颜色在数字界面中的作用。这些是从每个UI设计项目的最早工作中必须考虑的四个颜色原则。

文字和颜色之间的关系至关重要。
颜色可访问性不可忽略。
对比度是必不可少的, 但它并不是万能的设计。
按比例应用颜色效果最佳。

文本和颜色之间的关系至关重要
颜色会影响可读性。大多数UI设计人员原则上都了解这一点, 这就是为什么我们在红色背景上看不见带有绿色正文文本的界面的原因。取而代之的是, 文本和颜色之间的张力会微妙地出现, 并通过常见的UI组件(例如表单, 按钮, 标题和图标)蔓延。
遵循以下简单准则, 保持健康的文本/颜色关系：

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

文章图片
此状态注释的配色方案可能在视觉上很吸引人, 但是由于背景和文本之间的对比度不足而危及用户体验。
颜色可访问性不可忽略
颜色具有交流性, 但它并不是UI中用于传达信息的唯一设计元素。为什么不？因为某些网络用户对颜色的感觉与大多数人不同(或根本没有)。
例如, 如果图标中的唯一区别是颜色变化, 那么经历色盲的人可能无法分辨产品图标何时处于其” 按下” 状态。

文章图片
在向用户传达信息时, UI设计人员必须通过将颜色更改与其他视觉提示(例如形状和填充)配对来努力实现Web辅助功能。
此外, 有些人很难看到与界面背景颜色对比较差的重要UI组件。诸如可着色和对比度之类的站点使设计人员能够快速测试一系列颜色对, 以提高对比度的可及性。
对比度是必不可少的, 但这并不是设计的全部
是的, UI设计中的颜色对比度很重要。计划, 实施, 从中受益。但是不要期望像魔术棒一样挥动它并修复不良的设计。
形状, 空间, 尺寸和其他设计元素一定不能忽略。色彩对比可以使糟糕的用户界面看起来很吸引人, 但是并不能解决不良的用户体验。
按比例应用颜色效果最佳
想象一下一个新闻应用程序, 其中每个文本实例都设置为标题大小写, 或者在9× 9图像网格上设计的电子商务网站。两者都太可怕了！

文章图片
由于标题, 日期, 作者和正文均具有相同的字体大小, 因此阅读体验受到阻碍, 并且没有一条信息能脱颖而出。当UI设计器使用颜色重载接口时, 也会发生类似的问题。
精明的UI设计师按比例使用了版式和重复等设计元素来增强设计层次。颜色值得同样深思熟虑。在UI设计中, 使用过多的颜色会混淆信息的感知方式。
持续发展的色彩资源这是一个不便的事实：色彩设计是一项技能, 必须发展技能。大多数UI设计师都对哪种颜色看起来很好(也就是颜色味道)有着天生的感觉, 但这并不总是转化为应用程序。
要真正掌握颜色并查看其对UI设计的全面影响, 设计师必须进行实践。幸运的是, 有大量资源可以帮助你继续进行色彩学习和技能建设。
Ctrl +绘画
如果你是想要立即获得色彩信心的UI设计师, 请从ctrlpaint.com(致力于数字绘画教学的网站)开始。数字绘画？真？
绝对。专业概念艺术家Matt Kohr通过快速视频教程和动手练习来教授数字色彩的使用。该课程非常简单, 并且以” 绘画所见即所得” 为中心, 包括物理世界和想象力。
从免费的视频库(第11节)开始, 然后再进入Color Starter Kit中的更深入的练习。

文章图片
马特·科赫(Matt Kohr)的数字概念画表现出对色彩理论的精通, 他的教学视频既有趣又易于遵循。
约瑟夫·阿尔伯斯(Josef Albers)与Color App的互动
通过艺术家/教育家约瑟夫·阿尔伯斯(Josef Albers)的实践(以前)理论方法, 对色彩相关性的当代理解进行了广泛的探索和发展。
阿尔伯斯提出, 一种颜色可以具有” 许多面孔” , 并鼓励学生们进行广泛的玩耍和实验, 希望” 睁开眼睛” 看到颜色在现实世界中的真实表现(与我们设想的象征性颜色相反)在我们的脑海中)。
1963年, 阿尔伯斯(Albers)撰写了《色彩的相互作用》(Interaction of Color), 这本教科书在世界艺术和设计教育领域仍然具有很高的影响力。为庆祝该书出版50周年, 耶鲁大学发布了一个互动iPad应用程序, 该程序不仅包含全文, 还允许用户玩和体验Albers的色板。

文章图片
实验是使色彩变得更好的最好方法之一。 “ 颜色交互” 应用程序是UI设计人员创建自定义调色板并查看颜色之间如何关联的一种简单直观的方法。
对于UI设计师而言, “ 色彩交互” 应用程序提供了一个机会, 可以在数字环境中体验模拟色彩练习, 并直接了解色彩相对性如何影响用户界面。
安德鲁·鲁米斯(Andrew Loomis)
在20世纪上半叶, 安德鲁·鲁米斯(Andrew Loomis)是芝加哥美国艺术学院的著名插画家和讲师, 但他的不朽遗产是作家。鲁米斯撰写了六本有关商业艺术和设计的书, 涵盖了从人物素描到产品放置的一系列主题。

文章图片
尽管最初是为画家和插画家而写的, 但安德鲁·鲁米斯(Andrew Loomis)的著作《创意插图》提供了实用的色彩见解, UI设计师在设计界面时可以依靠这些色彩。
Loomis在他的著作《 Creative Illustration and Painter of Painter》(均可在archive.org上找到)中删去了许多与UI设计的现代领域相关的经久不衰的线条：

色彩上最大的错误是调色板上的颜色过多, 这是导致缺乏统一感和和谐感的原因。

当其中一种或两种包含另一种时, 任何两种颜色都是和谐的。

颜色比其他任何美丽元素更适合尝试。

其他设计师的界面
一旦达到了基本的色彩能力水平, 配色方案的创建就会发展为一种引人入胜的追求。遇到的每个界面都变成了学习和批评的机会, 观察也比比皆是。
这是UI设计师开发阶段的参考其他设计师的工作。为何如此？因为引用从目的地移动到旅程, 从端点到灵感。

文章图片
寻找界面色彩灵感吗？试试Webby Awards网站。它充满了按行业特定类别组织的令人难以置信的示例。
保持对发现的UI配色方案的持续记录, 可以使所有技能水平的UI设计师受益。截取屏幕截图, 保留实际的彩色日记本, 启动公告板-无论需要花多少时间来刻印彩色照明, 以备将来使用。
颜色太重要了, 不可忽略在数字接口的设计上, 颜色不是可选的考虑因素。即使在使用最少颜色的UI(或完全是黑白的UI)中, UI设计人员也必须了解为什么使用或不使用颜色以及这如何影响用户体验。
UI设计人员必须具有生成和实施原始配色方案的能力, 这一点也很重要。引用其他设计师和数字产品的工作是值得的做法, 但是当它是在设计过程中进行颜色探索的唯一方法时, 这便成为限制。能够捕捉现实世界或人眼所见的颜色配对具有巨大的价值。
如果你是一个努力地使用色彩的设计师, 或者你曾经想过：” 我真的没有色彩的诀窍” , 请不要灰心。颜色设计不是某种形式的创意巫师或特殊的礼物；这是一门基于简单技术的实践学科, 可以重复并加以改进。
请记住, 颜色是清晰和引人注目的设计交流的主要关键。无论是谨慎实施还是不顾一切地实施, 都会影响转化, 品牌知名度和用户体验。对于UI设计人员来说, 颜色是一种功能强大的工具, 根本无法忽略。
? ? ?
在srcmini设计博客上进一步阅读：