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

2

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

主讲：陶建平 E-mail ： [email protected] 华中科技大学网络与计算中心

3


本章学习内容

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

4


具体要求

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

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

本章内容结束谢谢！

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