零基础学Adobe XD产品设计

第 1 章 简述Adobe XD软件

1.1 概念 10

1.1.1 Adobe XD软件来源 10

1.1.2 共同协作 10

1.1.3 未来发展方向 10

1.2 特色 11

1.2.1 体验设计 11

1.2.2 界面设计、创建原型、共享文档 12

1.2.3 插件支持 12

1.2.4 Adobe 公司官方改进 13

1.3 项目流程 14

1.3.1 开发App软件的8个步骤（瀑布式） 14

1.3.2 Adobe XD软件的作用 14

1.4 Adobe XD软件的安装 16

1.4.1 系统要求 16

1.4.2 准备材料 16

1.4.3 安装过程 17



第 2 章 入口页功能使用技巧

2.1 尺寸详细介绍（Home） 19

2.2 附加功能说明 （Add-ons） 20

2.2.1 Plugins类插件 21

2.2.2 UI Kits类插件 22

2.3 从本地计算机导入文件（Your Computer） 23

2.4 知识点案例 24



第 3 章 菜单功能使用技巧

3.1 新建（New） 27

3.2 打开 （Open和 Open from Your Computer） 28

3.3 打开*近文件（Open Recent） 29

3.4 获取用户界面套件（ Get UI Kits ） 30

3.5 重命名 （Rename） 31

3.6 保存 （Save） 33

3.7 另存为 （Save As） 35

3.8 导出（Export） 36

3.8.1 所选内容（Selected） 36

3.8.2 导出所有艺术板资料（All Artboards） 37

3.8.3 导出到AE软件做后期（After Effects） 37

3.9 导入（Import） 38

3.10 共享（Share） 39

3.10.1 共享文档（Share Document） 39

3.10.2 共享供审查（Share for Review） 40

3.10.3 共享给开发人员（Share for

Development） 42

3.10.4 管理共享的链接内容

（Manage Links） 44

3.10.5 录制视频（Record Video） 45

3.11 插件（Plugins） 46

3.11.1 已安装的插件 47

3.11.2 发现插件（Discover Plugins） 48

3.11.3 管理插件（Manage Plugins） 48

3.11.4 开发（Development） 49

3.12 帮助（Help） 51

3.12.1 新增功能（What’s New） 52

3.12.2 学习和支持（Learn & Support）与XD

帮助 （XD Help） 52

3

.12.3 提供反馈（Provide Feedback） 53

3.12.4 发布说明（Release Notes） 53

3.12.5 XD教程（XD Tutorial） 53

3.12.6 关于XD（About XD） 54

3.12.7 升级XD（Upgrade XD） 54

3.12.8 管理我的账户（Manage My

Account） 54

3.12.9 注销（Sign Out） 54

3.12.10 更新（Updates） 55

3.13 知识点案例 55



第 4 章 视图栏工作区功能使用技巧

4.1 设计视图（Design） 62

4.2 原型交互视图（Prototype） 62

4.3 文件名显示（Edit） 63

4.4 缩放视图（Zoom） 63

4.5 手机预览（Mobile Preview） 65

4.6 计算机预览（Desktop Preview） 66

4.7 共享（Share） 66

4.8 知识点案例 66



第 5 章 基础工具栏功能及延伸技巧

5.1 选择（Select） 70

5.2 矩形（Rectangle） 71

5.3 椭圆（Ellipse） 71

5.4 直线（Line） 71

5.5 钢笔（Pen） 72

5.6 文本（Text） 74

5.7 艺术板（Artboard） 74

5.8 放大（Zoom） 75

5.9 资源（Assets） 75

5.10 图层（Layers） 76

5.11 下拉功能 77

5.12 断开圆形和矩形功能 79

5.13 将截图放入圆形里 80

5.14 知识点案例 81



第 6 章 美化栏功能使用技巧

6.1 竖线布局设计 87

6.2 横线布局设计 88

6.3 重复网格（Repeat Grid） 88

6.4 图形大小和位置设置 89

6.5 响应式调整大小

（RESPONSIVE RESIZE） 90

6.6 文字美化（Text） 91

6.7 外观美化（APPEARANCE） 94

6.7.1 外观美化基础 94

6.7.2 渐变色技巧 96

6.8 知识点案例 98





第 7 章 原型交互基础功能使用技巧

7.1 选项图解 103

7.1.1 触发（Trigger）的选项 103

7.1.2 动作（Action）的选项 104

7.1.3 动画（Animation）的选项 105

7.1.4 缓动（Easing）的选项 106

7.2 原型交互案例 107

7.2.1 交互生成案例 108

7.2.2 预览交互案例 110

7.2.3 删除交互链接案例 111

7.2.4 弹出对话框的交互案例 113



第 8 章 留言本系统项目全流程图解案例

8.1 流程图 116

8.1.1 业务流程图 116

8.1.2 发布留言系统流程图 116

8.1.3 查看已发布留言系统流程图 118

8.1.4 管理留言系统流程图 119

8.2 原型界面图 120

8.3 交互图 121

8.4 图标设计 124

8.4.1 新建一个页面 124

8.4.2 创建素材 125

8.4.3 创建图形 125

8.4.4 创建蓝色圆形 126

8.4.5 组合图形和素材 126

8.4.6 将组合变为组 127

8.4.7 导出为Web格式图标 127

8.4.8 查看导出文件 128

8.5 高保真软件界面图 128

8.6 交付开发 129

8.6.1 前端开发 129

8.6.2 程序开发 129

8.7 测试和验收 130

8.8 上线 131



第 9 章 企业网站全流程图解案例

9.1 设计视图案例 133

9.1.1 首页 133

9.1.2 关于 134

9.1.3 产品 135

9.1.4 新闻 136

9.1.5 联系 137

9.2 交互视图案例 137

9.3 转化为HTML CSS案例 138



第 10 章 Adobe XD设计案例

10.1 手表天气应用设计案例 141

10.2 钢琴图标设计案例 146

10.3 路线图设计案例 159

10.4 名片设计案例 165

10.5 简历设计案例 167

10.6 App电商首页设计案例 177

10.6.1 App原型设计图解技巧 178

10.6.2 App高保真UI设计图解技巧 180

10.7 App即时通信页面设计案例 180

10.8 商品展示网站页面设计案例 185

10.9 个人中心页面设计案例 197

10.10 平板电脑预订酒店页面设计案例 209



附录 A 插件大全

A.1 UI Faces 自动填充头像插件 223

A.2 Polygons多边形插件 224

A.3 Design Hunt图形填充插件 225

A.4 Icondrop图标插件 225

A.5 VizzyCharts数据可视化插件 226

A.6 uiLogos图标插件 226

A.7 Adjust Size by Shortcut图形拉伸插件 227

A.8 Dribbble共享和学习插件 228

A.9 Place Text文本空间占位插件 229

A.10 Page No.插入页码插件 229

A.11 Web Export网站格式导出插件 230

A.12 Mimic颜色获取插件 231

A.13 Material Color Pallets颜色插件 232

A.14 Calendar日历插件 233

A.15 Swapper交换位置插件 233

A.16 Bullets文本标记插件 234

A.17 Tunda Image填充网络图片插件 235

A.18 QR Code Maker二维码插件 236

A.19 Adobe XD手机实时预览 236