色彩是设计师最重要和最有影响力的工具之一。在设计上,它可以设定品牌基调,影响品牌形象,吸引用户的注意力,影响用户的情绪,增加可用性。然而,找到正确的颜色组合可能是棘手的,需要一些基础知识和实践。

色轮的解释

颜色是我们的眼睛感知不同光波长度的方式。1666年,艾萨克·牛顿爵士确定了三种颜色:

  • 主要:黄、红、蓝
  • 二级:橙色、紫色、绿色(原色混合)
  • 第三级:黄橙色、红橙色、红紫色等(初级和次级混合)

牛顿把这些颜色放在a上颜色来说明它们之间的关系。

色轮显示3个颜色组。原色显示在最小的中心圆中。二次色是在中间环,最大的外圆是由三级(和所有的初级和次级)颜色。

色彩理论

在视觉艺术中,有各种各样的尝试来解释什么颜色会在一起——这些被称为颜色学说. 虽然色彩理论的细节超出了本文的讨论范围,但一个基本概念是色彩和谐:一组协调一致的色彩。

您可以将颜色和谐视为调色板的构建块或基础模板。一些常见的颜色和谐是:

  • 相似的:色轮上相邻的颜色(这种颜色的和谐会产生低的颜色对比度)。
  • 补充:在色轮上相对的颜色,可产生高颜色对比度
  • Split-complementary:从其互补色的两侧与其他颜色组合的颜色。这种和谐稍微软化了基本互补色的对比度。
  • 三元:色轮上的三种等距颜色(相隔120度)
  • 单色:单色的色调和阴影
颜色和谐可用于识别协同工作良好的颜色组合。类比、互补、三元、分割互补和单色是不需要太多颜色的基本方案。

还有更多使用四种颜色的和谐型。然而,你引入的颜色越多,平衡和强化视觉效果就越困难层次结构. 如果你有丰富的色彩经验,你可以尝试更复杂的和声,但可以从两种或三种颜色开始。

色彩意义

虽然互联网上有大量的流行文章详细阐述各种颜色的含义,但很少有真正的研究证明某种颜色对情绪有普遍的影响。总的来说,随着全球化的到来,某些颜色可能已经有了标准的含义(例如,红色代表停止,绿色),最安全的假设是颜色的解释会因文化而异。例如,货币是什么颜色,红色(中国)还是绿色(美国)?此外,请记住,有些人可能由于色盲而无法区分某些颜色。

如果你的目标是在你的设计中解释颜色的含义,那么(a)要意识到它在世界范围内可能不起作用,(b)运行额外的用户测试,以确保你的颜色解释与你的用户的颜色解释相匹配。

色彩在设计中的应用

调色板是为特定项目、品牌或设计集选择的一系列或一组颜色。每个单独的颜色都是特意添加的,整个颜色集提供了对产品或界面视觉美感的一瞥。

创建调色板

创建一个调色板是很有挑战性的。以下指导方针可以帮助您创建调色板:

  • 选择一种和谐的颜色(从上面),并对单个颜色进行迭代。单色方案通常是最容易创建和应用的,所以如果你没有色彩经验,从这种和谐开始。一旦你确定了一个和谐,切换不同的颜色,看看他们如何工作,直到你得到一个你喜欢的成功的组合,这对你的设计很好。不要觉得第一次就一定要做对。如果你觉得卡住或只是不知道从哪里开始,从现有的调色板(例如,使用Adobe的颜色或者看看你喜欢的网站)。试着去理解为什么你喜欢一种特定的颜色。是因为颜色饱和度吗?颜色柔和吗?严厉吗?温暖或凉爽吗?了解为什么你喜欢一个特定的调色板可以帮助你前进,创造自己的。
  • 把调色板的颜色限制在三种以内。少量的颜色增强了视觉层次和对比度,因为用户需要考虑的颜色更少,也更容易分心。例如,你是否曾经在麦片货架上很难找到某一种特定的麦片?那是因为颜色太多了!所有的颜色都在争夺你的注意力。你的设计也是如此。少即是多。
  • 遵循您品牌的颜色指南。在创建调色板时,一定要遵循既定的颜色指导方针。这不仅会让你的工作更容易,因为你会考虑更少的颜色选择,而且还会创造一个强大的,一致的品牌体验。如果你没有一个品牌的颜色指导方针,看看在现有的设计和产品中使用的颜色,并尝试将它们融入到你的调色板中。
耐克的 网站使用了最小的单色调色板:黑色、白色和灰色。这种颜色的选择可以让用户专注于产品和产品照片。

使用调色板

一旦有了调色板,就可以将其应用到设计中,看看效果如何。以下是一些指导方针:

  • 使用60-30-10规则。这条规则意味着颜色应该在60%、30%和10%的设计区域中使用。使用60%作为主导色,30%作为次要色,10%作为强调色。这些比例有助于创造平衡,防止你弄得乱七八糟。一般来说,主色和次色应该是相对中性的颜色。把重音颜色保留在你想在你的页面上最突出的地方——例如,主要的行动号召。
  • 应用然后迭代。一旦你使用了60-30-10规则,调整你的颜色,这样你就可以提高美学和突出你的设计中重要的东西。看看如何视觉设计原则都在你的设计中发挥作用你的颜色选择是否有助于创建正确的视觉层次——换句话说,你的设计中那些你想强调的元素是否吸引了你的眼睛?你的颜色选择在你的设计中创造了平衡和对比吗?确保颜色适合你的设计。
  • 在你的界面中使用一致的颜色。如果您在一个屏幕上使用亮蓝色作为行动号召,那么在任何地方都应该使用相同的颜色作为行动号召(除非您有真的很好不使用那种颜色的原因)。如果你在一个屏幕上使用红色作为警告色,它不应该用于其他地方表示不同的东西。一致性是帮助用户理解颜色使用的关键。
苹果新闻应用程序很好地运用了60-30-10规则。白色和浅灰色构成了主导色,蓝色是次要色,粉色是重音色。每种颜色大致以60-30-10的比例使用。粉红色突出的颜色会吸引人们的注意,并一直保留给免费试用1个月号召行动和其他重要的联系,例如读故事。

测试调色板

  • 测试你的设计。一旦你将调色板应用到你的设计中,做一些可用性测试。颜色可以改变按钮、链接或任何其他类型的组件的可用性。例如,灰色按钮有时会显示为禁用,即使它们并非有意禁用。同时,寻找易读性和可访问性问题——与对比度和色盲相关的问题。我们喜欢使用accessible-colors.com来测试不同的文本-背景组合的可访问性。此外,如果你的可用性测试表明你的某些颜色不合适,那么就回到你的调色板上再次进行迭代。
虽然 UberEats 得体地遵循60-30-10规则,绿色标志在橙色背景下震动,令人难以置信地难以阅读。这是一个需要调整调色板以确保易读性的示例。

结论

调色板的选择及其在设计中的应用不仅仅是令人愉快的意外。需要迭代和仔细的应用程序才能真正受益并充分利用UI中的颜色。适当的颜色使用可以增强品牌感知,吸引注意力,鼓励互动,影响用户情绪,提高可用性。