ADOBE XD功能解析与应用

第 1部分 Adobe XD从零到精通

第 1章 Adobe XD基础入门 1

1.1 Adobe XD简介 2

1.2 Adobe XD的安装 6

1.2.1 macOS版Adobe XD的安装 6

1.2.2 Windows版Adobe XD的安装 8

1.3 Adobe XD的欢迎界面 9

1.4 Adobe XD的常见问题 14

1.4.1 Adobe XD是否是完全免费的 14

1.4.2 Adobe XD对系统版本的要求 14

1.4.3 Adobe XD是否可以离线安装 15

1.4.4 Adobe XD的卸载 15

1.4.5 能否使用Windows 10的触控功能操作Adobe XD 16

1.4.6 Adobe XD官方中文版 16



第 2章 Adobe XD的设计模式详解 17

2.1 Adobe XD的界面布局 18

2.1.1 macOS版Adobe XD的界面布局 18

2.1.2 Windows版Adobe XD的界面布局 18

2.2 Adobe XD的工具及其用法 20

2.2.1 选择工具 20

2.2.2 矩形工具 22

2.2.3 椭圆工具 31

2.2.4 直线工具 31

2.2.5 钢笔工具 31

2.2.6 文本工具 35

2.2.7 画板工具 37

2.2.8 缩放工具 39

2.3 Adobe XD的资源面板和图层面板 40

2.3.1 资源面板 40

2.3.2 图层面板 45

2.4 重复网格 47

2.4.1 创建重复网格 48

2.4.2 为重复网格添加内容 50

2.4.3 批量修改样式 54

2.5 Adobe XD其他补充知识 55

2.5.1 蒙版遮罩 55

2.5.2 将文本转换为路径 57



第3章 Adobe XD的原型模式详解 59

3.1 Adobe XD的原型模式 60

3.1.1 进入Adobe XD的原型模式 60

3.1.2 设置主界面 60

3.1.3 设置滚动页面 61

3.1.4 设置固定位置 62

3.1.5 设置页面跳转 62

3.1.6 设置跳转效果 64

3.1.7 录制交互预览效果 67

3.2 在移动设备上预览设计和原型 68

3.2.1 移动版Adobe XD的APP安装 68

3.2.2 Adobe XD文档 68

3.2.3 实时预览 70

3.2.4 设置 70



第4章 Adobe XD的导出和共享 71

4.1 Adobe XD的导出 72

4.1.1 导出画板和图层 72

4.1.2 导出选项 74

4.2 Adobe XD的共享 75

4.2.1 共享原型 76

4.2.2 共享设计规范 78

4.2.3 管理发布的链接 79





第 2部分 Adobe XD设计实例

第5章 用Adobe XD设计图标 81

5.1 线框图标设计 82

5.1.1 搜索图标设计 82

5.1.2 灯泡图标设计 85

5.1.3 扳手图标设计 86

5.2 扁平图标设计 88

5.2.1 图片文件图标设计 88

5.2.2 实验器材图标设计 90

5.2.3 花朵图标设计 92



第6章 用Adobe XD设计UI界面 97

6.1 UI设计前的准备 98

6.2 登录界面的设计 98

6.2.1 轻量化登录界面设计 98

6.2.2 带键盘交互的登录界面设计 106

6.2.3 传统的登录界面设计 111

6.3 主界面的设计 117

6.3.1 App store的Today界面设计 118

6.3.2 旅游APP的首页设计 122

6.4 内容界面的设计 130

App store的内容页设计 130

6.5 个人中心界面的设计 132

App store的个人中心界面设计 132





第3部分 Adobe XD和第三方应用的衔接

第7章 将外部资源导入Adobe XD 137

7.1 PSD文件的导入 138

7.1.1 在Photoshop中复制内容 138

7.1.2 用Adobe XD打开PSD文件 140

7.2 AI文件的导入 143

7.3 Sketch文件的导入 144

7.3.1 在Sketch中复制内容 144

7.3.2 使用Adobe XD打开Sketch文件 146

7.4 其他资源的导入 149



第8章 Adobe XD与蓝湖的衔接 151

8.1 快速上手蓝湖 152

8.1.1 认识蓝湖 152

8.1.2 使用蓝湖前的准备工作 153

8.1.3 上传画板到蓝湖 154

8.1.4 蓝湖的基础使用 156

8.1.5 切图 159

8.2 蓝湖的其他实用功能 160

8.2.1 团队管理 160

8.2.2 交互原型 160

8.2.3 在移动设备上预览 161

8.2.4 项目文档 161



第9章 用ProtoPie与Adobe XD衔接制作交互动效 163

9.1 ProtoPie的基础入门 164

9.1.1 了解ProtoPie 164

9.1.2 ProtoPie的官网 166

9.1.3 ProtoPie的安装与购买 168

9.1.4 ProtoPie的界面 170

9.1.5 ProtoPie的工作逻辑 173

9.1.6 ProtoPie的预览和视频录制 176

9.1.7 移动设备预览原型 176

9.1.8 原型上传和云端共享 177

9.2 ProtoPie和Adobe XD的衔接 178

9.3 几种常见交互动效的制作 179

9.3.1 滑屏交互动效制作 179

9.3.2 翻页交互动效制作 180

9.3.3 文字输入交互动效制作 182