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

1、1第第2 2章章 网页布局与配色网页布局与配色 在前面的章节中，已经了解建设网站的流程，其中在设计之前要确定网站的布局。而在布局之后，还包含网站的颜色等等。 网页设计已经渐渐走向成熟，一般在制作网站之前，先要考虑网站的整体视觉效果。在网站整体视觉效果中，主要是网页的色彩搭配与网页布局。前者决定了浏览该网站的第一印象；而后者则决定网站中的信息是否为合理的安排。2 网页布局 色彩基础 配色方案 网站中的色彩应用本章学习要点：本章学习要点：2.1 2.1 网页设计基础网页设计基础3 网页设计之前，呈现在面前的像一张白纸，需要用户挥洒自己的设计才思。当然，在网页设计之前，用户已经确定了网站的主题，以及

2、搜集了网站的一些素材。用户只需要根据主题，将所素材合理的布局即可设计出一个网页。2.1.1 2.1.1 网页布局类型网页布局类型4 网页设计也属于平面设计，所以平面设计中的构图原理同样适用于网页设计。而在网页中，其布局可以分成两种类型，一种是结构布局，另一种是艺术布局。1结构布局结构布局 结构布局是许多用户根据网页的内容，或者常见的一些网页风格而确定下来的一种设计模式。l “国”字型网页布局l 拐角型网页布局l 左右框架型网页布局l 封面型网页布局52 2艺术布局艺术布局l 分割结构l 对称结构l 平衡结构l 肌理构成 艺术布局与结构布局不同，它打破了传统结构布局方式，站在平面设计角度来设计网

3、页的风格。在设计过程中，艺术布局按照平面设计的规则性、对称性和肌理等，来设计网页页面。2.1.2 2.1.2 网页整体造型网页整体造型6 网页造型与网页布局，并不是相同概念。通过上述可知，网页布局是将网页内容在网页框架中合理安排的表现。 而造型是创造出来的物体形象。这里是指网页的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。1 1矩形矩形 矩形代表着正式、规则等。一般很多单位或者政府网页，都是以矩形为整体造型。72 2圆形造型圆形造型 圆形代表着柔和、团结、温暖、安全等，许多时尚类和饮食类网站喜欢以圆形为网页整体造型。3 3三角形造型三角形造型 三角形代表着力量、权威、牢固

4、、侵略等，许多大型的商业网站为显示它的权威性常以三角形为网页整体造型。2.1.3 2.1.3 网页设计要素网页设计要素 除了确定网页结构及造型外，用户还需要了解网页设计的一些要素。也就是，每个网页设计人员，需要注意一些设计内容。 81 1网页网页尺寸尺寸 网页尺寸与显示器大小、分辨率有着很大的关系。2 2文本文本 在网页设计开发过程中，最重要的莫过于网页的视觉效果，经常需要费很大精力来调整字体和字号。3 3图片图片 图片和文本是网页的两大构成元素，缺一不可。2.2 2.2 色彩基础知识色彩基础知识 如果网站的外观要给浏览者留下一个深刻的印象，则网站的视觉效果必须吸引人。因而，网页设计对色彩的依

5、赖性很高，色彩设计同时还是网站风格设计的决定性因素之一。92.2.2.2.1 1 色彩理论色彩理论101 1色相色相 色相指色彩的相貌，是区别色彩种类的名称。是根据该色光波长划分的，只要色彩的波长相同，色相就相同，波长不同才产生色相的差别。红、橙、黄、绿、蓝、紫等每个宇都代表一类具体的色相，它们之间的差别就属于色相差别。112饱和度饱和度 饱和度是指色彩的纯净程度，取决于该色中含色成分和消色成分的比例，含色成分越大，饱和度越大；消色成分越大，饱和度越小，也就是说，向任何一种色彩中加入黑、白、灰都会降低它的饱和度，加的越多就降的越低，直到变成灰色。3 3亮度亮度亮度指色彩的明暗程度。亮度是全部色

6、彩都具有的属性，亮度关系是搭配色彩的基础。亮度在三要素中具有较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出来。2.22.2.2.2 216216网页安全色网页安全色12 216网页安全颜色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。所以使用216网页安全颜色进行网页配色可以避免原有的颜色失真问题。2.3 2.3 配色方案配色方案 色彩的搭配不仅在平面设计中比较重要，而在网页中也很关键。简单的网页配色方法，可以更好地利用色彩表达网页中的宗旨，所以下面来介绍一下颜色合理的搭配。132.3.1

7、2.3.1 色彩分析色彩分析 色彩对人的头脑和精神的影响力，是客观存在的。色彩的知觉力、色彩的辨别力、色彩的象征力与感情，这些都是色彩心理学上的重要问题。141 1色彩色彩情感情感 不同的颜色会给浏览者不同的心理感受，但是同一种颜色通常不只含有一个象征意义。2 2色彩联想色彩联想3 3色彩知觉色彩知觉152 2色彩色彩联想联想 色彩本身是没有任何含义的，联想产生含义，色彩在联想间影响人的心理，左右人的情绪，不同的色彩联想给各种色彩都赋予了特定的含义。这就要求设计人员在用色时不仅是单单地运用，还要考虑诸多因素。3 3色彩色彩知觉知觉 颜色的搭配可以流露设计者的心情和喜好，同时也会影响到浏览者。为

8、此在网页色彩搭配时设计者应该考虑到色彩的象征意义。16 两种以上的色彩，以空间或者时间关系相比较，能比较出明显的差别，并且产生比较作用，被称为色彩对比。2.3.2 2.3.2 色彩对比色彩对比1 1色相色相对比对比 色相对比是因色相的差别而形成的色彩对比为色相对比。172 2明度对比明度对比 明度对比是因明度差别形成的色彩对比为明度对比。色彩之间明度差别的大小决定着明度对比的强弱。明度差别越大，对比越强，视觉效果越强，反之则弱。183 3纯度纯度对比对比 因纯度差别而形成的色彩对比为纯度对比。纯度的对比会使色彩的效果更明确肯定，给人们的视觉冲击力也更强烈。194 4面积面积对比对比 如果两种色

9、彩面积大小与色彩形状不同时，那么颜色之间的对比强度也就不同。当其中的一种色彩变大时，面积小的一种色彩就会成为大的色彩的补充。205 5综合综合对比对比 有彩色系列之间有可能产生明度、色相和纯度差别；无彩色系列和有彩色系列之间，也会有明度和纯度差别。212.3.3 2.3.3 色彩调和色彩调和 对比是产生美感的基础。没有对比图像中各元素就没有神经刺激兴奋的因素。但是色彩的对比是“绝对”和“调和”两个相对方面。对比是目的，调和是手段。1 1同色调同色调和和 同色调和是单一颜色，只是深浅、色调和明暗度不同。222 2近似色调近似色调和和 近似色调和是使用邻近的颜色或者在色环上很接近的颜色做调和。23

10、3 3互补色调互补色调和和 互补色调和是使用色环上两个相对的颜色做调和。244 4对比色调对比色调和和 对比色调和：使用一种颜色，再加上其互补色旁边的两个颜色做调和。2.4 2.4 网站中的色彩应用网站中的色彩应用 网站的色彩设计有其自身的色彩应用规律。为体现网站整体效果，选定的色彩组合要结合框架设计来分配色彩面积和位置。如果要以突出的色彩设计形成网站风格，就需要有计划性地思量色彩布局和色彩组合。25262.4.1 2.4.1 网页色彩规则网页色彩规则 在网站中使用色彩，要多方面考虑，既要使网站风格独特，也要考虑到网站的功能性与实用性。这样才能使网站既有欣赏价值，还具有实用价值。1 1特色特色

11、鲜明鲜明 一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明。272 2搭配搭配合理合理 网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，合理的色彩搭配能给人一种和谐、愉快的感觉。283 3单色的单色的使用使用 网站设计要避免采用单一色彩，这样会使画面比较单调而显得空洞，但是通过调整色彩的饱和度和透明度也可以产生变化，也就是使网站避免单调。294 4可读性的色彩可读性的色彩设计设计 网站是信息的载体形式，色彩设计必须以完成网站的可视性阅读功能为主要目的。305 5色彩色彩计划计划 Flash技术的应用使很多原本不可能实现的网站效果可

12、以实现了。在色彩设计上表现为让浏览者任意选择背景色或者是每一个栏目的色调均不相同。312.4.2 2.4.2 网站色彩分析网站色彩分析 当了解单纯颜色的使用后，还需要从网站的不同方面来决定色彩的搭配。1 1网站风格与色彩网站风格与色彩设计设计 色彩作为网站设计主要体现风格形式的视觉要素之一，对网站设计来说分量是很重的。2 2网站主题与色彩网站主题与色彩设计设计 在确定网站的主题色调后，在设计过程中不仅要对文本、图片的色彩选择谨慎，使其网页整体色彩搭配和谐、统一、平衡、协调等。3 3同色调的不同风格同色调的不同风格网站网站 不同的明度，或者不同的纯度，会产生不同风格的网站。322.4.3 2.4.3 网页元素之间色彩搭配网页元素之间色彩搭配 在学习了色彩的一些基本概念，以及色彩的分析之后。下面我们再具体，来谈一下网页运用中，各元素的色彩搭配情况。1 1网页标题网页标题2 2网页链接网页链接3 3网页文字网页文字4 4网页网页LogoLogo和和BannerBanner