网页设计色彩设计.docx

网页设计色彩设计.docx

《网页设计色彩设计.docx》由会员分享，可在线阅读，更多相关《网页设计色彩设计.docx（30页珍藏版）》请在冰豆网上搜索。

网页设计色彩设计

网页设计：

色彩设计与风格创意

网站作为新媒体，具有更多与传统媒体不同的特征和特性。

网页设计是网站视觉内容，在浏览者进入站点的第一时间，呈现给他们的视觉信息。

不仅如此，一个合理的、易用的、美观的网站设计是网站长期发展的必要条件之一。

在互联网上有着成百上千的不同信息的网站。

即使是同类信息，根据信息规模、信息归类方式、不同喜好的访问者群体等诸多因素，网站的架设也不会相同。

同类信息的网站会有很多共同的特征，从共性点出发，分析色彩、风格、细节等方面，有助于设计师快速而准确地把握网站设计的方向。

同时结合每个网站的个性特质，设计出与众不同的网站作品来。

一个网站可能具有多种信息含义和目的，但是设计师将围绕其中最主要的目的展开创意。

在有针对性的探讨各网站设计之前，我们先要了解网站设计的基础元素，掌握设计网站的最基本的要点和概念。

第1章网页的色彩设计

色彩是最先也是最持久地影响浏览者对网站兴趣的因素。

色彩的使用在网页设计中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。

色彩所表现的情感与内涵也会影响浏览者从感官到理性思维对网站的理解，所以我们必须慎重考虑网页设计中色彩的选取与搭配。

实用网页色彩设计也有一些可寻性规律。

想要做好色彩设计，需要大量的鉴赏与实践，以及学习色彩方面的常识。

1.1色彩的基本常识

什么是色彩？

简单地说，色彩就是光经过物体散射到达人眼睛中的颜色。

1.1.1色彩的三要素

在有彩色系中，任何一种颜色都具有三种基本要素，即色相、明度和纯度。

通俗地说，一种色彩只要具备上述三要素，都归为有彩色系的范畴。

无彩色系则只有明度要素，而缺少色相和纯度要素。

色彩的三要素是三位一体，互相依存的关系。

改变三要素的任何一个要素，都将影响到原色彩的外观效果和色彩个性。

所以，在进行色彩研究和构成是，要充分分析三要素的概念和关系。

了解色彩的基本概念和规律，有助于我们进行实用色彩设计。

图1-1-1孟赛尔表色系40色相环

色相（Hue）：

简写H，色彩的相貌，表示色的特质，是区别色彩的必要名称，例如红、橙、黄、绿、青、蓝、紫等。

色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异，而从物理学的角度将，这种差异是由光波的波长决定的。

明度（Value）：

又叫光度，简写V，色彩的强度，是指色彩感觉的明亮或晦暗程度，包括色彩本身的明暗程度或是一种色相在不同强弱光线下呈现的明暗程度。

它是一切色彩现象所具有的共同属性，任何色彩都可以还原为明度性质从而被理解，并以此作为色彩构成的层次与空间依托，于是，有的色彩学家把明度称为“色彩的骨骼”。

纯度（Chroma）：

又叫彩度，简写C，表示色的饱和度。

具体来说，是表明一种颜色中是否含有白或黑的成份。

假如某色不含有白或黑的成份，边是纯色，彩度最高；如含有越多白或黑的成份，它的彩度越会逐步下降。

各个色彩的纯度各不相同，明度也不同。

高纯度的色彩加白、加黑或加其他低纯度的灰色，都会降低它们的纯度。

黑、白、灰只有明度的差别，没有纯度的变化。

在配色中常常将这三种无彩色作为调和、区隔的因素来使用。

我国传统的建筑彩绘，虽使用了大量的纯度高的对比色或补色，但由于巧妙地发挥了黑、白、灰以及金银色的调和作用，使其既富丽堂皇又统一协调。

在视觉设计中，如合理地使用无彩色和金银色同样能取得意想不到的效果。

1.1.2色彩的混合

在现实生活中，人们所看到的大部分颜色都是多种色彩的混合物。

所谓色彩的混合，即用两种或多种色彩相互混合而产生新色彩的方法。

根据混合的形式不用，色彩又分为加色混合、间色混合和中性混合三种。

1.加色混合

加色混合是指色光的混合形式。

当两种以上的色光混合在一起的时候，明度提高。

混合色的亮度相当于参与混合各色光的明度之和，故称“加色混合”。

加色混合的三原色光是红、绿和蓝。

其特点是这三种色光不能用其他色光混合产生，而它们之间混合却能得到任何光，故称“三原色光”。

将三原色光或其中两个色光按照一定的比例相混合，可以产生无色彩系的白色光或灰色光，有彩色系的光能够被无彩色系的光冲淡并变亮。

图1-1-2色光三原色混合

一般图像处理软件所提供的调色板均使用加色混合，如Photoshop的RGB模式图像中，使用“颜色面板来调整当前的前景色，如图1.2-1所示。

图1-1-3颜色面板

2.减色混合

减色混合是指色素的混合形式。

色素混合造成明度降低的减光现象，又称为“减光混合”或“负混合”。

减色混合有色料混合和叠色混合两种方法。

图1-1-4色料三原色混合

色料混合是不同的色彩颜色的混合方法如各种广告色相相互混合、各种油画色相相互混合所形成的新色彩。

色料在混合后，其明度、纯度均随之降低，而色相也呈现新的面貌。

草鱼混合的色料数越多，吸光量越大，而其反射光就越弱。

叠色混合是透明物体色彩间相互重叠的混色方法，也称为“透光混合”。

其特点是：

透明物体没重叠一次，可透过的光线量就减少一些，所展现的新色彩的明度就显得较为暗淡一些。

3.中性混合

中性混合是指基于人眼的生理机能限制而产生的视觉色彩混合形式。

这类混色效果的明度既不增加也不减少，而是接近混合色各明度的平均值，故称为“中性混合”。

1.1.3网页安全色

在网络上，即使是一模一样的色彩，也会由于显示设备、操作系统、显卡以及浏览器的不同而有不尽相同的显示效果。

当网页使用了非常合理非常漂亮的配色方案时，网页中的色彩会受到外界因素的影响，每个人观看的效果都不相同，如此，配色方案想要烘托的网站主题就无法非常好地传达给浏览者，我们要通过什么方法才能解决这个问题呢？

最早使用互联网的一些发达国家花费了很长的时间探索这一问题的解决方案，终于发现了216网页安全色彩（216WebSafetyColor）。

图1-1-5216网页安全色

216网页安全色彩是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的色彩集合，也就是说在任何浏览用户显示设备上都能显示相同效果的色彩。

使用216网页安全色彩进行网页配色可以避免失真问题。

我们不需要特别的记忆216网页安全色彩，很多常用网页制作软件中已携带216网页安全色彩调色板，非常方便。

在Photoshop的色板面板菜单中选择Web安全颜色、Web色相和Web色谱等调色板，载入色彩板中的任何色彩在任何计算机中显示都可以保证显示效果是一样的。

而在Dreamweaver中，所有提供的色彩调色板都是216网页安全色彩，其他软件就不一一列举了。

虽然只有216种色彩是可以确保在任何计算机上的现实效果都是相同的，这并不代表不能使用216种色彩之外的颜色。

216网页安全色彩在需要实现高精度的渐变效果或显示真彩图像或照片时会有一定的欠缺，但用于显示标志或二维平面效果时却是绰绰有余的。

在合理使用网页安全色彩的同时，还应注意搭配使用非网页安全色彩创造独特的风格。

1.2色彩的心理感受

色彩本身是没有灵魂的，它只是一种物理现象，但人们却能够感受到色彩的情感，这是因为人们长期生活在一个充满色彩的世界中，积累了许多视觉经验，一旦直觉经验与外来色彩刺激发生一定的呼应时，就会在人的心理上引发某种情绪。

1.2.1色彩的联想

当人的视觉器官在受到外界的光的刺激时，会唤起大脑有关的色彩记忆痕迹，并自发地将眼前的色彩与过去的视觉经验联系到一起，形成新的情感或思想观念，这个过程称为“色彩的联想”。

色彩的联想视创作主题的不同可分为具体联想、抽象联想和共同联想三种类别。

1.具体联想

色彩的具体联想是指由看到的色彩想到客观存在的、某一直观性的具体事物的色彩心理联想形式。

一般来说，常用的色彩能够产生下面的具体联想。

红色：

太阳、火焰、血、苹果等。

橙色：

橘子、柿子、灯光、秋叶等。

黄色：

向日葵、香蕉、柠檬、黄金、迎春花、枯叶等。

绿色：

大地、草原、森林、蔬菜、青山等。

蓝色：

天空、海洋、水等。

紫色：

葡萄、茄子、夜空等。

白色：

雪、白云、白纸、天鹅等。

灰色：

乌云、灰烬、烟等。

黑色：

夜晚、黑发、乌鸦、煤炭、墨等。

2.抽象联想

色彩的抽象联想是指由观看到的色彩直接相象到某种富于哲理性或抽象性逻辑概念的色彩心理联想形式。

一般来说，常用的色彩能够产生如下的抽象联想。

红色：

热烈、革命、危险、愤怒等。

橙色：

温暖、健康、欢喜、朝气、嫉妒等。

黄色：

光明、希望、富贵、欢乐等。

绿色：

生命、安全、和平、安静、青春、自然等。

蓝色：

平静、理智、诚信、理想、速度等。

紫色：

高贵、优雅、神秘、细腻等。

白色：

纯洁、神圣、清静、明快、高尚等。

灰色：

失意、中庸、绝望、平凡等。

黑色：

恐怖、死亡、刚健、严肃、厚重、坚实等。

3.共同联想

色彩的共同联想是指由色彩视觉引导出其他领域的感觉或反向的色彩心理联想形式。

一般来说可以产生下面的共同联想。

红色：

吼叫、震动、干燥、热、坚硬、辣、浓香等。

橙色：

高音、悠扬、浑厚、发烧、干枯、甘甜、淡香等。

黄色：

明快、响亮、悦耳、光滑、微湿、酸、清香等。

绿色：

平静、清雅、清凉、轻松、酸涩、薄荷等。

蓝色：

悠远、沉重、暗淡、忧郁、腐败等。

紫色：

幽深、柔美、丰润、酸甜等。

白色：

宁静、光亮、无味、花香等。

灰色：

消沉、烟味、无光泽等。

黑色：

沉重、失落、苦、焦炭等。

1.2.2色彩的功能

色彩的功能是指色彩对眼睛及心理的作用，具体一点说，包括眼睛对它们的色相、明度、纯度、对比刺激作用，和心理留下的影响、象征意义及感情影响。

色彩依色相、明度、纯度而千变万化，而色彩间的对比调和效果更加千变万化。

同一色彩及同一对比的调和效果，均可能有多种功能；多种色彩及多种对比的调和效果，亦可能有极为相近的功能。

为了更恰如其分地应用色彩及其对比的调和效果，使之与形象的塑造，表现与美化统一，使形象的外表与内在统一，使作品的色彩与内容、气氛、感情等表现要求统一，使配色与改善视觉效能的实际需求统一；使色彩的表现力、视觉作用及心理影响最充分地发挥出来，给人的眼睛与心灵以充分的愉快、刺激和美的享受，必须对色彩的功能作深入地研究。

但是，要逐一地研究数以千计的色彩功能，既不可能，也不必要。

只要研究一些最基本的色彩就可以了。

这里较以前的色彩还特别加入了黄绿色、蓝绿色、蓝紫色和紫红色，这样可以有助于读者深入理解色彩给人的心里感受。

1.红色

红色的纯度高，注目性高，刺激作用大，人们称之为“火与血”的颜色，能增高血压，加速血液循环。

用红色为主色的网站不多，在大量信息的页面里有大面积的红色，不易于阅读。

但若搭配好了的话，可以起到振奋人心的作用。

图1-2-1

和平设计的进站页面使用的是带有些神秘的暗红色，首页提高了红色的明度和纯度，并大胆地搭配了相反色的绿色，给人视觉上的冲击。

虽然页面运用了大量红色，但是没有给人过度的刺激，不会过于疲劳。

2.橙色

橙色的刺激作用虽然没有红色大，但它的视认性和注目性也很高，既有红色的热情又有黄色的光明，以及活泼的特质，是人们普遍喜爱的色彩。

橙色可以营造出朝气蓬勃和大自然的气氛，它没有红色那么激烈，使用范围较广，所以在网络上十分常见。

图1-2-2

这个站点点缀了深红色的橙色，搭配可爱的矢量人物，烘托出一种趣味，使浏览者始终保持着愉悦的心情。

3.黄色

以黄色为主色的网站虽不多见，但黄色是在站点配色中使用最为广泛的颜色之一，它具有明朗愉快的感觉，在各类信息网站中都可以使用，并得到大多数人的认可。

图1-2-3www.magnatron.nl

这是个全部使用柠檬黄的进站页面，少见且很具有艺术气息。

页面上除了黄色，还是黄色，只是各种黄色的色调不一，形成