移动UI界面设计实战
目录
项目1 移动UI界面设计基础
1.1 熟悉移动UI设计 1
1.1.1 了解UI设计 1
1.1.2 了解移动UI设计 2
1.1.3 移动UI与平面UI 2
1.2 移动UI设计的平台分类 4
1.2.1 Android系统 4
1.2.2 iOS系统 6
1.2.3 Wear OS系统和Watch OS系统 7
1.3 了解移动UI设计常用软件 8
1.3.1 Axure RP和Adobe XD 8
1.3.2 Photoshop和Sketch 9
1.3.3 PxCook和Assistor PS 10
1.4 分析互联网产品的需求 11
1.4.1 知识链接——互联网产品设计流程 11
1.4.2 技术引入——了解互联网产品职业划分 11
1.4.3 实战案例——分析互联网产品需求 13
1.5 设计互联网产品交互效果 15
1.5.1 知识链接——互联网产品交互设计流程 15
1.5.2 技术引入——了解交互设计和交互设计师 16
1.5.3 实战案例——分析互联网产品交互设计 17
1.6 设计互联网产品视觉效果 19
1.6.1 知识链接——互联网产品配色趋势 20
1.6.2 技术引入——页面布局影响视觉效果 22
1.6.3 实战案例——互联网产品视觉设计流程 24
1.6 举一反三——互联网产品专属色彩的变更 25
1.7 本章小结 27
1.8 课后测试 27
1.8.1 选择题 27
1.8.2 判断题 28
1.8.3 创新题 28

项目2 掌握移动UI图标设计
2.1 图标设计的必要性 29
2.2 了解图标栅格系统 30
2.2.1 系统图标栅格 31
2.2.2 不同造型图标的栅格规范 31
2.3 图标集的制作流程 33
2.31. 创建制作清单 33
2.3.2 设计草图 33
2.3.3 数字呈现 34
2.3.4 确定最终效果 34
2.3.5 命名并导出 34
2.4 移动UI图标设计形式 34
2.4.1 中文形式 34
2.4.2 英文形式 36
2.4.3 图形形式 37
2.4.4 数字和特殊符号形式 37
2.5 设计制作工具图标 38
2.5.1 知识链接——工具图标的设计风格 38
2.5.2 技术引入——Android系统图标分类和尺寸 39
2.5.3 实战案例——设计制作产品工具图标 41
2.6 设计制作装饰图标 45
2.6.1 知识链接——装饰图标设计风格 46
2.6.2 技术引入——iOS系统图标尺寸 47
2.6.3 实战案例——设计制作饶舌音乐风格装饰图标 48
2.7 设计制作启动图标 51
2.7.1 知识链接——启动图标设计形式 51
2.7.2 技术引入——启动图标设计要求与规范 52
2.7.3 实战案例——设计制作收音机APP启动图标 54
2.8 举一反三——设计制作iOS系统图标 60
2.9 本章小结 60
2.10 课后测试 61
2.10.1 选择题 61
2.10.2 判断题 61
2.10.3 创新题 61

项目3 iOS系统电子商务APP界面设计
3.1 电子商务APP项目——“约起”界面设计 63
3.1.1 分析电子商务APP项目背景 63
3.1.2 绘制电子商务APP项目用户画像 64
3.2 电子商务APP草图制作 64
3.2.1 电子商务类APP界面尺寸 64
3.2.2 电子商务类APP界面布局类型 65
3.2.3 实战案例——设计制作电子商务APP“首页”草图 66
3.3 电子商务APP界面色彩搭配 69
3.3.1 电子商务APP界面主色的确定 69
3.3.2 电子商务APP辅色的确定 69
3.3.3 电子商务APP文本色确定 69
3.4 电子商务APP界面页面元素分析 70
3.4.1 界面中的图标设置 70
3.4.2 界面中的图片设置 70
3.4.3 界面中的文字设置 71
3.4.4 实战案例——设计制作电子商务APP图标组 71
3.5 电子商务APP界面设计 73
3.5.1 知识链接——了解像素与分辨率 73
3.5.2 技术引入——iOS系统界面设计尺寸 74
3.5.3 实战案例——设计制作电子商务APP界面 75
3.6 电子商务APP交互设计 80
3.6.1 交互设计的重要性 80
3.6.2 交互设计的基本流程 81
3.6.3 实战案例——设计制作电子商务APP交互效果 82
3.7 电子商务APP界面的标注 84
3.7.1 位置与尺寸标注 84
3.7.2 色彩与字号标注 85
3.7.3 实战案例——使用PxCook完成“首页”界面的标注 85
3.8 电子商务APP界面适配 89
3.8.1 iOS系统向下和向上适配 89
3.8.2 适配切片命名规范 91
3.8.3 实战案例——使用Adobe XD完成“首页”界面的适配输出 92
3.9 举一反三——设计制作电子商务APP界面 94
3.10 本章小结 94
3.11 课后测试 95
3.11.1 选择题 95
3.11.2 判断题 95
3.11.3 创新题 95

项目4 iOS系统美食APP界面设计
4.1 美食APP项目——“吃吃喝喝”界面设计 97
4.1.1 分析美食APP项目背景 97
4.1.2 绘制美食APP项目用户画像 98
4.2 美食APP草图制作 98
4.2.1 美食APP界面尺寸 98
4.2.2 美食APP界面布局类型 99
4.2.3 实战案例——设计制作美食APP“首页”草图 100
4.3 美食APP界面色彩搭配 104
4.3.1 美食APP界面主色的确定 104
4.3.2 美食APP辅色的确定 104
4.3.3 美食APP文本色确定 105
4.4 美食APP界面页面元素分析 105
4.4.1 界面中的图片设置 105
4.4.2 界面中的文字设置 106
4.4.3 界面中的图标设置 106
4.4.4 实战案例——设计制作美食APP图标组 107
4.5 美食APP界面设计 109
4.5.1 知识链接——了解APP界面中的边距 109
4.5.2 技术引入——设置APP内容间距 110
4.5.3 实战案例——设计制作美食APP界面 111
4.6 美食APP交互设计 115
4.6.1 Adobe XD检查APP界面交互 115
4.6.2 实战案例——设计制作电子商务APP交互效果 116
4.7 美食APP界面标注 118
4.7.1 APP界面标注内容 118
4.7.2 列一份总表 118
4.7.3 实战案例——使用PxCook标注美食APP界面 119
4.8 美食APP界面适配与切图 122
4.8.1 iOS系统适配iPhone X 122
4.8.2 切图操作中的两个重要因素 123
4.8.3 实战案例——完成“首页”界面素材切片输出 123
4.9 举一反三——设计制作外卖APP界面 125
4.10 本章小结 126
4.11 课后测试 126
4.11.1 选择题 126
4.11.2 判断题 127
4.11.3 创新题 127

项目5 Android系统创意家居APP界面设计
5.1 创意家居APP项目——“ICON”界面设计 128
4.1.1 完成创意家居APP思维导图 128
4.1.2 绘制创意家居APP项目用户画像 130
5.2 创意家居APP草图制作 130
5.2.1 创意家居APP界面布局分析 130
5.2.2 创意家居APP界面布局类型 131
5.2.3 实战案例——设计制作创意家居APP草图 132
5.3 创意家居APP界面色彩搭配 138
5.3.1 创意家居APP界面主色的确定 138
5.3.2 创意家居APP辅色的确定 139
5.3.3 创意家居APP文本色确定 139
5.4 创意家居APP界面页面元素分析 139
5.4.1 界面元素间距设置 139
5.4.2 界面中的文本设置 140
5.4.3 界面中的图标设置 141
5.4.4 实战案例——设计制作创意家居APP图标组 142
5.5 创意家居APP界面设计 146
5.5.1 知识链接——了解屏幕密度和开发单位 146
5.5.2 技术引入——了解Android系统的开发单位 147
5.5.3 实战案例——设计制作创意家居APP界面 147
5.6 创意家居APP交互设计 152
5.6.1 交互设计需要考虑的内容 153
5.6.2 交互设计需要遵循的习惯 153
5.6.3 实战案例——设计制作创意教具APP交互效果 154
5.7 创意家居APP界面标注 158
5.7.1 Android系统界面的标注 158
5.7.2 实战案例——使用PxCook标注创意家居APP界面 159
5.8 创意家居APP界面切图与适配 163
5.8.1 Android系统中的“点9”切图 163
5.8.2 如何做到一稿两用 166
5.8.3 实战案例——完成“首页”界面素材切片输出 167
5.9 举一反三——设计制作创意家居APP其他页面 169
5.10 本章小结 169
5.11 课后测试 169
5.11.1 选择题 169
5.11.2 判断题 170
5.11.3 创新题 170