设计必修课:Adobe XD移动UI设计(微课视频版)

第1章 了解Adobe XD
1．1 移动端UI设计基础 1
1．1．1 了解移动UI设计 1
1．1．2 iOS系统与Android系统 2
1．1．3 移动端与PC端UI设计的区别 6
1．2 移动UI设计流程 8
1．2．1 需求分析 8
1．2．2 交互原型设计 9
1．2．3 视觉界面设计 9
1．3 移动UI设计常用工具 10
1．4 关于Adobe XD 13
1．4．1 Adobe XD简介 13
1．4．2 Adobe XD的应用领域 14
1．4．3 Adobe XD的特点 14
1．5 下载和安装Adobe XD 14
1．5．1 下载Adobe XD 15
1．5．2 应用案例――安装和启动Adobe XD 15
1．5．3 使用Creative Cloud Cleaner Tool 16
1．6 Adobe XD的工作界面 17
1．6．1 菜单栏 17
1．6．2 工具栏 18
1．6．3 模式栏 19
1．6．4 “属性”面板 19
1．6．5 工作区域 19
1．7 Adobe XD的帮助资源 20
1．8 解惑答疑 22
1．8．1 Adobe XD的工作流程是怎样的 22
1．8．2 Adobe XD的试用时间为多长 22
1．9 总结扩展 22
1．9．1 本章小结 22
1．9．2 扩展练习――卸载Adobe XD 22
第2章 Adobe XD的基本操作
2．1 主页 24
2．2 新建文件 25
2．3 创建和管理画板 25
2．3．1 创建新画板 25
2．3．2 应用案例――创建iOS系统App文件 27
2．3．3 使用现有画板 28
2．3．4 管理画板 28
2．3．5 应用案例――创建Android系统App文件 31
2．4 打开文件 32
2．4．1 “从您的计算机中打开”命令 32
2．4．2 “打开”命令 33
2．4．3 “在您的计算机上”按钮 33
2．4．4 “*近打开文件”命令 34
2．5 导入文件 34
2．6 存储文件 35
2．6．1 “保存”命令 35
2．6．2 “存储为本地文档”命令 36
2．6．3 “重命名”命令 36
2．6．4 应用案例――保存iOS和Android系统UI文件 37
2．7 获取用户界面套件 37
2．8 撤销与恢复操作 38
2．8．1 还原与重做 38
2．8．2 恢复文件 38
2．8．3 文档历史记录 39
2．9 辅助工具 39
2．9．1 应用案例――为iOS系统UI设计创建参考线 39
2．9．2 管理参考线 40
2．9．3 使用智能参考线 41
2．9．4 应用网格定位对象 41
2．9．5 管理网格 42
2．10 解惑答疑 44
2．10．1 如何在iOS或Android设备中预览XD设计 44
2．10．2 Adobe XD为何不提示用户将文件保存在Windows中 44
2．11 总结扩展 44
2．11．1 本章小结 44
2．11．2 扩展练习――为Android系统 UI设计添加参考线 45
第3章 使用Adobe XD完成原型设计
3．1 创建对象 46
3．1．1 使用“矩形工具”创建对象 46
3．1．2 使用“椭圆工具”创建对象 47
3．1．3 使用“直线工具”创建对象 47
3．1．4 使用“多边形工具”创建对象 47
3．1．5 使用“钢笔工具”创建对象 49
3．2 为对象设置样式 51
3．2．1 设置填充、边界和阴影 52
3．2．2 应用案例――绘制iOS系统的状态栏图标 57
3．2．3 布尔运算 59
3．2．4 应用案例――绘制iOS系统Wi-Fi和电池图标 61
3．2．5 形状蒙版 62
3．2．6 创建重复元素 63
3．3 编辑对象 64
3．3．1 选择和移动对象 64
3．3．2 复制、粘贴和删除对象 65
3．3．3 对齐、分布和排列对象 66
3．3．4 应用案例――设计制作扁平风格装饰图标 68
3．3．5 调整和旋转对象 71
3．3．6 编组和锁定对象 72
3．3．7 应用案例――设计制作视频App启动图标 73
3．4 创建文本 76
3．4．1 输入文本 76
3．4．2 拼写检查 77
3．4．3 导入文本 77
3．5 管理文本 79
3．5．1 设置文本格式 79
3．5．2 文本变换 81
3．5．3 调整段落文本的宽和高 82
3．5．4 应用案例――设计制作App高保真原型的上新部分 84
3．6 设计画板 86
3．6．1 创建垂直滚动 86
3．6．2 创建滚动组 87
3．6．3 应用案例――设计制作App高保真原型的推荐部分 89
3．7 解惑答疑 90
3．7．1 如何使用“多边形工具”绘制“收藏”图标 90
3．7．2 App图标集的工作流程是否与UI设计一致 91
3．8 总结扩展 92
3．8．1 本章小结 93
3．8．2 扩展练习―― 设计制作Android系统App原型界面 93
第4章 使用Adobe XD完成UI设计
4．1 使用处理设计系统 94
4．1．1 创建库资源 94
4．1．2 管理库资源 97
4．1．3 共享库资源 99
4．1．4 应用案例――创建移动UI处理设计系统 101
4．2 使用图层 102
4．2．1 “图层”面板 102
4．2．2 搜索图层 102
4．2．3 管理图层 103
4．2．4 应用案例――绘制App收藏界面的心形元素 105
4．3 为对象设置效果 106
4．3．1 使用模糊效果 107
4．3．2 应用案例――设计制作App收藏界面 108
4．3．3 使用混合效果 109
4．3．4 应用案例――绘制App界面中的卡片模块 112
4．4 设计UI界面的结构 113
4．4．1 响应式调整大小 113
4．4．2 创建和使用组件 115
4．4．3 应用案例――设计制作Android系统App主题界面 116
4．4．4 覆盖组件实例 118
4．4．5 为组件添加多个状态 119
4．4．6 应用案例――为移动端UI设计添加不同状态 121
4．4．7 使用嵌套组件 123
4．5 使用3D变换进行透视设计 124
4．5．1 启用3D变换 124
4．5．2 旋转物体 125
4．5．3 应用案例――绘制App界面的基础结构 125
4．5．4 使用Z轴应用深度 128
4．5．5 应用案例――设计制作Android系统App点餐界面 128
4．6 解惑答疑 130
4．6．1 如何确定移动App UI项目中的配色 130
4．6．2 如何处理Adobe XD中的缺失字体 131
4．7 总结扩展 132
4．7．1 本章小结 132
4．7．2 扩展练习――设计制作iOS系统图片浏览界面 133
第5章 使用Adobe XD完成UX设计
5．1 添加交互 134
5．1．1 设置主页屏幕 134
5．1．2 建立链接 135
5．1．3 设置交互效果 137
5．1．4 应用案例――设计制作App聊天气泡交互动效 140
5．1．5 链接上一个画板 144
5．1．6 取消链接 144
5．1．7 应用案例――设计制作App猫爪菜单交互动效 144
5．2 交互动画 147
5．2．1 创建交互动画 147
5．2．2 应用案例――设计制作App删除和置顶交互动效 148
5．3 使用其他方式创建交互 152
5．3．1 使用键盘和游戏手柄创建交互 152
5．3．2 使用“语音”命令和“语音放”操作类型创建交互 153
5．4 创建定时过渡 155
5．4．1 使用“时间”触发条件创建交互 155
5．4．2 应用案例―― 设计制作App加载界面交互动效 155
5．5 添加叠加 157
5．5．1 使用“叠加”操作类型创建交互 157
5．5．2 应用案例――设计制作App搜索界面交互动效 157
5．6 创建锚点链接 159
5．7 预览UI与UX设计 160
5．7．1 预览UI设计 161
5．7．2 应用案例――预览App界面中的交互动效 162
5．8 解惑答疑 164
5．8．1 交互用户的工作内容 164
5．8．2 动效设计制作工具有哪些 165
5．9 总结扩展 167
5．9．1 本章小结 167
5．9．2 扩展练习――设计制作App界面中的轮播图 167
第6章 输出、标注和共享UI设计
6．1 使用Adobe XD输出设计资源 169
6．1．1 导出切片资源 169
6．1．2 不同格式的切片资源 172
6．2 输出iOS系统的UI设计 175
6．2．1 iOS系统向下和向上适配 176
6．2．2 适配切片命名规范 178
6．2．3 应用案例――完成iOS系统UI界面的切片输出 180
6．3 输出Android系统的UI设计 181
6．3．1 Android系统中的“点9”切图 181
6．3．2 适配输出中的一稿两用 185
6．3．3 应用案例――完成Android系统UI界面的切片输出 186
6．4 标注移动App UI设计 187
6．4．1 App界面标注内容 187
6．4．2 标注的声明文档 188
6．4．3 应用案例――使用PxCook标注App浏览界面 189
6．4．4 UI设计的标注规范 190
6．4．5 应用案例――使用PxCook标注App主题界面 192
6．5 共享移动App UI设计 193
6．5．1 共享UI设计 193
6．5．2 使用共享UI设计 197
6．5．3 创建共享链接 198
6．5．4 应用案例――共享移动App UI界面 200
6．5．5 使用设计规范 200
6．5．6 应用案例――发布与共享App的设计规范 202
6．6 解惑答疑 203
6．6．1 切片的尺寸为什么必须是双数 203
6．6．2 如何协同编辑共享的UI设计 203
6．7 总结扩展 203
6．7．1 本章小结 204
6．7．2 扩展练习――完成UI界面的切片输出 204
第7章 综合案例
7．1 设计制作美妆App项目 205
7．1．1 美妆App项目分析 205
7．1．2 制作美妆App草图 206
7．1．3 美妆App界面色彩搭配 208
7．1．4 美妆App界面元素分析 209
7．1．5 美妆App UI设计 211
7．1．6 美妆App 交互设计 213
7．1．7 输出美妆App切片资源 215
7．1．8 标注美妆App 217
7．2 设计制作社交App项目 219
7．2．1 社交App项目分析 220
7．2．2 制作社交App草图 220
7．2．3 社交App界面色彩搭配 222
7．2．4 社交App界面元素分析 223
7．2．5 社交App UI设计 225
7．2．6 社交App交互设计 227
7．2．7 输出社交App切片资源 230
7．2．8 标注社交App 232
7．3 设计制作日历App项目 234
7．3．1 日历App项目分析 234
7．3．2 制作日历App草图 234
7．3．3 日历App界面色彩搭配 237
7．3．4 日历App界面元素分析 237
7．3．5 日历App UI设计 239
7．3．6 日历App交互设计 240
7．3．7 输出日历App切片资源 242
7．3．8 标注日历App 244