Adobe XD 界面設計與原型製作教程 (全彩)

目錄
1章
初識Adobe XD
1.1XD的基本介紹 2
1.1.1XD與 類 件的區別 4
1.1.2位圖與矢量圖的區別 6
1.1.3關 XD的一些其他使用 6
1.2XD的 裝與卸載 6
1.2.1 統要求 6
1.2.2 裝 卸載 6
1.3XD的工作界面介紹 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 從Illustr*or 中 入或複 95
4.1.5 從Sketch中 入或複 95
4.1.6 關 Cre*ive 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 Effe*s 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.4XD中文網網頁項目設 實 224
8.4.1 創建文件並設置網 224
8.4.2 作網頁 航 首屏 225
8.4.3 作內容列表 227
8.4.4 作網頁頁 228

附錄
附錄：常用快 鍵 230