UI设计中的颜色：创建完美UI的指南

颜色选择很重要。每个人都会在看到它的人中唤起某种特定的视觉或情感。您可以在设计中使用它。让我们谈谈如何创建一个充分利用颜色选择的用户界面。

为什么在用户界面中正确使用颜色

颜色可以用与语言一样强大的方式说话。它们可以反映品牌的个性。他们可以吸引用户，并且可以更好地传达信息。任何UI设计准则都可能突出提及颜色。

颜色可以设置品牌或产品的基本心情，基调，概念和内涵。色彩研究所（Institute for Color）进行的研究表明，用户大约需要90秒才能评估在线产品的质量。人们进行的所有产品评估中，有62％至90％在潜意识层面上会影响颜色。随之而来的是，切勿随心所欲地为标志，品牌和产品包装选择颜色。

您可以使用UX调色板来获得更好的用户体验。正确的颜色选择始终支持更好的信息可读性。它还可以增强号召性用语等元素的强度。它可以满足潜意识用户的审美需求。最后，它可以刺激直观的交互。

因此，语言的颜色也会影响购买决策。如今，UI设计中的色彩已成为任何在线营销策略的核心部分。

UI颜色基础知识

每个UX颜色选择都有其独特的含义和内涵。当然，其中某些取决于文化。 

在正确的图案中选择正确的颜色

不同的UI设计颜色将各种概念传达给感官。理想情况下，您想在正确的时间和正确的模式中选择正确的一个。它们必须针对正确的用户，并且您应该选择它们以针对正确的目标。

如果您希望在UI设计中明智地使用颜色，请首先了解颜色的含义，它们会激发客户的正确情感并帮助获得所需的响应。

让我们从颜色可以带来的情感和感知的差异入手：

红色是我们所谓的暖色。那将是红色，橙色和黄色。这些温暖的色彩带来了与温暖和舒适有关的情感。但是，它们也可能对某些人表示愤怒，敌意或激情。众所周知，以红色为主要公司色彩来呼吁人们舒适和温暖的品牌是可口可乐。

较冷的颜色是蓝色，绿色，靛蓝和紫色。有些联想是甜蜜，安静，信任，信心或沉思。您可能会注意到，Skype，IBM，Dell，HP，Intel等技术品牌通常会使用蓝色进行品牌宣传，因为这种颜色有助于提高对公司的信任度。

性别之间对颜色的感知存在差异。Natalia Khouw的“性别色彩的含义”研究发现，男人比女人更喜欢灰色，白色或黑色，并且女人更关注红色和蓝色的组合，比男人更困惑和分散注意力。像梅赛德斯这样的品牌，其目标受众主要是男人，因此创建了黑色，灰色和白色组合的网站。

还证明了红色和蓝色的组合是成年人最喜欢的颜色。百事可乐利用这些颜色作为品牌优势。

设计产品界面时，请记住下一种颜色的含义：

红色可以象征积极和消极的感觉。其中一些是之前提到的可口可乐试图呼吁的愤怒，爱，自信和激情。

橙色似乎在大多数人中引起了兴奋。这是许多公司使用的良好的UI颜色之一。例如，芬达（Fanta）将其用作背景颜色，以引起人们对名称的注意。

黄色通常象征快乐，幸福和阳光。在谈论社交媒体网络时，这非常合适，这就是Snapchat在标志中使用此颜色的原因。

蓝色表示安全，信任和安全。许多研究表明，蓝色对于人口的许多不同部分都有积极的含义。蓝色无处不在，包括许多自然环境。包括Skype和Microsoft Word在内的数以百计的知名品牌，以及上述公司。

绿色带来平静的更新感觉。这些情绪与以绿色为主要标志颜色的Tropicana这样的品牌非常吻合。

黑色代表神秘，但通常也与死亡和悲剧有关。在其他时候，它可能意味着现代或传统。

白色通常意味着健康，透明，纯净和纯真。

紫色通常会带来Asprey珠宝品牌在其颜色套件中使用的财富和皇室思想。

以下是为UX / UI设计选择正确的配色方案的提示：

相似的UI配色方案：该术语是指在色轮上彼此靠近分组的颜色。类似方案的多样性通常来自饱和度和亮度偏移。它们比主要的色相变化要好。

互补的UI配色方案：这是一个基于补充冷色和暖色之间相互作用的选项。当它们在色轮上彼此相对时，它们会很好地工作。对于这种技术，存在一些方便的工具，例如Check My Color，Coolors.co和Paletton。 

提示：

在添加颜色之前进行灰度设计会使复杂的视觉元素变得更加简单。当进行此操作时，它将强制元素布局并重新关注间距。完成一些工作后，可以从选择一种品牌颜色开始。然后，选择其他合适的方法。

品牌个性与正确的色彩搭配

所有品牌都有个性。在缩小调色板时，您应该仔细考虑一下。如果您希望消费者与您的品牌相关联，那么颜色就不会与要传达的内容冲突。

研究表明，多达85％的消费者认为颜色是选择特定产品的最重要动机。

优秀的品牌不会偶然发现其配色方案。想一想麦当劳餐厅系列中标志性的红色和黄色金色拱门。黄色使人联想到快乐和阳光，而红色则使消费者回想起内部的牛肉汉堡。

另一个示例是Home Depot。在前面，我们提到橙色在许多消费者中带来了兴奋。Home Depot标志的简单橙色和白色设计使客户知道他们可以在内部找到新技术，例如顶级燃气烧烤炉或割草机。 

进行颜色组合之前，请先查看品牌的个性。考虑主要使用您产品的客户的性别。考虑一下您要传达的基调，提出的价值主张以及开展业务已有多长时间。

您正在尝试尽可能地了解目标受众以及将要出售给他们的产品。如果您能做到这一点，您将有更多的机会选择将来可能成为业务标志的正确颜色。您的目标应该是使用有意义的颜色进行简单的UI设计。

色彩平衡

在考虑颜色，使用方法和平衡技巧时，请记住以下内容。在进行UI界面设计时完全放弃颜色组合是一个错误。避免设计中的过载和混乱，并记住极简主义在UI中总是更好。接下来的两个规则应该会有所帮助。

第一个是6：3：1，在选择颜色时也称为黄金法则。60％+ 30％+ 10％的原则代表了在选择颜色时达到平衡的最佳比例。

当您尝试生成一个整洁而和谐的界面时，此标准可以完美发挥作用。如果做得正确，该策略将吸引潜在客户。观看者的眼睛将得到缓解。它们可以自然地从设计中的一个点移动到下一个位置。

第二条规则是“最多三种原色”。这是一种避免视觉混乱的理想方法。它可以使您保持平衡，尤其是将其与黄金法则结合使用时。例如，尝试以下分配：

中性色适合您设计的60％

二级品牌颜色占30％

用户界面设计中的10％应该是您的主要品牌颜色

良好的用户界面设计使用了这两个规则。

这是一个使用3种主要颜色的Amazon网站设计示例：背景为白色– 60％，蓝色为页脚和页眉– 30％，黄色为按钮并开始评级– 10％唤醒用户

提供和谐的配色方案和简洁的界面时，请考虑以下因素。

阴影

阴影是引导人脑得出某些结论的宝贵线索。如果您引导客户，则更有机会吸引他们。阴影应被用作巧妙地增强您的主要设计元素的一种方式。

色相是使用色轮创建变体所需要的。如果您选择添加白色，则将产生色调。如果需要阴影，也可以添加黑色。

亮度

通过增加饱和度并调低亮度来创建深色的变体。如果您的产品可以更好地搭配更亮的颜色，则必须采取相反的措施。

对比

对比度是被认为是实用方法的另一种形式的UI设计。如果您试图设计一个简单的界面，就会采用这种方式。这是一种引起用户情绪激动的简单方法。

车轮正反两面的颜色始终会产生最明显的对比度。考虑一下彼此相邻时的黑白外观。强烈的对比度增加了紧张感，并使观众集中注意力。光线对比带来愉悦，舒适的感觉。如果您要进行休闲，轻松的设计，请使用这些技巧。

饱和过载可消除色彩鲜艳度

如果您的目标是鲜艳度，则必须查看色彩饱和度。但是，仅围绕高度饱和的颜色组合的方案会使眼睛不知所措，这意味着较少的振动。

有了颜色，减少几乎总是更多。当与Instagram标志标中有效使用的饱和度较低的颜色串联使用时，高度饱和的颜色将充满活力。

定义交互式颜色

如果需要交互式元素，则可以选择交互式颜色。这些可能是链接，按钮或用户触摸或单击的任何其他UI控件。

如果可以，请使用一种颜色进行主要交互。该颜色将开始对用户具有一种关联。

您可以设计深色和浅色的交互式颜色。阴影将帮助您传达UI元素的不同状态。按下或悬停状态是示例。

定义指示性颜色

指示性颜色具有含义。您需要针对应用或网站上的状态提出一种配色方案，例如针对错误，成功和警告的状态。用于这些目的更常用的是红色，黑色和绿色。

假设您的品牌颜色之一是红色。如果是这样，请勿将其用于错误消息。选择禁用状态的颜色时，请确定其具有足够的对比度。用户必须能够阅读它。

辅助功能

为UI工具包选择正确的颜色时，请记住调色板的设计可访问性级别及其对比度级别。这可以帮助色盲的人轻松使用您的产品。为了确保可以访问调色板，可以使用一些对比度检查器和设计元素可访问性检查器，例如WebAIM，noCoffee，可访问性扫描仪。不要忘记，主要目的总是想出一个用户友好的界面。

艺术与自然的启发

自然和艺术是UI概念中色彩灵感的资源，您应该明智地使用。例如，到户外去看草丛，观察许多绿色阴影。人们喜欢看起来自然的颜色。它们具有用户友好的感觉。艺术可以看作是自然的直接反映。因此，您也可以从中汲取灵感。

现在应该显而易见的是，UI设计中有多少颜色很重要。切勿随意为品牌选择颜色。最好的用户界面设计是精心选择每种颜色的一种。

总结

色彩的选择一直是一件令设计师头疼的事，希望提供的建议和方法能够帮助到您未来的颜色选择及应用。