网站UI设计案例教程（微课版）

第 1章 网站UI概述
1．1　初识网站UI　2
1．1．1　什么是网页界面　2
1．1．2　网页界面的分类　2
1．2　网站界面设计的特点与要素　6
1．2．1　网站界面设计的特点　7
1．2．2　网站界面设计的要素　9
1．3　网页UI设计的基本元素　22
1．3．1　基本构成元素　22
1．3．2　视听元素　23
1．3．3　版式元素　23
1．4　网页风格设计　24
1．4．1　扁平化风格　24
1．4．2　3D风格　24
1．4．3　极简风格　25
1．4．4　无边框风格　25
1．4．5　插画风格　26
1．4．6　黑板风格　26
1．4．7　超级头版　26
1．5　网页设计命名规范　28
1．6　课堂提问　29
1．6．1　网站建设流程　29
1．6．2　什么是虚拟主机　29
1．7　本章小结　29
第　2章 网站UI色彩搭配
2．1　色彩的基本理解　31
2．1．1　色彩用语　31
2．1．2　配色　32
2．3　网页中色彩的搭配　33
2．3．1　网页色彩搭配基础　34
2．3．2　网页色彩搭配原则　36
2．4　色彩在各个领域中的表现力　38
2．4．1　综合门户型网站　38
2．4．2　娱乐休闲类网站　38
2．4．3　商业经济类网站　39
2．4．4　人类艺术类网站　39
2．4．5　政府机构类网站　39
2．4．6　体育休闲类网站　40
2．4．7　个人网站　40
2．5　网页色彩的编排设计　40
2．5．1　网页色彩的4种功能角色　40
2．5．2　网页配色的基本方法　44
2．5．3　使用基本色配色　46
2．5．4　使用多色彩配色　47
2．6　课堂提问　48
2．6．1　在进行网页配色时，需要注意什么？　49
2．6．2　怎样培养对色彩的敏感度？　49
2．6．3　使用了成功案例的配色，但感觉怪怪的？　50
2．7　本章小结　50
第3章　网站UI设计的板式与布局
3．1　常见的网页布局方式　52
3．1．1　“国”字型　52
3．1．2　拐角型　52
3．1．3　标题正文型　53
3．1．4　左右框架型　53
3．1．5　上下框架型　54
3．1．6　封面型　54
3．1．7　变化型　54
3．2　文字在网页中的作用　55
3．2．1　明确性　55
3．3．2　易读性　55
3．3．3　美观性　56
3．3　网页文字的设计原则　56
3．3．1　可读性　56
3．3．2　艺术化　57
3．4　网页文字的排版方式　58
3．4．1　文字排版规则　58
3．4．2　文字排版的常用手法　60
3．5　根据内容决定布局　62
3．5．1　左侧的页面布局　62
3．5．2　水平居中的页面布局　63
3．5．3　水平和垂直居中的页面布局　63
3．5．4　满屏的页面布局　63
3．6　课堂提问　64
3．6．1　在进行网页UI设计时，如何控制页面的连贯性和多样性？　64
3．6．2　页面的分割方式对页面有哪些影响？　64
3．7　本章小结　66
第4章　网站UI设计的版式与布局
4．1　网站中的图像　68
4．1．1　网站中使用的图片格式　68
4．1．2　网站中的颜色模式　69
4．2　图章工具的使用　70
4．2．1　仿制图章的应用　70
操作案例　去除图片中的水印效果　70
4．2．2　图案图章工具的应用　71
4．3　修复网页中的图像　72
4．3．1　污点修复画笔工具　72
操作案例　修复图像瑕疵　72
4．3．2　修复画笔工具　74
4．3．3　修补工具　74
4．3．4　内容感知移动工具　75
4．4　自动调整图像色彩　75
4．4．1　自动色调　76
4．4．2　自动对比度　76
4．4．3　自动颜色　76
4．5　手动调整图像色彩　77
4．4．1　亮度/对比度　77
操作案例　调整网页中图像亮度　77
4．4．2　色阶　80
4．4．3　曲线　81
操作案例　执行“曲线”命令调整图像　81
4．4．4　自然饱和度　84
操作实例　制作炫彩展示图　84
4．4．5　色相/饱和度　87
4．4．6　阴影/高光　87
4．6　填充和调整图层　88
4．6．1　纯色填充图层　88
4．6．2　渐变填充图层　88
4．6．3　图案填充图层　89
4．7　批处理　89
4．7．1　动作　90
4．7．2　自定义动作　90
4．8　课堂提问　90
4．8．1　如何提高图像清晰度？　90
4．8．2　如何快速处理扫描图像　91
4．9　本章小结　91
第5章　网站图标的设计
5．1　认识网站图标　93
5．1．1　图标的概述　93
5．1．2　网页图标应用　93
操作案例　设计简约风格网站图标　94
5．2　网站图标设计原则　100
5．2．1　可识别性　100
5．2．2　风格统一性　100
5．2．3　与环境协调　101
5．2．4　创意性　101
操作案例　设计水晶质感图标　101
5．3　网站按钮的特点　111
5．3．1　易用性　111
5．3．2　可操作性　112
5．3．3　动态效果　112
操作案例　设计网站个性按钮　113
5．4　网站按钮的表现形式　117
5．4．1　提交功能按钮　117
5．4．2　超链接图片按钮　118
操作案例　设计网站下载按钮　118
5．5　课堂提问　124
5．5．1　图标和按钮的作用是什么？　124
5．5．2　网页中常用的图形格式是什么？　124
5．6　本章小结　125
第6章　网站导航设计
6．1　网站导航概述　127
6．2　网站导航的作用　127
6．3　网站导航的设计标准　127
6．4　网站导航的表现形式　127
6．4．1　标签形式　127
6．4．2　按钮形式　128
6．4．3　弹出菜单形式　128
6．4．4　无边框形式　128
6．4．5　Flash形式　129
6．4．6　多导航系统形式　129
操作案例　绘制女装网站导航条　129
6．5　网站导航位置　132
6．5．1　布局在网页顶部　133
6．5．2　布局在网页底部　133
6．5．3　布局在网页左侧　134
操作案例　绘制网站左侧导航　135
6．5．4　布局在网页右侧　138
6．5．5　布局在网页中心　139
6．6　网站导航的视觉风格　139
6．6．1　规矩的导航　140
6．6．2　另类的导航　140
6．6．3　卡通的导航　140
6．6．4　醒目的导航　141
6．6．5　形象的导航　141
6．6．6　流动的导航　141
6．6．7　活跃的导航　142
6．6．8　大气的导航　142
6．6．9　古朴的导航　142
实例　绘制精致导航条　143
6．7　专家支招　147
6．7．1　导航条的设计原则是什么　147
6．7．2　交互式导航的优势和劣势是什么　147
6．8　本章小结　147
第7章　网站文字与广告设计
7．1　文字在网页界面中的作用　149
7．2　网站界面中文字设计要求　149
7．2．1　形式适合　149
7．2．2　信息明确　150
7．2．3　容易阅读　150
7．2．4　表现美观　150
7．2．4　创新表现手法　151
操作案例　设计网站标题文字　151
7．3　网页文字的排版设计　157
7．3．1　对比形式法则　157
7．3．2　统一与协调　159
7．3．3　平衡　160
7．3．4　节奏与韵律　160
7．3．5　视觉诱导　160
操作案例　设计网站页面立体标题　161
7．4　网站广告的特点　169
7．5　网站广告的常见类型　169
7．5．1　文字广告　169
7．5．2　横幅广告　170
7．5．3　对联广告　170
7．5．4　漂浮广告　171
7．5．5　弹出广告　171
操作案例　设计网站宣传广告　171
7．6　课堂提问　178
7．6．1　文字排版设计在网站界面中起到的作用是什么？　178
7．6．2　网站广告的表现形式有哪些？　178
7．7　本章小结　178
第8章　PC端网页UI设计
8．1　PC端网页和移动端网页的不同　181
8．1．1　操作方式不同　181
8．1．2　屏幕尺寸不同　181
8．1．3　网络环境不同　181
8．1．4　传感器不同　181
8．1．5　使用场景与使用时间　181
8．1．6　软件迭代时间以及更新频次　181
8．2　制作网站登录界面　182
8．2．1　制作思路分析　182
8．2．2　色彩分析　182
操作案例　设计登陆界面背景　182
操作案例　设计登陆界面标题　186
操作案例　设计登录界面按钮和文本框　189
操作案例　页面切图输出　193
8．3　制作时尚简洁电子商务网站界面　196
8．3．1　制作思路分析　196
8．3．2　色彩分析　196
操作案例　设计导航与索引菜单　196
操作案例　设计网站界面背景　199
操作案例　设计界面主体与版底信息　203
操作案例　网页界面切片输出　208
8．4　课堂提问　211
8．4．1　PC端网页尺寸有哪些规范？　211
8．4．2　如何保证页面在不同分辨率显示器中的显示效果？　212
8．5　本章小结　212
第9章　移动APP界面设计
9．1　移动APP界面设计基础　214
9．1．1　了解APP应用平台　214
9．1．2　APP的开发语言　214
9．1．3　移动APP的优势　215
9．2　移动APP UI与PC端UI的区别　215
9．3　iOS系统界面设计　216
9．3．1　iOS系统概述　216
9．3．2　iOS系统的界面元素　217
9．3．3　iOS系统界面设计规范　223
9．4　设计iOS系统音乐APP界面　224
9．4．1　制作思路分析　225
9．4．2　色彩分析　225
9．5　Android系统界面设计　231
9．5．1　Android系统的界面设计规范　232
9．5．2　Android系统用户界面元素　232
9．5．3　操作栏　234
9．6　设计Android系统音乐APP界面　234
9．6．1　制作思路分析　235
9．6．2　色彩分析　235
9．7　课堂提问　241
9．7．1　如何适配iOS设备中的图片　241
9．7．2　如何处理Android碎片化？　241
9．8　本章小结　242