《Adobe XD界面設計與原型製作教程（全彩）》是2019年1月電子工業出版社出版的圖書，作者是文家齊。
基本介紹
- 中文名：Adobe XD界面設計與原型製作教程（全彩）
- 作者：文家齊
- 出版時間：2019年1月
- 出版社：電子工業出版社
- 頁數：240 頁
- ISBN：9787121373077
- 定價：79 元
- 開本：16 開
內容簡介,目錄,
內容簡介
本書基於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 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
