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

移动UI设计是对移动应用程序（App）的人机交互、操作逻辑、界面美观的整体设计。好的UI 设计不仅可以让应用程序变得有个性、有品味，还可以让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。目前，UI 设计行业在全球软件业兴起并蓬勃发展，属于高新技术设计产业，国内与国外处于同步发展水平。国内外众多IT 公司均已成立专业的UI设计部门，但专业人才稀缺，就业市场供不应求。因此，通过校企合作的方式，编写一本适合本科院校和高职高专院校学生学习的UI 设计专业技能教材，已经成为教育教学工作的重点内容。 本书由7个项目构成。项目1 为App 界面设计概述，主要介绍UI 设计的基本概念及分类、App UI设计要素及布局风格、App UI设计的流程、App UI 设计的原则App UI设计的尺寸标准、常用UI设计的软硬件介绍和智能手机操作系统介绍。项目2 为色彩在移动设备UI 中的应用，主要介绍色彩的基本知识、色彩的组成、色彩的对比、色彩的调和、色调的变化、移动端UI色彩搭配的原则。项目3 为移动UI中的常用元素设计，主要介绍不同风格图标的设计方法和技巧。项目4 为UI元素的组合应用，重点介绍移动应用的首页设计、商品分类页面设计、详情页设计和个人中心页面设计。项目5 为手机网购App UI设计，以美食类App 为例，系统地讲解了、App UI设计的方法和流程。项目6 为《垃圾分类小能手》游戏UI设计，项目7 为《病毒消消乐》游戏UI设计，均采用综合案例的形式全面地讲解游戏类App UI设计的方法和流程。 本书是根据当前高职教材建设和教材改革的新思路进行编写的。作者团队由教学经验丰富、行业背景深厚的高职院校一线“双师型”教师和企业专家共同组成，融理论知识、实践技能、行业经验于一体，具有以下特色。 ? 强化职业岗位和职业能力的培养。本书内容注重和职业岗位相结合，遵循职业能力培养基本规律，采用项目导向、任务驱动的编写模式，通过大量典型化的实例讲解移动UI 设计的基本知识和设计技巧。 ? 本书知识点全面，囊括了UI 设计的基础知识、基本原理、元素设计、单个页面设计及App 完整界面设计等知识。 ? 本书内容由浅入深、通俗易懂、实例丰富、图文并茂、直观生动、可操作性强，较好地做到了理论与实践的统一、内容与形式的一致。 ? 本书注重对知识点和案例设计技巧进行归纳总结，并且配有教学大纲、教学课件、素材源文件，讲解步骤清晰、详细，使读者能更好地理解并掌握知识点。对于本书的配套资源，读者可登录华信教育资源网（www.hxedu.com.cn）免费注册并下载。 本书由赵峰和李泗兰担任主编，负责整书思路、主要框架、大纲的编写和统稿；由郭雅、叶慧芳、宗玲担任副主编； 深圳市忒酷科技有限公司总经理魏红珍担任技术顾问，在本书的项目设计、任务编排等方面，从企业实际工作过程和工作内容的角度给予了有益的指导。全书编写分工如下：项目1 由赵峰编写，项目2 由宗玲编写，项目3 由郭雅编写，项目4 由叶慧芳编写，项目5 由李泗兰编写，项目6 由叶慧芳、魏红珍编写，项目7 由宗玲、魏红珍编写。在此，向所有对本书编写提供帮助的领导和老师表示诚挚的谢意！ 由于时间仓促，本书知识点缀多，书中难免有疏漏之处，欢迎广大读者批评指正。 编者

项目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