Adobe XD界面设计与原型制作教程（全彩）目录

时间：2023-02-17 09:48:01 | 来源：营销百科

时间：2023-02-17 09:48:01 来源：营销百科

Adobe XD界面设计与原型制作教程（全彩）目录：第1章

初识Adobe XD

1.1?XD的基本介绍 2

1.1.1?XD与同类软件的区别 4

1.1.2?位图与矢量图的区别 6

1.1.3?关于XD的一些其他使用说明 6

1.2?XD的安装与卸载 6

1.2.1?系统要求 6

1.2.2?安装和卸载 6

1.3?XD的工作界面介绍 8

1.3.1?启动界面 8

1.3.2?设计界面 9

1.3.3?菜单栏 10

1.3.4?导航栏 10

1.3.5?设计模式 11

1.3.6?工具栏 11

1.3.7?资源/图层面板 11

1.3.8?画布和画板 12

1.3.9?属性检查器 12

第2章

XD的基本操作

2.1?文件管理 14

2.1.1 打开一个文件 14

2.1.2 文件保存 15

2.1.3 文件保存状态 15

2.1.4 关闭文件 15

2.1.5 撤销和重做 16

2.2?视图管理 16

2.2.1 放大视图显示比例 17

2.2.2 缩小视图显示比例 18

2.2.3 缩放视图至指定显示比例 19

2.2.4 移动视图 20

2.3?选择工具 20

2.3.1 多选 20

2.3.2 选择对象内部的元素 21

2.4?绘制基础形状 21

2.4.1 绘制矩形和圆角矩形 21

2.4.2 绘制椭圆和圆 22

2.4.3 绘制直线 23

2.5?钢笔工具 23

2.5.1 绘制直线 23

2.5.2 绘制曲线 24

2.5.3 编辑路径 24

2.5.4 禁用锚点对齐 24

2.6?文本工具 26

2.6.1 点文本 26

2.6.2 区域文本 26

2.6.3 拼写检查 26

2.7?画板工具 27

2.7.1 增加画板 27

2.7.2 修改画板名称 28

2.7.3 修改画板尺寸 29

2.8?隐藏的辅助功能 29

2.8.1 距离测量 29

2.8.2 更智能的参考线 30

2.8.3 自动吸附 30

2.9?对象管理 31

2.9.1 剪切、复制和粘贴 31

2.9.2 编组 32

2.9.3 锁定和解锁对象 32

2.9.4 隐藏或显示 33

2.10?图层面板 33

2.10.1 XD中的图层面板 33

2.10.2 锁定/解锁和显示/隐藏 34

2.10.3 调整图层顺序 35

2.10.4 编组 36

2.10.5 搜索和筛选 36

2.10.6 修改图层名称 37

2.11?资源面板 37

2.11.1 资源面板界面 38

2.11.2 添加和删除资源 38

2.11.3 资源重命名 39

2.11.4 修改资源面板中元素的顺序 39

2.11.5 符号 39

2.11.6 高亮显示 42

第3章

属性检查器

3.1?对齐 44

3.1.1 对齐工具 44

3.1.2 相对于画板对齐 44

3.1.3 多个元素对齐 45

3.1.4 水平分布和垂直分布 45

3.2?重复网格 46

3.2.1 创建和编辑重复网格 46

3.2.2 调整重复网格中元素的间距 47

3.2.3 编辑重复网格中的元素 47

3.2.4 批量替换文本 48

3.2.5 批量替换图片 49

3.2.6 取消重复网格 50

实 战 ?音乐App首页 50

3.3?布尔运算 54

3.3.1 使用布尔运算 54

3.3.2 编辑布尔运算对象 54

实 战 ?绘制一条小鱼 55

3.3.3 转换为路径 61

3.4?常用属性和工具 61

3.4.1 宽高和坐标 61

3.4.2 旋转角度 62

3.4.3 画板方向设置 63

3.4.4 翻转工具 63

3.5?文本属性 64

3.5.1 字体、字号和字重 64

3.5.2 文本的对齐方式 65

3.5.3 点文本和区域文本切换 66

3.5.4 下画线 67

3.5.5 字符间距、行间距和段落间距 67

3.6?外观 67

3.6.1 透明度 68

3.6.2 圆角 68

3.6.3 填充纯色和渐变 69

实 战 ?使用渐变 73

3.6.4 描边 75

3.6.5 阴影 76

实 战 ?带有投影的渐变颜色按钮 77

3.6.6 模糊 79

实 战 ?登录页设计 80

3.7?网格 86

3.7.1 开启或关闭网格 86

3.7.2 设置方形属性 86

3.7.3 设置版面属性 87

3.7.4 存储为默认并使用 88

3.8?使用数学计算 88

3.9?响应式调整大小 89

实 战 ?响应式调整大小 91

第4章

导入和导出资源

4.1?导入 94

4.1.1 从本地计算机中导入 94

4.1.2 打开或导入PSD文件 94

4.1.3 从Photoshop中复制内容 94

4.1.4 从Illustrator 中导入或复制 95

4.1.5 从Sketch中导入或复制 95

4.1.6 关于Creative Cloud Libraries 95

4.2?导出 96

4.2.1 导出的基本操作方法 96

4.2.2 导出PNG文件 97

4.2.3 导出SVG文件 100

4.2.4 导出PDF文件 101

4.2.5 导出JPG文件 101

4.2.6 导出到After Effects 101

4.2.7 将XD文件转为PSD文件 102

第5章

创建可交互式原型

5.1?创建原型 106

5.1.1 设置首页 107

5.1.2 可滚动画板 107

5.1.3 固定元素 108

实 战 ?创建固定元素可滚动原型 108

5.2?链接 111

5.2.1 添加跳转链接 111

5.2.2 删除跳转链接 112

实 战 ?交互式原型 113

5.3?触发 118

5.3.1 拖移 118

5.3.2 时间 118

实 战 ?自动播放的轮播图 119

5.3.3 语音 121

5.4?目标 122

5.5?操作 122

5.5.1 自动制作动画 123

实 战 ?循环旋转动画 124

实 战 ?轮播图拖移动画 125

5.5.2 语音播放 133

5.5.3 上一个画板 133

5.5.4 过渡 134

5.5.5 叠加 135

5.6?动画 136

5.6.1 动画中的无和溶解 136

5.6.2 滑动动画 136

5.6.3 推出动画 138

5.7?缓动 139

5.8?持续时间 140

5.9?粘贴交互 140

第6章

预览和共享

6.1?预览 142

6.1.1 桌面预览 142

6.1.2 使用XD移动端预览 144

6.2?共享 144 6.2.1 邀请编辑 145 6.2.2 查看和评论原型链接 147 6.2.3 共享以审阅 150 6.2.4 查看设计规范链接 155 6.2.5 共享以开发 162 6.2.6 管理链接 163 第7章 插件和第三方工具介绍 7.1?安装和管理插件 166 7.1.1 安装插件 166 7.1.2 管理插件 167 7.2?常用插件 168 7.2.1 头像填充插件UI Faces 168 7.2.2 二维码生成插件 QR Code Maker

for XD 169

7.2.3 英文大小写切换插件Change Case 170

7.2.4 图层批量重命名插件Rename It 171

7.2.5 多边形插件Polygons 174

7.2.6 图片填充插件PhotoSplash 176

7.2.7 日历插件Calendar 177

7.2.8 提取网页设计规范插件Mimic 178

7.2.9 图表生成插件VizzyCharts 178

7.3?第三方工具介绍 183

7.3.1 通过Axhub Icons快速使用网络图标 183

7.3.2交互原型设计工具ProtoPie 184

7.3.3 自动标注工具PxCook 185

第8章

商业实战项目案例解析

8.1?设计规范介绍 188

8.1.1 iOS设计规范介绍 188

8.1.2 Android设计规范介绍 190

8.1.3 电脑端网页设计规范介绍 191

8.2?万联数字艺术馆App设计项目实战 191

8.2.1 制作首页 192

8.2.2 制作文章列表页 197

8.2.3 制作文章详情页 199

8.2.4 制作艺术家列表页 202

8.2.5 制作艺术家个人主页 204

8.2.6 制作交互原型 206

8.3?鲜艺App小程序设计项目实战 209

8.3.1 制作首页 210

8.3.2 制作分类页 215

8.3.3 制作课程列表页 217

8.3.4 制作课程详情页 219

8.3.5 制作我的学习页 219

8.3.6 批量替换颜色 221

8.3.7 制作交互原型 222

8.4?XD中文网网页项目设计实战 224

8.4.1 创建文件并设置网格 224

8.4.2 制作网页导航和首屏 225

8.4.3 制作内容列表 227

8.4.4 制作网页页脚 228

附录

附录：常用快捷键 230,

第1章

初识Adobe XD

1.1?XD的基本介绍 2

1.1.1?XD与同类软件的区别 4

1.1.2?位图与矢量图的区别 6

1.1.3?关于XD的一些其他使用说明 6

1.2?XD的安装与卸载 6

1.2.1?系统要求 6

1.2.2?安装和卸载 6

1.3?XD的工作界面介绍 8

1.3.1?启动界面 8

1.3.2?设计界面 9

1.3.3?菜单栏 10

1.3.4?导航栏 10

1.3.5?设计模式 11

1.3.6?工具栏 11

1.3.7?资源/图层面板 11

1.3.8?画布和画板 12

1.3.9?属性检查器 12

第2章

XD的基本操作

2.1?文件管理 14

2.1.1 打开一个文件 14

2.1.2 文件保存 15

2.1.3 文件保存状态 15

2.1.4 关闭文件 15

2.1.5 撤销和重做 16

2.2?视图管理 16

2.2.1 放大视图显示比例 17

2.2.2 缩小视图显示比例 18

2.2.3 缩放视图至指定显示比例 19

2.2.4 移动视图 20

2.3?选择工具 20

2.3.1 多选 20

2.3.2 选择对象内部的元素 21

2.4?绘制基础形状 21

2.4.1 绘制矩形和圆角矩形 21

2.4.2 绘制椭圆和圆 22

2.4.3 绘制直线 23

2.5?钢笔工具 23

2.5.1 绘制直线 23

2.5.2 绘制曲线 24

2.5.3 编辑路径 24

2.5.4 禁用锚点对齐 24

2.6?文本工具 26

2.6.1 点文本 26

2.6.2 区域文本 26

2.6.3 拼写检查 26

2.7?画板工具 27

2.7.1 增加画板 27

2.7.2 修改画板名称 28

2.7.3 修改画板尺寸 29

2.8?隐藏的辅助功能 29

2.8.1 距离测量 29

2.8.2 更智能的参考线 30

2.8.3 自动吸附 30

2.9?对象管理 31

2.9.1 剪切、复制和粘贴 31

2.9.2 编组 32

2.9.3 锁定和解锁对象 32

2.9.4 隐藏或显示 33

2.10?图层面板 33

2.10.1 XD中的图层面板 33

2.10.2 锁定/解锁和显示/隐藏 34

2.10.3 调整图层顺序 35

2.10.4 编组 36

2.10.5 搜索和筛选 36

2.10.6 修改图层名称 37

2.11?资源面板 37

2.11.1 资源面板界面 38

2.11.2 添加和删除资源 38

2.11.3 资源重命名 39

2.11.4 修改资源面板中元素的顺序 39

2.11.5 符号 39

2.11.6 高亮显示 42

第3章

属性检查器

3.1?对齐 44

3.1.1 对齐工具 44

3.1.2 相对于画板对齐 44

3.1.3 多个元素对齐 45

3.1.4 水平分布和垂直分布 45

3.2?重复网格 46

3.2.1 创建和编辑重复网格 46

3.2.2 调整重复网格中元素的间距 47

3.2.3 编辑重复网格中的元素 47

3.2.4 批量替换文本 48

3.2.5 批量替换图片 49

3.2.6 取消重复网格 50

实 战 ?音乐App首页 50

3.3?布尔运算 54

3.3.1 使用布尔运算 54

3.3.2 编辑布尔运算对象 54

实 战 ?绘制一条小鱼 55

3.3.3 转换为路径 61

3.4?常用属性和工具 61

3.4.1 宽高和坐标 61

3.4.2 旋转角度 62

3.4.3 画板方向设置 63

3.4.4 翻转工具 63

3.5?文本属性 64

3.5.1 字体、字号和字重 64

3.5.2 文本的对齐方式 65

3.5.3 点文本和区域文本切换 66

3.5.4 下画线 67

3.5.5 字符间距、行间距和段落间距 67

3.6?外观 67

3.6.1 透明度 68

3.6.2 圆角 68

3.6.3 填充纯色和渐变 69

实 战 ?使用渐变 73

3.6.4 描边 75

3.6.5 阴影 76

实 战 ?带有投影的渐变颜色按钮 77

3.6.6 模糊 79

实 战 ?登录页设计 80

3.7?网格 86

3.7.1 开启或关闭网格 86

3.7.2 设置方形属性 86

3.7.3 设置版面属性 87

3.7.4 存储为默认并使用 88

3.8?使用数学计算 88

3.9?响应式调整大小 89

实 战 ?响应式调整大小 91

第4章

导入和导出资源

4.1?导入 94

4.1.1 从本地计算机中导入 94

4.1.2 打开或导入PSD文件 94

4.1.3 从Photoshop中复制内容 94

4.1.4 从Illustrator 中导入或复制 95

4.1.5 从Sketch中导入或复制 95

4.1.6 关于Creative Cloud Libraries 95

4.2?导出 96

4.2.1 导出的基本操作方法 96

4.2.2 导出PNG文件 97

4.2.3 导出SVG文件 100

4.2.4 导出PDF文件 101

4.2.5 导出JPG文件 101

4.2.6 导出到After Effects 101

4.2.7 将XD文件转为PSD文件 102

第5章

创建可交互式原型

5.1?创建原型 106

5.1.1 设置首页 107

5.1.2 可滚动画板 107

5.1.3 固定元素 108

实 战 ?创建固定元素可滚动原型 108

5.2?链接 111

5.2.1 添加跳转链接 111

5.2.2 删除跳转链接 112

实 战 ?交互式原型 113

5.3?触发 118

5.3.1 拖移 118

5.3.2 时间 118

实 战 ?自动播放的轮播图 119

5.3.3 语音 121

5.4?目标 122

5.5?操作 122

5.5.1 自动制作动画 123

实 战 ?循环旋转动画 124

实 战 ?轮播图拖移动画 125

5.5.2 语音播放 133

5.5.3 上一个画板 133

5.5.4 过渡 134

5.5.5 叠加 135

5.6?动画 136

5.6.1 动画中的无和溶解 136

5.6.2 滑动动画 136

5.6.3 推出动画 138

5.7?缓动 139

5.8?持续时间 140

5.9?粘贴交互 140

第6章

预览和共享

6.1?预览 142

6.1.1 桌面预览 142

6.1.2 使用XD移动端预览 144

6.2?共享 144 6.2.1 邀请编辑 145 6.2.2 查看和评论原型链接 147 6.2.3 共享以审阅 150 6.2.4 查看设计规范链接 155 6.2.5 共享以开发 162 6.2.6 管理链接 163 第7章 插件和第三方工具介绍 7.1?安装和管理插件 166 7.1.1 安装插件 166 7.1.2 管理插件 167 7.2?常用插件 168 7.2.1 头像填充插件UI Faces 168 7.2.2 二维码生成插件 QR Code Maker

for XD 169

7.2.3 英文大小写切换插件Change Case 170

7.2.4 图层批量重命名插件Rename It 171

7.2.5 多边形插件Polygons 174

7.2.6 图片填充插件PhotoSplash 176

7.2.7 日历插件Calendar 177

7.2.8 提取网页设计规范插件Mimic 178

7.2.9 图表生成插件VizzyCharts 178

7.3?第三方工具介绍 183

7.3.1 通过Axhub Icons快速使用网络图标 183

7.3.2交互原型设计工具ProtoPie 184

7.3.3 自动标注工具PxCook 185

第8章

商业实战项目案例解析

8.1?设计规范介绍 188

8.1.1 iOS设计规范介绍 188

8.1.2 Android设计规范介绍 190

8.1.3 电脑端网页设计规范介绍 191

8.2?万联数字艺术馆App设计项目实战 191

8.2.1 制作首页 192

8.2.2 制作文章列表页 197

8.2.3 制作文章详情页 199

8.2.4 制作艺术家列表页 202

8.2.5 制作艺术家个人主页 204

8.2.6 制作交互原型 206

8.3?鲜艺App小程序设计项目实战 209

8.3.1 制作首页 210

8.3.2 制作分类页 215

8.3.3 制作课程列表页 217

8.3.4 制作课程详情页 219

8.3.5 制作我的学习页 219

8.3.6 批量替换颜色 221

8.3.7 制作交互原型 222

8.4?XD中文网网页项目设计实战 224

8.4.1 创建文件并设置网格 224

8.4.2 制作网页导航和首屏 225

8.4.3 制作内容列表 227

8.4.4 制作网页页脚 228

附录

附录：常用快捷键 230