(图片来源:Getty Images)

巧妙运用网页设计的色彩心理学可以吸引用户并唤起特定的情感,有可能留住用户并增加转化的机会。

尽管诗歌可以让人陶醉,令人震惊的图片可以激发人们采取行动,但色彩的巧妙运用同样具有强大的力量。

色彩心理学表明,在网页设计中使用特定的颜色可以引发观众特定的反应。这意味着精明的网页设计师(或任何视觉专业人员)应当熟知每种颜色的效果,以及如何何时使用每种颜色。在本文中,将提供一个关于13种颜色情感细微差别的快速参考指南。

网页设计的色彩心理学:关于色彩活力的一点说明

相同颜色的不同色调也会产生不同的效果。

首先,应该注意运用色彩心理学进行网页设计需要考虑颜色的活力,即颜色的深浅。活力的棘手之处在于,就像每种广泛的颜色都有自己的特性和内涵一样,每种色调也是如此。例如,浅绿和深绿可能会对用户产生不同的影响。

接下来,将提到颜色的不同色调之间的显著差异,并考虑它们对网页设计的影响。然而,作为一般规则,较明亮的色调往往感觉更有活力,而更柔和的色调感觉更令人放松。因此,明亮的色调通常用于呼吁行动以吸引注意,而在背景中使用更柔和的色调可以帮助创造沉浸式效果。

01.金色的色彩心理学

格莱美奖的网站使用金色的装饰来与其标志性的奖杯相匹配,营造出豪华感(图片来源:格莱美奖网站)。

成功、富裕、奢华

金色代表着一种权威和成功的感觉,通常被视为巨大成就的象征(想象一下奖杯和奖项)。作为一种稀有而珍贵的金属,金色营造出独特性和奢侈的感觉,当以节制和有品味的方式使用时,能提升任何品牌的身份认同。

金色最好作为网页设计的一种图案元素,而不是主导的配色方案,因为太多的金色可能会显得俗气和大胆。当有效地使用时,它可以成为黑色或白色的优美点缀,为网站营造出微妙的奢华感。

格莱美奖的官方网站是如何使用金色的点缀为网站增添一丝优雅的完美示范。冷色调的金色营造出一种宁静和低调的优雅感,与格莱美奖的标志性形象相一致,以精致的风格表达其身份。

02.红色的色彩心理学

在这里使用,红色感觉有趣和令人振奋。

充满激情、富有攻击性、重要

作为主导色,红色增加了重要性和高度的关注度,字面上是这样的,因为红色会增加血液循环、呼吸率和新陈代谢。红色在色彩心理学中可以具有各种含义,因为它与爱和战争都有关,但所有含义的统一因素是一种重要性的感觉——想想红地毯。

红色是一种最好谨慎使用的颜色。它吸引注意力的本领使其成为设计师的宝贵工具,但如果过度使用,它会抑制放松。较浅的色调强调了红色的充满活力的特质,包括年轻感,而较深的色调强调了权力,甚至耐用性,比如砖墙。

游戏设计公司Playtika的登陆页面具有积极而有力的特点。有趣而令人振奋的红色与其猎豹标志相得益彰——这本身就是一个强大的图标,因其卡通般的特质和拟人化的微笑而变得柔和。

03.橙色的色彩心理学

Epic在其网站上使用橙色作为强调色(图片来源:Epic)。

活泼、充满活力、实惠

橙色具有与红色相似的激发活力的特点,但程度更加安全,是在不至于过于严肃的情况下为网站增添兴奋感的好方式。它通常富有趣味,有人认为它会制造匆忙并刺激冲动。它甚至可以表示健康,暗示着活力和生气。创意代理公司Epic在其网站上使用橙色作为强调色。这个选择强调了团队的活泼和年轻。

04.黄色的色彩心理学

黄色可以焕发活力,也可以让人感到刺耳(图片来源:便条)。

愉快、友好、警示

黄色是一种奇怪的颜色:它通常与快乐相关联,但也能激活大脑的焦虑中心。与红色和橙色一样,它能够激发和焕发活力——它是警示标志和出租车的颜色——但要谨慎使用明亮的黄色,因为可能会带来潜在的负面含义。

较浅的色调强调了快乐的一面,让用户想起夏天和太阳。较深的色调,包括金色,增加了份量感,给人一种古老的感觉。便条网站上明亮的黄色主导的调色板与该产品本身是相符的。它营造出一种充满活力的氛围,并立刻被识别为特定品牌。

05.绿色的色彩心理学

绿色的配色方案强调了Sanhok的户外冒险(图片来源:Sanhok)。

自然、稳定、繁荣

绿色通常会与环境和户外活动联系在一起,这是显而易见的。这使得它成为那些希望表现自然和有机特质的网站设计的明智选择。

作为激发活力的温暖色彩(红色、橙色、黄色)和令人平静的冷色彩(蓝色、紫色)之间的桥梁,绿色是最平衡的颜色,赋予它一种稳定感。它也是作为强调或呼吁行动的一种流行选择,因为它引人注目,但比较温暖的颜色更柔和。在西方文化中,它还代表着金钱和财务安全。

游戏Sanhok的网站使用绿色来强调户外和荒野,使用了不同的微妙色调。

06.蓝色的色彩心理学

在网页设计中,蓝色可以带来宁静和安心感。

宁静、值得信赖、具有吸引力

蓝色是网页设计中最受欢迎的颜色之一,而且原因充分。你会在许多网站上看到蓝色,因为它是信任的颜色。蓝色传递出宁静和平静,因此激发了安全感和安全感。

因此,银行经常使用蓝色:花旗银行、大通银行、美国首都银行和巴克莱银行等都使用蓝色。然而,宁静的效果也使蓝色成为友好和吸引人的颜色,这解释了Facebook和Twitter采用蓝色的原因。

如果这还不足以使用它,蓝色还非常多才多艺;它的活力比其他颜色更具有戏剧性的效果。浅蓝色是水和天空的颜色,因此通常具有清新和自由的感觉,如果足够明亮,甚至可以激发活力,同时仍保持可靠的宁静。

较深的蓝色倾向于更加庄重,增强了安全感,这使其成为专业化的绝佳选择。对于像Evolve Wealth这样的财务顾问来说,信任是至关重要的,因此其网站的大部分设计都采用了不同色调的蓝色。然而,蓝色并不适合所有情况。它在与食物相关的网站上并不经常使用,因为天然蓝色食物非常罕见,研究表明这种颜色实际上起到了抑制食欲的作用。

07.紫色的色彩心理学

紫色与财富和奢华有关(图片来源:Woo)。

奢华、神秘、浪漫

紫色长期以来与皇室有关,创造了一种奢华,甚至是神秘的氛围。主要使用紫色是迅速创建优雅或高端吸引力的一种方式,即使您的产品是面向预算的(这是与橙色完全相反的“昂贵”效果)。

较浅的紫色,尤其是薰衣草色,让人想起春天和浪漫。较深的色调增加了更多的神秘感,甚至可以象征创造力。加深颜色还会使浪漫元素更具感性。

由于与个人财富的联系,WooCommerce选择紫色来代表其WooView应用程序的颜色,强调了与皇室和风度主题相契合的功能,即实时检查您的实际收入。

08.粉色的色彩心理学

粉色在这个租房网站上营造了柔和的氛围。

女性化、年轻、天真

粉色是一种特殊的颜色,对许多网站来说可能不合适,但对于特定受众而言,它会非常完美。因为大多数人传统上将粉色视为女性化的颜色,所以粉色在定位女性用户方面很受欢迎。然而,不要过分强调粉色与女性的关联,否则您将在吸引用户和迎合性别刻板印象之间走一条很细的线。

在网页设计中,粉色也可以用来与童年和甜点建立联系,赋予粉色一种甜美、有时天真的吸引力(不出所料,这是一个自我延续的循环)。在传统上它还与浪漫主题一起使用,与红色和浅紫色一起。

租房服务Rentberry的网站使用粉色作为其主要颜色。在这种情况下,它营造了柔和、安全的氛围,有意将自己与更加企业化、传统的租赁服务区分开来。

09.棕色的色彩心理学

B&O Play在其网站上以一种意想不到的方式使用了棕色。

朴实、坚固、乡村

虽然在网页设计中并不是一种常见的选择,但在合适的情况下,棕色可以发挥效果。作为与大地和树木相关的颜色,棕色可以增加一种户外感,尤其是与绿色搭配使用。树木的象征也给人一种坚固和可靠的感觉。

在网页设计中,棕色通常与木质纹理一起使用,营造出木制小屋的古老和乡村氛围。尽管技术网站通常以更强烈、更大胆的色调为主,但B&O Play的微网站成功地使用了棕色。柔和的色调暗示了科技产品更高档、更人性化的一面。自然的象征也依然存在:木材和皮革在主视频中占据重要地位,而大理石效果则用于背景。

10.黑色的色彩心理学

黑色在Cartelle的网站上产生了真正的影响

强大、高雅、前卫

作为所有颜色中最强烈的颜色,黑色通常只被节制使用,比如用于文本,但它非常适合作为主要的颜色元素(比如用于背景)。与紫色类似,黑色增加了一种高雅和优雅的氛围,还有神秘感,尽管更加大胆自信。创意机构Cartelle大量使用黑色为其主页和后续动画制作了无可争议的影响。

11.白色的色彩心理学

这里的米白色背景将焦点放在了鞋子上。

洁净、高尚、健康

与黑色完全相反,白色几乎可以与任何颜色搭配得很好,使它成为理想的辅助颜色。在辅助角色中,白色可以突出更刺激的颜色元素,并且如果你知道如何使用它,甚至可以引导用户的注意力。

然而,作为主要颜色,白色给人一种既洁净又贞洁的印象。白色具有“无污点”的感觉,对于合适的网站来说,这感觉完全是毫不费力的。它与纯洁的关联可能使其看起来很高尚,但也可能显得冷漠和冷淡。

为了减轻这种冷漠感,一些网页设计师会倾向于使用象牙色或奶油色。这些白色的变种更加柔和,甚至不那么显眼,但具有相同的极简和互补特性。它们是白色的更具舒适感和不那么严厉的替代品。鞋公司ETQ使用主导的米白色背景,将用户的注意力集中在鞋子上。

12.灰色的色彩心理学

灰色在Galvan Mobili网站上得到了较好的运用。

中性、正式、阴沉

作为黑色和白色之间的中间色,灰色散发出中性,或者说缺乏任何特定感觉。然而,在专家的手中,这个中间位置可以成为一个强大的工具。通过调整灰色的明度,它可以具备黑色或白色的特性,具有吸引或排斥的特定程度。这意味着如果黑色对于您的设计来说太强烈,可以尝试使用深灰色。如果白色过于刺眼或单调,可以尝试使用浅灰色。

然而,单独使用时,灰色具有独特的特征。它是正式的颜色,因此那些希望看起来传统或专业的网站往往喜欢使用它。它也可能给人一种沮丧的感觉,因为它是阴沉、多雨天的颜色。当主导使用时,它可能会有些抑制,无论是好是坏。

你可以从意大利家具公司Galvan Mobili很好地运用了灰色,因为你甚至都没有注意到它。灰色背景给人一种专业的感觉,将注意力集中在图片和鲜艳的红色标志上。

13.米色的心理学

在这里,米色创造了一个宁静的背景。

突显周围的颜色

虽然米色通常不作为主要颜色使用,但值得一提的是,它具有增强周围颜色的效果:它具备周围颜色的特性。虽然单独使用时相对沉闷,但它的增强效果使它成为背景或辅助颜色的强大选择(这也是为什么它在室内设计中经常使用的原因)。

东京餐厅Beige Alain Ducasse以米色为背景,为可点击文本和照片等更相关的元素创造了一种宁静、舒适的背景。

要展示色彩理论有多重要,看看当标志性品牌改变颜色时会发生什么,以及查看Adobe的调色板速查表,它可以为您在设计过程中节省宝贵的时间。

精选文章:

“设计界可以做得更好”:品牌工作室Goodside的创始人谈设计

抄袭还是借鉴?设计师「原创」指南

情感参与设计:交互设计的核心作用

新的躺平?Z世代的“精致穷”

2024年平面设计流行趋势来袭!