移动UI设计（微课版）-图书-人邮教育社区

内容摘要

本书采用全流程设计的方式，对iOS和Android系统移动设备界面的结构及设计规范进行讲
解。全书采用知识点辅助案例的方式组织内容，在大量的知识点中融入丰富、有趣的案例制作，全面解析移动端App界面设计的流程及设计技巧。书中案例使用Axure RP 10、Adobe XD、Adobe Photoshop CC、Adobe Illustrator CC和PxCook等主流UI设计软件制作。
全书共8章，内容包括移动UI设计基础知识、移动UI的策划与原型设计方法、移动UI的色彩搭配方法、移动图标的设计方法、移动App的UI设计方法、移动App的交互设计方法、适配与输出移动UI设计的方法、设计与制作移动App项目的方法。
本书将提供全部案例的素材、源文件和教学视频，帮助读者提高移动UI设计的学习效率。本书提供每章课程思政目标解读，帮助教师更好地实现立德树人的教学目标。本书适合UI设计爱好者、移动UI设计从业者阅读，也适合作为各院校设计相关专业的教材。

第1章　关于移动UI设计
1.1　了解移动UI设计 / 001
1.1.1　初识UI设计 / 001
1.1.2　移动UI设计的概念 / 002
1.1.3　移动UI与PC端UI / 002
1.1.4　将PC端UI重置为移动UI / 004
1.2　移动UI的系统分类 / 006
1.2.1 iOS / 006
1.2.2 Android系统 / 007
1.2.3 HarmonyOS / 007
1.2.4 Wear OS和watchOS / 009
1.3　移动UI设计流程 / 010
1.3.1　需求分析 / 010
1.3.2　原型设计 / 013
1.3.3 UI设计 / 016
1.4　移动UI设计原则 / 017
1.4.1　风格一致性原则 / 017
1.4.2　元素准确性原则 / 018
1.4.3　界面布局合理化原则 / 018
1.4.4　系统响应时间原则 / 019
1.5　移动UI设计流程的职位划分 / 019
1.5.1　产品经理 / 019
1.5.2　项目经理 / 020
1.5.3 UI设计师 / 020
1.5.4　开发工程师 / 020
1.6　本章小结 / 020
第2章　移动UI策划与原型设计
2.1　确定移动UI目标用户 / 021
2.1.1　分析移动UI项目背景 / 021
2.1.2　掌握用户画像分析法 / 023
2.2　完成移动UI策划书 / 024
2.3　了解思维导图 / 025
2.3.1　思维导图的设计依据 / 025
2.3.2　思维导图的特点 / 026
2.3.3　思维导图的作用 / 026
2.4　绘制思维导图的常用软件 / 027
2.4.1 MindMeister / 027
2.4.2 MindManager / 028
2.4.3 XMind / 028
2.4.4　操作案例—下载并安装XMind / 029
2.5　绘制移动UI思维导图 / 030
2.5.1　思维导图的操作流程 / 030
2.5.2　思维导图的基本类型 / 032
2.5.3　操作案例—绘制美妆App的首页
　　　思维导图 / 035
2.6　绘制移动UI草图 / 036
2.6.1　了解草图的概念 / 036
2.6.2　认识草图的特点 / 038
2.6.3　草图功能的体现 / 038
2.6.4　常见的草图形式 / 040
2.7　了解原型设计 / 043
2.7.1　原型设计的概念 / 043
2.7.2　原型设计的参与者 / 043
2.8　绘制原型的常用软件 / 044
2.8.1 Axure RP / 044 021
2.8.2 Adobe XD / 045
2.8.3　操作案例—安装Axure RP 10 / 046
2.9　绘制移动UI原型图 / 047
2.9.1　原型的表现手法 / 048
2.9.2　原型的重要性 / 050
2.9.3　操作案例—绘制美妆App
　　　首页草图 / 052
2.9.4 App原型设计与用户体验 / 054
2.9.5　操作案例—绘制美妆App
　　　分类界面原型 / 057
2.10　本章小结 / 059
第3章　优秀的移动UI色彩搭配
3.1　认识色彩 / 060
3.1.1　色彩基础 / 060
3.1.2　色彩三属性 / 061
3.2　和谐、统一的色彩搭配方法 / 062
3.2.1　同色系配色方法 / 062
3.2.2　邻近色配色方法 / 063
3.2.3　类似色配色方法 / 064
3.2.4　同色调配色方法 / 064
3.2.5　类似色调配色方法 / 065
3.3　突出、对比的配色方法 / 065
3.3.1　中差色配色方法 / 066
3.3.2　对比色配色方法 / 066
3.3.3　互补色配色方法 / 067
3.3.4　对比色调配色方法 / 068
3.4　构建移动UI颜色系统 / 068
3.4.1　确定风格 / 069
3.4.2　确定主色 / 069
3.4.3　确定辅色 / 072
3.4.4　操作案例—构建美妆App颜色系统 / 073
3.4.5　调整配色 / 074
3.5　移动UI色彩搭配的注意事项 / 075
3.5.1　切忌将精致、美观放在第一位 / 075
3.5.2　配色方案要符合用户的心理印象 / 076
3.5.3　操作案例—美妆App首页界面
　　　配色设计 / 077
3.5.4 App界面内容必须便于阅读 / 078
3.5.5　保守地使用色彩 / 079
3.5.6　规避杂乱的配色方案 / 079
3.5.7　操作案例—美妆App分类界面配色设计 / 080
3.6　本章小结 / 081
第4章　出色的移动图标设计
4.1　初识App图标 / 082
4.1.1 App图标的概念 / 082
4.1.2 App图标的重要性 / 082
4.2　图标设计常用软件 / 083
4.2.1 Adobe Illustrator / 083
4.2.2 Adobe Photoshop / 084
4.2.3 CorelDRAW / 085
4.3　熟悉图标栅格系统 / 085
4.3.1　系统图标栅格 / 085
4.3.2　图标栅格规范 / 086
4.4　图标设计形式 / 087
4.4.1　中文风格 / 087
4.4.2　英文风格 / 089
4.4.3　图形风格 / 090
4.4.4　数字风格 / 090
4.4.5　特殊符号风格 / 091
4.5　App图标的分类 / 091
4.5.1　工具图标 / 091
4.5.2　操作案例—设计与制作磨砂质感工具图标 / 096
4.5.3　装饰图标 / 099
4.5.4　启动图标 / 100
4.6　图标尺寸 / 102
4.6.1 Android系统的图标设计尺寸 / 102
4.6.2　操作案例—设计与制作水果装饰图标 / 104
4.6.3 iOS的图标设计尺寸 / 107
4.6.4　操作案例—设计与制作时钟启动图标 / 108
4.7　图标组设计规范 / 111
4.7.1　创建制作清单 / 111
4.7.2　设计草图 / 112
4.7.3　数字化呈现 / 112
4.7.4　确定最终效果 / 113
4.7.5　命名并导出 / 113
4.8　本章小结 / 113
第5章　移动App的UI设计
5.1　移动UI的基本元素 / 114
5.2　常见的UI设计软件 / 114
5.2.1 Adobe Photoshop / 114
5.2.2 Sketch / 115
5.2.3 Adobe XD / 115
5.3　移动UI的设计基础 / 116
5.3.1 iOS的开发单位 / 116
5.3.2 iOS的界面尺寸规范 / 117
5.3.3　操作案例—设计与制作iOS App启动界面 / 118
5.3.4 Android系统的开发单位 / 122
5.3.5 Android系统的界面尺寸规范 / 122
5.3.6　操作案例—设计与制作Android系统App界面 / 123
5.4　移动UI的字体规范 / 126
5.4.1 iOS字体规范 / 126
5.4.2　操作案例—设计与制作iOS App登录界面 / 127
5.4.3 Android系统字体规范 / 130
5.4.4　操作案例—设计与制作Android系统App分类界面 / 130
5.5　移动UI图片尺寸规范 / 133
5.6　移动App内容布局 / 133
5.6.1　了解App界面中的全局边距 / 133
5.6.2　操作案例—设计与制作iOS App首页界面 / 134
5.6.3　设置App界面中的内容间距 / 137
5.6.4　操作案例—设计与制作iOS App侧面菜单界面 / 138
5.6.5　移动App界面的布局方式 / 141
5.7　本章小结 / 142
第6章　移动App交互设计
6.1　了解UI交互设计 / 143
6.1.1　交互动效的概念 / 143
6.1.2　基础动效类型 / 144
6.2　常见的交互设计软件 / 146
6.2.1 Adobe After Eects / 146
6.2.2 Adobe XD / 146
6.3　交互设计的基本流程 / 147
6.3.1　提出交互设计创意想法 / 147
6.3.2　实现创意想法 / 148
6.4　移动UI交互的类型 / 149
6.4.1　转场过渡 / 149
6.4.2　操作案例—设计与制作App转场交互 / 150
6.4.3　层级展示 / 152
6.4.4　空间扩展 / 153
6.4.5　关注聚焦 / 153
6.4.6　内容呈现 / 154
6.4.7　操作案例—设计与制作相册App内容呈现交互 / 154
6.4.8　操作反馈 / 158
6.4.9　操作案例—设计与制作App点赞反馈交互 / 159
6.5　动效在UI中的作用 / 161
6.5.1　吸引用户注意力 / 161
6.5.2　为用户提供操作反馈 / 161
6.5.3　加强指向性 / 161
6.5.4　操作案例—设计与制作App后台交互 / 162
6.5.5　传递信息深度 / 166
6.6　交互设计需要遵循的习惯 / 166
6.7　本章小结 / 167
第7章　适配与输出移动UI设计
7.1　标注的重要性 / 168
7.2　常见的标注软件 / 168
7.2.1 PxCook / 168
7.2.2 Assistor PS / 169
7.3　标注移动UI / 169
7.3.1　移动App标注的内容 / 169
7.3.2　操作案例—标注iOS App界面 / 170
7.3.3　标注的声明文档 / 172
7.3.4　操作案例—标注Android系统App界面 / 173
7.4　移动UI标注规范 / 175
7.4.1　位置与尺寸的标注规范 / 175
7.4.2　色彩和文字的标注规范 / 177
7.4.3　切图资源的尺寸必须是偶数 / 177
7.5　输出与适配iOS UI设计 / 177
7.5.1　向上适配与向下适配 / 178
7.5.2　适配切片命名规范 / 179
7.5.3　操作案例—导出iOS App界面切图资源 / 180
7.6　输出与适配Android系统UI设计 / 182
7.6.1 Android系统中的“点9”切图 / 182
7.6.2　输出与适配的一稿两用 / 185
7.6.3　操作案例—导出Android系统App切图资源 / 186
7.7　本章小结 / 188
第8章　设计与制作移动App项目
8.1　设计与制作美妆电商App项目 / 189
8.1.1　分析美妆电商App的项目背景 / 189
8.1.2　制作美妆电商App界面的草图原型 / 190
8.1.3　构建美妆电商App的颜色系统 / 192
8.1.4　设计与制作美妆电商App的图标组 / 193
8.1.5　完成美妆电商App的UI设计 / 194
8.1.6　完成美妆电商App的交互设计 / 197
8.1.7　完成美妆电商App的界面标注 / 198
8.1.8　导出美妆电商App的切图资源 / 200
8.2　设计与制作美食外卖App项目 / 202
8.2.1　分析美食外卖App的项目背景 / 202
8.2.2　制作美食外卖App的草图原型 / 202
8.2.3　创建美食外卖App的颜色系统 / 205
8.2.4　设计与制作美食外卖App的图标组 / 206
8.2.5　完成美食外卖App的UI设计 / 209
8.2.6　完成美食外卖App的交互设计 / 213
8.2.7　完成美食外卖App的界面标注 / 215
8.2.8　导出美食外卖App的切图资源 / 217