在进行UI设计时，我们应该特别注意颜色的选择。在颜色的设计上，每个人都会在看到它的人中唤起某种特定的视觉或情感，我们可以在设计中使用它。下面，让我们看看该如何创建一个充分利用颜色选择的用户界面。

颜色的表达方式和语言一样强大，它们可以反映你品牌的个性。它们可以吸引用户，也可以更好地传达你的信息。任何UI设计指南都可能会在显著位置提及颜色。 

颜色可以设定一个品牌或产品的基本情绪、基调、概念和内涵。颜色研究所进行的研究表明，用户会用90秒的时间来评估在线产品的质量。在所有的产品评估中，62%到90%的人在潜意识层面上受到颜色的影响。这样就可以避免为徽标、品牌和产品包装选择正确的颜色。 

你可以使用UX调色板来获得更好的用户体验。正确的颜色选择总是支持更好的信息可读性。它还可以提高号召性用语等元素的强度。它可以增强客户导航功能，也可以满足潜意识用户的审美需求。最后，它可以刺激直观的交互。因此，语言的颜色也会影响购买决策。

UI颜色基础 

每个用户体验的颜色选择都有其独特的含义和内涵，当然，这其中有一部分取决于文化。  

选择合适的颜色和图案

不同的UI设计颜色向感官传达了不同的概念。理想情况下，你希望在正确的时间以正确的模式选择正确的选项。它们必须针对正确的用户，并且你应该选择它们以针对正确的目标。

如果你希望在UI设计中明智地使用颜色，首先就要了解颜色的含义，它们能在你的客户中激起正确的情绪，并帮助你得到期望的回应。

让我们从情绪开始，颜色可以带来不同的感知：

红色是我们所说的暖色。这些是红色、橙色和黄色。这些暖色给人带来了温暖和舒适的感觉。但是，对某些人来说，它们也可能意味着愤怒、敌意或激情。众所周知，以红色为主要公司色彩来呼吁人们舒适和温暖的品牌是可口可乐。

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

不同性别之间对颜色的感知是不同的。Natalia Khouw的“性别色彩的含义”研究发现，男人比女人更喜欢灰色、白色或黑色，并且女人更关注红色和蓝色的组合，比男性更容易混淆和分心。诸如梅赛德斯（Mercedes）这样的品牌，其目标受众主要是男性，因此创建了黑、灰和白色组合的网站。

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

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

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

橙色似乎能点燃大多数人的兴奋之情。它是许多公司都在使用的UI颜色之一。例如，芬达（Fanta）将其用作为背景色来吸引人们对名字的注意。

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

蓝色表示信任和安全，大量研究表明，蓝色对于许多不同的人群都有积极的含义。蓝色无处不在，包括许多自然环境。包括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％的原则代表了在选择颜色时达到平衡的最佳比例。

当你尝试生成一个整洁而和谐的界面时，此标准可以完美的发挥作用。如果操作得当，这一策略将吸引潜在客户。用户的眼睛将得到放松，它们可以自然地从设计的一个点移动到下一个点。

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

60%的设计用中性色

一个二级品牌的颜色为30%

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

良好的用户界面设计使用了这两条原则。

下面是一个使用3种主要颜色的Amazon网站设计示例：背景为白色– 60％，蓝色为页脚和页眉– 30％，黄色为按钮– 10％唤醒了用户，在这里，我们需要注意正确的元素。

在下面的这一节中，我观察到多次文本被高亮显示。这是为什么呢？ 

组合和互补色

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

阴影和色调

阴影是引导人脑得出某些特定结论的宝贵线索。如果你能充分利用客户的优势，则更有机会吸引他们。阴影应该作为一种微妙地增强你的主要设计元素的方式。

色相是使用色轮创造变化所需要的。如果你选择添加白色，则将产生色调。

亮度

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

对比

对比度是被认为是实用方法的另一种形式的UI设计。如果你想设计一个简单的界面，你会用到这个。这是唤起用户情感反应的一种简单方法。

考虑一下彼此相邻时的黑白外观，强烈的对比度增加了紧张感，可以使用户集中注意力。光线对比带来愉悦、舒适的感觉，如果你想要一个休闲、放松的设计，就用这些吧。

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

如果你的目标是活力，色彩饱和度是你必须考虑的。但是，仅围绕高度饱和的颜色组合的方案会使眼睛不知所措，这意味着更少的活力，而不是更多。

对于颜色来说，少即是多，一个高度饱和的颜色将是充满活力的，当使用与较少饱和的，有效地使用在Instagram标志。

定义交互式颜色

如果你想要互动元素，你可以选择互动色彩。这些可能是链接、按钮或用户触摸或点击的任何其他UI控件。

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

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

定义指示性颜色

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

假设你的品牌颜色之一是红色，如果是这样的话，要把它用于错误消息。为禁用状态选择颜色时，需要确保其具有足够的对比度，用户必须能够阅读它。

辅助功能

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

资料来源：WebAIM

设计用户界面元素时使用的对比度和颜色可能会对它们对所有最终用户的可访问性产生巨大影响。仅依靠颜色区别会限制色盲人员使用你的产品能力。使用浅色和深色以及交叉阴影等技术来区分界面的一部分，可以让有视觉问题的用户更容易访问。这种设计思路可以为您的所有用户带来更有趣、更可用的界面。

自然和艺术是为UI概念提供色彩灵感的资源，你应该明智地使用它们。例如，走出去，看看草地，观察各种各样的绿色，人们喜欢看起来自然的颜色，它们具有用户友好的感觉，艺术可以看作是自然的直接反映。因此，你也可以从中汲取灵感。举例来说，依云的品牌标识不仅在徽标中使用了自然色，而且在其标识中使用了自然的设计。

现在我们应该清楚UI设计中颜色的重要性了，不要随意为你的品牌选择颜色。最好的用户界面设计是每一种颜色都是精心选择的。

在你的网站或新公司的标志发布之前，为你的潜在客户提供一些反馈意见，这并没有什么坏处。如果你遵循了我们提到的UI设计中颜色使用的最佳实践，那么你一定会为你的品牌达到一个新的成功水平。  

文中部分图片来自网络，如侵权，请联系删除

想要了解汽车更多内容，就留言联系我们吧！

来源：Slava Vaniukov：Colors in UI Design: A Guide for Creating the Perfect UI