本书以移动App设计为主线，全面、系统地介绍移动UI设计方法和技巧，在内容编排上，分为UI设计入门篇、UI设计图标篇、UI设计界面篇和UI设计实战篇。
本书聚焦设计能力培养，采用理论知识与案例相结合的方式，通过大量的实操案例，配以详细的设计步骤，让读者切实融入设计中。本书为读者提供内容结构图，帮助读者梳理知识，还安排知识拓展、课后实训、本单元小结和课后练习题，帮助读者提升技术水平。
本书配套资源包含书中所讲案例的素材、源文件等，读者可以跟随步骤完成效果制作。
1.注重培养设计师的产品思维和用户体验意识
2.选取了大量的案例，聚焦动手设计能力培养
3.注重项目设计的流程和规范，还将设计行业相关知识融入其中
4.提供完整的教学资源包，及UI设计职业信息库、职业技能培训库、拓展素材库等资源
5.开设“UI爱好者”公众号，为UI爱好者提供行业知识分享与自学平台，构造UI设计生态圈
移动UI设计案例教程（微课版）移动UI设计案例教程（微课版）移动UI设计案例教程（微课版）移动UI设计案例教程（微课版）移动UI设计案例教程（微课版）移动UI设计案例教程（微课版）移动UI设计案例教程（微课版）移动UI设计案例教程（微课版）
目 录
第 1篇 UI设计入门篇
单元1 走进UI设计
1.1 UI设计介绍 2
1.1.1 UI设计的概念 2
1.1.2 UI设计原则 3
1.1.3 UI设计分类 3
1.1.4 UI设计尺寸相关知识 4
1.2 UI设计流程 4
1.2.1 需求分析 4
1.2.2 原型设计 5
1.2.3 视觉设计 5
1.2.4 切图与标注 5
1.3 UI设计图像 5
1.3.1 图像类型 6
1.3.2 图像格式 6
1.4 UI设计风格 7
1.4.1 扁平化风格 7
1.4.2 几何风格 8
1.4.3 拟物化风格 8
1.4.4 玻璃风格 9
1.5 本单元小结 9
1.6 课后练习题 9
单元2 UI设计要素
2.1 UI设计布局 10
2.1.1 宫格布局 10
2.1.2 列表布局 10
2.1.3 卡片布局 11
2.1.4 瀑布流式布局 11
2.1.5 多面板布局 12
2.2 UI设计色彩 13
2.2.1 色彩的构成 13
2.2.2 色彩的混合 14
2.2.3 色彩的调和 14
2.2.4 色彩的推移 15
2.2.5 色彩的联想 16
2.2.6 色彩的心理应用 16
2.3 本单元小结 17
2.4 课后练习题 17
单元3 移动端操作系统
3.1 iOS 18
3.1.1 主题明确 18
3.1.2 色彩一致 18
3.1.3 留白设计 18
3.1.4 良好布局 19
3.2 Android系统 19
3.2.1 布局灵活 19
3.2.2 色彩艳丽 19
3.2.3 操作便捷 19
3.3 本单元小结 20
3.4 课后练习题 20
第 2篇 UI设计图标篇
单元4 移动App图标基础
4.1 图标基础概念 22
4.1.1 图案的概念 22
4.1.2 图标的概念 23
4.1.3 图标的分类 23
4.2 图标设计流程 25
4.2.1 明确主题 25
4.2.2 提炼核心形状 26
4.2.3 草图绘制 26
4.2.4 选择标准色 26
4.2.5 图标设计 26
4.2.6 切图输出 27
4.3 图标设计初探 27
【课堂案例4-1】时钟图标绘制 27
【课堂案例4-2】学位帽图标绘制 28
【课堂案例4-3】折页图标绘制 30
4.4 本单元小结 32
4.5 课后练习题 32
单元5 移动App图标风格
5.1 剪影图标设计 33
5.1.1 线性剪影图标设计 33
【课堂案例5-1】线性天气图标绘制 35
【课堂案例5-2】线性开关图标绘制 37
【课堂案例5-3】线性删除图标绘制 38
5.1.2 面性剪影图标设计 40
【课堂案例5-4】面性确认图标绘制 40
【课堂案例5-5】面性设置图标绘制 42
【课堂案例5-6】面性笑脸图标绘制 44
【课堂案例5-7】面性相机图标绘制 46
【课堂案例5-8】面性文档图标绘制 48
5.2 扁平化图标设计 49
5.2.1 纯平面扁平化图标 50
【课堂案例5-9】纯平面扁平化电池图标设计 50
5.2.2 折纸风扁平化图标 51
【课堂案例5-10】折纸风扁平化信封爱心未读图标设计 52
【课堂案例5-11】折纸风扁平化信封爱心已读图标设计 56
5.2.3 长投影扁平化图标 58
【课堂案例5-12】长投影下载图标设计 58
5.2.4 轻折叠扁平化图标 59
【课堂案例5-13】轻折叠多媒体图标设计 59
【课堂案例5-14】轻折叠扁平化计算器图标设计 61
5.2.5 微立体扁平化图标 62
【课堂案例5-15】微立体定位图标设计 62
5.3 拟物化图标设计 64
5.3.1 拟物化图标的特点 64
5.3.2 拟物化图标案例 64
【课堂案例5-16】拟物化旋转按钮图标设计 65
【课堂案例5-17】拟物化卡包图标设计（横版） 70
【课堂案例5-18】拟物化卡包图标设计（竖版） 78
5.4 本单元小结 80
5.5 课后练习题 80
第3篇 UI设计界面篇
单元6 界面常用控件
6.1 滑块设计 82
6.1.1 滑块构成 82
6.1.2 滑块分类 82
【课堂案例6-1】线条滑块设计 83
【课堂案例6-2】旋转滑块设计 86
6.2 表单设计 88
6.2.1 表单类型 88
6.2.2 下拉列表框设计 89
【课堂案例6-3】类目下拉列表框设计 89
6.2.3 搜索框设计 92
【课堂案例6-4】移动端App搜索框设计 92
6.2.4 选择器设计 93
【课堂案例6-5】日历界面设计 94
6.2.5 开关设计 100
【课堂案例6-6】开关设计 100
6.3 按钮设计 102
6.3.1 按钮类型 102
6.3.2 简约按钮设计 102
【课堂案例6-7】简约确认按钮设计 102
6.3.3 水晶按钮设计 104
【课堂案例6-8】水晶确认按钮设计 104
6.4 本单元小结 108
6.5 课后练习题 108
单元7 App界面类型
7.1 启动页 109
7.1.1 启动页的意义 109
7.1.2 启动页的特点 109
【课堂案例7-1】启动页案例分析 109
7.2 闪屏页 111
7.3 引导页 111
7.3.1 引导页的意义 111
7.3.2 引导页的特点 111
【课堂案例7-2】引导页案例分析 111
7.4 首页 113
7.5 注册登录页 114
7.5.1 注册登录页的意义 114
7.5.2 注册登录页的特点 114
【课堂案例7-3】注册登录页案例分析 114
7.6 子页 115
7.7 本单元小结 116
7.8 课后练习题 116
第4篇 UI设计实战篇
单元8 iOS界面设计
8.1 iOS界面设计规范 118
8.2 iOS字体设计规范 119
8.3 iOS音乐App界面设计实战 120
8.3.1 音乐App项目分析 121
8.3.2 音乐App原型设计 121
8.3.3 音乐App风格分析 125
【项目实战8-1】设计音乐App启动图标 126
【项目实战8-2】设计音乐App主题界面 133
【项目实战8-3】设计音乐App启动页 134
【项目实战8-4】设计音乐App引导页 136
【项目实战8-5】设计音乐App注册登录页 142
【项目实战8-6】设计音乐App首页 145
【项目实战8-7】设计音乐App播放页 151
【项目实战8-8】设计音乐App歌词页 155
8.4 本单元小结 157
8.5 课后练习题 157
单元9 Android系统界面设计
9.1 Android系统界面设计规范 158
9.2 Android系统字体设计规范 159
9.3 Android系统宠物App界面设计实战 159
9.3.1 宠物App项目分析 160
9.3.2 宠物App原型设计 160
9.3.3 宠物App风格分析 164
【项目实战9-1】设计宠物App启动图标 164
【项目实战9-2】设计宠物App引导页 165
【项目实战9-3】设计宠物App注册登录页 167
【项目实战9-4】设计宠物App首页 170
【项目实战9-5】设计宠物App宠物圈页面 175
【项目实战9-6】设计宠物App购物车页面 178
【项目实战9-7】设计宠物App设置页面 182
9.4 本单元小结 184
9.5 课后练习题 184
电子活页（拓展阅读1）界面设计工具应用 185
电子活页（拓展阅读2）原型设计工具应用 186
书单推荐
