📜  如何为用户界面选择最佳颜色?

📅  最后修改于: 2021-10-19 06:11:18             🧑  作者: Mango

可口可乐、麦当劳、戴尔、Cafe Coffee day、Paytm、星巴克……当你想到这些著名的服务或品牌时,你会想到什么……也许是你最喜欢的美味食物、小玩意、饮料,或者标志性的标志和颜色他们用来使他们的产品和服务更具吸引力的这些品牌。现在阅读下面的一些有趣的事实……

您是否知道 85% 的购物者将颜色作为他们购买特定产品的主要原因?
您知道使用颜色时品牌认知度会提高 80% 吗?这意味着品牌认知度与消费者信心直接相关。

如何为用户界面选择最佳颜色

颜色在品牌认知度和吸引客户对特定服务或产品的关注方面确实发挥着重要作用。考虑到用于代表服务和产品的颜色,客户会立即对任何服务或产品做出判断。它与人类情感直接相关,可以对用户产生积极或消极的影响。根据 Satyendra Singh 所著的《管理决策》一书,“人们在与网站或产品的最初互动后 90 秒内做出决定。大约 62-90% 的评估仅基于颜色。”

现在您可能已经了解颜色在建立信任、让消费者感到舒适和创造品牌认知度方面发挥着巨大作用。您为标题文本选择的颜色到您为背景选择的颜色,每种颜色都会为您的网站以及您的品牌所表达的内容设定情绪。选择正确的配色方案并将它们混合在一起并不是一件容易的事,特别是对于那些对自己的色彩协调能力没有信心并且对平面设计不深入的人来说。现在的问题是……如何为 UI 设计选择合适的颜色?让我们讨论一些为您的网站选择正确配色方案的步骤、技巧和技巧……

1. 选择您的主要(主色)和次要颜色

主色或主色是 UI 的基色。通常,设计师从网站的标志中选择原色。主色代表您网站的品牌,当用户访问您的网站或考虑您的服务和产品时,它会带来一定的情感。当你想到可口可乐时,红色就会浮现在你的脑海中,它会引发情绪反应,比如兴奋、大胆、爱和对可乐的热情。根据经验,专家建议您不应在 UI 中使用超过三种基色。

除了原色,设计师在网站上使用辅助色。使用辅助颜色是可选的,但它可以使您的 UI 更具吸引力,并提供使您的产品与众不同的机会。

如何选择合适的主色?

您是想吸引更年轻、更有活力的客户还是 5-15 岁年龄段的孩子?您是想销售一些美容和抗衰老产品,还是您的服务与游戏和技术有关?您需要问问自己您的品牌代表什么,以及您将哪些情感或感受与您的品牌相关联?每种颜色都与不同的情绪和感受相关联,不同的颜色会吸引不同类型的客户。考虑某些因素,例如年龄、性别和目标受众。牢记颜色在 UI 设计中的心理作用,并据此选择颜色。以下是颜色的一些简短含义……

  • 红色:爱、自信、激情、力量和愤怒。它通常用于制造人们购买的紧迫感。示例:可口可乐、Zomato、Target、Netflix。
  • 橙色:友善、热情、创造力、独特的秋天。它通常是一种温暖而充满活力的颜色,并促使人们采取行动:购买和订阅。当您尝试为客户营造温馨诱人的氛围时,请使用此颜色。示例:亚马逊、Payless、Crush Soda。
  • 黄色:警告、青春、幸福、乐观、开朗、阳光、欢乐、温暖或财富,呈金色。示例:麦当劳、赫兹、国家地理、尼康
  • 绿色:自然、运气、财富、健康、清洁、成长、和谐、耐力、更新。例如:Tropicana、动物星球、有机印度、全食。
  • 蓝色:悲伤、冷静、可靠、信任、企业、沟通、忠诚、内在安全。常用于 IT 服务、企业和银行,以营造对品牌的安全感和信任感。示例:戴尔、Facebook、LinkedIn、Twitter、美国运通、Oral-B。
  • 紫色:皇室、创造力、财富、成功、智慧、神秘和魔法、灵性。主要用于美容和抗衰老产品。示例:吉百利、卡塔尔航空、泰国航空、皇家皇家航空。
  • 粉红色:女性化、浪漫、甜蜜、纯真、敏感。通常用于为妇女或年轻女孩提供服务。示例:粉色维多利亚的秘密、芭比娃娃、Lyft。
  • 黑色:优雅、力量、奢华、力量、神秘。例如:巴黎欧莱雅、安德玛、香奈儿。
  • 灰色:保守、简单、中性、现代、冷静、逻辑、未来主义、奢华。通常用于技术、工业、精度、能力和复杂性。例如:苹果、梅赛德斯-奔驰、博世。

颜色的上述含义有助于为您的网站选择主色。简而言之,您需要考虑某些因素,例如年龄、性别(男性或女性)以及您希望通过网站反映的情绪。

2. 强调色

强调色通常用于突出显示 UI 元素,例如进度条、按钮、引号、副标题、链接、标题、滑块、开关和一些重要信息。
选择强调色并不是一件容易的事,它应该与网站上使用的其他颜色很好地融合在一起。你应该对色彩理论有很好的理解。强调色通常具有更高的饱和度和亮度,从而鼓励用户交互。下面是一个材质 UI 示例,其中在浮动操作按钮中使用了强调色。

强调色

图片来源 – 谷歌分析

您可以使用一些配色工具(如 Adobe Color CC 工具)轻松找到强调色。

3. 背景色或中性色

网站的文字或背景一般采用中性色或背景色。当用户看到网站的背景颜色时,他/她应该感到很舒服。想象一下,你进入一个房间,你注意到墙壁的颜色。墙壁的颜色不应该是压倒性的,它应该足够舒缓,你可以在房间里呆上几个小时,让你有放松的感觉。选择这种颜色也是一个棘手的游戏,因为如果你选择了错误的颜色,那么它会产生相反的影响,房间也可能给人一种无聊或沉闷的感觉。

选择背景颜色取决于您希望访问者关注的内容或您网站的目的。例如,电子商务公司通常使用白色或灰色背景色,并带有大胆的主色和强调色。为什么?因为他们的主要重点是推广想法或产品,而不是网站的设计。浅色或中性背景色有助于使内容更加可见和可读。时尚、设计、餐厅、美容和创意行业使用的背景颜色没有规则。您可以使用黑色菜单栏,也可以使用彩虹的颜色来创建鼓舞人心的背景图像。你在这里是自由的,你可以选择任何颜色,但在选择颜色时,请确保文本或内容不应该难以阅读。

4. 语义颜色

语义颜色通常用于传递警告、危险、成功和错误等信息。这些颜色通常是 UI 设计人员在网站中使用的保留颜色。红色用于错误,绿色用于成功,黄色用于警告,蓝色用于信息性消息。

提示

最后,我们想提供一些提示,以帮助您为您的网站选择正确的配色方案……

1. 60-30-10规则:这个规则来自室内设计,其中60%是主色调,30%是辅助色,10%是强调色。

2. 考虑颜色如何协同工作:您需要了解能够完美融合的颜色组合。要创建令人愉悦且和谐的颜色组合,您可以使用传统的配色方案图案,例如类似、单色和互补色。使用这些配色方案的规则建立在色环色轮上,这是创建颜色组合的有用工具。

色轮

  • 单色配色方案使用单一色调的变化(阴影),它由不同的色调、阴影和色调组成。

单色配色方案

  • 通过将色轮两侧的颜色结合在一起而创建的互补方案。这些方案仅使用两种颜色,但您可以使用不同的阴影、色调和色调来扩展它。
  • 类似的配色方案是通过使用色轮上彼此相邻的三种不同颜色来创建的。
  • 三元颜色可以通过重叠的等边三角形的色环来获得
  • 可以通过将主色与其互补色相邻的两种颜色进行匹配来获得拆分互补色。
  • 正方形颜色可以通过将正方形重叠到色环上来获得。
  • 从大自然中汲取灵感:当人们与大自然联系在一起时,总会感到自在。人们喜欢享受日落、黎明、秋天、森林或山脉。最好的色彩组合来自大自然。如果您关注您的环境和周围环境,您可以找到适合您网站的颜色组合和设计解决方案。
  • 不要忘记文化差异:每种文化都有自己的传统和信仰,因此在您选择任何颜色组合之前,请确保它们会按照您的意思进行解释。一种颜色在不同的国家可能有不同的含义,因此在为您的网站选择颜色时请记住文化差异。