目　录
第1章　网站UI设计概述 1
1.1　初识网站UI 1
1.1.1　什么是网站UI设计 1
1.1.2　网站页面的分类 1
1.1.3　网站UI设计的特性 3
1.2　网站UI设计的要素 5
1.2.1　网站UI设计的必备特点 5
1.2.2　立体空间节奏感 8
1.2.3　视觉导向性 9
1.2.4　导航设置 11
1.3　网站UI设计的基本元素 13
1.3.1　基本构成元素 13
1.3.2　视听元素 14
1.3.3　版式元素 15
1.4　常见的网站UI设计风格 15
1.4.1　扁平化风格 15
1.4.2　3D风格 16
1.4.3　极简风格 16
1.4.4　无边框风格 16
1.4.5　插画风格 17
1.4.6　黑板风格 17
1.4.7　超级头版风格 18
1.5　网站UI设计的命名规范 18
1.6　课堂提问 19
网站建设流程 19
1.7　本章小结 19
第2章　网站UI设计的色彩搭配 20
2.1　对色彩的基本理解 20
2.1.1　色相 20
2.1.2　明度 20
2.1.3　纯度 21
2.1.4　对比度 21
2.1.5　可视性 21
2.2　配色技巧 21
2.2.1　单色 21
2.2.2　类似色 21
2.2.3　补色 22
2.2.4　邻近补色 22
2.2.5　无彩色 22
2.3　网站UI设计中色彩的搭配 23
2.3.1　色彩的对比 23
2.3.2　色彩搭配原则 24
2.4　色彩在各类网站中的表现力 26
2.4.1　综合门户类网站 26
2.4.2　娱乐休闲类网站 26
2.4.3　商业经济类网站 26
2.4.4　文化艺术类网站 27
2.4.5　体育休闲类网站 27
2.4.6　个人网站 28
2.5　网站色彩的编排设计 28
2.5.1　网站色彩的4种功能角色 28
2.5.2　网页配色的基本方法 31
2.5.3　使用基本色配色 33
2.5.4　使用多色彩配色 34
2.6　课堂提问 34
2.6.1　在进行网页配色时，需要注意
什么 35
2.6.2　怎样培养对色彩的敏感度 35
2.6.3　使用了成功案例的配色，却感觉
怪怪的 36
2.7　本章小结 36
第3章　网站UI设计的版式与布局 37
3.1　常见的网页布局方式 37
3.1.1　“国”字型布局 37
3.1.2　拐角型布局 37
3.1.3　标题正文型布局 38
3.1.4　左右框架型布局 38
3.1.5　上下框架型布局 39
3.1.6　封面型布局 39
3.1.7　变化型布局 39
3.2　文字在网页中的作用 40
3.2.1　明确性 40
3.2.2　易读性 40
3.2.3　美观性 40
3.3　网页文字的设计原则 41
3.3.1　可读性 41
3.3.2　艺术化 41
3.4　网页文字的排版方式 43
3.4.1　文字排版规则 43
3.4.2　文字排版的常用手法 44
3.5　根据内容决定页面布局 45
3.5.1　左侧的页面布局 45
3.5.2　水平居中的页面布局 46
3.5.3　水平和垂直居中的页面布局 46
3.5.4　满屏的页面布局 47
3.6　课堂提问 47
3.6.1　在进行网站UI设计时，如何控制页面的连贯性和多样性 47
3.6.2　页面的分割方式对页面有哪些影响 48
3.7　本章小结 49
第4章　网站图片的优化与调整 50
4.1　网站中的图片 50
4.1.1　网站中使用的图片格式 50
4.1.2　网站中图片的颜色模式 51
4.2　图章工具的使用 52
4.2.1　仿制图章工具的应用 52
操作案例　去除图片中的水印 52
4.2.2　图案图章工具的应用 53
4.3　修复网站中的图像 54
4.3.1　污点修复画笔工具 54
操作案例　修复图像瑕疵 54
4.3.2　修复画笔工具 56
4.3.3　修补工具 57
4.3.4　内容感知移动工具 57
4.4　自动调整图像色彩 58
4.4.1　自动色调 58
4.4.2　自动对比度 58
4.4.3　自动颜色 58
4.5　手动调整图像色彩 59
4.5.1　亮度/对比度 59
操作案例　调整网页中图像的亮度 59
4.5.2　色阶 62
4.5.3　曲线 63
操作案例　执行“曲线”命令调整图像 63
4.5.4　自然饱和度 66
操作案例　制作炫彩展示图 67
4.5.5　色相/饱和度 70
4.5.6　阴影/高光 70
4.6　填充和调整图层 71
4.6.1　纯色填充图层 71
4.6.2　渐变填充图层 71
4.6.3　图案填充图层 71
4.7　批处理 72
4.7.1　动作 72
4.7.2　自定义动作 73
4.8　课堂提问 73
4.8.1　如何提高图像清晰度 73
4.8.2　如何快速处理扫描图像 73
4.9　本章小结 73

第5章　网站图标和按钮设计 74
5.1　认识网站图标 74
5.1.1　什么是图标 74
5.1.2　网站图标的应用 75
操作案例　设计简约风格网站图标 76
5.2　网站图标的设计原则 81
5.2.1　可识别性 82
5.2.2　风格统一性 82
5.2.3　与环境协调 82
5.2.4　创意性 83
操作案例　设计水晶质感图标 83
5.3　网站按钮的特点 93
5.3.1　易用性 93
5.3.2　可操作性 93
5.3.3　动态效果 94
操作案例　设计网站个性按钮 94
5.4　网站按钮的表现形式 99
5.4.1　提交功能按钮 99
5.4.2　超链接图片按钮 100
操作案例　设计网站下载按钮 100
5.5　课堂提问 105
5.5.1　图标和按钮的作用是什么 105
5.5.2　网页中常用的图形格式是什么 106
5.6　本章小结 106
第6章　网站导航设计 107
6.1　初识网站导航 107
6.2　网站导航的作用 107
6.3　网站导航的设计标准 107
6.4　网站导航的表现形式 108
6.4.1　标签形式的导航 108
6.4.2　按钮形式的导航 108
6.4.3　弹出菜单形式的导航 109
6.4.4　无边框形式的导航 109
6.4.5　HTML动画形式的导航 109
6.4.6　多导航系统形式的导航 110
操作案例　绘制女装销售网站导航 110
6.5　网站导航的位置 113
6.5.1　布局在网页顶部 114
6.5.2　布局在网页底部 114
6.5.3　布局在网页左侧 115
操作案例　绘制网站左侧导航 116
6.5.4　布局在网页右侧 119
6.5.5　布局在网页中心 120
6.6　网站导航的视觉风格 121
6.6.1　规矩风格的导航 121
6.6.2　另类风格的导航 121
6.6.3　卡通风格的导航 121
6.6.4　醒目风格的导航 122
6.6.5　形象风格的导航 122
6.6.6　流动风格的导航 123
6.6.7　活跃风格的导航 123
6.6.8　大气风格的导航 123
6.6.9　古朴风格的导航 124
操作案例　绘制精致导航条 124
6.7　课堂提问 128
6.7.1　导航的设计原则 128
6.7.2　交互式动态导航的优势和劣势 128
6.8　本章小结 129
第７章　网站文字与广告设计 130
7.1　文字编排设计的重要性 130
7.2　网站中的文字设计要求 130
7.2.1　形式适合 130
7.2.2　信息明确 131
7.2.3　容易阅读 131
7.2.4　表现美观 132
7.2.5　创新表现手法 132
操作案例　设计网站标题文字 132
7.3　网站文字的排版设计 138
7.3.1　对比形式法则 139
7.3.2　统一与协调 141
7.3.3　平衡 141
7.3.4　节奏与韵律 141
7.3.5　视觉诱导 142
操作案例　设计网站页面立体标题 143
7.4　网站广告的特点 150
7.5　网站广告的常见类型 151
7.5.1　文字广告 151
7.5.2　横幅广告 151
7.5.3　对联广告 152
7.5.4　漂浮广告 152
7.5.5　弹出广告 152
操作案例　设计网站宣传广告 153
7.6　课堂提问 159
7.6.1　文字排版设计在网站页面中起到的
作用是什么 159
7.6.2　网站广告的表现形式有哪些 160
7.7　本章小结 160
第8章　PC端网站UI设计 161
8.1　PC端网站和移动端网站的不同 161
8.1.1　操作方式不同 161
8.1.2　屏幕尺寸不同 161
8.1.3　网络环境不同 161
8.1.4　传感器不同 162
8.1.5　使用场景与使用时间不同 162
8.1.6　软件迭代时间以及更新频次不同 162
8.2　制作网站登录页面 162
操作案例　设计登录页面背景 163
操作案例　设计登录页面标题 167
操作案例　设计登录页面按钮和文本框 169
操作案例　页面切图输出 174
8.3　制作时尚简洁的电子商务网站
页面 176



操作案例　设计导航与索引菜单 177
操作案例　设计网站页面背景 179
操作案例　设计页面主体与版底信息 183
操作案例　页面切片输出 188
8.4　课堂提问 192
8.4.1　PC端网站尺寸有哪些规范 192
8.4.2　如何保证页面在不同分辨率显示器
中的显示效果 192
8.5　本章小结 192
第９章　移动端网站UI设计 193
9.1　移动端App UI设计基础 193
9.1.1　了解App应用平台 193
9.1.2　App的开发语言 194
9.1.3　移动端App的优势 194
9.2　移动端App UI设计与PC端UI设计的区别 194
9.3　iOS系统UI设计 195
9.3.1　了解iOS系统 195
9.3.2　iOS系统的界面元素 196
9.3.3　iOS系统UI设计规范 201
9.4　设计iOS系统音乐App界面 202
9.5　Android系统UI设计 207
9.5.1　Android系统的UI设计规范 207
9.5.2　Android系统用户界面元素 208
9.6　设计Android系统音乐App
界面 210
9.7　课堂提问 216
9.7.1　如何适配iOS设备中的图片 216
9.7.2　如何处理Android碎片化 216
9.8　本章小结 216