UI设计中的色彩心理学:教你如何针对不同人群设计作品

我们处在一个色彩斑斓的世界里,不同颜色的物体会让我们产生不同的情感。颜色影响人的身心,强烈的红色使血压更高,蓝色使人平静。

在设计UI界面时,颜色是影响用户的最简单和最重要的因素之一。许多人认为UI界面中的颜色选择取决于设计师的品味和美学。然而,颜色选择过程比看起来要复杂得多,并且在设计中起着重要作用。

颜色可用于创造情感,吸引注意力或强调,使用颜色来调动情绪或使人们平静下来。通过选择正确的配色方案,您可以营造优雅,温暖和平静的氛围。

颜色的选择基于色彩心理学和色彩理论。让我们仔细看看这件作品的内容。

色彩心理学

男性和女性的颜色偏好不同,不同年龄组的颜色偏好也不同。

根据Joe Hallock的研究,不同性别的颜色选择是非常不同的。该研究旨在找出不同颜色的偏好程度,从最喜欢的颜色到不太喜欢的颜色的比例。

不同性别的颜色偏好

如上所示,男性和女性都特别喜欢蓝色,并且最不喜欢棕色。

在APP案例中解释

此应用程序的目标是管理成本,用户包括男性和女性。让我们假设一个不懂颜色的初学者。选择棕色作为APP的主色,因为棕色是他最喜欢的颜色。结果如下:

成本管理APP

如图所示,虽然设计还可以,但由于颜色的选择,应用程序可能无法正常工作。如何优化?在本文的后面部分,我们将向您展示如何只使用颜色更改来优化整个应用程序。

色彩搭配的价值就来了,设计师需要了解色彩的意义和影响,以传达正确的色调、信息,并引导用户达到所需的行为。每种颜色对我们的思维都有影响,理解可能的影响可以帮助设计师传达正确的信息并指导用户行为。

作为设计师,你需要了解色彩的含义,这里有一个简单的介绍,请参考细节

色轮Pro:颜色含义?

网址:

0×251e

色彩理论

在设计界面时,有许多颜色可供使用。首先,介绍了色圈。

0×251f

着名色彩圈

另一个重要的主题是颜色匹配。有很多方法可以匹配颜色,但是暖色和冷色应该是平衡的。以下是一些配色方案:

0×2520个

互补色、相邻色、三色组、分裂互补色、矩形(双分裂互补色)、方形

每个设计师都应该知道颜色的三个属性:色调、亮度和饱和度。克里斯蒂安维斯卡拉对色彩属性的描述非常详细,本文借鉴了其相关内容。

色调

色调是自然状态下的颜色。如蓝、黄、绿、红等,无明暗变化。简而言之,颜色圆上阴影的颜色没有变化。

如下图所示:

亮度

亮度是指颜色的亮度。在自然的情况下,一些物体在早晨和晚上具有不同的颜色。如树木和山脉,早晨很轻;在晚上,因为光线减少,色调变暗。

物体越接近光源,亮度越高,反之亦然,亮度越暗。亮度在UI设计中起着重要作用,亮度得到很好的应用,可以达到很好的对比效果。

当亮度达到100%时,颜色会变白;当亮度为0%时,它会变黑。如下图所示:

色彩亮度

饱和度

饱和度是颜色的纯度。通过增加饱和度,颜色变得更加强烈和生动;当饱和度降低时,颜色变得暗淡无聊。

色彩饱和度

在使用饱和度之前,您需要了解载体,印刷或电子媒体的设计。在设计打印时,饱和度不应太高,因为用于打印的CMYK模式具有某些限制。

UI设计中的颜色

黄金比例 6:3:1原则。

60%+ 30%+ 10%的原则是实现色彩平衡的最佳比例。主要颜色在60%的空间中使用,辅助颜色在30%的空间中使用,剩余的10%的空间是另一种颜色。当从一个点移动到下一个点时,这使得用户的眼睛非常舒适。

使用6:3:1原理调色板

用户界面中的阴影

没有完全黑色的阴影,阴影的颜色受到物体本身固有颜色的影响,如下图所示。

樱桃的色调是深红色,看起来几乎是黑色,但不是纯黑色。例如,花,盘子和华夫饼的阴影不是纯黑色。光线和环境决定了阴影的颜色。

UI设计中的一个常见错误是使用半透明黑色作为阴影。

UI元素的阴影

字体颜色

今天的大多数界面都是白色的,目的是简化界面以尽可能地专注于内容,因此字体排版成为一个非常重要的元素。

左边的文字颜色是纯黑色(#),右边的颜色看起来是黑色,但实际上是蓝色,黑色和蓝色(#)。字体颜色在大多数白色界面中非常重要,如下所示:

在相同透明度下比较两种颜色

在相同的透明度下,两组文本字体具有不同的颜色和不同的效果。一组是灰色,另一组是蓝灰色,不同色调的文本对界面有显着影响。如下图所示:

使用黑色和灰色,是不是很糟糕?不,人们经常说“黑色让一切变得凉爽”,所以这取决于个人的感受。使用颜色时,可以在考虑色调的情况下实现更好的对比度和协调性。

成本管理APP的优化

更改为绿色后,APP看起来好多了。因为我们需要在这个应用程序中表现出对金钱和增长的强烈情感渴望,而绿色描述了金钱和金融的世界,男人和女人同时喜欢绿色。

绿色代表了国外股票市场的崛起,因此使用绿色资金进行投资更为合适。颜色的使用更适合用户,因此体验会更好,颜色也会更加可靠。)

以下是修订后的比较:

它看起来比以前好多了,不是吗?希望如此。如您所见,可以通过关注颜色的细节来设计高效的用户界面。

原文:

Medium.com

作者:Dalsukh Tapaniya

译者:布拉弗特

我相信有许多小伙伴想要在这里学习UI设计。我是一名多年从事UI设计的设计师。我辞职了,目前正在做我自己的定制课程。在今年年初,我花了一个月的时间整理出最适合2019年的干学习产品,从最基本到实战。把它交给每个想要学习的小伙伴。如果你想得到它,你可以注意它并相信我的“学习”这个词,然后你可以免费获得它。不要打扰你的派对.~