移动UI界面设计（第2版）（微课版）

本书采用项目引入的方式，针对iOS系统、Android系统、HarmonyOS系统和微信小程序UI设计规范进行讲解。全书采用任务驱动法带动知识点的教学方式，将枯燥的知识点融入丰富有趣的案例制作中，全面解析移动端App UI设计的流程及设计技巧。书中案例均使用Adobe XD和PxCook主流UI设计软件制作。本书共五个项目，项目一，移动UI设计基础；项目二，iOS系统UI设计；项目三，Android系统UI设计；项目四，HarmonyOS系统UI设计；项目五，微信小程序UI设计。 本书适合UI设计爱好者、移动UI设计从业者阅读，也适合作为各院校相关设计专业的参考教材。

张晓景 Adobe专家组成员。国家软件协会会员， 国家863专业讲师。资深设计师,Adobe专家委员会成员,Adobe网页设计师认证讲师,Adobe用户界面设计师,国家信息产业部653工程讲师,中国软件行业协会专家委员,参与国家开放大学网页UI设计与制作。

目 录 项目一 移动UI设计基础 相关知识： 3 1.1 熟悉移动UI设计 3 1.1.1 了解UI设计 3 1.1.2 什么是App 4 1.1.3 移动UI设计与平面UI设计的区别 5 1.2 移动UI设计平台 7 1.2.1 Android系统 7 1.2.2 HarmonyOS系统 8 1.2.3 iOS系统和iPadOS系统 9 1.2.4 Wear OS和WatchOS系统 11 1.3 移动App项目开发职业划分 12 1.2.5 产品经理 12 1.2.6 项目经理 12 1.2.7 页面设计师 13 1.2.8 开发人员 13 1.4 移动UI设计常用软件 13 1.4.1 XMind和Axure RP 13 1.4.2 Photoshop和Sketch 14 1.4.3 Adobe XD和Figma 15 1.4.4 PxCook和Assistor PS 16 任务实施： 17 1.5 任务一 分析移动UI设计的需求 17 1.5.1 任务分析——移动UI需求分析 17 1.5.2 任务实施——“茶道”App的用户分析 20 1.6 任务二 移动UI交互设计 21 1.7.1 任务分析——移动UI交互设计流程 21 1.7.2 任务实施——设计“茶道”App交互原型 24 1.7 任务三 移动UI视觉设计 25 1.7.3 任务实施——移动UI视觉设计步骤 25 1.7.4 任务实施——设计“茶道”App首页UI 26 1.8 总结扩展 28 1.8.2 项目小结 28 1.8.3 思政导入 28 1.8.4 拓展案例——设计制作“茶道”App其他页面UI 28 1.9 课后测试 28 1.9.1 选择题 29 1.9.2 判断题 29 1.9.3 创新题 29 项目二 iOS系统UI设计 相关知识： 31 2.1 屏幕密度与分辨率 31 2.1.1 网点密度和屏幕密度 31 2.1.2 屏幕分辨率 31 2.2 iOS系统界面尺寸和组件 32 2.2.1 iOS系统界面设计尺寸 32 2.2.2 iOS系统组件 33 2.3 iOS系统文字设计规范 36 2.3.1 字体 36 2.3.2 字号 37 2.3.3 颜色和字重 37 2.4 iOS系统图标设计规范 38 2.5 iOS系统图片设计规范 39 2.5.1 图片的比例 40 2.5.2 图片的格式 41 2.6 iOS系统内容布局 41 2.6.1 列表式布局 41 2.6.2 陈列馆式布局 42 2.6.3 宫格式布局 42 2.6.4 卡片式布局 43 2.7 iOS系统版式设计规范 44 任务实施： 44 2.8 任务一 设计制作App产品原型 44 2.8.1 任务分析——App UI的尺寸和布局 45 2.8.2 任务实施——设计制作“茶道”App原型 46 2.9 任务二 设计制作App产品交互流程 51 2.9.1 任务分析——交互流程设计的必要性 51 2.9.2 任务实施——设计制作“茶道”App页面交互 52 2.10 任务三 设计制作App产品视觉效果 55 2.10.1 任务分析——确定“茶道”App UI配色方案 56 2.10.2 任务实施——设计制作“茶道”App视觉效果 56 2.11 总结扩展 63 2.11.1 项目小结 63 2.11.2 思政导入 63 2.11.3 拓展案例——设计制作“品茶”App界面 63 2.12 课后测试 63 2.12.1 选择题 64 2.12.2 判断题 64 2.12.2 创新题 64 项目三Android系统UI设计 相关知识： 66 3.1 了解Android系统“碎片化” 66 3.2 Android系统单位与尺寸 67 3.2.1 Android系统屏幕密度 67 3.2.2 Android系统单位 68 3.2.3 Android系统设计尺寸 68 3.3 Android系统组件设计尺寸 69 3.3.1 Android系统组件尺寸 69 3.3.2 Android系统元素间距 69 3.4 Android系统文字设计规范 70 3.4.1 字体 70 3.4.2 字号 71 3.5 Android系统图标设计规范 71 3.5.1 图标的尺寸 73 3.5.2 触摸反馈 74 任务实施： 75 3.6 任务一 设计制作旗袍App产品原型与交互 75 3.6.1 任务分析——旗袍App产品思维导图与布局分析 75 3.6.2 任务实施——设计制作旗袍App原型和交互 78 3.7 任务二 设计制作旗袍App图标组与UI 84 3.7.1 任务分析——图标设计的优点与原则 84 3.7.2 任务实施——设计制作旗袍App页面UI 85 3.8 任务三 输出旗袍App页面并完成适配 92 3.8.1 任务分析——如何做到一稿多用 93 3.8.2 任务实施——输出、适配和标注旗袍App页面 94 3.9 总结扩展 98 3.9.1 项目小结 98 3.9.2 思政导入 98 3.9.3 拓展案例——设计制作诗词App界面 98 3.10 课后测试 98 3.10.1 选择题 98 3.10.2 判断题 99 3.10.3 创新题 99 项目四HarmonyOS系统UI设计 相关知识： 101 4.1 了解HarmonyOS系统 101 4.1.1 HarmonyOS系统的诞生与特点 101 4.1.2 HarmonyOS与iOS和Android的区别 102 4.2 HarmonyOS系统单位与尺寸 102 4.2.1 HarmonyOS系统的单位 103 4.2.2 HarmonyOS系统的组件尺寸 103 4.3 HarmonyOS系统文字设计规范 105 4.3.1 字体 105 4.1.3 字号 106 4.1.4 对齐规则 106 4.4 HarmonyOS系统图标设计规范 106 4.4.1 图标图形大小布局 107 4.4.2 图标图形的特征 108 4.5 HarmonyOS系统的间距 108 任务实施： 110 4.6 任务一 设计制作戏曲App原型 110 4.6.1 任务分析——项目页面尺寸和布局类型 110 4.6.2 任务实施——设计制作戏曲App产品原型 111 4.7 任务二 设计制作戏曲App视觉效果 117 4.7.1 任务分析——交互设计需要考虑的内容 117 4.7.2 任务实施——设计制作戏曲App视觉效果 118 4.8 任务三 输出与适配戏曲App页面 123 4.8.1 任务分析——“点9”切图的应用 124 4.8.2 任务实施——输出与标注戏曲App产品页面 127 4.9 总结扩展 133 4.9.1 项目小结 133 4.9.2 思政导入 133 4.9.3 拓展案例——设计制作京剧App界面 133 4.10 课后测试 133 4.10.1 选择题 133 4.10.2 判断题 134 4.10.3 创新题 134 项目五 微信小程序UI设计 相关知识： 136 5.1 了解小程序UI设计 136 5.2 小程序UI设计尺寸和区域 137 5.2.1 小程序UI设计尺寸 137 5.2.2 小程序UI设计区域 137 5.3 启动页加载 140 5.4 小程序UI组件设计 141 5.4.1 导航栏设计 141 5.4.2 标签栏设计 143 5.5 小程序UI文字设计 144 5.5.1 字体与字号 144 5.5.2 字体颜色 145 5.6 任务一 设计制作瓷器小程序原型 145 5.6.1 任务分析——瓷器小程序UI设计分析 146 5.6.2 任务实施——设计制作瓷器小程序UI原型 147 5.7 任务二 设计制作瓷器小程序视觉效果 152 5.7.1 任务分析——瓷器小程序UI配色方案 152 5.7.2 任务实施——设计制作瓷器小程序UI与交互 152 5.8 任务三 标注与适配瓷器小程序页面 158 5.8.1 任务分析——掌握切片命名规范 159 5.8.2 任务实施——标注与输出瓷器小程序页面 161 5.9 总结扩展 167 4.9.1 项目小结 167 4.9.2 思政导入 167 4.9.3 拓展案例——设计制作旅游微信小程序界面 167 5.10 课后测试 167 5.10.1 选择题 168 5.10.2 判断题 168 4.10.3 创新题 168