技术与支持

我们以多年服务经验打造合适的网站,以流行理念提升企业形象

网页设计正确的配色方案

来源:沛宣云| 日期:2020-03-05
创建网站时,您是否曾经关注颜色?
你应该。在您的网站上使用正确的颜色对于吸引正确的受众,保持读者的兴趣并鼓励他们回来至关重要。原因如下:颜色会影响感觉并具有独特的说服力。
那么如何选择合适的颜色呢?

如果您今天正在寻找一种在网站项目上使用的快速方法,那么在本实用指南中,您将找到非常有用的技巧,以适合目标受众的配色方案制作最佳的网站布局使用“ 色彩力”信息图,您也将成为绝地网页设计师!
这里没有色彩理论,但是根据我们在创建WebSite X5模板时学到的知识,介绍了如何将其付诸实践
在本文中,您将找到如何选择适合您项目的调色板,并学习如何在任何类型的网站上应用具有凝聚力的配色方案。您将学习如何选择正确的颜色,从而将转化率提高多达24%。无论您是要创建自己的博客或在线商店,还是发布有关您自己或公司的网站,颜色都不再是秘密。


以下是我们要回答的几个问题:
  • 为什么选择正确的颜色?
  • 网站上使用哪种配色方案?
  • 如何选择底色?
  • 如何在不到5分钟的时间内找到颜色组合?
  • 如何为您的网站应用正确的配色方案?
  • 选择按钮和文本颜色有什么用?

颜色事实的力量以及为什么要选择正确的颜色

颜色会影响网站上的一堆元素:背景,菜单,按钮,标题,文本,链接和图像。颜色使网页更具可读性,促进销售,并且可能在第一卷上就影响品牌知名度。因此,颜色是功能强大的网页设计工具虽然,有多强大?


参见关于色彩力量的信息图

了解色彩的力量对于绝地网页设计师至关重要。因此,在设计网站时,请考虑颜色可能对用户造成的影响请密切注意我们的“色彩力量”信息图:在创建网站时,专注于有效布局的要点将容易得多。

什么是配色方案以及如何在您的网站上使用它

创建配色方案的一种简单有效的方法是选择2种主色调,且对比度适中,并选择1或2种文本颜色。像这样:
  • 1基色
  • 1种口音颜色
  • 1文字颜色为白色,黑色或灰色

您需要在网站上使用最多的颜色是基础颜色。相反,口音是一种生动的语气,可以使您的博客或网站具有个性。因此,必须在网站的很小一部分上(例如按钮和图标)减少使用它。

可以肯定的是,如果您想到的是亚马逊,橙色的“添加到购物车”按钮立即浮现在您的脑海。YouTube红色的“播放”按钮也会发生同样的情况。有没有注意到?

4个银河步骤可以为您的网站生成最佳调色板


1.从网络星系中选择“基础颜色”(侦听颜色的力)

要吸引用户访问您的网站,请问自己:“我知道他们喜欢还是不喜欢什么?”。在选择正确的基本色时,请同情潜在的目标受众,了解他们的习惯和可预见的反应。一位古老的智者绝地会说:“连接部队”。

首先,在互联网上寻找灵感了解用户的网络星系意味着您需要进行冲浪。您可以使用以下3个坐标找到方法:
  • 您的网站类别:受您的利基访问量最大的网站的启发。保险公司网站的调色板不太可能与儿童网站的调色板相同,您是不是认为呢?
  • 您的徽标(如果已经有徽标):使用已建立的颜色作为基础,因为具有凝聚力的企业形象可以帮助用户记住您的业务或产品。因此,寻找那些使用您的图形颜色获得提示的网站。
  • 您的个性:想象您的网站是一个真实的人,然后搜索体现您所代表的色彩。使用刻板印象,例如颜色含义或暖色和冷色的差异。

上面的坐标似乎有点常规,但是由于三个原因它们很有用:它们强调用户最喜欢的颜色,他们最习惯的颜色以及如何区别。

提示:使用这两个免费的选色工具为您的网站选择正确的颜色。为了识别网页颜色,它们都使用十六进制代码,即十六进制的字母数字和#号:
  • ColorZilla:这是一个了不起的Chrome和Firefox扩展程序,可让您直接从浏览器获取颜色;您可以提取一种颜色,甚至提取整个网站的调色板。
  • BrandColors:它具有流行品牌在其网站上提供的十六进制颜色的完整列表。从亚马逊到苹果和可口可乐。

因此,既然您已经有了很多想法,就让我们进行下一个银河步骤:选择“基础色”老实说,这真的很简单,您不必使用Photoshop或任何其他图像编辑软件。
您需要做的就是打开Google搜索栏,然后输入使用BrandColors或ColorZilla获得的单词“ Color Picker ”或十六进制代码您会在屏幕上立即看到所选择颜色的信息。



用鼠标控制目标并进行实验,直到找到最有效的网站颜色值。Google提供有关任何颜色的信息。例如,您将找到一些网站构建器(包括WebSite X5)用来指定颜色的RGB值

2.在不到5分钟的时间内,将ACCENT颜色与您的BASE结合

以下是使用易于使用且完整的调色板生成器在不到5分钟的时间内即可找到强调颜色的方法。不确定有可能吗?从绝地到绝地:“这就是为什么你失败了”。

  • 转到Paletton并在A框中键入您的底色十六进制代码
  • 选择“添加互补词” B可获得与主导词相反的值。您不喜欢您的调色板,对吗?然后继续前进。
  • 单击图标“相邻” C,以获取与底座相似的颜色。
  • 或者,单击“ Triad” D图标以获取更高的对比度。
  • 然后,从“预览”菜单E中选择“带有文本的替代项” ,您将根据基本色和强调色获得文本的白色,黑色和灰色调。

你知道吗?您网站的配色方案已准备就绪!不到5分钟。


三合会生成的方案颜色样本。

从“示例” F选项,您可以在示例网页上测试调色板的外观单击以启动该选项,并在屏幕上直接生成的配色方案中查看标准的网站布局。毫无疑问,Paletton是一种配色方案生成器,它为Web设计人员新手提供了许多有用的功能。

为了更快地为您的网站获得令人愉悦的色彩组合,请尝试以下列表中的工具。
如果您正在寻找现成的调色板,请关注以下网站:
  • Color-hex.com
  • canva.com/colors
  • htmlcolorcodes.com
  • colorhunt.co
  • colorsupplyyy.com
  • Coolors.co

是否要根据图像进行配色方案
你可以试试:
  • Adobe库勒
  • 由MailChimp提供pictaculous.com

在朱莉·吉本斯(Julie Gibbons)关于如何为您的博客选择调色板的文章中,您会发现一个精美的调色板画廊,这些调色板的灵感来自于不同心情的图像。按照她的提示学习如何最好地使用这些工具。
如果您有关于爱好的个人网站或博客,则此工具适合您:
  • palettr.com

因为它会生成受地点,季节或特定主题启发的调色板
例如,您可以使用使您想起自己喜欢的地方的颜色为旅行博客增色。冬季运动爱好者可以立即从积雪覆盖的景观中进行配色。哇!
您是否正在研究整个调色板?然后该是一个新星系的时候了。Kissmetrics信息图表中找到有关颜色理论中颜色协调艺术的更多信息

3.在您的网站上应用配色方案<

“做。不做。没有尝试。”从最著名的绝地名言中汲取灵感,让我们执行任务。假设您必须为朋友或客户创建一个音乐网站您会选择什么颜色?
要找到合适的调色板,请上网搜索,然后选择:
  • 您想传达给观众什么感觉
  • 您想对这个话题说些什么

查看3sounds模板中的2个样本站点
一个夏季经典音乐节的网站, 设置了暖色调,其协调性取决于使用相似的基本色和强调色(对比基于“相邻”);颜色让人想起阳光明媚的夏日和木制古典乐器,这是该网站的主要主题。



DJ的网站
设置为鲜艳生动的色彩,与白色基础色形成鲜明对比(与“ Triad”相反);惊人的对比所带来的活力和节奏让人想起DJ播放的电子音乐。



您是否注意到页面色彩设计在两个站点上实际上是相同的?那是因为它遵循配色方案层次结构我们将“基础颜色”应用于整个背景,而“强调”(很好,我们使用了不止一种“强调”颜色)仅限于按钮和我们想要突出显示的文本。

但是,这两个项目是不同的。为什么?因为每种调色板代表着不同的心情:一种是经典的,另一种是当代的。

“正确的”调色板谈论的是 听众的对话
正确的颜色组合是平衡的问题。颜色指南的含义及其背后的心理是有助于您建立网站个性的有用工具。但是,实际上,最好的方法是在颜色和您的网站主题(季节,阳光,材料)之间找到具体的联系

正如格雷戈里·西奥蒂(Gregory Ciotti)在一篇有关色彩的引人注目的文章中所写的那样:“关键是寻找决策色彩的实用方法。”

不要选择按钮和文本颜色

在色彩和网页设计方面,容易做出错误的决定。
网页上最常见的错误是:
  • 使用太多颜色
  • 为文字和背景使用互补色
  • 使用太多暖色或冷色

我们最近也犯了一个大错误。但要将您变成Jedi网站设计师,我们将与您分享我们学到的知识。
您会看到,吸引用户试用我们的产品对于我们的网站策略至关重要当我们启动WebSite X5的版本13时,我们决定也将“底色”(蓝色)应用到“免费下载”按钮上。
因此,我们决定使用绿色和红色按钮选项进行测试。
结果?红色使点击率提高了24%(到目前为止)最好的结果。


websitex5.com Analytics(分析),2017年1月

是的,红色效果很好,在线研究证实了这一点,但要点是,两种颜色(红色和绿色)都大大提高了转换率。

怎么来的?
“使用的颜色越少,越容易脱颖而出”。
红色和绿色与蓝色基色形成“鲜明对比”。很难不注意到。而且您很清楚,在网络星系中很容易迷路!


来源声明:本文章系沛宣云编辑原创或采编整理,如需转载请注明来自沛宣云。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系(023-62963623)。

相关新闻