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

时间：2024-05-22 10:30:01 | 来源：建站知识

时间：2024-05-22 10:30:01 来源：建站知识

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

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

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

本文分为三个主要部分：

1. 颜色在设计网站中的用途
2. 基本颜色，它们对我们的感知和示例的影响
3. 创建网站时使用颜色的永恒技巧

颜色在网站设计中的用途 颜色增加品牌知名度 在商业世界中，品牌塑造很重要，而品牌塑造的很大一部分就是我们所说的“彩色品牌塑造”。

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

因此，假设一家大数据处理公司希望其客户或潜在客户将其视为可靠和值得信赖的公司，他们可能会选择“正式”颜色，例如蓝色和灰色。

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

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

这里是：



这是哪个品牌/业务？得到答案了吗？如果您想到了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和小节之类的重要元素。

以下是我们讨论内容的回顾：

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

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