UI设计色彩搭配技巧

 

UI设计选择颜色很重要。每个人都会在看到它的人中唤起某种特定的视觉或情感。您可以在设计中使用它。让我们谈谈如何创建一个充分利用颜色选择的用户界面。这是应该有益于您的底线的那些用户界面设计原则之一。

 

为什么必须在您的网站用户界面中正确使用颜色

 

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

 

颜色可以设置品牌或产品的基本情绪，基调，概念和内涵。色彩研究所(Institute for Color)进行的研究表明，用户大约需要90秒钟来评估在线产品的质量。人们进行的所有产品评估中，有62%至90%在潜意识层面上会影响颜色。这样就可以避免为徽标，品牌和产品包装选择正确的颜色。

 

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

 

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

 

UI颜色基础知识

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

提示：

 

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

 

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

 

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

 

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

 

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

 

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

 

进行颜色组合之前，请先查看品牌的个性。考虑主要使用您产品的客户的性别。考虑一下您要传达的基调，提出的价值主张以及开展业务已有多长时间。您想显得新鲜有趣吗，还是经过时间考验和可靠?

 

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

 

3.色彩平衡

 

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

 

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

 

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

 

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

 

中性色适合您设计的60%

 

二级品牌颜色占30%

 

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

 

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

 

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

 

注意正确的元素。

 

在下面的这一部分中，我观察到了多次出现的突出显示文本的情况。为什么是这样?

 

4.组合和免费颜色

 

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

 

阴影，色调和色调

 

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

 

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

 

亮度

 

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

 

对比

 

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

 

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

 

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

 

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

 

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

 

6.定义交互式颜色

 

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

 

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

 

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

 

定义指示性颜色

 

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

 

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

 

辅助功能

 

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

 

设计用户界面元素时使用的对比度和颜色可能会对它们对所有最终用户的可访问性产生巨大影响。仅仅依靠颜色差异会限制色盲人员使用您的产品的能力。将浅色和深色与诸如交叉影线之类的技术结合使用，以区分界面的一部分，从而使有视觉问题的用户更容易访问它。这种设计思路可以为您的所有用户提供更有趣和更实用的界面。

 

艺术与自然的启发

 

自然和艺术是UI概念中启发色彩的资源，您应该明智地使用。例如，到户外去看草丛，观察许多绿色阴影。人们喜欢看起来自然的颜色。它们具有用户友好的感觉。艺术可以看作是自然的直接反映。因此，您也可以从中汲取灵感。这是一个示例，例如依云品牌徽标不仅在徽标中使用自然色，而且使用自然设计。

 

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

 

它永远不会损害车间的颜色选择，因此您的潜在客户可以在您上线网站或新公司徽标之类的内容之前给您反馈。如果您遵循我们提到的UI设计中有关颜色使用的做法，则没有理由不能使您的品牌取得新的成功。