移动UI设计项目化实战教程

定　　价：69 元

• 作者：赵峰
• 出版时间：2022/7/1
• ISBN：9787121440298
• 出 版 社：电子工业出版社

• 中图法分类：TN929.53 
• 页码：256
• 版次：01
• 开本：16开

内容简介

本书采用项目导向、任务驱动的模式进行编写，突破了传统的教学模式，在充分汲取本课程教学改革的成果及作者多年教学与实践经验的基础上，以案例教学和项目制作流程为课程导向，以移动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