移动APP UI设计与制作(微课版)

第1章 UI设计知识讲解
1.1　UI设计的基本概念 2
1.2　UI设计的组成 2
1.2.1 用户研究 2
1.2.2　交互设计 3
1.2.3　界面设计 3
1.3　UI设计原则 3
1.4　了解移动App操作平台 5
1.4.1　苹果iOS系统 5
1.4.2　Android系统 5
1.5　UI设计流程 5
第2章 App UI设计要点
2.1　UI设计的常用构图类型 8
2.1.1　网格构图 8
2.1.2　环形构图 8
2.1.3　三角形构图 9
2.1.4　折线形构图 9
2.1.5　列表型构图 10
2.2　布局设计的要素 10
2.2.1　界面的留白 10
2.2.2　界面内容的对齐方式 11
2.2.3　界面内容的间距 12
2.2.4　界面内容的层次 12
2.3　UI设计中的色彩 14
2.3.1　主色/辅助色/点缀色 14
2.3.2　如何配色 15
第3章 iOS设计原则及规范
3.1　iOS设计原则 18
3.1.1　统一化 18
3.1.2　凸显内容 18
3.1.3　适应化 19
3.1.4　层级性 20
3.1.5　易操作性 20
3.2　iOS界面尺寸与控件的
设计规范 21
3.2.1　界面尺寸 21
3.2.2　界面三大要素 22
3.2.3　栏 22
3.2.4　字体规范 24
3.2.5　色彩控件规范 27
3.2.6　按钮控件规范 27
3.2.7　分割线规范 28
3.2.8　头像规范 28
3.2.9　提示框规范 29
3.2.10　输入框规范 29
3.2.11　间距规范 29
3.2.12　图标规范 30
第4章 图标设计
4.1　图标概述 32
4.1.1　图标的定义 32
4.1.2　图标的重要性 32
4.2　图标的类型 33
4.2.1　拟物图标 33
4.2.2　扁平图标 34
4.2.3　微扁平、轻拟物 34
4.2.4　线性图标 35
4.2.5　面性图标 35
4.2.6　文字图标 35
4.2.7　“新拟物”风格图标 36
4.3　应用图标的设计风格 36
4.3.1　中文文字图标 36
4.3.2　英文字母图标 37
4.3.3　数字图标 38
4.3.4　特殊符号图标 38
4.3.5　图形图标 39
案例——绘制日历工具图标 41
案例——绘制计算器工具图标 46
案例——绘制绘图工具图标 53
案例——绘制音乐播放工具图标 58
4.4　App中的功能图标 63
4.5　功能图标的风格 64
4.5.1 线性图标 64
4.5.2　面形图标 64
4.5.3　MBE图标 65
4.6　图标绘制方法 66
4.6.1　布尔运算 66
4.6.2　贝塞尔曲线 66
案例——制作keyline线 67
案例——绘制线性图标 70
案例——绘制剪影图标 73
案例——绘制MBE风格图标 77
4.7　功能图标的应用 82
第5章 基础UI控件制作
5.1　什么是UI控件 84
5.2　UI控件的交互分类 84
5.3　常见基础控件 84
案例——制作简洁开关控件 85
案例——制作立体开关控件 88
案例——制作条状载入进度条控件 93
案例——制作环状载入进度条控件 98
案例——制作滑块控件 101
案例——制作增益调节控件 110
案例——制作音频播放控件 123
第6章 闪屏页设计
6.1　闪屏页的概念 130
6.2　闪屏页的常见类型 130
6.2.1　品牌宣传型 130
6.2.2　节假关怀型 130
6.2.3　广告运营型 131
案例——制作品牌宣传型闪屏页 132
案例——制作广告运营型闪屏页 136
案例——制作节气关怀型闪屏页 142
案例——制作节日关怀型闪屏页 145
第7章 引导页设计
7.1　引导页的概念 150
7.2　引导页的常见类型 150
7.2.1　功能介绍型 150
7.2.2　情感代入型 151
7.3　浮层引导页 151
案例——制作功能介绍型引导页 152
案例——制作阅读App引导页 156
案例——制作食谱App引导页 160
案例——制作移动办公App引导页 164
案例——制作儿童教育App引导页 170
案例——制作浮层引导页 176
第8章 空白页设计
8.1　空白页的概念 182
8.2　空白页的常见类型 182
8.2.1　首次进入型 182
8.2.2　错误提示型 182
案例——制作购物车空白页 183
案例——制作页面丢失
    提示空白页 186
案例——制作消息中心空白页 188
案例——制作资料审核空白页 192
第9章 首页设计
9.1　首页的概念 196
9.2　首页的常见类型 196
9.2.1　列表型 196
9.2.2　图标型 197
9.2.3　卡片型 197
9.2.4　综合型 197
案例——制作外卖App首页 198
案例——制作健身App首页 205
第10章 个人中心页设计
10.1　个人中心页的概念 214
10.2　个人中心页的常见形式 214
案例——制作个人中心页 215
案例——制作学习类App
    个人中心页 221
第11章 列表页设计
11.1　列表页的概念 228
11.2　列表页的常见类型 228
11.2.1　单行列表 228
11.2.2　双行列表 228
11.2.3　时间轴 229
11.2.4　图库列表 229
案例——制作图库列表页 230
案例——制作天气预报App列表页 233 第12章 播放页设计
12.1　播放页的概念 240
12.2　播放页的分类 240
案例——制作音乐播放页 241
案例——制作音频播放页 248
第13章 详情页设计
13.1　详情页的概念 256
13.2　详情页的常见类型 256
案例——制作购物App详情页 257
案例——制作相册App详情页 265
案例——制作旅游景点介绍详情页 270
案例——制作食谱详情页 275