作者：赵峰
页数：246
出版社：电子工业出版社
出版日期：2022
ISBN：9787121440298
电子书格式：pdf/epub/txt
内容简介
本书采用项目导向、任务驱动的模式进行编写，突破了传统的教学模式，在充分汲取本课程教学改革的成果及作者多年教学与实践经验的基础上，以案例教学和项目制作流程为课程导向，以移动UI设计的具体应用为学习目标，系统地介绍了移动UI设计的基本知识和设计技巧。本书内容由浅入深、通俗易懂、实例丰富、图文并茂、直观生动、可操作性强，较好地做到了理论与实践的统一、内容与形式的一致。本书内容包括7个项目，分别为App界面设计概述、色彩在移动设备UI中的应用、移动UI中的常用元素设计、UI元素的组合应用、电商购物类App界面设计、《垃圾分类小能手》游戏界面设计、《病毒消消乐》游戏界面设计。在每个项目中以典型工作任务或实际产品开发为载体，介绍并应用移动UI设计的知识点，使学生掌握所需的基本理论和技能。本书可以作为本科院校、高职高专院校中移动UI设计相关课程的教材，也可以作为广大UI设计人员的参考用书。
作者简介
赵峰，副教授，职业资格二级（技师），中国职业技术教育学会教学工作委员会会员。毕业于北京交通大学计算机科学与技术专业，现为广东创新科技职业学院动漫制作技术专业带头人，在高校从教二十余年。参与或主持厅局级、学会级教育教学改革科研课题三项，在各级各类期刊发表教育教学改革论文15篇。研究成果在职教学会、高教学会评比中获得一等奖8项、二等奖3项、三等奖5项。指导学生参加各级各类技能大赛，多次获得优秀指导教师称号。参与编写多部教材，申报实用新型专利1项。
目录
项目1 App UI 设计概述 ………………………………………………………………………………………… 1
1.1 UI 设计的基本概念及分类 ……………………………………………………………………………………. 1
1.1.1 UI 设计的基本概念 …………………………………………………………………………………………………………. 1
1.1.2 UI 设计的分类 ………………………………………………………………………………………………………………… 1
1.2 App UI 设计的要素及布局方式 …………………………………………………………………………….. 4
1.2.1 App UI 设计的要素 …………………………………………………………………………………………………………. 4
1.2.2 App UI 设计的布局方式 ………………………………………………………………………………………………… 13
1.3 App UI 设计的流程 …………………………………………………………………………………………….. 15
1.4 App UI 设计的原则 …………………………………………………………………………………………….. 16
1.5 App UI 设计的尺寸标准 ……………………………………………………………………………………… 17
1.5.1 设计尺寸标准和规范 …………………………………………………………………………………………………….. 17
1.5.2 平台 ……………………………………………………………………………………………………………………………… 17
1.5.3 单位尺寸 ………………………………………………………………………………………………………………………. 17
1.5.4 iOS 平台的尺寸标准 ……………………………………………………………………………………………………… 18
1.5.5 Android 平台的尺寸标准 ……………………………………………………………………………………………….. 20
1.5.6 HarmonyOS 平台的尺寸标准 …………………………………………………………………………………………. 20
1.6 常用的UI 设计工具 ……………………………………………………………………………………………. 22
1.6.1 Adobe Photoshop ……………………………………………………………………………………………………………. 22
1.6.2 Adobe Illustrator …………………………………………………………………………………………………………….. 24
1.6.3 数位板 ………………………………………………………………………………………………………………………….. 24
1.6.4 数码相机 ………………………………………………………………………………………………………………………. 25
1.7 智能手机操作系统介绍 ………………………………………………………………………………………. 26
1.7.1 HarmonyOS …………………………………………………………………………………………………………………… 26
1.7.2 iOS ……………………………………………………………………………………………………………………………….. 29
1.7.3 Android …………………………………………………………………………………………………………………………. 31
习 题 ……………………………………………………………………………………………………………………….. 33
项目2 色彩在移动设备UI 中的应用………………………………………………………………………. 34
2.1 色彩的基本知识 …………………………………………………………………………………………………. 34
2.2 色彩的组成 ………………………………………………………………………………………………………… 35
2.3 色彩的对比 ………………………………………………………………………………………………………… 36
2.4 色彩的调和 ………………………………………………………………………………………………………… 39
2.5 色调的变化 ………………………………………………………………………………………………………… 42
2.6 移动端UI 色彩搭配的原则 …………………………………………………………………………………. 42
2.6.1 UI 三色搭配原则 …………………………………………………………………………………………………………… 42
2.6.2 色彩搭配的注意事项 …………………………………………………………………………………………………….. 43
2.6.3 UI 设计的配色技巧 ……………………………………………………………………………………………………….. 43
习 题 ……………………………………………………………………………………………………………………….. 44
项目3 移动UI 中的常用元素设计 …………………………………………………………………………. 45
3.1 图标概述 ……………………………………………………………………………………………………………. 45
3.1.1 图标设计流程 ……………………………………………………………………………………………………………….. 46
3.1.2 图标设计原则 ……………………………………………………………………………………………………………….. 46
3.2 任务1 创意线性图标的设计 ………………………………………………………………………………. 49
3.2.1 任务描述 ………………………………………………………………………………………………………………………. 49
3.2.2 思路剖析 ………………………………………………………………………………………………………………………. 50
3.2.3 任务实现 ………………………………………………………………………………………………………………………. 50
3.3 任务2 扁平化风格图标的设计 …………………………………………………………………………… 51
3.3.1 任务描述 ………………………………………………………………………………………………………………………. 52
3.3.2 思路剖析 ………………………………………………………………………………………………………………………. 52
3.3.3 任务实现 ………………………………………………………………………………………………………………………. 52
3.4 任务3 MBE 风格图标的设计 ……………………………………………………………………………… 53
3.4.1 任务描述 ………………………………………………………………………………………………………………………. 54
3.4.2 思路剖析 ………………………………………………………………………………………………………………………. 54
3.4.3 任务实现 ………………………………………………………………………………………………………………………. 55
3.5 任务4 线性渐变图标设计 ………………………………………………………………………………….. 58
3.5.1 任务描述 ………………………………………………………………………………………………………………………. 58
3.5.2 思路剖析 ………………………………………………………………………………………………………………………. 58
3.5.3 任务实现 ………………………………………………………………………………………………………………………. 59
习 题 ……………………………………………………………………………………………………………………….. 66
项目4 UI 元素的组合应用 ……………………………………………………………………………………. 68
4.1 任务1 首页设计 ………………………………………………………………………………………………… 68
4.1.1 任务描述 ………………………………………………………………………………………………………………………. 68
4.1.2 思路剖析 ………………………………………………………………………………………………………………………. 68
4.1.3 任务实现 ………………………………………………………………………………………………………………………. 69
4.2 任务2 商品分类页面设计 ………………………………………………………………………………….. 73
4.2.1 任务描述 ………………………………………………………………………………………………………………………. 73
4.2.2 思路剖析 ………………………………………………………………………………………………………………………. 73
4.2.3 任务实现 ………………………………………………………………………………………………………………………. 74
4.3 任务3 详情页设计 ……………………………………………………………………………………………… 82
4.3.1 任务描述 ………………………………………………………………………………………………………………………. 82
4.3.2 思路剖析 ………………………………………………………………………………………………………………………. 82
4.3.3 任务实现 ………………………………………………………………………………………………………………………. 82
4.4 任务4 个人中心页面设计 ………………………………………………………………………………….. 87
4.4.1 任务描述 ………………………………………………………………………………………………………………………. 87
4.4.2 思路剖析 ………………………………………………………………………………………………………………………. 88
4.4.3 任务实现 ………………………………………………………………………………………………………………………. 88
习 题 ……………………………………………………………………………………………………………………….. 97
项目5 电商购物类App UI 设计 ……………………………………………………………………………. 99
5.1 产品定位 ……………………………………………………………………………………………………………. 99
5.2 产品优势 ……………………………………………………………………………………………………………. 99
5.3 绘制草图 ………………………………………………………………………………………………………….. 100
5.3.1 绘制《美食美刻》App 的草图 ……………………………………………………………………………………… 100
5.3.2 Axure RP …………………………………………………………………………………………………………………….. 100
5.4 绘制原型图 ………………………………………………………………………………………………………. 104
5.4.1 原型图的作用 ……………………………………………………………………………………………………………… 105
5.4.2 原型图的种类 ……………………………………………………………………………………………………………… 105
5.4.3 使用线框图制作《美食美刻》App 的原型图 ………………………………………………………………… 105
5.5 设计风格、颜色定位及字体设置 ………………………………………………………………………. 108
5.5.1 设计风格 …………………………………………………………………………………………………………………….. 108
5.5.2 颜色定位 …………………………………………………………………………………………………………………….. 108
5.5.3 文字设置 …………………………………………………………………………………………………………………….. 108
5.6 启动图标 ………………………………………………………………………………………………………….. 109
5.6.1 启动图标的详细分析 …………………………………………………………………………………………………… 109
5.6.2 启动图标的参数 ………………………………………………………………………………………………………….. 109
5.6.3 启动图标的制作过程 …………………………………………………………………………………………………… 110
5.7 加载页 ……………………………………………………………………………………………………………… 113
5.7.1 页面详细分析 ……………………………………………………………………………………………………………… 113
5.7.2 页面参数 …………………………………………………………………………………………………………………….. 114
5.7.3 页面制作过程 ……………………………………………………………………………………………………………… 114
5.8 引导页 ……………………………………………………………………………………………………………… 116
5.8.1 页面详细分析 ……………………………………………………………………………………………………………… 116
5.8.2 页面参数 …………………………………………………………………………………………………………………….. 116
5.8.3 页面制作过程 ……………………………………………………………………………………………………………… 117
5.9 首页 …………………………………………………………………………………………………………………. 118
5.9.1 页面详细分析 ……………………………………………………………………………………………………………… 118
5.9.2 页面参数 …………………………………………………………………………………………………………………….. 118
5.9.3 页面制作过程 ……………………………………………………………………………………………………………… 119
5.10 “商城”页 ………………………………………………………………………………………………………… 128
5.10.1 页面详细分析 ……………………………………………………………………………………………………………. 129
5.10.2 页面参数 …………………………………………………………………………………………………………………… 129
5.10.3 页面制作过程 ……………………………………………………………………………………………………………. 130
5.11 “美食分享”页 ………………………………………………………………………………………………….. 147
5.11.1 页面详细分析 ……………………………………………………………………………………………………………. 147
5.11.2 页面参数 …………………………………………………………………………………………………………………… 148
5.11.3 页面制作过程 ……………………………………………………………………………………………………………. 149
5.12 “订单”页 …………………………………………………………………………………………………………… 173
5.12.1 页面详细分析 ……………………………………………………………………………………………………………. 173
5.12.2 页面参数 …………………………………………………………………………………………………………………… 174
5.12.3 页面制作过程 ……………………………………………………………………………………………………………. 174
5.13 “我的”页 …………………………………………………………………………………………………………… 175
5.13.1 页面详细分析 ……………………………………………………………………………………………………………. 175
5.13.2 页面参数 …………………………………………………………………………………………………………………… 176
5.13.3 页面制作过程 ……………………………………………………………………………………………………………. 177
5.14 案例小结 ………………………………………………………………………………………………………… 178
习 题 ……………………………………………………………………………………………………………………… 178
项目6 《垃圾分类小能手》游戏UI 设计 ……………………………………………………………… 181
6.1 游戏定位 ………………………………………………………………………………………………………….. 181
6.2 绘制草图 ………………………………………………………………………………………………………….. 181
6.2.1 启动图标草图 ……………………………………………………………………………………………………………… 181
6.2.2 加载页草图 …………………………………………………………………………………………………………………. 182
6.2.3 注册引导页草图 ………………………………………………………………………………………………………….. 182
6.2.4 首页草图 …………………………………………………………………………………………………………………….. 182
6.2.5 帮助页面草图 ……………………………………………………………………………………………………………… 183
6.2.6 游戏页面草图 ……………………………………………………………………………………………………………… 183
6.2.7 通关页面草图 ……………………………………………………………………………………………………………… 184
6.3 启动图标 ………………………………………………………………………………………………………….. 185
6.4 加载页 ……………………………………………………………………………………………………………… 188
6.5 注册引导页 ………………………………………………………………………………………………………. 190
6.6 首页 …………………………………………………………………………………………………………………. 194
6.7 帮助页面 ………………………………………………………………………………………………………….. 197
6.8 游戏页面 ………………………………………………………………………………………………………….. 200
6.9 通关页面 ………………………………………………………………………………………………………….. 203
6.10 案例小结 ………………………………………………………………………………………………………… 206
习 题 ……………………………………………………………………………………………………………………… 206
项目7 《病毒消消乐》游戏UI 设计 …………………………………………………………………….. 207
7.1 产品定位 ………………………………………………………………………………………………………….. 207
7.2 产品优势 ………………………………………………………………………………………………………….. 207
7.3 绘制草图 ………………………………………………………………………………………………………….. 208
7.4 风格定位、色彩定位 ………………………………………………………………………………………… 209
7.4.1 风格定位 …………………………………………………………………………………………………………………….. 209
7.4.2 色彩定位 …………………………………………………………………………………………………………………….. 209
7.5 启动图标 ………………………………………………………………………………………………………….. 211
7.5.1 背景部分 …………………………………………………………………………………………………………………….. 212
7.5.2 点缀部分 …………………………………………………………………………………………………………………….. 213
7.5.3 主体部分 …………………………………………………………………………………………………………………….. 214
7.6 引导页 ……………………………………………………………………………………………………………… 216
7.6.1 赛道 ……………………………………………………………………………………………………………………………. 217
7.6.2 框架 ……………………………………………………………………………………………………………………………. 219
7.6.3 引导图标 …………………………………………………………………………………………………………………….. 222
7.6.4 其他小图标 …………………………………………………………………………………………………………………. 224
7.7 主页 …………………………………………………………………………………………………………………. 225
7.7.1 主页点缀 …………………………………………………………………………………………………………………….. 226
7.7.2 主页小图标 …………………………………………………………………………………………………………………. 227
7.8 加载页 ……………………………………………………………………………………………………………… 229
7.8.1 加载图标 …………………………………………………………………………………………………………………….. 230
7.8.2 针管图标 …………………………………………………………………………………………………………………….. 232
7.9 子页面1 设计 …………………………………………………………………………………………………… 233
7.9.1 歌曲介绍栏 …………………………………………………………………………………………………………………. 234
7.9.2 顶部小图标 …………………………………………………………………………………………………………………. 236
7.10 子页面2 设计 …………………………………………………………………………………………………. 237
7.10.1 主体文案 …………………………………………………………………………………………………………………… 238
7.11 子页面3 设计 …………………………………………………………………………………………………. 241
7.11.1 内部符号图标 ……………………………………………………………………………………………………………. 242
7.12 案例小结 ………………………………………………………………………………………………………… 244
习 题 ……………………………………………………………………………………………………………………… 244
1.1 UI 设计的基本概念及分类 ……………………………………………………………………………………. 1
1.1.1 UI 设计的基本概念 …………………………………………………………………………………………………………. 1
1.1.2 UI 设计的分类 ………………………………………………………………………………………………………………… 1
1.2 App UI 设计的要素及布局方式 …………………………………………………………………………….. 4
1.2.1 App UI 设计的要素 …………………………………………………………………………………………………………. 4
1.2.2 App UI 设计的布局方式 ………………………………………………………………………………………………… 13
1.3 App UI 设计的流程 …………………………………………………………………………………………….. 15
1.4 App UI 设计的原则 …………………………………………………………………………………………….. 16
1.5 App UI 设计的尺寸标准 ……………………………………………………………………………………… 17
1.5.1 设计尺寸标准和规范 …………………………………………………………………………………………………….. 17
1.5.2 平台 ……………………………………………………………………………………………………………………………… 17
1.5.3 单位尺寸 ………………………………………………………………………………………………………………………. 17
1.5.4 iOS 平台的尺寸标准 ……………………………………………………………………………………………………… 18
1.5.5 Android 平台的尺寸标准 ……………………………………………………………………………………………….. 20
1.5.6 HarmonyOS 平台的尺寸标准 …………………………………………………………………………………………. 20
1.6 常用的UI 设计工具 ……………………………………………………………………………………………. 22
1.6.1 Adobe Photoshop ……………………………………………………………………………………………………………. 22
1.6.2 Adobe Illustrator …………………………………………………………………………………………………………….. 24
1.6.3 数位板 ………………………………………………………………………………………………………………………….. 24
1.6.4 数码相机 ………………………………………………………………………………………………………………………. 25
1.7 智能手机操作系统介绍 ………………………………………………………………………………………. 26
1.7.1 HarmonyOS …………………………………………………………………………………………………………………… 26
1.7.2 iOS ……………………………………………………………………………………………………………………………….. 29
1.7.3 Android …………………………………………………………………………………………………………………………. 31
习 题 ……………………………………………………………………………………………………………………….. 33
项目2 色彩在移动设备UI 中的应用………………………………………………………………………. 34
2.1 色彩的基本知识 …………………………………………………………………………………………………. 34
2.2 色彩的组成 ………………………………………………………………………………………………………… 35
2.3 色彩的对比 ………………………………………………………………………………………………………… 36
2.4 色彩的调和 ………………………………………………………………………………………………………… 39
2.5 色调的变化 ………………………………………………………………………………………………………… 42
2.6 移动端UI 色彩搭配的原则 …………………………………………………………………………………. 42
2.6.1 UI 三色搭配原则 …………………………………………………………………………………………………………… 42
2.6.2 色彩搭配的注意事项 …………………………………………………………………………………………………….. 43
2.6.3 UI 设计的配色技巧 ……………………………………………………………………………………………………….. 43
习 题 ……………………………………………………………………………………………………………………….. 44
项目3 移动UI 中的常用元素设计 …………………………………………………………………………. 45
3.1 图标概述 ……………………………………………………………………………………………………………. 45
3.1.1 图标设计流程 ……………………………………………………………………………………………………………….. 46
3.1.2 图标设计原则 ……………………………………………………………………………………………………………….. 46
3.2 任务1 创意线性图标的设计 ………………………………………………………………………………. 49
3.2.1 任务描述 ………………………………………………………………………………………………………………………. 49
3.2.2 思路剖析 ………………………………………………………………………………………………………………………. 50
3.2.3 任务实现 ………………………………………………………………………………………………………………………. 50
3.3 任务2 扁平化风格图标的设计 …………………………………………………………………………… 51
3.3.1 任务描述 ………………………………………………………………………………………………………………………. 52
3.3.2 思路剖析 ………………………………………………………………………………………………………………………. 52
3.3.3 任务实现 ………………………………………………………………………………………………………………………. 52
3.4 任务3 MBE 风格图标的设计 ……………………………………………………………………………… 53
3.4.1 任务描述 ………………………………………………………………………………………………………………………. 54
3.4.2 思路剖析 ………………………………………………………………………………………………………………………. 54
3.4.3 任务实现 ………………………………………………………………………………………………………………………. 55
3.5 任务4 线性渐变图标设计 ………………………………………………………………………………….. 58
3.5.1 任务描述 ………………………………………………………………………………………………………………………. 58
3.5.2 思路剖析 ………………………………………………………………………………………………………………………. 58
3.5.3 任务实现 ………………………………………………………………………………………………………………………. 59
习 题 ……………………………………………………………………………………………………………………….. 66
项目4 UI 元素的组合应用 ……………………………………………………………………………………. 68
4.1 任务1 首页设计 ………………………………………………………………………………………………… 68
4.1.1 任务描述 ………………………………………………………………………………………………………………………. 68
4.1.2 思路剖析 ………………………………………………………………………………………………………………………. 68
4.1.3 任务实现 ………………………………………………………………………………………………………………………. 69
4.2 任务2 商品分类页面设计 ………………………………………………………………………………….. 73
4.2.1 任务描述 ………………………………………………………………………………………………………………………. 73
4.2.2 思路剖析 ………………………………………………………………………………………………………………………. 73
4.2.3 任务实现 ………………………………………………………………………………………………………………………. 74
4.3 任务3 详情页设计 ……………………………………………………………………………………………… 82
4.3.1 任务描述 ………………………………………………………………………………………………………………………. 82
4.3.2 思路剖析 ………………………………………………………………………………………………………………………. 82
4.3.3 任务实现 ………………………………………………………………………………………………………………………. 82
4.4 任务4 个人中心页面设计 ………………………………………………………………………………….. 87
4.4.1 任务描述 ………………………………………………………………………………………………………………………. 87
4.4.2 思路剖析 ………………………………………………………………………………………………………………………. 88
4.4.3 任务实现 ………………………………………………………………………………………………………………………. 88
习 题 ……………………………………………………………………………………………………………………….. 97
项目5 电商购物类App UI 设计 ……………………………………………………………………………. 99
5.1 产品定位 ……………………………………………………………………………………………………………. 99
5.2 产品优势 ……………………………………………………………………………………………………………. 99
5.3 绘制草图 ………………………………………………………………………………………………………….. 100
5.3.1 绘制《美食美刻》App 的草图 ……………………………………………………………………………………… 100
5.3.2 Axure RP …………………………………………………………………………………………………………………….. 100
5.4 绘制原型图 ………………………………………………………………………………………………………. 104
5.4.1 原型图的作用 ……………………………………………………………………………………………………………… 105
5.4.2 原型图的种类 ……………………………………………………………………………………………………………… 105
5.4.3 使用线框图制作《美食美刻》App 的原型图 ………………………………………………………………… 105
5.5 设计风格、颜色定位及字体设置 ………………………………………………………………………. 108
5.5.1 设计风格 …………………………………………………………………………………………………………………….. 108
5.5.2 颜色定位 …………………………………………………………………………………………………………………….. 108
5.5.3 文字设置 …………………………………………………………………………………………………………………….. 108
5.6 启动图标 ………………………………………………………………………………………………………….. 109
5.6.1 启动图标的详细分析 …………………………………………………………………………………………………… 109
5.6.2 启动图标的参数 ………………………………………………………………………………………………………….. 109
5.6.3 启动图标的制作过程 …………………………………………………………………………………………………… 110
5.7 加载页 ……………………………………………………………………………………………………………… 113
5.7.1 页面详细分析 ……………………………………………………………………………………………………………… 113
5.7.2 页面参数 …………………………………………………………………………………………………………………….. 114
5.7.3 页面制作过程 ……………………………………………………………………………………………………………… 114
5.8 引导页 ……………………………………………………………………………………………………………… 116
5.8.1 页面详细分析 ……………………………………………………………………………………………………………… 116
5.8.2 页面参数 …………………………………………………………………………………………………………………….. 116
5.8.3 页面制作过程 ……………………………………………………………………………………………………………… 117
5.9 首页 …………………………………………………………………………………………………………………. 118
5.9.1 页面详细分析 ……………………………………………………………………………………………………………… 118
5.9.2 页面参数 …………………………………………………………………………………………………………………….. 118
5.9.3 页面制作过程 ……………………………………………………………………………………………………………… 119
5.10 “商城”页 ………………………………………………………………………………………………………… 128
5.10.1 页面详细分析 ……………………………………………………………………………………………………………. 129
5.10.2 页面参数 …………………………………………………………………………………………………………………… 129
5.10.3 页面制作过程 ……………………………………………………………………………………………………………. 130
5.11 “美食分享”页 ………………………………………………………………………………………………….. 147
5.11.1 页面详细分析 ……………………………………………………………………………………………………………. 147
5.11.2 页面参数 …………………………………………………………………………………………………………………… 148
5.11.3 页面制作过程 ……………………………………………………………………………………………………………. 149
5.12 “订单”页 …………………………………………………………………………………………………………… 173
5.12.1 页面详细分析 ……………………………………………………………………………………………………………. 173
5.12.2 页面参数 …………………………………………………………………………………………………………………… 174
5.12.3 页面制作过程 ……………………………………………………………………………………………………………. 174
5.13 “我的”页 …………………………………………………………………………………………………………… 175
5.13.1 页面详细分析 ……………………………………………………………………………………………………………. 175
5.13.2 页面参数 …………………………………………………………………………………………………………………… 176
5.13.3 页面制作过程 ……………………………………………………………………………………………………………. 177
5.14 案例小结 ………………………………………………………………………………………………………… 178
习 题 ……………………………………………………………………………………………………………………… 178
项目6 《垃圾分类小能手》游戏UI 设计 ……………………………………………………………… 181
6.1 游戏定位 ………………………………………………………………………………………………………….. 181
6.2 绘制草图 ………………………………………………………………………………………………………….. 181
6.2.1 启动图标草图 ……………………………………………………………………………………………………………… 181
6.2.2 加载页草图 …………………………………………………………………………………………………………………. 182
6.2.3 注册引导页草图 ………………………………………………………………………………………………………….. 182
6.2.4 首页草图 …………………………………………………………………………………………………………………….. 182
6.2.5 帮助页面草图 ……………………………………………………………………………………………………………… 183
6.2.6 游戏页面草图 ……………………………………………………………………………………………………………… 183
6.2.7 通关页面草图 ……………………………………………………………………………………………………………… 184
6.3 启动图标 ………………………………………………………………………………………………………….. 185
6.4 加载页 ……………………………………………………………………………………………………………… 188
6.5 注册引导页 ………………………………………………………………………………………………………. 190
6.6 首页 …………………………………………………………………………………………………………………. 194
6.7 帮助页面 ………………………………………………………………………………………………………….. 197
6.8 游戏页面 ………………………………………………………………………………………………………….. 200
6.9 通关页面 ………………………………………………………………………………………………………….. 203
6.10 案例小结 ………………………………………………………………………………………………………… 206
习 题 ……………………………………………………………………………………………………………………… 206
项目7 《病毒消消乐》游戏UI 设计 …………………………………………………………………….. 207
7.1 产品定位 ………………………………………………………………………………………………………….. 207
7.2 产品优势 ………………………………………………………………………………………………………….. 207
7.3 绘制草图 ………………………………………………………………………………………………………….. 208
7.4 风格定位、色彩定位 ………………………………………………………………………………………… 209
7.4.1 风格定位 …………………………………………………………………………………………………………………….. 209
7.4.2 色彩定位 …………………………………………………………………………………………………………………….. 209
7.5 启动图标 ………………………………………………………………………………………………………….. 211
7.5.1 背景部分 …………………………………………………………………………………………………………………….. 212
7.5.2 点缀部分 …………………………………………………………………………………………………………………….. 213
7.5.3 主体部分 …………………………………………………………………………………………………………………….. 214
7.6 引导页 ……………………………………………………………………………………………………………… 216
7.6.1 赛道 ……………………………………………………………………………………………………………………………. 217
7.6.2 框架 ……………………………………………………………………………………………………………………………. 219
7.6.3 引导图标 …………………………………………………………………………………………………………………….. 222
7.6.4 其他小图标 …………………………………………………………………………………………………………………. 224
7.7 主页 …………………………………………………………………………………………………………………. 225
7.7.1 主页点缀 …………………………………………………………………………………………………………………….. 226
7.7.2 主页小图标 …………………………………………………………………………………………………………………. 227
7.8 加载页 ……………………………………………………………………………………………………………… 229
7.8.1 加载图标 …………………………………………………………………………………………………………………….. 230
7.8.2 针管图标 …………………………………………………………………………………………………………………….. 232
7.9 子页面1 设计 …………………………………………………………………………………………………… 233
7.9.1 歌曲介绍栏 …………………………………………………………………………………………………………………. 234
7.9.2 顶部小图标 …………………………………………………………………………………………………………………. 236
7.10 子页面2 设计 …………………………………………………………………………………………………. 237
7.10.1 主体文案 …………………………………………………………………………………………………………………… 238
7.11 子页面3 设计 …………………………………………………………………………………………………. 241
7.11.1 内部符号图标 ……………………………………………………………………………………………………………. 242
7.12 案例小结 ………………………………………………………………………………………………………… 244
习 题 ……………………………………………………………………………………………………………………… 244
