第 2 章 网页可视化设计基础
DESCRIPTION
第 2 章 网页可视化设计基础. 主讲:陶建平 E-mail : [email protected] 华中科技大学网络与计算中心. 本章学习内容. 网页设计布局的几种类型 网页的排版布局方法 色彩的基本术语 常用的配色技巧 色彩搭配的原则和设计步骤. 主讲:陶建平 E-mail : [email protected] 华中科技大学网络与计算中心. 具体要求. 根据网站的不同性质设计网页的排版布局 设计符合网页主题的配色方案. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/1.jpg)
1
![Page 3: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/3.jpg)
3
主讲:陶建平 E-mail : [email protected] 华中科技大学网络与计算中心
本章学习内容
网页设计布局的几种类型 网页的排版布局方法 色彩的基本术语 常用的配色技巧 色彩搭配的原则和设计步骤
![Page 5: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/5.jpg)
5
2.1 网页的排版布局2.1.2 常见的网页布局类型1. 国字型布局
网站标题或横幅
左边内容
网站导航
右边内容
联系方法和版权声明
![Page 6: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/6.jpg)
6
2.T 型布局
互联网
横幅网站标记 + 广告条
窄幅链接或导航
正文内容
网站的辅助信息、友情链接等
![Page 7: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/7.jpg)
7
3. 框架型布局
左框架:导航
右框架:正文内容
![Page 8: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/8.jpg)
8
4. 封面型布局
![Page 9: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/9.jpg)
9
5.Flash 型布局
![Page 10: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/10.jpg)
10
6. 其他布局类型
“ 三”型布局对称对比型布局
标题正文型布局
![Page 11: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/11.jpg)
11
2.1.2 常见的网页布局类型1. 表格布局2. 框架布局3.DIV+CSS 布局
![Page 12: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/12.jpg)
12
2.2 网页的色彩搭配2.2.1 色彩的基本知识1. 色彩的 RGB 模式
RGB 表示红( Red )、绿( Green )、蓝( Blue )三色又称为三原色,RGB 模式是
一种加色法模式,通过 R 、 G 、 B 的不同比例,可描述出任一颜色。
![Page 13: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/13.jpg)
13
2. 色彩的属性
从心理学和视觉的角度出发,色彩具有三个属性:色相、明度、饱和度。 色相 (Hue) :也叫色调,指颜色的种类和名称,是一种颜色区别于其他颜色
的基本特征。
12 色相环
![Page 14: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/14.jpg)
14
明度 (Value) :也叫亮度,指颜色的深浅、明暗程度。
不同明度下的图像效果
![Page 15: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/15.jpg)
15
饱和度 (Chroma) :也叫纯度,指在相同明度下色彩的鲜艳程度。原色最纯,颜色的混合越多则纯度逐渐减低。
不同饱和度下的图像效果
![Page 16: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/16.jpg)
16
2.2.2 常用的配色方案1. 邻近色搭配
邻近色是在色环上任一颜色同其毗邻颜色。
![Page 17: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/17.jpg)
17
2. 对比色搭配对比色也称补色,是指在色环中的直接位置相对的颜色。
![Page 18: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/18.jpg)
18
3. 分离补色搭配分离补色可以由 2~3 种颜色组成,它是补色旁边的一种或多种颜色。
![Page 19: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/19.jpg)
19
4. 组色搭配组色是色环上距离相等的任意 3 种颜色。
![Page 20: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/20.jpg)
20
5. 暖色调配色指的是红、橙、黄、这类颜色。
![Page 21: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/21.jpg)
21
6. 冷色调配色指的是绿、青、蓝、紫等颜色。
![Page 22: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/22.jpg)
22
2.2.3 色彩搭配原则
1. 色彩的鲜明性。
2. 色彩的独特性。
3. 色彩的艺术性。
4. 色彩的合理性。
![Page 23: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/23.jpg)
23
2.2.4 网页色彩设计步骤1. 确定网页主色调
网页色彩设计首先需要确定画面的主要色彩倾向,即主色调。
图 1 图 2
图 3 图 4
![Page 24: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/24.jpg)
24
2. 确定网页的背景色背景色,也称之为支配色。舞台的中心是主角,但决定整体印象的却是背景。
图 5 图 6
![Page 25: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/25.jpg)
25
3. 网页中图片及文字色彩
图片颜色的强调作用
![Page 26: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/26.jpg)
26
4. 色彩给网站定位• 红色• 橙色• 黄色• 绿色• 蓝色• 其他颜色
![Page 27: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/27.jpg)
27
• 大幅配图
优秀网页设计风格及分析
![Page 28: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/28.jpg)
28
• 简约风格
![Page 29: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/29.jpg)
29
• 巨型的留白空间
![Page 30: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/30.jpg)
30
• 清新的插画
![Page 31: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/31.jpg)
31
• 水彩效果
![Page 32: 第 2 章 网页可视化设计基础](https://reader033.vdocuments.mx/reader033/viewer/2022061412/568153db550346895dc1d2fc/html5/thumbnails/32.jpg)
32
本章内容结束谢谢!