移动UI设计项目化实战教程(高等学校应用型特色系列教材)

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