本书采用项目导向、任务驱动的模式编写，突破了传统的教学模式，在充分汲取本课程教学改革成果及作者多年教学与实践经验的基础上，以案例教学和项目制作流程为课程导向，以移动 UI 设计的具体应用为学习目标，系统地介绍了移动 UI 设计的基本知识和设计技巧。 本书内容由浅入深、通俗易懂、案例丰富、图文并茂、直观生动、可操作性强，较好地做到了理论与实践的统一、内容与形式的一致。本书内容包括 7 个项目，分别为 App UI 设计概述、色彩在移动 UI 中的应用、移动 UI 中的常用元素设计、UI 元素的组合应用、电商购物类 App UI 设计、《垃圾分类小能手》游戏 UI 设计、《病毒消消乐》游戏 UI 设计。在每个项目中，以典型的工作任务或实际产品开发为载体，介绍并应用移动 UI 设计的知识点，使学生掌握所需的基本理论知识和技能。 本书可以作为本科院校、高职高专院校中移动 UI 设计相关课程的教材，也可以作为广大 UI 设计人员的参考用书。

宗玲，副教授，2014年毕业于韩国中央大学（3D动画专业——3D Animation），在韩国留学期间拿到了硕士学位，并考取了Master of Fine Arts（MFA）——艺术硕士专业学位。参加过多个3D动画项目：例如和英国动画公司合作的互动公益3D动画短片《polar bear》（北极熊）——北极熊惊险迁徙。以及反映亲情的动画短片《mom》（妈妈）等，反映现代社会择偶问题的爱情动画短片《shopping mall》（爱情百货店）。近年来，指导学生参与省级质量工程大学生创新创业项目，并评为“优秀指导教师”。主持教育教学改革建设项目3项，参与精品课程建设1项；累计发表论文7篇。参加学院讲课比赛中获得一等奖，学校讲课比赛中获得二等奖，先进个人奖，获得“教育教学成果奖”二等奖。指导学生参加广州市动漫制作技术技能大赛获得二等奖，指导学生参加漫游杯设计大赛获得一等奖2次、二等奖2次、三等奖2次。指导学生参加云图杯设计大赛获得一等奖，指导学生参加中国高校美术作品学年展三等奖，并或得该比赛优秀指导教师2次。指导学生参加广东省大学生计算机设计大赛获得三等奖8次，并取得广东省大学生计算机大赛优秀指导教师2次。

项目 1 App UI 设计概述 ·····················································································.1
1.1 UI 设计的基本概念及分类··············································································1
1.1.1 UI 设计的基本概念···························································································1
1.1.2 UI 设计的分类·································································································1
1.2 App UI 设计的要素及布局方式········································································3
1.2.1 App UI 设计的要素···························································································3
1.2.2 App UI 设计的布局方式··················································································.11
1.3 App UI 设计的流程····················································································.13
1.4 App UI 设计的原则····················································································.14
1.5 App UI 设计的尺寸标准··············································································.15
1.5.1 设置尺寸标准和规范 ·····················································································.15
1.5.2 平台 ··········································································································.15
1.5.3 单位尺寸 ····································································································.15
1.5.4 iOS 平台的尺寸标准 ······················································································.16
1.5.5 Android 平台的尺寸标准·················································································.17
1.5.6 HarmonyOS 平台的尺寸标准············································································.18
1.6 常用的 UI 设计工具···················································································.20
1.6.1 Adobe Photoshop ···························································································.20
1.6.2 Adobe Illustrator ····························································································.21
1.6.3 数位板 ·······································································································.21
1.6.4 数码相机 ····································································································.22
1.7 智能手机操作系统 ····················································································.23
1.7.1 HarmonyOS ·································································································.23
1.7.2 iOS············································································································.26
1.7.3 Android ······································································································.27
习题 ·············································································································.29
项目 2 色彩在移动 UI 中的应用··········································································.30
2.1 色彩的基础知识 ·······················································································.30
2.2 色彩的组成 ·····························································································.31
2.3 色彩的对比 ·····························································································.31
2.4 色彩的调和 ·····························································································.34
2.5 色调的变化 ·····························································································.36
2.6 移动 UI 的色彩搭配原则·············································································.37
2.6.1 UI 设计的三色搭配原则··················································································.37
2.6.2 色彩搭配的注意事项 ·····················································································.37
2.6.3 UI 设计的配色技巧························································································.37
习题 ·············································································································.38
项目 3 移动 UI 中的常用元素设计·······································································.39
3.1 图标概述 ································································································.39
3.1.1 图标设计流程 ······························································································.39
3.1.2 图标设计原则 ······························································································.40
3.2 任务 1 创意线性图标的设计 ······································································.42
3.2.1 任务描述 ····································································································.43
3.2.2 思路剖析 ····································································································.43
3.2.3 任务实现 ····································································································.43
3.3 任务 2 设计扁平化风格的图标 ···································································.44
3.3.1 任务描述 ····································································································.45
3.3.2 思路剖析 ····································································································.45
3.3.3 任务实现 ····································································································.45
3.4 任务 3 设计 MBE 风格的图标 ····································································.46
3.4.1 任务描述 ····································································································.47
3.4.2 思路剖析 ····································································································.47
3.4.3 任务实现 ····································································································.48
3.5 任务 4 设计线性渐变图标 ·········································································.50
3.5.1 任务描述 ····································································································.50
3.5.2 思路剖析 ····································································································.50
3.5.3 任务实现 ····································································································.51
习题 ·············································································································.57
项目 4 UI 元素的组合应用 ················································································.58
4.1 任务 1 首页设计 ·····················································································.58
4.1.1 任务描述 ····································································································.58
4.1.2 思路剖析 ····································································································.58
4.1.3 任务实现 ····································································································.58
4.2 任务 2 商品分类页设计 ············································································.62
4.2.1 任务描述 ····································································································.62
4.2.2 思路剖析 ····································································································.62
4.2.3 任务实现 ····································································································.62
4.3 任务 3 详情页设计 ··················································································.70
4.3.1 任务描述 ····································································································.70
4.3.2 思路剖析 ····································································································.70
4.3.3 任务实现 ····································································································.70
4.4 任务 4 个人中心页设计 ············································································.75
4.4.1 任务描述 ····································································································.75
4.4.2 思路剖析 ····································································································.75
4.4.3 任务实现 ····································································································.75
习题 ·············································································································.81
项目 5 电商购物类 App UI 设计 ·········································································.82
5.1 产品定位 ································································································.82
5.2 产品优势 ································································································.82
5.3 绘制草图 ································································································.83
5.3.1 绘制《美食美刻》App 的草图··········································································.83
5.3.2 Axure RP·····································································································.84
5.4 绘制原型图 ·····························································································.87
5.4.1 原型图的作用 ······························································································.88
5.4.2 原型图的分类 ······························································································.88
5.4.3 使用线框图制作《美食美刻》App 的原型图························································.88
5.5 设计风格、颜色定位及文字设置···································································.90
5.5.1 设计风格 ····································································································.90
5.5.2 颜色定位 ····································································································.90
5.5.3 文字设置 ····································································································.90
5.6 启动图标 ································································································.91
5.6.1 启动图标的详细分析 ·····················································································.91
5.6.2 启动图标的参数 ···························································································.91
5.6.3 启动图标的制作过程 ·····················································································.91
5.7 加载页 ···································································································.94
5.7.1 页面详细分析 ······························································································.94
5.7.2 页面参数 ····································································································.95
5.7.3 页面制作过程 ······························································································.95
5.8 引导页 ···································································································.97
5.8.1 页面详细分析 ······························································································.97
5.8.2 页面参数 ····································································································.97
5.8.3 页面制作过程 ······························································································.98
5.9 首页 ······································································································.99
5.9.1 页面详细分析 ······························································································.99
5.9.2 页面参数 ··································································································.100
5.9.3 页面制作过程 ····························································································.100
5.10 “商城”页 ·····························································································109
5.10.1 页面详细分析···························································································.109
5.10.2 页面参数·································································································.109
5.10.3 页面制作过程···························································································.110
5.11 “美食分享”页························································································126
5.11.1 页面详细分析 ···························································································.126
5.11.2 页面参数 ·································································································.126
5.11.3 页面制作过程 ···························································································.127
5.12 “订单”页 ·····························································································150
5.12.1 页面详细分析···························································································.150
5.12.2 页面参数·································································································.151
5.12.3 页面制作过程···························································································.151
5.13 “我的”页 ·····························································································152
5.13.1 页面详细分析···························································································.152
5.13.2 页面参数·································································································.152
5.13.3 页面制作过程···························································································.153
5.14 案例小结·······························································································154
习题 ·············································································································154
项目 6 《垃圾分类小能手》游戏 UI 设计······························································157
6.1 产品定位 ································································································157
6.2 绘制草图 ································································································157
6.2.1 启动图标草图 ····························································································.157
6.2.2 加载页草图 ·······························································································.158
6.2.3 注册引导页草图 ·························································································.158
6.2.4 首页草图 ··································································································.158
6.2.5 帮助页面草图 ····························································································.159
6.2.6 游戏页面草图 ····························································································.159
6.2.7 通关页面草图 ····························································································.160
6.3 启动图标 ································································································161
6.4 加载页 ···································································································164
6.5 注册引导页 ·····························································································166
6.6 首页 ······································································································170
6.7 帮助页面 ································································································173
6.8 游戏页面 ································································································176
6.9 通关页面 ································································································179
6.10 案例小结·······························································································182
习题 ·············································································································182
项目 7 《病毒消消乐》游戏 UI 设计····································································183
7.1 产品定位 ································································································183
7.2 产品优势 ································································································183
7.3 绘制草图 ································································································183
7.4 风格定位、色彩定位 ·················································································185
7.4.1 风格定位 ··································································································.185
7.4.2 色彩定位 ··································································································.185
7.5 启动图标 ································································································186
7.5.1 背景部分 ··································································································.187
7.5.2 点缀部分 ··································································································.188
7.5.3 主体部分 ··································································································.189
7.6 引导页 ···································································································191
7.6.1 赛道 ········································································································.192
7.6.2 框架 ········································································································.195
7.6.3 引导图标 ··································································································.197
7.6.4 其他小图标 ·······························································································.198
7.7 主页 ······································································································199
7.7.1 主页点缀 ··································································································.200
7.7.2 主页小图标 ·······························································································.201
7.8 加载页 ···································································································203
7.8.1 加载图标 ··································································································.204
7.8.2 针管图标 ··································································································.205
7.9 子页面 1 设计 ··························································································206
7.9.1 歌曲介绍栏 ·······························································································.207
7.9.2 顶部小图标 ·······························································································.209
7.10 子页面 2 设计·························································································210
7.10.1 “通关成功”图标 ······················································································.211
7.10.2 针剂栏····································································································.212
7.11 子页面 3 设计 ·························································································213
7.12 注意事项·······························································································217
习题 ·············································································································217