了解颜色如何影响网站设计的效果

佚名 2022-08-01

颜色是直接影响灵魂的力量,即颜色如何影响网页设计。作为网站开发人员,我们的主要任务之一是确保我们创建的每个网站都能以正确的方式传达正确的信息。

最大的因素之一是使用(正确)颜色。选择配色方案不仅使用客户(或您)最喜欢的颜色,甚至不使用品牌颜色。

有很多因素需要考虑。在本文中,我将讨论大多数因素。

本文分为三个主要部分:

颜色在网站设计中的基本颜色,它们对我们的感知和示例的影响,使用永恒的颜色技能颜色在网站设计中的使用颜色来提高品牌意识

品牌塑造在商业世界中非常重要,品牌塑造的很大一部分就是我们所说的彩色品牌塑造

颜色品牌只使用颜色来帮助建立公司形象或影响人们对公司的看法。

因此,假设大数据处理公司希望其客户或潜在客户将其视为可靠和可靠的公司,他们可能会选择正式的颜色,如蓝色和灰色。

如果一家酒店公司希望被视为豪华酒店,他们可能会选择黑色,金色或银色。 这让您作为网页设计师/开发者,如何在客户网站上实施色彩品牌建设承担更多责任。

让我们尝试一个简单的测试。我只是给你看颜色。我希望你能想到使用这些颜色的品牌。

这里是:

这是哪个品牌/业务?得到答案吗?假如你想到了Google,其实这个测试91%的人都想到了Google。

你的目标是确保当人们登录你的客户网站时,他们会确切地知道这是一家公司和他们的工作。

在您的网站设计生涯中,您将拥有两种客户:

类型1:决定使用配色方案的人

类型2:那些仍然需要其颜色帮助的人

对于第一类客户,您的责任将是整合他们的品牌颜色,并找到匹配的颜色。

可口可乐网站就是正确完成颜色一致性的例子。

红色是品牌的颜色。他们的网站开发团队在整个网站上发现了红色条纹,并将红色与他们的网站结合起来:

当观众浏览网站时,他们不会因为红色而忘记在可口可乐网站上。

BlueHost另一个例子:

请注意,如何使用蓝色将页面划分为较小的部分,以便更轻松地使用信息。

最后但不是最不重要的,这是Backlinko绿色示例:

该网站的侧栏使用绿色,突出重要文本。

继续:

如果你认为客户使用了错误的颜色怎么办?

如果你认为a仪公司在选择红色时传达了错误的信息呢?

在这里,你可以,应该是客户增加更多的价值

这样的问题:

为何选择当前的品牌颜色?你觉得这件事怎么样?你收到客户对这种颜色感觉的反馈吗?你想为贵公司塑造什么样的形象?这些都是帮助您了解客户品牌问题的基本问题。颜色使某些元素脱颖而出

如果你想吸引人们对按钮或特定部分的注意,你不经常使用大箭头或霓虹灯闪烁。

你用颜色做。

颜色通常用于突出显示按钮、重要文本和部分。

呼叫语言按钮

CTA按钮是一个可以行动的按钮,如购买产品、注册免费试用版或下载电子书。

事实上,营销人员必须经过大量的数据和测试才能获得正确的数据CTA按钮副本,颜色,大小和位置。

为什么要经历这么多麻烦?因为有更好的CTA按钮意味着更多的业务。 这是Divi的CTA按钮示例:

快速浏览,你会看到主要的东西CTA是绿色按钮。

主按钮是绿色的,不是偶然的。

他们想吸引人们的注意,他们知道绿色和白色形成了鲜明的对比,所以这将是人们登录页面时首先要注意的。

他们使用顶部的另一个CTA按钮(添加下载)执行相同的操作。

这引出我一个大问题:最好用哪一种CTA颜色?

没有最好的答案。尽管绿、橙、红是CTA按钮是最常见的选择,但没有单一的颜色可以保证最佳转换率。

你不需要寻找最佳颜色,而是需要创造最高对比度。

HubSpot在绿色按钮和红色按钮之间没有其他变化的情况下,进行了试CTA效果更好:

经过几天的测试,进行了2000多次主题访问。

结果:点击红色按钮比绿色按钮多21%。

这是否意味着红色的转换效果比绿色好?

不必要。 您会注意到,由于绿色是网站的主要颜色,因此红色更加突出。这是对其更好性能的合理解释。也可能是Performable游客碰巧喜欢红色。

Dmix另一项测试显示,红色按钮的性能比绿色按钮高34%。但也有许多因素可以解释结果。

A / B测试找到特定网站或网页的最佳 CTA按钮颜色的最佳方法。

边栏

边栏是你要注意的网页的重要组成部分。

回到Backlinko,看看下面的边栏:

你可以清楚地看到绿色和橙色是如何弹出并引起注意的。

颜色影响人们对你网站的感觉

在潜意识层面上,色彩对人们感知的影响比我们想象的要大。

这是色彩心理学的主要理念

学院色彩研究表明,在人们所做的环境中,人们的潜意识评价在90秒内初步观察-和在62%和90%之间这一评估是基于颜色

颜色对我们的观点有不同的影响。您对颜色的选择将显著影响用户对客户品牌的第一印象和网站的整体体验。

使用颜色可以增加人们对网站的信任,使他们成为忠实客户。

当人们登录你的网站时,你希望他们:

信任网站/业务被说服足以留在网站上被说服执行所需的操作(CTA)

你在设计中所做的一切都应该支持这些目标。

基本颜色及其对感知的影响

在这一部分中,我将讨论8种基本颜色及其对我们感知的影响,以确定哪种颜色适合某些新闻。

如果我说绿色是金融相关网站,你不是具备你会用它的每一个金融相关网站。

我只是让你知道基本信息。

红色:权力和紧迫感的颜色

红色描绘了紧迫感、热情、紧急情况、生存、勇气和进取精神,但它的阴影有不同的含义。

红色的阴影

鲜红色:充满活力,令人兴奋;非常适合食品、饮料、娱乐、冒险公司。

深红色:权威、豪华;适用于销售高价产品和服务的公司、教育机构。

错误使用红色可以让你/现场看起来很好霸道、脾气暴躁、怨恨、暴力、残忍、霸道、好斗和愤怒。

蓝:信任的色调

如果你想创造一种信任、平静和生产力,蓝色是正确的颜色。它给人一种宁静与和平的感觉。

与红色不同,红色让人感到紧迫,蓝色让他们花时间决定是否信任公司,相信自己说的话。

蓝色阴影

浅蓝色:创造力;非常适合科技和创意公司。

深蓝色:智力,信任;非常适合需要建立信任的公司,例如金融机构,医疗保健,政府组织和公司。

绿色:金钱、平衡和自然

大多数人不知道绿色是色谱的中心,使它成为平衡、平衡和平静的颜色。

它是一种常见的颜色,适用于大多数行业,其变化小于其他颜色。

这使绿色成为健康保健行业、环保或有机产品和科技公司的理想选择。

以下是一些有效使用绿色网站的例子:

黄色:创意,有趣,独特

快乐的人经常被描述为阳光灿烂并非偶然。

黄色是最快乐的颜色,让你兴奋、乐观、乐观。

想要唤起快乐的公司(如旅行社或儿童聚会组织者)通常用黄色来表达友谊和快乐。

黄色在区分创意和即装即用品类型方面也很有用。

橙色:紧急、持久、自信

如果你想以非侵入性的方式传达紧迫感,橙色可能是正确的选择。

它结合了黄色的快感和红色的紧迫感,所以这是一种持久和自信的好方法。

紫色:成熟,成功,想象力

紫色是一种奢华而精致的颜色,但它的阴影对感知影响略有不同。

紫色的阴影

浅紫色:唤起女性的阶级感和成熟感;非常适合向女性销售产品(如珠宝和美容产品)的公司。

深紫色:严肃、阴沉、神秘、奢华。

黑:大胆,优雅,与众不同

黑色比紫色复杂得多,所以它是迎合最有客户群的品牌的理想颜色。

正确使用黑色可以让你形成高对比度,从而帮助任何行业的网站做出大胆的声明。

白:友好、老练、优雅

如有疑问,请使用白色。

白色简单无忧,但依然富有创意,优雅,精致,诱人友好。

白色最好与强烈的响亮颜色搭配使用,以创造干净、极简主义的效果,而且仍然容易阅读:

在网页设计中使用颜色的永恒技能空白不是浪费空间

空白是网站上任何空白的内容。

它不必是白色的:)

有些人仍然认为白色/负空间浪费了屏幕空间。事实上,这个空间有特定的用途。

你有没有登录过一个网站,眼睛因为各个方向的所有颜色而瞬间受伤?

或者,也许你对公司的业务如此困惑?

这就是空白所能帮助的。

我们喜欢SquareSpace如何利用空白:

我觉得有些小事可以做得更好,但是很好用,因为很简单明了。

让我们不要为另一个例子走得太远。花点时间注意到我网站的设计-您当前正在使用的网站。

注意大量空白吗?

那就是设计。

我计划简化颜色的使用,避免使用侧栏,因为白色空间可以使在线读者的眼睛呼吸和休息。

移动和台式屏幕给眼睛带来了很大的压力,所以如果你能帮助他们找到所需的东西,你的读者就会喜欢它。

使用空白的好处:

正确使用段落之间的行距和中间各行之间的空间理解率提高近20%。它允许你将文本、图像和部分分开,这样你就可以更有条理地呈现单个想法/概念。空白可以创造平衡。太多的空间给你的印象是你的网站缺乏内容,但缺乏内容会导致混乱和混乱。它可以通过创建高对比度来突出显示CTA。提供比较,以保持你的网站的吸引力

看看这个网站:

乍一看,它没有吸引力,也很无聊,因为它把灰色的文本和浅色的图像放在浅灰色的背景上,使所有的内容看起来都很无聊。

如果用户必须用眼睛阅读文本,则必须更改字体或背景颜色。

这是另一个:

顶行请个人咨询几乎看不见,下面的段落也很难阅读。

使所有内容脱颖而出的关键是使用可以形成对比的颜色。

选择配色方案时使用色轮

色轮是色彩关系的直观表现。

Adobe Color CC它是一种有用的色轮工具,你可以很容易地使用它来找到配色方案。

互补色相互形成对比,要突出网站上的元素,就很好用:

因此,如果你的网站的主要颜色是蓝色,一个很好的对比色将是黄色,以突出显示CTA和小节等重要元素。

以下是对讨论内容的回顾:

颜色可以提高品牌知名度,突出重要的网站元素,影响人们对网站的感受。不同的颜色会产生不同的情绪,所以选择正确的颜色很重要。空白、对比度和良好的配色方案是良好网页设计的重要元素。

到目前为止,我们希望您在为下一个网站设计项目选择颜色时更有信心。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。

分享:

扫一扫在手机阅读、分享本文