第2章 网页布局与配色.ppt

* 2.4.3 网页元素之间色彩搭配 在学习了色彩的一些基本概念，以及色彩的分析之后。下面我们再具体，来谈一下网页运用中，各元素的色彩搭配情况。 1．网页标题 2．网页链接 3．网页文字 4．网页Logo和Banner * 第2章 网页布局与配色 在前面的章节中，已经了解建设网站的流程，其中在设计之前要确定网站的布局。而在布局之后，还包含网站的颜色等等。 网页设计已经渐渐走向成熟，一般在制作网站之前，先要考虑网站的整体视觉效果。在网站整体视觉效果中，主要是网页的色彩搭配与网页布局。前者决定了浏览该网站的第一印象；而后者则决定网站中的信息是否为合理的安排。 * 网页布局 色彩基础 配色方案 网站中的色彩应用 本章学习要点： 2.1 网页设计基础 * 网页设计之前，呈现在面前的像一张白纸，需要用户挥洒自己的设计才思。当然，在网页设计之前，用户已经确定了网站的主题，以及搜集了网站的一些素材。用户只需要根据主题，将所素材合理的布局即可设计出一个网页。 2.1.1 网页布局类型 * 网页设计也属于平面设计，所以平面设计中的构图原理同样适用于网页设计。而在网页中，其布局可以分成两种类型，一种是结构布局，另一种是艺术布局。 1．结构布局 结构布局是许多用户根据网页的内容，或者常见的一些网页风格而确定下来的一种设计模式。 “国”字型网页布局 拐角型网页布局 左右框架型网页布局 封面型网页布局 * 2．艺术布局 分割结构 对称结构 平衡结构 肌理构成 艺术布局与结构布局不同，它打破了传统结构布局方式，站在平面设计角度来设计网页的风格。在设计过程中，艺术布局按照平面设计的规则性、对称性和肌理等，来设计网页页面。 2.1.2 网页整体造型 * 网页造型与网页布局，并不是相同概念。通过上述可知，网页布局是将网页内容在网页框架中合理安排的表现。 而造型是创造出来的物体形象。这里是指网页的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。 1．矩形 矩形代表着正式、规则等。一般很多单位或者政府网页，都是以矩形为整体造型。 * 2．圆形造型 圆形代表着柔和、团结、温暖、安全等，许多时尚类和饮食类网站喜欢以圆形为网页整体造型。 3．三角形造型 三角形代表着力量、权威、牢固、侵略等，许多大型的商业网站为显示它的权威性常以三角形为网页整体造型。 2.1.3 网页设计要素 除了确定网页结构及造型外，用户还需要了解网页设计的一些要素。也就是，每个网页设计人员，需要注意一些设计内容。 * 1．网页尺寸 网页尺寸与显示器大小、分辨率有着很大的关系。 2．文本 在网页设计开发过程中，最重要的莫过于网页的视觉效果，经常需要费很大精力来调整字体和字号。 3．图片 图片和文本是网页的两大构成元素，缺一不可。 2.2 色彩基础知识 如果网站的外观要给浏览者留下一个深刻的印象，则网站的视觉效果必须吸引人。因而，网页设计对色彩的依赖性很高，色彩设计同时还是网站风格设计的决定性因素之一。 * 2.2.1 色彩理论 * 1．色相 色相指色彩的相貌，是区别色彩种类的名称。是根据该色光波长划分的，只要色彩的波长相同，色相就相同，波长不同才产生色相的差别。红、橙、黄、绿、蓝、紫等每个宇都代表一类具体的色相，它们之间的差别就属于色相差别。 * 2．饱和度 饱和度是指色彩的纯净程度，取决于该色中含色成分和消色成分的比例，含色成分越大，饱和度越大；消色成分越大，饱和度越小，也就是说，向任何一种色彩中加入黑、白、灰都会降低它的饱和度，加的越多就降的越低，直到变成灰色。 3．亮度 亮度指色彩的明暗程度。亮度是全部色彩都具有的属性，亮度关系是搭配色彩的基础。亮度在三要素中具有较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出来。 2.2.2 216网页安全色 * 216网页安全颜色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。所以使用216网页安全颜色进行网页配色可以避免原有的颜色失真问题。 2.3 配色方案 色彩的搭配不仅在平面设计中比较重要，而在网页中也很关键。简单的网页配色方法，可以更好地利用色彩表达网页中的宗旨，所以下面来介绍一下颜色合理的搭配。 * 2.3.1 色彩分析 色彩对人的头脑和精神的影响力，是客观存在的。色彩的知觉力、色彩的辨别力、色彩的象征力与感情