AdobeXD界面設計與原型製作教程（全彩）

《AdobeXD界面設計與原型製作教程（全彩）》是2019年1月電子工業出版社出版的圖書，作者是文家齊。

基本介紹

• 書名：AdobeXD界面設計與原型製作教程（全彩）
• 作者：文家齊
• ISBN：9787121373077
• 出版社：電子工業出版社
• 出版時間：2019年1月
• 頁數：240
• 字數：432千字
• 開本：16開
• 版次：01-01

內容簡介

本書基於Adobe XD 2019 中文版，全面系統地介紹XD 的基本操作方法和界面設計技巧。書中包括界面設計的基礎知識、XD 的簡介和安裝方法、工具的使用、對象的創建和編輯、資源管理、圖層管理、重複格線、回響式調整、導出到After Effects、XD 格式檔案轉為PSD 格式檔案、生成線上連結、標註、切圖、互動式原型、語音觸發、自動製作動畫、實時預覽、常用外掛程式及與第三方軟體協作等內容，使讀者能夠熟悉並掌握XD 的功能和界面設計基礎。本書內容在多個實戰案例的基礎上，增加移動端、小程式、網頁等多個商業案例解析，並適當穿插有一些技術專題知識，使讀者可以快速上手，掌握軟體功能和界面設計思路，提升界面設計能力。本書包含XD 當前版本的全部基礎知識點，通過目錄可以清晰地查看並找到需要的知識點。本書提供的學習資源中包含所有案例的視頻檔案、實例源檔案及素材檔案。本書可作為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 Libraries95

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 Effects101

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 Faces168 7.2.2 二維碼生成外掛程式 QR Code Maker

for XD169

7.2.3 英文大小寫切換外掛程式Change Case170

7.2.4 圖層批量重命名外掛程式Rename It171

7.2.5 多邊形外掛程式Polygons174

7.2.6 圖片填充外掛程式PhotoSplash176

7.2.7 日曆外掛程式Calendar177

7.2.8 提取網頁設計規範外掛程式Mimic178

7.2.9 圖表生成外掛程式VizzyCharts178

7.3?第三方工具介紹183

7.3.1 通過Axhub Icons快速使用網路圖示183

7.3.2 互動原型設計工具ProtoPie184

7.3.3 自動標註工具PxCook185

第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