移动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