26
2019/3
品牌化网页设计色彩攻略--上海网站设计建设公司
|网站设计 |网站教程
为您的网页设计项目选择正确的颜色不是一个可以轻率做出的决定。好的颜色选择可以影响访问者如何解释他们所看到的内容,并且可以对他们对一般品牌的愿景产生积极影响。冲突的颜色选择可能会导致他们尝试其他网站。

简而言之,色彩是设置良好第一印象的最快和最直接的方式。虽然一开始可能看起来难以处理,但您可以通过色彩理论背后的基础科学知识轻松确定您的选择。

颜色意味着什么?


选择颜色不仅仅是个人喜好。每种颜色都有不同的含义,可以以特定的方式影响人们。这就是为什么颜色对于网页设计如此重要 。它有能力立即传达有关您业务的正确信息。让我们来看看颜色的含义以及它们可以触发的情感。

暖色调

红色可以唤醒激情-暖色调网站设计


红色可以唤起激情

下面这些颜色可以对访客产生积极的影响,但是当它们单独使用时,它们往往会过度刺激。将它们与冷色和中性色混合以保持平衡是个好主意。

  • 红色活跃——情感,热情,力量,爱,强度

  • 粉红色——甜美,浪漫,俏皮,温暖,富有同情心,柔软

  • 橙色——温暖,热情,成功,决心,友好

  • 黄色 ——年轻,活泼,精力充沛,清新,乐观

冷色调


下面这些颜色对观众有镇静作用,这就是为什么它们是网站上最常用的颜色。但要小心 - 如果它们被过度使用,它们也会有冰冷或没有人情味的感觉。

  • 绿色——清新,平静,放松,信任,和平,充满希望,愈合

  • 蓝色——舒适,清晰,冷静,信任,诚信,忠诚,可靠

  • 紫色——魅力,力量,怀旧,奢华,野心,精神

 该网页设计使用蓝色传达了了忠诚和信任的感觉 

该网页设计使用蓝色传达了了忠诚和信任的感觉


中性色


它们非常适合与暖色或冷色混合使用,它们通常用于降低原色,并在网页设计中提供平衡。

  • 灰色——尊重,智慧,耐心,现代,长寿,聪明

  • 黑色——强大,大胆,严肃,优雅,豪华,戏剧,正式

  • 褐色——友谊,地球,家庭,户外,可信度,简单,耐力

 

一个为了平衡使用了中性色彩去创造奢华,简约的感的伟大网页

 一个为了平衡使用了中性色彩去创造奢华,简约的感的伟大网页

 

色彩心理和品牌认知

 

在提升网站建设过程中的品牌意识方面,颜色是吸引注意力,创造欲望,推动转化和赢得访客忠诚度的关键功能。通过正确的颜色选择,即使没有看到徽标,用户也能够发现熟悉的品牌。上海网站设计建设公司尚略邀请您读完下面的文字,相信您一定能从中获益匪浅的。

颜色是科学

颜色是科学

除了上面提到的每种颜色背后的一般含义之外,品牌经常遵循某些趋势来创造品牌认知。例如,餐馆通常是红色和橙色,银行和金融机构通常是蓝色的,奢侈品通常是黑色的,酒店通常是白色,蓝色,黑色或绿色。一些以其颜色着称的标志性品牌包括具有红色,白色和黑色的CNN,具有黄色的国家地理,以及红色和黄色组合的麦当劳。

网页设计中的色彩理论


现在您已了解颜色如何影响访问者,您可以混合它们并有意使用它们以使颜色理论对用户行为产生更多影响。

类似色

色轮上的类似色


互补色

色轮上的互补色


色轮上的三合一颜色

简而言之,色彩理论是色轮上颜色相互作用背后的科学,它在设计中很好地协同工作。用于配色方案的三种通常接受的结构是三元,互补和模拟颜色。
完美的三合一方案

 

完美的三合一方案

 互补色的有趣使用

 

互补色的有趣使用


类似色

类似色

通过考虑互补,对比度和活力,您可以在色轮上进行更细微的选择。

补充——是我们看到颜色与其他颜色相互作用的方式。当您匹配色轮两端的颜色时,您将获得视觉上吸引人的效果,因为它可以提供平衡,因为一种颜色可以增强另一种颜色。


对比——通过在页面上清晰地划分元素来集中访问者的注意力,或者支持文本的可读性或者将眼睛吸引到页面的特定部分。


活力——可以影响游客的情绪反应。更明亮的色彩可以让您感觉更有活力,深色调可以让您放松,并帮助您更专注于内容。


选择原色


为了开始混合您的网页设计的颜色,您的首要任务是为您的品牌建立主要颜色。这应该根据您的徽标或其他品牌材料确定,但如果不可能,请使用颜色心理学和关联来选择一个。

该网页设计从品牌标识中汲取了原色


该网页设计从品牌标识中汲取了原色


开发色调和色调


一旦您的网站有了主要颜色,您就可以开始使用颜色方案了。有些网站可以使用单一颜色进行设计,但大多数情况下,您需要至少使用一些色调或色调。

在整个设计中使用原色并不总是最好的解决方案。您可以调低或增亮色调,以在网站上创建微妙的变化,同时保持相同的基色。例如,如果您为网站的各个部分选择一种颜色的浅色调,那么您可以使用主要或最突出的色调来创建CTA按钮,以便它们更突出。看看设计师UI Maniac如何在下面的例子中做到这一点。

原色橙色以不同的色调出现

原色橙色以不同的色调出现

Adobe Color Wheel是用于颜色选择的最佳工具之一  。您可以将中间选择器设置为主色,然后使用颜色规则来获取一些选项。此工具易于使用,在您探索网站的配色方案时可以提供很多帮助。

60-30-10规则

 

 一个执行60-30-10规则的好例子


一个执行60-30-10规则的好例子

该技术简单但有效地混合不同的颜色。为了创造和谐,颜色通常应该以60%-30%-10%的比例组合。你并不总是需要三种颜色,但这是一个安全和平衡的好数字。使用这种方法,60%应该是主色,30%是次要色,10%是强调色。这个比例对人眼来说是令人愉快的,因为它允许视觉元素逐渐出现。


对比

 

 高对比度,容易识别


高对比度,容易识别

色彩对比度是视觉构图中非常重要的一部分。例如,如果您需要访问者特别关注网站的特定区域(例如CTA按钮),您可以使用两种高对比度的颜色,例如橙色和绿色,或红色和蓝色作为背景和按钮。

虽然对比可能有用,但应谨慎使用。如果您在整个网站上使用高对比度,则难以阅读或查看文本。我建议你为大多数设计创建一个中级对比度,并且只有在突出显示关键元素时才应用高对比度。

使用图像


在某些情况下,从图像开始可能会有所帮助。如果您有一个可以定义品牌的图像或客户已经选择了图像,您可以从那里拉出主要颜色。

此设计中有多种颜色,中性色调可提供平衡。

此设计中有多种颜色,中性色调可提供平衡


使用多个图像可能会非常棘手,因为您必须找到一种在设计中创建色彩和谐的方法。在这种情况下,有几种方法可以平衡图像:

  • 考虑把它们变成灰度

  • 调整图像的透明度以降低色调

  • 使用中性色彩来平衡图像

  • 或者使用您为网页设计选择的调色板创建渐变叠加层

根据哪种解决方案最适合您的项目,您可以轻松地使您选择的图像协调一致。


颜色将网页设计变为现实


颜色无处不在,如果使用得当,它们可以促进您从访客那里获得的任何类型的情感或动作。虽然颜色在网页设计中起着非常重要的作用,但它们并不是完美布局的唯一关键。色彩理论只是无数工具的一个工具,您可以使用它来创建出色的网页设计。

希望您发现这些提示很有用,但请记住,在设计中没有严格的规则。事实上,最好的设计经常违反规则。使用色彩心理学作为你的指南,但不要害怕相信你的创作天赋。

 

上海网站设计建设公司尚略广告发布。


返回           上一篇           下一篇