第2章 网页布局与配色

16
2．明度对比 明度对比是因明度差别形成的色彩对比为明度对 比。色彩之间明度差别的大小决定着明度对比的强弱。 明度差别越大，对比越强，视觉效果越强，反之则弱。
17
3．纯度对比 因纯度差别而形成的色彩对比为纯度对比。纯度的 对比会使色彩的效果更明确肯定，给人们的视觉冲击 力也更强烈。
18
4．面积对比 如果两种色彩面积大小与色彩形状不同时，那么颜 色之间的对比强度也就不同。当其中的一种色彩变大 时，面积小的一种色彩就会成为大的色彩的补充。
3．色彩知觉 颜色的搭配可以流露设计者的心情和喜好，同时 也会影响到浏览者。为此在网页色彩搭配时设计者应 该考虑到色彩的象征意义。
15
2.3.2
色彩对比
两种以上的色彩，以空间或者时间关系相比较， 能比较出明显的差别，并且产生比较作用，被称为色 彩对比。
1．色相对比 色相对比是因色相的差别而形成的色彩对比为色相对比。
31
2.4.3
网页元素之间色彩搭配
在学习了色彩的一些基本概念，以及色彩的分析 之后。下面我们再具体，来谈一下网页运用中，各元 素的色彩搭配情况。 1．网页标题 2．网页链接 3．网页文字 4．网页Logo和Banner
32
7
2.1.3
网页设计要素
除了确定网页结构及造型外，用户还需要了解网 页设计的一些要素。也就是，每个网页设计人员，需 要注意一些设计内容。 1．网页尺寸 网页尺寸与显示器大小、分辨率有着很大的关系。 2．文本 在网页设计开发过程中，最重要的莫过于网页的视 觉效果，经常需要费很大精力来调整字体和字号。
3．图片 图片和文本是网页的两大构成元素，缺一不可。
8
2.2
色彩基础知识
如果网站的外观要给浏览者留下一个深刻的印 象，则网站的视觉效果必须吸引人。因而，网页设 计对色彩的依赖性很高，色彩设计同时还是网站风 格设计的决定性因素之一。
9
2.2.1
1．色相
色彩理论
色相指色彩的相貌，是区别色彩种类的名称。 是根据该色光波长划分的，只要色彩的波长相同， 色相就相同，波长不同才产生色相的差别。红、橙、 黄、绿、蓝、紫等每个宇都代表一类具体的色相， 它们之间的差别就属于色相差别。
27
3．单色的使用 网站设计要避免采用单一色彩，这样会使画面比 较单调而显得空洞，但是通过调整色彩的饱和度和透 明度也可以产生变化，也就是使网站避免单调。
28
4．可读性的色彩设计 网站是信息的载体形式，色彩设计必须以完成网站 的可视性阅读功能为主要目的。
29
5．色彩计划 Flash技术的应用使很多原本不可能实现的网站效 果可以实现了。在色彩设计上表现为让浏览者任意选 择背景色或者是每一个栏目的色调均不相同。
13
2.3.1

色彩分析
色彩对人的头脑和精神的影响力，是客观存在的。 色彩的知觉力、色彩的辨别力、色彩的象征力与感情， 这些都是色彩心理学上的重要问题。 1．色彩情感 不同的颜色会给浏览者不同的心理感受，但是同一 种颜色通常不只含有一个象征意义。
2．色彩联想 3．色彩知觉
14
2．色彩联想 色彩本身是没有任何含义的，联想产生含义，色 彩在联想间影响人的心理，左右人的情绪，不同的色 彩联想给各种色彩都赋予了特定的含义。这就要求设 计人员在用色时不仅是单单地运用，还要考虑诸多因 素。
25
2.4.1
网页色彩规则
在网站中使用色彩，要多方面考虑，既要使网站 风格独特，也要考虑到网站的功能性与实用性。这样 才能使网站既有欣赏价值，还具有实用价值。 1．特色鲜明 一个网站的用色必须要有自己独特的风格，这样才能 显得个性鲜明。
26
2．搭配合理 网页设计虽然属于平面设计的范畴，但它又与其它 平面设计不同，它在遵从艺术规律的同时，还考虑人的 生理特点，合理的色彩搭配能给人一种和谐、愉快的感 觉。
3
2.1.1
网页布局类型
网页设计也属于平面设计，所以平面设计中的构 图原理同样适用于网页设计。而在网页中，其布局可 以分成两种类型，一种是结构布局，另一种是艺术布 局。
1．结构布局 结构布局是许多用户根据网页的内容，或者常见 的一些网页风格而确定下来的一种设计模式。 “国”字型网页布局 拐角型网页布局 左右框架型网页布局 封面型网页布局
第2 章
网页布局与配色
在前面的章节中，已经了解建设网站的 流程，其中在设计之前要确定网站的布局。而 在布局之后，还包含网站的颜色等等。 网页设计已经渐渐走向成熟，一般在制 作网站之前，先要考虑网站的整体视觉效果。 在网站整体视觉效果中，主要是网页的色彩搭 配与网页布局。前者决定了浏览该网站的第一 印象；而后者则决定网站中的信息是否为合理 的安排。
11
2.2.2
216网页安全色
216网页安全颜色是指在不同硬件环境、不同操 作系统、不同浏览器中都能够正常显示的颜色集合， 这些颜色在任何终端浏览用户显示设备上的显示效果 都是相同的。所以使用216网页安全颜色进行网页配 色可以避免原有的颜色失真问题。
12
2.3
配色方案
色彩的搭配不仅在平面设计中比较重要，而在 网页中也很关键。简单的网页配色方法，可以更好 地利用色彩表达网页中的宗旨，所以下面来介绍一 下颜色合理的搭配。
21
2．近似色调和 近似色调和是使用邻近的颜色或者在色环上很接近的 颜色做调和。
22
3．互补色调和 互补色调和是使用色环上两个相对的颜色做调和。
23
4．对比色调和 对比色调和：使用一种颜色，再加上其互补色旁边 的两个颜色做调和。
24
2.4
网站中的色彩应用
网站的色彩设计有其自身的色彩应用规律。为 体现网站整体效果，选定的色彩组合要结合框架设计 来分配色彩面积和位置。如果要以突出的色彩设计形 成网站风格，就需要有计划性地思量色彩布局和色彩 组合。
1
本章学习要点：
网页布局 色彩基础
配色方案
网站中的色彩应用
2
2.1
网页设计基础
网页设计之前，呈现在面前的像一张白纸，需 要用户挥洒自己的设计才思。当然，在网页设计之 前，用户已经确定了网站的主题，以及搜集了网站 的一些素材。用户只需要根据主题，将所素材合理 的布局即可设计出一个网页。
10
2．饱和度 饱和度是指色彩的纯净程度，取决于该色中含色 成分和消色成分的比例，含色成分越大，饱和度越大； 消色成分越大，饱和度越小，也就是说，向任何一种 色彩中加入黑、白、灰都会降低它的饱和度，加的越 多就降的越低，直到变成灰色。 3．亮度 亮度指色彩的明暗程度。亮度是全部色彩都 具有的属性，亮度关系是搭配色彩的基础。亮度在 三要素中具有较强的独立性，它可以不带任何色相 的特征而通过黑白灰的关系单独呈现出来。
4
2．艺术布局 艺术布局与结构布局不同，它打破了传统结构 布局方式，站在平面设计角度来设计网页的风格。 在设计过程中，艺术布局按照平面设计的规则性、 对称性和肌理等，来设计网页页面。
对称结构 分割结构 平衡结构 肌理构成
5
2.1.2
网页整体造型
网页造型与网页布局，并不是相同概念。通过上 述可知，网页布局是将网页内容在网页框架中合理安 排的表现。 而造型是创造出来的物体形象。这里是指网页的 整体形象，这种形象应该是一个整体，图形与文本的 接合应该是层叠有序。
30
2.4.2
网站色彩分析
当了解单纯颜色的使用后，还需要从网站的不同 方面来决定色彩的搭配。 1．网站风格与色彩设计 色彩作为网站设计主要体现风格形式的视觉要素之 一，对网站设计来说分量是很重的。 2．网站主题与色彩设计 在确定网站的主题色调后，在设计过程中不仅要 对文本、图片的色彩选择谨慎，使其网页整体色彩搭 配和谐、统一、平衡、协调等。 3．同色调的不同风格网站 不同的明度，或者不同的纯度，会产生不同风格的 网站。
1．矩形 矩形代表着正式、规则等。一般很多单位或者政 府网页，都是以矩形为整体造型。
6
2．圆形造型 圆形代表着柔和、团结、温暖、安全等，许多 时尚类和饮食类网站喜欢以圆形为网页整体造型。 3．三角形造型 三角形代表着力量、权威、牢固、侵略等，许 多大型的商业网站为显示它的权威性常以三角形为 网页整体造型。
19
5．综合对比 有彩色系列之间有可能产生明度、色相和纯度差 别；无彩色系列和有彩色系列之间，也会有明度和纯 度差别。
20
2.3.3
色彩调和
对比是产生美感的基础。没有对比图像中各元素 就没有神经刺激兴奋的因素。但是色彩的对比是“绝 对”和“调和”两个相对方面。对比是目的，调和是 手段。 1．同色调和 同色调和是单一颜色，只是深浅、色调和明暗度不 同。