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

1

2

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

主讲：陶建平 E-mail ： alextao777@163.com 华中科技大学网络与计算中心

3

主讲：陶建平 E-mail ： alextao777@163.com 华中科技大学网络与计算中心

本章学习内容

网页设计布局的几种类型 网页的排版布局方法 色彩的基本术语 常用的配色技巧 色彩搭配的原则和设计步骤

4

主讲：陶建平 E-mail ： alextao777@163.com 华中科技大学网络与计算中心

具体要求

根据网站的不同性质设计网页的排版布局 设计符合网页主题的配色方案

5

2.1 网页的排版布局2.1.2 常见的网页布局类型1. 国字型布局

网站标题或横幅

左边内容

网站导航

右边内容

联系方法和版权声明

6

2.T 型布局

互联网

横幅网站标记 + 广告条

窄幅链接或导航

正文内容

网站的辅助信息、友情链接等

7

3. 框架型布局

左框架：导航

右框架：正文内容

8

4. 封面型布局

9

5.Flash 型布局

10

6. 其他布局类型

“ 三”型布局对称对比型布局

标题正文型布局

11

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

12

2.2 网页的色彩搭配2.2.1 色彩的基本知识1. 色彩的 RGB 模式

RGB 表示红（ Red ）、绿（ Green ）、蓝（ Blue ）三色又称为三原色，RGB 模式是

一种加色法模式，通过 R 、 G 、 B 的不同比例，可描述出任一颜色。

13

2. 色彩的属性

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

的基本特征。

12 色相环

14

明度 (Value) ：也叫亮度，指颜色的深浅、明暗程度。

不同明度下的图像效果

15

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

不同饱和度下的图像效果

16

2.2.2 常用的配色方案1. 邻近色搭配

邻近色是在色环上任一颜色同其毗邻颜色。

17

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

18

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

19

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

20

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

21

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

22

2.2.3 色彩搭配原则

1. 色彩的鲜明性。

2. 色彩的独特性。

3. 色彩的艺术性。

4. 色彩的合理性。

23

2.2.4 网页色彩设计步骤1. 确定网页主色调

网页色彩设计首先需要确定画面的主要色彩倾向，即主色调。

图 1 图 2

图 3 图 4

24

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

图 5 图 6

25

3. 网页中图片及文字色彩

图片颜色的强调作用

26

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

27

• 大幅配图

优秀网页设计风格及分析

28

• 简约风格

29

• 巨型的留白空间

30

• 清新的插画

31

• 水彩效果

32

本章内容结束谢谢！