第 2 章网页可视化设计基础

第2章网页可视化设计基础 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

本章学习内容 • 网页设计布局的几种类型 • 网页的排版布局方法 • 色彩的基本术语 • 常用的配色技巧 • 色彩搭配的原则和设计步骤主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

具体要求 • 根据网站的不同性质设计网页的排版布局 • 设计符合网页主题的配色方案主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

横幅网站标记+广告条 2.T型布局正文内容窄幅链接或导航互联网网站的辅助信息、友情链接等

3.框架型布局 右框架：正文内容左框架：导航

4.封面型布局

5.Flash型布局

6.其他布局类型 “三”型布局对称对比型布局标题正文型布局

2.1.2常见的网页布局类型 1.表格布局 2.框架布局 3.DIV+CSS布局

2.2 网页的色彩搭配 2.2.1 色彩的基本知识 1. 色彩的RGB模式 RGB表示红（Red）、绿（Green）、蓝（Blue）三色又称为三原色，RGB模式是一种加色法模式，通过R、G、B的不同比例，可描述出任一颜色。

2. 色彩的属性 从心理学和视觉的角度出发，色彩具有三个属性：色相、明度、饱和度。 • 色相(Hue)：也叫色调，指颜色的种类和名称，是一种颜色区别于其他颜色的基本特征。 12色相环

明度(Value)：也叫亮度，指颜色的深浅、明暗程度。明度(Value)：也叫亮度，指颜色的深浅、明暗程度。不同明度下的图像效果

饱和度(Chroma)：也叫纯度，指在相同明度下色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。饱和度(Chroma)：也叫纯度，指在相同明度下色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。不同饱和度下的图像效果

2.2.2 常用的配色方案 1. 邻近色搭配邻近色是在色环上任一颜色同其毗邻颜色。

2. 对比色搭配 对比色也称补色，是指在色环中的直接位置相对的颜色。

3. 分离补色搭配 分离补色可以由2~3种颜色组成，它是补色旁边的一种或多种颜色。

4.组色搭配 组色是色环上距离相等的任意3种颜色。

5.暖色调配色 指的是红、橙、黄、这类颜色。

6.冷色调配色 指的是绿、青、蓝、紫等颜色。

2.2.3 色彩搭配原则

2.2.4 网页色彩设计步骤 1.确定网页主色调网页色彩设计首先需要确定画面的主要色彩倾向，即主色调。图1 图2 图4 图3

2.确定网页的背景色 背景色，也称之为支配色。舞台的中心是主角，但决定整体印象的却是背景。图5 图6

3. 网页中图片及文字色彩 图片颜色的强调作用

4. 色彩给网站定位 • 红色 • 橙色 • 黄色 • 绿色 • 蓝色 • 其他颜色

优秀网页设计风格及分析 • 大幅配图

简约风格

巨型的留白空间

清新的插画

水彩效果

本章内容结束 谢谢！

第 2 章 网页可视化设计基础