网页设计中的色彩:如何让用户需要正确的情感

在整个人类历史中,大师级艺术家因其色彩工作能力而受到普遍认可。在当今世界,能够将商业和商业用途的颜色组合在一起的专家 – 广告和网页设计 – 同样受到认可。

使用颜色的能力可以泵送到无穷大。这是影响人们的机会的真正深渊。

我们将讨论色彩理论和配色方案的基础知识,然后讨论一些色彩的情感影响。

色彩理论

我们可以将整本书专门用于颜色主题,因此我们不会将其全部用于整体,而只是用于设计界面的有用信息。

你可以将颜色理论分为三个部分:

对比

每个阴影都有相反的,可以说是它的“死敌”,它与这种颜色形成了最大的对比。要找到这样的颜色,您可以使用色轮。只需选择圆圈另一侧的颜色即可。

色轮
色轮

加法

这些颜色并不总是相互冲突。与对比相比,互补色相互强调。在色环中,这些颜色依次排列,例如,补充紫色和粉红色的颜色。

共鸣

每种颜色都会引起某种情绪。明亮的暖色调(红色,橙色,黄色)使人充满能量,唤醒他,冷色调(绿色,蓝色,紫色),相反,放松和舒缓。

例如,BBC新闻使用红色导航栏唤醒读者,以加强他的激动状态。鉴于该网站的具体细节 – 耸人听闻的新闻, – 红色看起来像一个合乎逻辑的解决方案。

BBC新闻
BBC新闻

网页设计中的色彩理论不仅仅是装饰。颜色可以改变您网站的感知,并在您的业务中发挥决定性作用。

对情绪的感知

没有人会否认色彩与情感的密切互动。当然,任何网页设计师都希望利用这种影响力为每个网站创造合适的氛围。

基于几项研究 – 在Vandelay设计网站上发布的分析和关于Smash杂志中的颜色的帖子 – 我们将解释颜色如何影响情感并帮助创建用户体验设计。

重要的是要记住,世界各地的不同文化对颜色的看法不同。我们将描述仅仅是西方文化特征的情感联想。

情绪和联想:力量,重要性,青春。

最刺激的颜色,充满活力,甚至可以增加血压。红色代表激情和力量,它比其他颜色吸引更多的注意力,因此它经常被用于重要的警告和公告。

例如,红色非常适合No Way NSA网站,其目的是警告所谓的威胁。

Screenshot_2

在页面顶部使用大量红色是一个很好的解决方案,因为它会引起对消息中重要信息的注意。与此同时,人们往往会迅速离开红色的“危险区域”并向下滚动。反过来,这允许用户显示更多内容。

但是这种颜色可能对你不利,因为它会导致攻击性或过度刺激。如果您想营造更轻松的氛围,请尝试适度使用红色并选择较浅的红色。

情感和联想:友善,活力,独特。

作为最温暖的色调,橙色能够唤起一系列多样化的情感。作为主要颜色,它可以是令人感兴趣和活力的,并且作为次要颜色,它可以保持这些特性,但是以更不显眼的方式。

芬达网站
芬达网站

此外,橙色有助于营造运动感和活力。例如,它在Fanta公司的卡通网站上看起来很棒,这表明了青年和运动的想法。色彩与创造力相关,同时保留了熟悉品牌的感觉。

情绪和联想:快乐,热情,古老(深色调)。

这是最普遍的颜色之一,它引起的情绪更多地取决于阴影。

明亮的黄色增加了能量,但没有清晰度和锐度,以红色存在。中等色调的黄色会带来舒适感,尽管仍然令人精力充沛。深色调(包括金色)提供古老的感觉,充满永恒,智慧和好奇心的空间。

Flash Media
Flash Media

例如,在Flash Media的网页设计机构的主页上,深色调的黄色散发着活力,好奇心和权威。这种颜色非常适合那些在咨询中赚钱并希望强调其专业性的公司。

绿色

情绪和联想:成长,稳定,财务主题,环境主题。

绿色是暖色调和冷色调之间的桥梁,虽然它更倾向于冷色调。这意味着绿色具有轻松的蓝色效果,但也有一点黄色的活力。

Ameritrade公司
Ameritrade公司

因此,它营造了一个非常平衡和稳定的氛围。深色调的绿色营造出财富和丰富的印象,就像在Ameritrade网站上一样。

蓝色

情绪和联想:冷静,安全,开放(浅色调),可靠性(深色调)。

与黄色情况一样,蓝色的影响很大程度上取决于阴影。所有蓝色的色调在放松和安全方面都是普遍的,但浅色与友好相关,而暗色则与悲伤有关。

像Twitter和Facebook这样的社交网络使用浅色和中等色调的蓝色,企业网站更喜欢深色的强度和可靠性。

活动设计机构Van Vliet就是一个很好的例子 陷阱。他们以蓝色花朵为背景,在视觉上暗示了他们在植物方面的知识和技能,同时也创造了一种可靠性和信任感。

Van Vliet&Trap
范弗利特 陷阱

这非常重要,因为它们适用于视觉部分非常重要的事件,例如婚礼。

紫色

情感和联想:奢华,浪漫(浅色调),神秘主义和神秘感(深色调)。

紫色在历史上与皇室威严相关,暗指奢侈品。紫色色调一般反映了慷慨和财富,使其成为时尚和奢侈品的绝佳选择(例如,像吉百利这样的巧克力,选择它作为品牌的颜色)。

吉百利

较淡的色调,如薰衣草(紫色加粉色),暗示着浪漫的想法,而深色调则显得更加时尚和神秘。

情绪和联想:力量,精致,紧张。

最强的中性色 – 黑色 – 几乎出现在任何地方。它可能会导致不同的关联,具体取决于伴随它的颜色,如果你过度使用它会占主导地位。

黑色的强度和中性使其成为大块文本的绝佳选择,但作为原色,它可以产生紧张感,甚至与邪恶联系在一起。

对于大多数网站,黑色用于创造一种复杂感。简约设计中的黑色和白色相结合,给人一种优雅和时尚的印象,就像Dream和Reose of BOSE网站一样。

梦想+到达
梦想+到达

情绪和联想:纯洁,简洁,美德。

在西方文化中,白色与纯洁,善良和纯真有关。此颜色通常用于简约和简单网站的背景。

网站与Kloin Toshev的作品
网站与Kloin Toshev的作品

此外,没有颜色可以让你像白色一样多关注其他颜色。例如,在获奖者Awwwards Kloin Toshev的网站上,他的所有作品都布置在白色背景上,只突出插图并给人一种优雅画廊的印象。

灰色

情绪和联想:中立,正式,忧郁。

尽管在某些情况下,灰色会产生阴郁和悲伤的气氛,但它仍然经常被专业设计师使用。

这一切都与阴影有关:交替它们,你可以获得由黑色和白色引起的所有情绪。一般来说,灰色是熟练掌握的强大工具。

Awwwards
Awwwards

在设计中结合更鲜艳的色彩,灰色背景看起来很现代,而不像Awwwards那样令人沮丧。

米色

情绪和联想:传达剩余颜色的本质。

米色本身相当暗淡无趣,但它有一个非凡的特性:米色具有围绕它的花朵的特征。因此,如果不打算表达约束,则米色用作背景或第二颜色。

深色调的米色营造出传统和朴实感,给人一种纸质感,浅色调显得清新现代。

Dishoom
Dishoom

例如,在Dishoom餐厅的网站上,名称周围的浅米色和较深的边缘给人的印象是这家餐厅是传统美食的新面貌。

象牙色

情感和联想:舒适,优雅,简约。

象牙色和奶油色的颜色与白色几乎相同。然而,象牙的颜色比白色更温暖(或更少的无菌),在保持极简主义的同时产生更大的舒适感。

您可以使用象牙而不是白色来柔化它与深色之间的对比度。例如,在我的咖啡艺术网站上,棕色橙色元素被放置在象牙的背景上(看起来是灰色的),保留了一种温暖感。

我的咖啡艺术
我的咖啡艺术

色彩频谱

每个站点都有一个配色方案,主要颜色用于填充更大的空间。正如我们之前所说,这些颜色的使用基本上无意识地影响了一个人的心灵和情绪。所以要仔细选择它们。

尽管有许多方法可以组合颜色,但我们将重点关注最成功且经常使用的三种方法。

三合一(三重和谐,三角形)

黑社会
黑社会

三合一是三种颜色的基本和最平衡的系统。它使用共振和颜色添加,但没有复杂的对比度,这就是为什么三元组是最可靠的伽玛。

在12种颜色的色轮上,选择相隔120度的任意三个:一个用于主背景,两个用于内容和导航栏。

双免费系统

双免费系统
双免费系统

这种规模更难实施,但它可以证明是一种有利可图的解决方案。使用四种颜色:两种对比色和两种互补色。

根据这个计划,看看佛罗里达蓬勃发展的页面看起来多么美妙。红色和绿色在植物和块中与文本形成对比,蓝色背景和橙色沙漠有效地补充了图像。

蓬勃发展
蓬勃发展

模拟(顺序系统)

类似物
类似物

一系列相似的颜色主要使用互补的色调。这使您可以特别突出一些品质并引起某些情绪。

例如,红色,橙色和黄色的组合强调活力和活力。使用此类刻度非常简单,但很难选择哪种颜色将包含在组合中。它们的效果会被夸大,所以你不能犯错误。

例如,使用蓝色,青绿色和绿色设计Blinksale网站创造了和平与安宁的气氛。注意黄色是如何用来强调重点的。

Blinksale
Blinksale

这仅仅是颜色的基础理论,它可以帮助创造一个令人印象深刻的定制设计,并没有限制多远,你可以在网站上的颜色方面去。

用于颜色选择的工具助手

幸运的是,有几种工具可以帮助将颜色理论转化为实践。尝试这些调色板,这样您就不必从头开始创建自己的调色板:

  1. Adobe Color CC,以前称为Adobe Kuler。这是选择颜色最可靠的工具之一。
  2. Paletton。如果您需要一个简单的工具来实现最快的颜色选择,那么Paletton就是完美的选择。
  3. 平面UI颜色选择器。用于选择用户界面颜色的绝佳工具。

如果这些工具不适合您,这里有28个具有调色板和不同颜色选择工具的站点。

颜色和情感之间的直接关系

请记住,用户很少注意和欣赏的背景,导航栏,各个部分的颜色,但它并不意味着颜色不会受到它们。它只是在潜意识里发生。

用户有某种情绪,对网站或品牌的态度正在发展,他会执行某些操作:向下滚动,按下诱导动作的按钮,或者相反,不会注意到它们。颜色在这一切中起着巨大的作用。

如果您对网页设计中的颜色使用有任何建议,请分享评论。

Loading...