颜色是设计师拥有的最重要和最有影响力的工具之一。在设计中,它可以设置品牌色调并影响其图像,吸引用户的注意力,影响他们的情绪,并增加可用性。但是,找到颜色的正确组合可能是棘手的并且需要一些基本的知识和实践。

彩色轮解释说

颜色是我们的眼睛如何感知不同的光波长度。1666年,伊萨克·牛顿爵士发现了三种颜色群体:

  • 基本的:黄色,红色,蓝色
  • 二次:橙色,紫色,绿色(原色混合物)
  • 第三:黄橙色,红橙色,红紫色,等等(初级和二级混合)

牛顿在一个上放了这些颜色颜色车轮为了说明它们之间的关系。

色轮显示3种颜色组。原色显示在最小的中心圈中。二次颜色位于中间环,最大的外圈由第三(和所有初级和二级)颜色制成。

颜色理论

在视觉艺术中,有各种各样的尝试解释颜色在一起 - 这些都被称为颜色理论。虽然颜色理论的细节超出了本文的范围,但基本概念是颜色和谐:一系列颜色一起工作。

您可以将颜色和谐作为构建块或调色板的底层模板。一些常见的色彩和谐是:

  • 类似:在色轮上彼此相邻的颜色(这种颜色和谐会产生低颜色对比度。)
  • 补充:在色轮上相对的颜色,产生高颜色对比度
  • 分裂互补:颜色与其互补颜色的两侧相结合。这种和谐略微软化了基本互补颜色的对比。
  • 三合一:颜色轮上的三种等距颜色(120度)
  • 单色:单个色调的色调和阴影
颜色和谐可用于识别一起工作的颜色组合。类似,互补,三合一,分裂和单色是不需要太多颜色的基本方案。

还有一个使用四种颜色的和谐类型。但是,您介绍的颜色越多,平衡和执行视觉可能更难等级制度。如果您有很多颜色体验,则可以尝试更复杂的和谐,但从两种或三种颜色开始。

彩色含义

虽然互联网上有一个流行的文章,将详细说明各种颜色的含义,但几乎没有实际研究狗万注册页,证明了特定颜色对情绪的普遍影响。一般而言,在全球化的出现时,某些颜色可能已经实现了标准含义(例如,红色停止,绿色)这是最安全的,假设颜色解释将因文化而异。例如,金钱的颜色,红色(中国)或绿色(美国)是什么?此外,请记住,由于颜色盲目,一些人可能无法区分某些颜色。

如果您的目标是您设计中颜色的解释性意义,那么(a)请注意它可能在全球范围内工作,并且(b)运行其他用户测试以确保您的颜色解释与您的用户匹配。

应用颜色到设计

彩色调色板是已为特定项目,品牌或设计中选择的颜色的范围或一组颜色。每个单独的颜色都是故意添加的,整体的颜色都可以向产品或界面的视觉美学提供一瞥。

创建调色板

创建颜色调色板可能具有挑战性。以下指南可以帮助您创建调色板:

  • 选择颜色和谐(从上面的)并迭代各种颜色。单色方案通常是最容易创建和应用的,因此如果您有零颜色体验,请从这种和谐开始。一旦你和谐,就会在和出去开关不同的颜色,看看它们是如何工作的,直到你获得你喜欢的胜利组合,这适用于你的设计。不要觉得你第一次必须正确搞定它。如果您觉得卡住或只是不知道从哪里开始,请从现有的调色板中汲取灵感(例如,使用Adobe颜色或者看看你喜欢的网站)。试着理解为什么你喜欢特定的颜色集。是颜色饱和吗?颜色柔软吗?残酷的?温暖或凉爽?了解为什么您喜欢特定的调色板可以帮助您在创建自己的方面前进。
  • 将你的调色板限制在三种颜色。少数颜色强化了视觉层次结构和对比度,因为用户对用户的考虑较少并分散注意力。例如,你有没有在麦片过道中找到特定谷物的困难?那是因为有这么多颜色!所有颜色都争夺了您的注意。您的设计中也是如此。少即是多。
  • 遵循您的品牌颜色指南。创建调色板时,始终遵循已建立的颜色指南。您的工作不仅要更容易,因为您会考虑更少的颜色替代方案,但它也会创造一个强大的,一致的品牌体验。如果您没有品牌颜色指南,请查看现有设计和产品中使用的颜色,并尝试将它们纳入调色板。
耐克 网站使用了最小的单色调色板:黑色,白色和灰色。这种颜色的选择允许用户专注于产品和产品照片。

使用调色板

一旦您有颜色调色板,就是时候将其应用于您的设计并了解它是如何持有的。以下是一些指导方针:

  • 使用60-30-10规则。这条规则意味着颜色应以60%,30%和10%的设计区域使用。使用60%的主导颜色,次要颜色30%,朝着重点颜色为10%。这些比例有助于创建平衡并防止您制作丰富多彩和混乱的混乱。通常,主导和次级颜色应该是相对中性的颜色。保留您想要在页面上最突出的重点颜色 - 例如,对操作的主要调用。
  • 申请然后迭代。一旦您使用了60-30-10规则,调整颜色,使您改善美学以及您的设计中重要的显着性。看看怎么样视觉设计原则在您的设计中工作。您的颜色选择是否有助于创建正确的视觉层次结构 - 换句话说,眼睛是您想要强调的设计中的那些元素的眼睛?您的颜色选择是否在您的设计中创造平衡和对比?确保在设计中为您提供颜色。
  • 在界面中一致使用颜色。如果在一个屏幕上使用明亮的蓝色呼叫采取措施,则应使用相同的颜色用于到处呼叫操作(除非您有一个真的很好偏离这种颜色的原因)。如果在一个屏幕上使用红色作为警告颜色,则应不用于其他地方不同的东西。一致性是帮助您的用户了解颜色的关键。
Apple新闻应用程序使用了60-30-10级井。白色和浅灰色构成主导颜色,蓝色是次要颜色,粉红色是重点颜色。每种颜色大致以60-30-10比率使用。粉红色的口音颜色引起了注意力,并始终保留尝试1个月免费呼叫行动和任何其他重要链接,如读故事。

测试调色板

  • 测试您的设计。将颜色调色板应用于您的设计后,请执行一些可用性测试。颜色可以更改按钮,链接或任何其他类型的组件的可用性。例如,即使它们不打算是,灰色按钮也会出现禁用。此外,寻找有粘性和可访问性问题 - 与对比度和颜色失明。我们喜欢使用Accessible-Colors.com测试不同文本背景组合的可访问性。此外,如果您的可用性测试表明,您的某些颜色不持有,请再次返回并迭代您的调色板。
虽然 Ubereats. 遵循60-30-10规则,绿色标志振动橙色背景,非常难以阅读。这是需要调整颜色调色板的示例,以便考虑易读性。

结论

颜色调色板的选择及其在设计中的应用不是幸福的事故。它需要迭代并仔细应用于真正的受益,并在UI中充分利用颜色。适当的颜色可以增强品牌感知,引起关注和鼓励互动,影响用户情绪,并增加可用性。