第 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