作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
这是没有办法的:颜色是最具影响力的创意元素 视觉设计. 从迷人的布景背景设计到像素艺术的复杂构图, 对色彩的深刻理解是令人信服的沟通的关键. 需要证明?
在最近一项以品牌为重点的研究中,参与者被要求画出10家标志性公司的标志, 只有16%的人能够回忆起准确的形状和设计特征. 然而,当被要求识别一个品牌的调色板时,正确回答的数量增加了 飙升至80%.
颜色也起着重要作用。 有影响力的作用 在用户界面设计的世界里. 我们每天与之互动的数字产品依赖于对颜色的战略性使用来传达重要信息, 所以至关重要的是 UX和UI设计师 懂得如何明智地运用色彩.
在本指南中,我们将:
本指南的目标是色彩能力, 其次是色彩自信, 这一切都是为了在我们每天遇到的用户界面中实现令人惊叹的色彩执行.
色彩理论是一个广阔的研究领域,有自己的术语, 方法, 还有科学基础. 这可能很复杂,但这不是我们想要的. 我们想要的是一种对颜色的理解,这种理解可以以闪电般的速度精确应用. 我们希望像使用形状一样使用颜色——毫不费力、大胆而有效.
以这种方式使用颜色, UI设计师必须对这些核心色彩理论概念有扎实的理解:
让我们开始吧.
颜色从不孤立. 当人类的眼睛和大脑一起工作来看到颜色时,它们总是受到以下因素的影响:
看看这个来自大自然的例子:
A: 大脑和眼睛共同作用,帮助我们理解整个花实际上是鲜红色的.
B & C: 深棕色的花朵阴影(B)使得花瓣脊(C)上的高光部分看起来比暗淡的栗色要亮得多. 本质上, 照射在花瓣脊上的光线和阴影的颜色协同工作,以欺骗眼睛并加强高光.
下面是另一个例子,说明颜色是多么具有欺骗性:
在UI设计中,颜色相关性并不总是那么明显,所以方案中的颜色应该如此 相互检验. 为什么? 因为你那漂亮的颜色 风格指南 在应用于接口时可能会出现问题.
最大的收获? 不要纵容你的色彩概念. 如果在Sketch中被空白包围的强调黄色看起来很华丽,但与UI的主要配色方案相冲突, 寻找不同的解决方案.
色彩饱和度是色彩活力的组成部分. 然而, 一种由高度饱和的色彩组成的方案压倒了眼睛, 活力减弱了. 有了色彩,少即是多. 高度饱和的颜色与饱和度较低的颜色串联使用时,会变得充满活力.
同时对比发生在完全相同值的颜色补色彼此相邻时. 这种效果非常强烈,以至于两种颜色的交汇点会产生振动或脉冲.
对于UI设计师, 同时对比可以产生积极和消极的结果, 所以了解如何控制这种视觉现象的力量是很重要的.
例如, 在一个围绕各种蓝色设计的界面中, 使用与蓝色锚定色相同值的补充橙色将是吸引人们注意通知图标的好方法.
然而, 同样的橙色和蓝色组合,如果用于下拉菜单的文本和背景,可能会引起偏头痛.
彩虹自然是美丽的. 在UI设计中,必须更有选择性地使用颜色,否则它会破坏体验. 即使品牌拥有具有广泛选择的高影响力调色板, 最好表现出克制,并围绕简单的配色方案构建用户界面.
以下是构建基本UI配色方案的两个简单方案:
1. 类似的UI配色方案
2. 互补的UI配色方案
这听起来可能很奇怪,但是颜色有相应的灰度值. 这是证明:
在上面的图片中, 我们有一个范围的色调在100%的亮度和饱和度, 但看看这些颜色转换成灰度后会发生什么:
繁荣! 显示了整个灰度值范围. 为什么这对UI设计师很重要? 一个词: 对比.
暂时把你的思绪切换到灰度. 如果你想创建对比度,你会在50%的灰度值上使用40%的灰度值吗? 当然不是,但这正是当色调被排除在色彩对比方程之外时所冒的风险.
记住,色调总是影响价值.
现在我们已经简化了色彩理论,并将其核心概念与UI设计联系起来, 是时候更专注地看看颜色在数字界面中扮演的角色了. 这是在每个UI设计项目的最初阶段就必须考虑的四个颜色原则.
颜色影响可读性. 大多数UI设计师原则上都理解这一点, 这就是为什么我们很少看到红色背景上有绿色正文的界面. 而不是, 文字和色彩之间的张力微妙地显现出来, 通过常见的UI组件(如表单)渗透进来, 按钮, 头, 和图标.
遵循以下简单的原则来维持健康的文本/颜色关系:
颜色是交流的,但它不能是唯一的 设计元素 用于在UI中传递信息. 为什么不? 因为一些网络用户对颜色的感知与大多数人不同(或者根本没有).
例如, 如果图标的唯一区别是颜色的变化,那么色盲的人可能无法判断产品图标何时处于“按下”状态.
另外, 有些人很难看到与界面背景颜色对比较低的重要UI组件. 等网站 似是而非的 和 对比度 允许设计师快速测试一系列颜色搭配的对比度 可访问性.
是的,颜色对比在UI设计中很重要. 为它做计划,实施它,并从中受益. 但不要指望像魔术棒一样挥动它就能修复糟糕的设计.
形状、空间、大小等 设计元素 不容忽视. 颜色对比可以让糟糕的UI看起来更有吸引力,但它无法修复糟糕的用户体验.
想象一个新闻应用,其中每个文本实例都设置为标题大小写 电子商务网站 设计在一个9x9的图像网格. 两者都很糟糕!
雇佣精明的UI设计师 设计元素 像排版和重复的比例,以提高设计层次. 颜色同样值得深思. 在UI设计中,使用太多的颜色会混淆信息的感知方式.
这是一个难以忽视的事实: 设计 用颜色是一种技巧,而技巧是必须培养的. 大多数UI设计师都有一种天生的颜色搭配感(也就是色彩品味)。, 但这并不总能转化为应用.
要真正掌握色彩并看到它对UI设计的全面影响,设计师必须实践. 幸运的是,有很多资源可以帮助你继续学习颜色和培养技能.
如果你是一名UI设计师,想要获得即时的色彩自信,那就从下面开始 ctrlpaint.com,一个致力于数字绘画指导的网站. 数字绘画? 真的?
绝对. 专业概念艺术家马特·科尔通过快速视频教程和动手练习教授数字色彩的使用. 课程非常简单,以“画出你所看到的”为中心,无论是在现实世界还是在想象中.
先从 免费视频库 (第11节),然后再进行更密集的练习 彩色入门工具包.
当代对色彩相对性的理解是由画家进行了大量的探索和发展的 实践中,之前理论 艺术家/教育家约瑟夫·阿尔伯斯的方法.
阿尔伯斯提出,一种颜色可以有“许多面”,并鼓励他的学生进行广泛的游戏和实验,希望“睁开眼睛”,看到颜色在现实世界中的真实行为(而不是我们脑海中想象的象征性颜色)。.
1963年,阿尔伯斯撰写了 色彩的相互作用这本教科书在世界艺术和设计教育中仍然具有很大的影响力. 为了庆祝这本书出版50周年,耶鲁大学发行了一份新书 交互式iPad应用程序 包含全文,但也允许用户玩和实验阿尔伯斯的色板.
对于UI设计师来说, 色彩的相互作用 App提供了一个在数字环境中体验模拟色彩练习的机会,并亲眼看到色彩相关性如何影响用户界面.
在20世纪上半叶,安德鲁·卢米斯是一位杰出的 插画家 芝加哥美国艺术学院的讲师,但他不朽的遗产是作家. 卢米斯写了六本关于商业艺术和设计的书,涵盖了从人物绘画到产品植入的一系列主题.
在他的书中 创意说明 和 画家之眼 (两者均可于 存档.org), Loomis留下了一些与现代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设计师来说,颜色是一个不可忽视的强大工具.
在数字设计中,调色板是指设计师可以使用的颜色范围. 然而,这些颜色并不一定是和谐的.
配色方案是一种有意搭配的颜色的选择,这些颜色彼此和谐. 配色方案通常是根据色轮所建议的逻辑关系来组合的.
用户界面允许人与计算机进行交互. 这种交互, 这通常是视觉上的, 是否可以通过一系列设备(如移动触摸屏)实现, 一个键盘, 或者控制面板.
世界级的文章,每周发一次.
世界级的文章,每周发一次.