第2章-网页布局与配色分析课件

1第2章网页布局与配色

在前面的章节中，已经了解建设网站的流程，其中在设计之前要确定网站的布局。而在布局之后，还包含网站的颜色等等。

网页设计已经渐渐走向成熟，一般在制作网站之前，先要考虑网站的整体视觉效果。在网站整体视觉效果中，主要是网页的色彩搭配与网页布局。前者决定了浏览该网站的第一印象；而后者则决定网站中的信息是否为合理的安排。1第2章网页布局与配色在前面的章节中，已2网页布局色彩基础配色方案网站中的色彩应用本章学习要点：2网页布局本章学习要点：2.1网页设计基础3

网页设计之前，呈现在面前的像一张白纸，需要用户挥洒自己的设计才思。当然，在网页设计之前，用户已经确定了网站的主题，以及搜集了网站的一些素材。用户只需要根据主题，将所素材合理的布局即可设计出一个网页。2.1网页设计基础3网页设计之前，呈现在面前的像2.1.1网页布局类型4

网页设计也属于平面设计，所以平面设计中的构图原理同样适用于网页设计。而在网页中，其布局可以分成两种类型，一种是结构布局，另一种是艺术布局。1．结构布局

结构布局是许多用户根据网页的内容，或者常见的一些网页风格而确定下来的一种设计模式。“国”字型网页布局拐角型网页布局左右框架型网页布局封面型网页布局2.1.1网页布局类型4网页设计也属于平52．艺术布局分割结构对称结构平衡结构肌理构成

艺术布局与结构布局不同，它打破了传统结构布局方式，站在平面设计角度来设计网页的风格。在设计过程中，艺术布局按照平面设计的规则性、对称性和肌理等，来设计网页页面。52．艺术布局分割结构对称结构平衡结构肌理构成艺术布2.1.2网页整体造型6

网页造型与网页布局，并不是相同概念。通过上述可知，网页布局是将网页内容在网页框架中合理安排的表现。

而造型是创造出来的物体形象。这里是指网页的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。1．矩形

矩形代表着正式、规则等。一般很多单位或者政府网页，都是以矩形为整体造型。2.1.2网页整体造型6网页造型与网页布局，并不72．圆形造型

圆形代表着柔和、团结、温暖、安全等，许多时尚类和饮食类网站喜欢以圆形为网页整体造型。3．三角形造型

三角形代表着力量、权威、牢固、侵略等，许多大型的商业网站为显示它的权威性常以三角形为网页整体造型。72．圆形造型3．三角形造型2.1.3网页设计要素

除了确定网页结构及造型外，用户还需要了解网页设计的一些要素。也就是，每个网页设计人员，需要注意一些设计内容。

81．网页尺寸

网页尺寸与显示器大小、分辨率有着很大的关系。2．文本

在网页设计开发过程中，最重要的莫过于网页的视觉效果，经常需要费很大精力来调整字体和字号。3．图片

图片和文本是网页的两大构成元素，缺一不可。2.1.3网页设计要素除了确定网2.2色彩基础知识

如果网站的外观要给浏览者留下一个深刻的印象，则网站的视觉效果必须吸引人。因而，网页设计对色彩的依赖性很高，色彩设计同时还是网站风格设计的决定性因素之一。92.2色彩基础知识如果网站的外观2.2.1色彩理论101．色相

色相指色彩的相貌，是区别色彩种类的名称。是根据该色光波长划分的，只要色彩的波长相同，色相就相同，波长不同才产生色相的差别。红、橙、黄、绿、蓝、紫等每个宇都代表一类具体的色相，它们之间的差别就属于色相差别。2.2.1色彩理论101．色相色相指色彩的相貌，112．饱和度

饱和度是指色彩的纯净程度，取决于该色中含色成分和消色成分的比例，含色成分越大，饱和度越大；消色成分越大，饱和度越小，也就是说，向任何一种色彩中加入黑、白、灰都会降低它的饱和度，加的越多就降的越低，直到变成灰色。3．亮度

亮度指色彩的明暗程度。亮度是全部色彩都具有的属性，亮度关系是搭配色彩的基础。亮度在三要素中具有较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出来。112．饱和度3．亮度2.2.2216网页安全色12216网页安全颜色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。所以使用216网页安全颜色进行网页配色可以避免原有的颜色失真问题。2.2.2216网页安全色12216网页安全颜色2.3配色方案

色彩的搭配不仅在平面设计中比较重要，而在网页中也很关键。简单的网页配色方法，可以更好地利用色彩表达网页中的宗旨，所以下面来介绍一下颜色合理的搭配。132.3配色方案色彩的搭配不仅在平2.3.1色彩分析

色彩对人的头脑和精神的影响力，是客观存在的。色彩的知觉力、色彩的辨别力、色彩的象征力与感情，这些都是色彩心理学上的重要问题。141．色彩情感

不同的颜色会给浏览者不同的心理感受，但是同一种颜色通常不只含有一个象征意义。2．色彩联想3．色彩知觉2.3.1色彩分析色彩对人的头脑152．色彩联想

色彩本身是没有任何含义的，联想产生含义，色彩在联想间影响人的心理，左右人的情绪，不同的色彩联想给各种色彩都赋予了特定的含义。这就要求设计人员在用色时不仅是单单地运用，还要考虑诸多因素。3．色彩知觉

颜色的搭配可以流露设计者的心情和喜好，同时也会影响到浏览者。为此在网页色彩搭配时设计者应该考虑到色彩的象征意义。152．色彩联想3．色彩知觉16

两种以上的色彩，以空间或者时间关系相比较，能比较出明显的差别，并且产生比较作用，被称为色彩对比。2.3.2色彩对比1．色相对比

色相对比是因色相的差别而形成的色彩对比为色相对比。16两种以上的色彩，以空间或者时间关系相比较，能比较172．明度对比

明度对比是因明度差别形成的色彩对比为明度对比。色彩之间明度差别的大小决定着明度对比的强弱。明度差别越大，对比越强，视觉效果越强，反之则弱。172．明度对比183．纯度对比

因纯度差别而形成的色彩对比为纯度对比。纯度的对比会使色彩的效果更明确肯定，给人们的视觉冲击力也更强烈。183．纯度对比194．面积对比

如果两种色彩面积大小与色彩形状不同时，那么颜色之间的对比强度也就不同。当其中的一种色彩变大时，面积小的一种色彩就会成为大的色彩的补充。194．面积对比205．综合对比

有彩色系列之间有可能产生明度、色相和纯度差别；无彩色系列和有彩色系列之间，也会有明度和纯度差别。205．综合对比212.3.3色彩调和

对比是产生美感的基础。没有对比图像中各元素就没有神经刺激兴奋的因素。但是色彩的对比是“绝对”和“调和”两个相对方面。对比是目的，调和是手段。1．同色调和

同色调和是单一颜色，只是深浅、色调和明暗度不同。212.3.3色彩调和对比是产生美感的基础。没有222．近似色调和

近似色调和是使用邻近的颜色或者在色环上很接近的颜色做调和。222．近似色调和233．互补色调和

互补色调和是使用色环上两个相对的颜色做调和。233．互补色调和244．对比色调和

对比色调和：使用一种颜色，再加上其互补色旁边的两个颜色做调和。244．对比色调和2.4网站中的色彩应用

网站的色彩设计有其自身的色彩应用规律。为体现网站整体效果，选定的色彩组合要结合框架设计来分配色彩面积和位置。如果要以突出的色彩设计形成网站风格，就需要有计划性地思量色彩布局和色彩组合。252.4网站中的色彩应用网站的色彩262.4.1网页色彩规则

在网站中使用色彩，要多方面考虑，既要使网站风格独特，也要考虑到网站的功能性与实用性。这样才能使网站既有欣赏价值，还具有实用价值。1．特色鲜明

一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明。262.4.1网页色彩规则在网站中使用色彩，要多272．搭配合理

网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，合理的色彩搭配能给人一种和谐、愉快的感觉。272．搭配合理283．单色的使用

网站设计要避免采用单一色彩，这样会使画面比较单调而显得空洞，但是通过调整色彩的饱和度和透明度也可以产生变化，也就是使网站避免单调。283．单色的使用294．可读性的色彩设计

网站是信息的载体形式，色彩设计必须以完成网站的可视性阅读功能为主要目的。294．可读性的色彩设计305．色彩计划Flash技术的应用使很多原本不可能实现的网站效果可以实现了。在色彩设计上表现为让浏览者任意选择背景色或者是每一个栏目的色调均不相同。305．色彩计划312.4.2网站色彩分析

当了解单纯颜色的使用后，还需要从网站的不同方面来决定色彩的搭配。1．网站风格与色彩设计

色彩作为网站设计主要体现风格形式的视觉要素之一，对网站设计来说分量是很重的。2．网站主题与色彩设计

在确定网站的主题色调后，在设计过程中不仅要对文本、图片的色彩选择谨慎，使其网页整体色彩搭配和谐、统一、平衡、协调等。3．同色调的不同风格网站

不同的明度，或者不同的纯度，会产生不同风格的网站。312.4.2网站色彩分析当了解单纯颜色322.4.3网页元素之间色彩搭配

在学习了色彩的一些基本概念，以及色彩的分析之后。下面我们再具体，来谈一下网页运用中，各元素的色彩搭配情况。1．网页标题2．网页链接3．网页文字4．网页Logo和Banner322.4.3网页元素之间色彩搭配在学习33第2章网页布局与配色

在前面的章节中，已经了解建设网站的流程，其中在设计之前要确定网站的布局。而在布局之后，还包含网站的颜色等等。

网页设计已经渐渐走向成熟，一般在制作网站之前，先要考虑网站的整体视觉效果。在网站整体视觉效果中，主要是网页的色彩搭配与网页布局。前者决定了浏览该网站的第一印象；而后者则决定网站中的信息是否为合理的安排。1第2章网页布局与配色在前面的章节中，已34网页布局色彩基础配色方案网站中的色彩应用本章学习要点：2网页布局本章学习要点：2.1网页设计基础35

网页设计之前，呈现在面前的像一张白纸，需要用户挥洒自己的设计才思。当然，在网页设计之前，用户已经确定了网站的主题，以及搜集了网站的一些素材。用户只需要根据主题，将所素材合理的布局即可设计出一个网页。2.1网页设计基础3网页设计之前，呈现在面前的像2.1.1网页布局类型36

网页设计也属于平面设计，所以平面设计中的构图原理同样适用于网页设计。而在网页中，其布局可以分成两种类型，一种是结构布局，另一种是艺术布局。1．结构布局

结构布局是许多用户根据网页的内容，或者常见的一些网页风格而确定下来的一种设计模式。“国”字型网页布局拐角型网页布局左右框架型网页布局封面型网页布局2.1.1网页布局类型4网页设计也属于平372．艺术布局分割结构对称结构平衡结构肌理构成

艺术布局与结构布局不同，它打破了传统结构布局方式，站在平面设计角度来设计网页的风格。在设计过程中，艺术布局按照平面设计的规则性、对称性和肌理等，来设计网页页面。52．艺术布局分割结构对称结构平衡结构肌理构成艺术布2.1.2网页整体造型38

网页造型与网页布局，并不是相同概念。通过上述可知，网页布局是将网页内容在网页框架中合理安排的表现。

而造型是创造出来的物体形象。这里是指网页的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。1．矩形

矩形代表着正式、规则等。一般很多单位或者政府网页，都是以矩形为整体造型。2.1.2网页整体造型6网页造型与网页布局，并不392．圆形造型

圆形代表着柔和、团结、温暖、安全等，许多时尚类和饮食类网站喜欢以圆形为网页整体造型。3．三角形造型

三角形代表着力量、权威、牢固、侵略等，许多大型的商业网站为显示它的权威性常以三角形为网页整体造型。72．圆形造型3．三角形造型2.1.3网页设计要素

除了确定网页结构及造型外，用户还需要了解网页设计的一些要素。也就是，每个网页设计人员，需要注意一些设计内容。

401．网页尺寸

网页尺寸与显示器大小、分辨率有着很大的关系。2．文本

在网页设计开发过程中，最重要的莫过于网页的视觉效果，经常需要费很大精力来调整字体和字号。3．图片

图片和文本是网页的两大构成元素，缺一不可。2.1.3网页设计要素除了确定网2.2色彩基础知识

如果网站的外观要给浏览者留下一个深刻的印象，则网站的视觉效果必须吸引人。因而，网页设计对色彩的依赖性很高，色彩设计同时还是网站风格设计的决定性因素之一。412.2色彩基础知识如果网站的外观2.2.1色彩理论421．色相

色相指色彩的相貌，是区别色彩种类的名称。是根据该色光波长划分的，只要色彩的波长相同，色相就相同，波长不同才产生色相的差别。红、橙、黄、绿、蓝、紫等每个宇都代表一类具体的色相，它们之间的差别就属于色相差别。2.2.1色彩理论101．色相色相指色彩的相貌，432．饱和度

饱和度是指色彩的纯净程度，取决于该色中含色成分和消色成分的比例，含色成分越大，饱和度越大；消色成分越大，饱和度越小，也就是说，向任何一种色彩中加入黑、白、灰都会降低它的饱和度，加的越多就降的越低，直到变成灰色。3．亮度

亮度指色彩的明暗程度。亮度是全部色彩都具有的属性，亮度关系是搭配色彩的基础。亮度在三要素中具有较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出来。112．饱和度3．亮度2.2.2216网页安全色44216网页安全颜色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。所以使用216网页安全颜色进行网页配色可以避免原有的颜色失真问题。2.2.2216网页安全色12216网页安全颜色2.3配色方案

色彩的搭配不仅在平面设计中比较重要，而在网页中也很关键。简单的网页配色方法，可以更好地利用色彩表达网页中的宗旨，所以下面来介绍一下颜色合理的搭配。452.3配色方案色彩的搭配不仅在平2.3.1色彩分析

色彩对人的头脑和精神的影响力，是客观存在的。色彩的知觉力、色彩的辨别力、色彩的象征力与感情，这些都是色彩心理学上的重要问题。461．色彩情感

不同的颜色会给浏览者不同的心理感受，但是同一种颜色通常不只含有一个象征意义。2．色彩联想3．色彩知觉2.3.1色彩分析色彩对人的头脑472．色彩联想

色彩本身是没有任何含义的，联想产生含义，色彩在联想间影响人的心理，左右人的情绪，不同的色彩联想给各种色彩都赋予了特定的含义。这就要求设计人员在用色时不仅是单单地运用，还要考虑诸多因素。3．色彩知觉

颜色的搭配可以流露设计者的心情和喜好，同时也会影响到浏览者。为此在网页色彩搭配时设计者应该考虑到色彩的象征意义。152．色彩联想3．色彩知觉48

两种以上的色彩，以空间或者时间关系相比较，能比较出明显的差别，并且产生比较作用，被称为色彩对比。2.3.2色彩对比1．色相对比

色相对比是因色相的差别而形成的色彩对比为色相对比。16两种以上的色彩，以空间或者时间关系相比较，能比较492．明度对比

明度对比是因明度差别形成的色彩对比为明度对比。色彩之间明度差别的大小决定着明度对比的强弱。明度差别越大，对比越强，视觉效果越强，反之则弱。172．明度对比503．纯度对比

因纯度差别而形成的色彩对比为纯度对比。纯度的对比会使色彩的效果更明确肯定，给人们的视觉冲击力也更强烈。183．纯度对比514．面积对比

如果两种色彩面积大小与色彩形状不同时，那么颜色之间的对比强度也就不同。当其中的一种色彩变大时，面积小的一种色彩就会成为大的色彩的补充。194．面积对比525．综合对比

有彩色系列之间有可能产生明度、色相和纯度差别；无彩色系列和有彩色系列之间，也会有明度和纯度差别。205．综合对比532.3.3色彩调和

对比是产生美感的基础。没有对比图像中各元素就没有神经刺激兴奋的因素。但是色彩的对比是“绝对”和“调和”两个相对方面。对比是目的，调和是手段。1．同色调和

同色调和是单一颜色，只是深浅、色调和明暗度不同。212.3.3色彩调和对比是产生美感的基础。没有542．近似色调和

近似色调和是使用邻近的颜色或者在色环上很接近的颜色做调和。222．近似色调和553．互补色调和

互补色调和是使用色环上两个相对的颜色做调和。233．互补色调和564．对比色调和

对比色调和：使用一种颜色，再加上其互补色旁边的两个颜色做调和。244．对比色调和2.4网站中的色彩应用

网站的色彩设计有其自身的色彩应用规律。为体现网站整体效果，选定的色彩组合要结合框架设计来分配色彩面积和位置。如果要以突出的色彩设计形成网站风格，就需要有计划性地思量色彩布局和色彩组合。572.4网站中的色彩应用网站的色彩582.4.1网页色彩规则

在网站中使用色彩，要多方面考虑，既要使网站风格独特，也要考虑到网站的