图书简介:
项目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
展开
移动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 由宗玲、魏红珍编写。在此,向所有对本书编写提供帮助的领导和老师表示诚挚的谢意!
由于时间仓促,本书知识点缀多,书中难免有疏漏之处,欢迎广大读者批评指正。
编者
展开