第1 章 初识UI 设计
1.1 UI 设计的相关概念………………… 2
1.1.1　UI 设计的基本概念… ………… 2
1.1.2 UI 与WUI 和GUI 的关系… … 2
1.1.3 UI 设计常用术语中英文对照… ………………………… 3
1.2 UI 设计的常用软件………………… 3
1.3 UI 设计的项目流程………………… 4
1.3.1 产品设计流程… ……………… 4
1.3.2 UI 设计流程…………………… 4
1.4 UI 设计的风格表现………………… 5
1.5 UI 设计的行业发展………………… 6
1.5.1 UI 设计行业现状… …………… 6
1.5.2 UI 设计发展趋势… …………… 9
1.6 UI 设计的学习方法……………… 10
第2 章 图标设计
2.1 图标的基础知识… ……………… 13
2.1.1 图标的概念… ……………… 13
2.1.2 图标设计的流程… ………… 13
2.1.3 图标设计的原则… ………… 15
2.2 图标的设计规范………………… 18
2.2.1 图标的尺寸及单位… ……… 18
2.2.2 图标的视觉统一… ………… 21
2.2.3 图标的清晰度… …………… 21
2.3 图标的风格类型………………… 22
2.3.1 拟物化风格… ……………… 22
2.3.2 扁平化风格… ……………… 22
2.3.3 3D 风格…………………… 23
2.3.4 2.5D 风格…………………… 23
2.4 课堂案例——绘制扁平化风格的单色面性图标……………………24
2.5 课堂练习………………………… 29
2.5.1 课堂练习——绘制扁平化风格的不透明色块面性图标… … 29
2.5.2 课堂练习——绘制扁平化风格的微渐变面性图标… ……… 29
2.6 课后习题………………………… 30
2.6.1 课后习题——绘制扁平化风格的光影效果图标… ………… 30
2.6.2 课后习题——绘制扁平化风格的折纸投影图标… ………… 30
第3 章 App 界面设计
3.1 App 界面的基础知识…………… 32
3.1.1 App的概念…………………32
3.1.2 App界面设计的流程………32
3.1.3 App界面设计的原则………34
3.2 App界面的设计规范……………36
3.2.1 iOS系统界面的设计规范…36
3.2.2 Android系统界面的设计规范…………………………41
3.3 App常用的界面类型……………44
3.3.1 闪屏页………………………44
3.3.2 引导页………………………46
3.3.3 首页…………………………47
3.3.4 个人中心页…………………49
3.3.5 详情页………………………50
3.3.6 注册登录页…………………50
3.4 课堂案例——制作畅游旅游App………………………………51
3.4.1 课堂案例——制作畅游旅游App闪屏页……………51
3.4.2 课堂案例——制作畅游旅游App引导页……………53
3.4.3 课堂案例——制作畅游旅游App首页……………………58
3.4.4 课堂案例——制作畅游旅游App个人中心页……………70
3.4.5 课堂案例——制作畅游旅游App酒店详情页……………80
3.4.6 课堂案例——制作畅游旅游App登录页…………………103
3.5 课堂练习——制作潮货电商App………………………………112
3.6 课后习题——制作三餐美食类App………………………113
第4章 网页界面设计
4.1 网页界面设计的基础知识………116
4.1.1 网页界面设计的概念………116
4.1.2 网页界面设计的流程………116
4.1.3 网页界面设计的原则………118
4.2 网页界面的设计规范……………120
4.2.1 网页界面设计的尺寸及单位…………………………120
4.2.2 网页界面设计的界面结构……122
4.2.3 网页界面设计的布局………123
4.2.4 网页界面设计的文字………125
4.2.5 网页界面设计的图标………128
4.3 网页常用的界面类型……………130
4.4 课堂案例——制作东方木品家居电商网站…………………………133
4.4.1 课堂案例——制作东方木品家居电商网站首页…………133
4.4.2 课堂案例——制作东方木品家居电商网站产品列表页……157
4.4.3 课堂案例——制作东方木品家居电商网站产品详情页……166
4.5 课堂练习——制作一点生活家居电商网站……………………175
4.6 课后习题——制作臻艺装饰家居电商网站……………………175
第5章 软件界面设计
5.1 软件界面设计的基础知识………178
5.1.1 软件界面设计的概念………178
5.1.2 软件界面设计的流程………178
5.1.3 软件界面设计的原则………180
5.2 软件界面的设计规范……………181
5.2.1 软件界面设计的尺寸及单位………………………182
5.2.2 软件界面设计的界面结构…………………………183
5.2.3 软件界面设计的布局………183
5.2.4 软件界面设计的文字………186
5.2.5 软件界面设计的图标………188
5.3 软件常用的界面类型……………192
5.4 课堂案例——制作天籁音乐播放器软件界面…………………195
5.4.1 课堂案例——制作天籁音乐播放器软件首页……………195
5.4.2 课堂案例——制作天籁音乐播放器软件歌单页…………211
5.4.3 课堂案例——制作天籁音乐播放器软件歌曲列表页……217
5.5 课堂练习——制作不凡音乐播放器软件界面…………………225
5.6 课后习题——制作酷听音乐播放器软件界面…………………226
第6章 游戏界面设计
6.1 游戏界面设计的基础知识………228
6.1.1 游戏界面设计的概念………228
6.1.2 游戏界面设计的流程………228
6.1.3 游戏界面设计的原则………230
6.2 游戏界面的设计规范……………232
6.2.1 游戏界面设计的尺寸及单位…………………………232
6.2.2 游戏界面设计的界面结构…232
6.2.3 游戏界面设计的类型和布局…………………………232
6.2.4 游戏界面设计的文字………236
6.2.5 游戏界面设计的图标………236
6.3 课堂案例——制作果蔬消消消游戏界面…………………………237
6.4 课堂练习——制作糖果消消乐游戏界面…………………………247
6.5 课后习题——制作开心连连看游戏界面…………………………247