《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——2.3 网页色彩搭配知识

  1. 云栖社区>
  2. 博客>
  3. 正文

《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——2.3 网页色彩搭配知识

异步社区 2017-05-02 10:07:00 浏览2378
展开阅读全文

本节书摘来自异步社区《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》一书中的第2章,第2.3节,作者:何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 网页色彩搭配知识

色彩搭配既是一项技术性工作,同时也是一项艺术性很强的工作,因此在设计网页时除了考虑网站本身的特点外,还要遵循一定的艺术规律,从而设计出色彩鲜明、性格独特的网站。

2.3.1 网页色彩搭配的技巧
到底用什么色彩搭配好看呢?下面是网页色彩搭配的一些常见技巧。

  • 运用相同色系色彩。所谓相同色系,是指几种色彩在360°色相环上位置十分相近,大约在45°或同一色彩不同明度的几种色彩。这种搭配的优点是易于使网页色彩趋于一致,对于网页设计新手有很好的借鉴作用,这种用色方式容易塑造网页和谐统一的氛围;缺点是容易造成页面的单调,因此往往利用在局部加入对比色来增加变化,如加入局部对比色彩的图片等。图2.15所示为运用相同色系色彩的网页。
  • 使用邻近色。所谓邻近色,就是在色带上相邻近的颜色,如绿色和蓝色、红色和黄色等就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱,易于达到页面的和谐统一。邻近色能够神奇地将几种不协调的色彩统一起来,在网页中合理地使用邻近色能够使色彩搭配技术更上一层楼。
  • 使用对比色。对比色可以突出重点,产生强烈的视觉效果,通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调,对比色作为点缀,可以起到画龙点睛的作用,图2.16所示为运用对比色的网页。

    e77326c8aa8261bbc28b0cea0d66d3752bace072


    2f6cc9bef1804202701a16794fedaa9c8f43253a
    • 黑色的使用。黑色是一种特殊的颜色,如果使用恰当、设计合理,往往会产生很强烈的艺术效果,黑色一般用做背景色,与其他纯度色彩搭配使用。
    • 背景色的使用。背景色一般采用素淡清雅的色彩,避免采用花纹复杂的图片和纯度很高的色彩作为背景色,同时背景要与文字的色彩对比强烈一些。图2.17所示为使用背景色的网页。
    • 色彩的数量。一般初学者在设计网页时往往使用多种颜色,使网页变得很“花”,缺乏统一和协调,表面上看起来很花哨,但缺乏内在的美感。事实上,网站用色并不是越多越好,一般控制在3种色彩以内,通过调整色彩的各种属性来产生变化。

      5a6798476f0f59f93bcab4fe0b0b01ed81fb1ffc

      2.3.2 网页要素色彩的搭配
      1.确定网站的主题色
      一个网站不可能单一的运用一种颜色,让人感觉单调、乏味,但是也不可能将所有的颜色都运用到网站中,让人感觉轻浮、花哨。一个网站必须有一种或两种主题色,不至于让客户迷失方向,也不至于单调、乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。

      一个页面尽量不要超过3种色彩,用太多的色彩让人没有方向,没有侧重。当主题色确定好以后,考虑其他配色时,一定要考虑其他配色与主题色的关系,要体现什么样的效果。另外要考虑哪种因素占主要地位,是明度、纯度还是色相。

      2.定义网页导航色彩
      网页导航是网站的指路灯,浏览者要在网页间跳转,要了解网站的结构、网站的内容,都必须通过导航或页面中的一些小标题。所以可以使用稍微具有跳跃性的色彩,吸引浏览者的视线,让他们感觉网站的清晰、明了、层次分明,想往哪里走都不会迷失方向。图2.18所示为色彩鲜明的网页导航色彩。


      5fd16abdde3b568c733a6e66b2fa5f40aaf395df

      3.定义网页链接色彩
      一个网站不可能只是单一的一页,所以文字与图片的链接是网站中不可缺少的一部分。需要强调的是,如果是文字链接,链接的颜色不能跟其他文字的颜色一样。现代人的生活节奏相当快,不可能在寻找网站的链接上浪费太多的时间。设置了独特的链接颜色,让人感觉它的独特性,自然而然,好奇心会驱使用户移动鼠标单击链接。

      4.定义网页文字色彩
      如果一个网站使用了背景颜色,必须要考虑到背景颜色的用色与前景文字的搭配等问题。一般的网站侧重的是文字,所以背景可以选择纯度或明度较低的色彩,文字用较为突出的亮色,让人一目了然。当然,有些网站为了让浏览者对网站留有深刻的印象,在背景上作了特别设计。例如,一个空白页的某一个部分用了很亮的一个大色块,给人以豁然开朗的感觉。此时设计者为了吸引浏览者的视线,突出的是背景,所以文字就要显得暗一些,这样文字才能跟背景分离开来,便于浏览者阅读文字。

      5.定义网页标志和Banner的颜色
      网页标志是宣传网站最重要的部分之一,可以将LOGO和Banner做得鲜亮一些,也就是色彩方面要跟网页的主体色分离开来。有时候为了更突出,也可以使用与主题色相反的颜色。

      2.3.3 色彩的对比搭配
      网页中总是由具有某种内在联系的各种色彩,组成一个完整统一的整体,形成画面色彩的总体趋向,称为色调,也可以理解为色彩状态。色彩给人的感觉与氛围,是影响配色视觉效果的决定因素。

      在一定条件下,不同色彩之间的对比会有不同的效果。在不同的环境下,多色彩给人一种印象,色彩单一给人另一种印象。

      各种纯色的对比会产生鲜明的色彩效果,很容易给人带来视觉与心理的满足。红、黄、蓝3种颜色是最极端的色彩,它们之间对比,哪一种颜色也无法影响对方。色彩对比范畴不局限于红、黄、蓝这3种颜色,而是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别,使网页色彩配合增添了许多变化、页面更加丰富多彩。

      1.色相对比
      色相对比是指因色相之间的差别形成的对比。当主色相确定后,必须考虑其他色彩与主色相是什么关系,要表现什么内容及效果等,这样才能增强其表现力。不同色相对比取得的效果有所不同,两色越接近,对比效果越柔和,越接近补色,对比效果越强烈。

      2.明度对比
      明度对比是指因色彩之间明暗程度的差别而形成的对比,是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大,如柠檬黄的明度高,蓝紫色的明度低,橙色和绿色属中明度,红色与蓝色属中低明度。

      3.纯度对比
      纯度对比是指因不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度这3种。未经调和的原色纯度是最高的,而中间色多属中纯度的色彩,复色其本身纯度偏低而属于低纯度的色彩范围。纯度的对比会使色彩的效果更明确和肯定。

      4.补色对比
      将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置,使色彩感觉更为鲜明,纯度增加,称为补色对比。

      5.冷暖对比
      冷暖对比是指因不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系,以红、橙、黄为暖色系,蓝、绿、紫则代表着冷色系,两者基本上互为补色关系。另外,色彩的冷暖对比还受明度与纯度的影响,白色反射高而感觉冷,黑色吸收率高而感觉暖。

      6.面积对比
      同一种色彩,面积越大,明度、纯度越强,面积越小,明度、纯度越低。面积大的时候,亮的色显得更轻,暗的色显得更重,这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别,影响到页面主次关系。

网友评论

登录后评论
0/500
评论
异步社区
+ 关注