网页设计中色彩搭配原则及方法

时间:2021-11-14 来源:未知网络 作者:996建站网

在选择网页色彩时,除了考虑网站本身的特点外还要遵循一定的艺术规律,从而设计出精美的网页。

  • 色彩的鲜明性:如果一个网站的色彩鲜明,很容易引人注意,会给浏览者耳目一新的感觉。
  • 色彩的独特性:要有与众不同色彩,网页的用色必须要有自己独特的风格,这样才能给人浏览者留下深刻的印象。
  • 色彩的艺术性:网站设计是一种艺术活动,因此必须遵循艺术规律。按照内容决定形式的原则,在考虑网站本身特点的同时,大胆进行艺术创新,设计出既符合网站要求,又具有一定艺术特色的网站。
  • 色彩搭配的合理性:色彩要根据主题来确定,不同的主题选用不同的色彩。例如,用蓝色体现科技型网站的专业,用粉红色体现女性的柔情等。

网页配色很重要,网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力,不恰当的色彩搭配则会让访问者浮躁不安。

  • 同种色彩搭配:同种色彩搭配是指首先选定一种色彩,然后调整其透明度和饱和度,将色彩变淡或加深,而产生新的色彩,这样的页面看起来色彩统一,具有层次感。
  • 邻近色彩搭配:邻近色是指在色环上相邻的颜色,如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱,易于达到页面和谐统一的效果。
  • 对比色彩搭配:一般来说,色彩的三原色(红、黄、蓝)最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力,能够起到几种实现的作用。对比色可以突出重点,产 生强烈的视觉效果。通过合理使用对比色,能够使网站特色鲜明、重点突出。在设计时,通常以一种颜色为主色调,其对比色作为点缀,以起到画龙点睛的作用。
  • 暖色色彩搭配:暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。
  • 冷色色彩搭配:冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配,这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点色彩与白色搭配一般会获得较好的视觉效果。
  • 有主色的混合色彩搭配:指以一种颜色作为主要颜色,同色辅以其他色彩混合搭配,形成缤纷而不杂乱的搭配效果。
  • 文字与网页的背景色对比要突出:文字内容的颜色与网页的背景色对比要突出,底色深,文字的颜色就应浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。

这里给出两个配色网站,大家如果不知道如何色彩搭配,可以进去网站里面很好的配出合理的颜色:

codemyviews.com/blog/25

color.adobe.com/zh/

在您的网站上使用颜色的3个步骤

  • 选择主色为品牌颜色
  • 选择1到2个辅助色颜色为您的网站创建一个配色方案
  • 选择背景颜色来完成设计

1、选择你的网站主色

当人们访问你的网站时,主色将有助于让人产生某些情绪或感觉,就像红色:激情,兴奋,勇气,主色是您希望观众在想到您时记住的颜色,如果您已经有了logo,请确保logo的主要颜色之一是使用主色。

如果没有主导品牌的颜色,怎么选择颜色呢?那我们就要先创造一个品牌的颜色,如何创造品牌的颜色,那我们就要先了解颜色的含义,不同的颜色能带给人不同的感觉体验,大公司不会意外地挑选他们的品牌颜色,品牌颜色被选择作为其品牌和营销举措的一部分,不同的颜色有吸引特定类型的购物者的能力,甚至可以改变消费者的行为。我们需要定位我们的市场和用户人群以及我们的公司品牌理念或者想要给用户传达的我们的品牌概念,由此来选择我们的品牌颜色,那我们的网站主色也就源于我们的品牌颜色(logo颜色)。

下面给出一张图简单解释不同颜色给人带来的不同感觉:

网页设计中色彩搭配原则及方法插图

怎么在你的网站里面使用主色?

只有在希望网站访问者注意的有限数量的地方使用您的主色,或者希望访问者采取某些措施的地方(例如拨打电话号码,填写联系表单,请注册 通讯等),一般你的主色要够突出,可以真实的强调出你想要访客关注的地方。

网页设计中色彩搭配原则及方法插图1

2、选择你的辅助色

整个网站上只有1种颜色显得比较单调,为了使网站的设计更有趣(和专业),需要用到辅助色,以突出网站的值得注意的部分,如报价,按钮或字幕。

颜色混合和搭配是很多人头痛的点,因为不太容易或直观地知道哪些颜色很好地融合在一起,对色彩理论的没有很好的理解,就会大量的试错。怎么能轻松的选择好辅助色呢?只要你拥有主色(不知道怎么拥有主色的看序列一的内容),通过使用颜色匹配工具,如Adobe Color CC工具,很容易找到你的辅助颜色。

怎么在你的网站里使用辅助色?

可以使用互补的辅助色来突出显示网页上的辅助信息,虽然这些内容不是网页的主要焦点,但仍然希望它们脱颖而出(副标题,辅助按钮,信息框,背景颜色等),尝试限制只有1或2辅助色。(如果辅助颜色太多,他们会产生太多的焦点,可能会让网站的访问者混淆视线)。

网页设计中色彩搭配原则及方法插图2

3、选择你网站的背景颜色

如果希望网站访问者能够轻松浏览网站,不想过于粗重或明亮的背景颜色吸收您的内容,想让访客的眼睛瞥见您想要说的重要内容,那么选择一个正确的背景颜色很重要。

类型一 : 内容密集信息网站和电子商务网站

这些类型的网站的目的是促进想法或产品,重点是内容或产品,而不是网站的设计, 背景颜色只是帮助使内容更加可见和可读的背景。

用于信息密集型和电子商务网站的最佳配色方案是白色或浅色背景,具有强大的显性和强调色彩。

大胆的主色和辅助色给予网站个性和焦点,而纯平的背景颜色可使您的访问者专注于您的内容或产品。

网页设计中色彩搭配原则及方法插图3

类型二 :企业/商业网站

企业/商业网站通常有两个目的:促进品牌或其服务,根据业务网站要关注的目的,网站的背景颜色将会有所不同。

  • 推广品牌

当您要建立强大的品牌标识时,您应该使用您的主流或品牌颜色的各种色调作为背景颜色。

这是因为颜色与品牌认知密切相关,当您将主流/品牌色彩的变化用作您的背景时,您将加强品牌,并使其更加难忘。

如果您有一个非常大胆的品牌颜色,使用它作为您的背景颜色可能太压倒性,请考虑选择不那么强烈的品牌颜色, 使用Adobe Color CC工具生成不同色调和亮度的主色。

网页设计中色彩搭配原则及方法插图4

  • 推广服务

如果您希望您的服务价值或您过去项目的投资组合成为焦点,请使用白色或中性背景颜色。

就像内容密集型和电子商务网站一样,不希望网站的背景颜色将焦点从您的内容或您要沟通的消息中脱离出来。

通过选择中性或白色背景,网站的内容自然会变得越来越受到关注。

网页设计中色彩搭配原则及方法插图5

类型三 : 图形强化的时尚和创意网站

对于像时尚,设计,餐厅,美容和创意产业中使用的网站,应该使用什么背景图像或颜色,确实没有什么规则。 可以使用黑色的菜单栏显得更加有张力; 或者使用彩虹的所有颜色来创建一个触动人心的背景图像。

在这里你可以打破所有的规则,并使用任何你喜欢的颜色,只要你保持一个规则 – “不要让选择的背景使你的文本或内容难以阅读。

完美的背景颜色让网站的内容成为协调中心,同时与您的主色和辅助色色协调工作,并使访客在浏览您的网站时感觉良好。

如有背景色疑问,请使用白色或浅灰色作为背景颜色,虽然它可能不是最触动人心的颜色,但总是能将内容凸显出来。

网页设计中色彩搭配原则及方法插图6

结论 & 重点

为网站选择正确的颜色方案不应该基于你最喜欢或直觉的颜色,一个好的网站设计是把观众放在首位来设计的。

选择适合你的目标受众的颜色去设计网站,可以让访客产生难忘的意念,在竞争对手中脱颖而出。

选取配色方案不应该是随机的,相反,它应该是一系列有组织,客观的搭配:

  • 将您的品牌与正确的主色匹配;
  • 使用Adobe工具匹配主色与辅助色
  • 匹配背景颜色和你的主色、辅助色。

网页设计中色彩搭配原则及方法插图7

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序