Adobe XD界面設計與原型制作教程（全彩）

目錄
第1章
初識Adobe XD
1．1?XD的基本介紹\t2
1．1．1?XD與同類軟件的區(qū)別 \t4
1．1．2?位圖與矢量圖的區(qū)別 \t6
1．1．3?關于XD的一些其他使用說明 \t6
1．2?XD的安裝與卸載\t6
1．2．1?系統(tǒng)要求 \t6
1．2．2?安裝和卸載 \t6
1．3?XD的工作界面介紹\t8
1．3．1?啟動界面 \t8
1．3．2?設計界面 \t9
1．3．3?菜單欄 \t10
1．3．4?導航欄 \t10
1．3．5?設計模式 \t11
1．3．6?工具欄 \t11
1．3．7?資源/圖層面板 \t11
1．3．8?畫布和畫板 \t12
1．3．9?屬性檢查器 \t12

第2章
XD的基本操作
2．1?文件管理\t14
2．1．1 打開一個文件\t14
2．1．2 文件保存\t15
2．1．3 文件保存狀態(tài)\t15
2．1．4 關閉文件\t15
2．1．5 撤銷和重做\t16
2．2?視圖管理\t16
2．2．1 放大視圖顯示比例\t17
2．2．2 縮小視圖顯示比例\t18
2．2．3 縮放視圖至指定顯示比例\t19
2．2．4 移動視圖\t20
2．3?選擇工具\t20
2．3．1 多選\t20
2．3．2 選擇對象內(nèi)部的元素\t21
2．4?繪制基礎形狀\t21
2．4．1 繪制矩形和圓角矩形\t21
2．4．2 繪制橢圓和圓\t22
2．4．3 繪制直線\t23
2．5?鋼筆工具\t23
2．5．1 繪制直線\t23
2．5．2 繪制曲線\t24
2．5．3 編輯路徑\t24
2．5．4 禁用錨點對齊\t24
2．6?文本工具\t26
2．6．1 點文本\t26
2．6．2 區(qū)域文本\t26
2．6．3 拼寫檢查\t26
2．7?畫板工具\t27
2．7．1 增加畫板\t27
2．7．2 修改畫板名稱\t28
2．7．3 修改畫板尺寸\t29
2．8?隱藏的輔助功能\t29
2．8．1 距離測量\t29
2．8．2 更智能的參考線\t30
2．8．3 自動吸附\t30
2．9?對象管理\t31
2．9．1 剪切、復制和粘貼\t31
2．9．2 編組\t32
2．9．3 鎖定和解鎖對象\t32
2．9．4 隱藏或顯示\t33
2．10?圖層面板\t33
2．10．1 XD中的圖層面板\t33
2．10．2 鎖定/解鎖和顯示/隱藏\t34
2．10．3 調(diào)整圖層順序\t35
2．10．4 編組\t36
2．10．5 搜索和篩選\t36
2．10．6 修改圖層名稱\t37
2．11?資源面板\t37
2．11．1 資源面板界面\t38
2．11．2 添加和刪除資源\t38
2．11．3 資源重命名\t39
2．11．4 修改資源面板中元素的順序\t39
2．11．5 符號\t39
2．11．6 高亮顯示\t42

第3章
屬性檢查器
3．1?對齊\t\t44
3．1．1 對齊工具\t44
3．1．2 相對于畫板對齊\t44
3．1．3 多個元素對齊\t45
3．1．4 水平分布和垂直分布\t45
3．2?重復網(wǎng)格\t46
3．2．1 創(chuàng)建和編輯重復網(wǎng)格\t46
3．2．2 調(diào)整重復網(wǎng)格中元素的間距\t47
3．2．3 編輯重復網(wǎng)格中的元素\t47
3．2．4 批量替換文本\t48
3．2．5 批量替換圖片\t49
3．2．6 取消重復網(wǎng)格\t50
實 戰(zhàn) ?音樂App首頁 \t50
3．3?布爾運算\t54
3．3．1 使用布爾運算\t54
3．3．2 編輯布爾運算對象\t54
實 戰(zhàn) ?繪制一條小魚 \t55
3．3．3 轉(zhuǎn)換為路徑\t61
3．4?常用屬性和工具\t61
3．4．1 寬高和坐標\t61
3．4．2 旋轉(zhuǎn)角度\t62
3．4．3 畫板方向設置\t63
3．4．4 翻轉(zhuǎn)工具\t63
3．5?文本屬性\t64
3．5．1 字體、字號和字重\t64
3．5．2 文本的對齊方式\t65
3．5．3 點文本和區(qū)域文本切換\t66
3．5．4 下畫線\t67
3．5．5 字符間距、行間距和段落間距\t67
3．6?外觀\t\t67
3．6．1 透明度\t68
3．6．2 圓角\t68
3．6．3 填充純色和漸變\t69
實 戰(zhàn) ?使用漸變 \t73
3．6．4 描邊\t75
3．6．5 陰影\t76
實 戰(zhàn) ?帶有投影的漸變顏色按鈕 \t77
3．6．6 模糊\t79
實 戰(zhàn) ?登錄頁設計 \t80
3．7?網(wǎng)格\t\t86
3．7．1 開啟或關閉網(wǎng)格\t86
3．7．2 設置方形屬性\t86
3．7．3 設置版面屬性\t87
3．7．4 存儲為默認并使用\t88
3．8?使用數(shù)學計算\t88
3．9?響應式調(diào)整大小\t89
實 戰(zhàn) ?響應式調(diào)整大小 \t91
第4章
導入和導出資源
4．1?導入\t\t94
4．1．1 從本地計算機中導入\t94
4．1．2 打開或?qū)隤SD文件\t94
4．1．3 從Photoshop中復制內(nèi)容\t94
4．1．4 從Illustrator 中導入或復制\t95
4．1．5 從Sketch中導入或復制\t95
4．1．6 關于Creative Cloud Libraries\t95
4．2?導出\t\t96
4．2．1 導出的基本操作方法\t96
4．2．2 導出PNG文件\t97
4．2．3 導出SVG文件\t100
4．2．4 導出PDF文件\t101
4．2．5 導出JPG文件\t101
4．2．6 導出到After Effects\t101
4．2．7 將XD文件轉(zhuǎn)為PSD文件\t102

第5章
創(chuàng)建可交互式原型
5．1?創(chuàng)建原型\t106
5．1．1 設置首頁\t107
5．1．2 可滾動畫板\t107
5．1．3 固定元素\t108
實 戰(zhàn) ?創(chuàng)建固定元素可滾動原型 \t108
5．2?鏈接\t\t111
5．2．1 添加跳轉(zhuǎn)鏈接\t111
5．2．2 刪除跳轉(zhuǎn)鏈接\t112
實 戰(zhàn) ?交互式原型 \t113
5．3?觸發(fā)\t\t118
5．3．1 拖移\t118
5．3．2 時間\t118
實 戰(zhàn) ?自動播放的輪播圖 \t119
5．3．3 語音\t121
5．4?目標\t\t122
5．5?操作\t\t122
5．5．1 自動制作動畫\t123
實 戰(zhàn) ?循環(huán)旋轉(zhuǎn)動畫 \t124
實 戰(zhàn) ?輪播圖拖移動畫 \t125
5．5．2 語音播放\t133
5．5．3 上一個畫板\t133
5．5．4 過渡\t134
5．5．5 疊加\t135
5．6?動畫\t\t136
5．6．1 動畫中的無和溶解\t136
5．6．2 滑動動畫\t136
5．6．3 推出動畫\t138
5．7?緩動\t\t139
5．8?持續(xù)時間\t140
5．9?粘貼交互\t140

第6章
預覽和共享
6．1?預覽\t\t142
6．1．1 桌面預覽\t142
6．1．2 使用XD移動端預覽\t144
6．2?共享\t\t144 6．2．1 邀請編輯\t145 6．2．2 查看和評論原型鏈接\t147 6．2．3 共享以審閱\t150 6．2．4 查看設計規(guī)范鏈接\t155 6．2．5 共享以開發(fā)\t162 6．2．6 管理鏈接\t163 第7章 插件和第三方工具介紹 7．1?安裝和管理插件\t166 7．1．1 安裝插件\t166 7．1．2 管理插件\t167 7．2?常用插件\t168 7．2．1 頭像填充插件UI Faces\t168 7．2．2 二維碼生成插件 QR Code Maker
for XD\t169
7．2．3 英文大小寫切換插件Change Case\t170
7．2．4 圖層批量重命名插件Rename It\t171
7．2．5 多邊形插件Polygons\t174
7．2．6 圖片填充插件PhotoSplash\t176
7．2．7 日歷插件Calendar\t177
7．2．8 提取網(wǎng)頁設計規(guī)范插件Mimic\t178
7．2．9 圖表生成插件VizzyCharts\t178
7．3?第三方工具介紹\t183
7．3．1 通過Axhub Icons快速使用網(wǎng)絡圖標\t183
7．3．2 交互原型設計工具ProtoPie\t184
7．3．3 自動標注工具PxCook\t185

第8章
商業(yè)實戰(zhàn)項目案例解析
8．1?設計規(guī)范介紹\t188
8．1．1 iOS設計規(guī)范介紹\t188
8．1．2 Android設計規(guī)范介紹\t190
8．1．3 電腦端網(wǎng)頁設計規(guī)范介紹\t191
8．2?萬聯(lián)數(shù)字藝術館App設計項目實戰(zhàn)\t191
8．2．1 制作首頁\t192
8．2．2 制作文章列表頁\t197
8．2．3 制作文章詳情頁\t199
8．2．4 制作藝術家列表頁\t202
8．2．5 制作藝術家個人主頁\t204
8．2．6 制作交互原型\t206
8．3?鮮藝App小程序設計項目實戰(zhàn)\t209
8．3．1 制作首頁\t210
8．3．2 制作分類頁\t215
8．3．3 制作課程列表頁\t217
8．3．4 制作課程詳情頁\t219
8．3．5 制作我的學習頁\t219
8．3．6 批量替換顏色\t221
8．3．7 制作交互原型\t222
8．4?XD中文網(wǎng)網(wǎng)頁項目設計實戰(zhàn)\t224
8．4．1 創(chuàng)建文件并設置網(wǎng)格\t224
8．4．2 制作網(wǎng)頁導航和首屏\t225
8．4．3 制作內(nèi)容列表\t227
8．4．4 制作網(wǎng)頁頁腳\t228

附錄
附錄：常用快捷鍵\t230