Adobe XD功能解析與應用

《Adobe XD功能解析與應用》分為三大部分：第1部分是Adobe XD從零到精通，這部分對軟體的各種操作技巧和方法進行了全面的講解，為設計打下基礎；第2部分是Adobe XD的UI設計實例，這部分講解軟體在具體設計實例中的應用，在強化軟體操作的同時使讀者瞭解實際的設計工作；第3部分講解了Adobe XD和其他軟體的配合，這部分知識是對Adobe XD的延伸和拓展。《Adobe XD功能解析與應用》附帶學習資源，內容包括原始檔案和線上視頻，具體獲取方法請參看本書前言。《Adobe XD功能解析與應用》適合UI和UE設計師閱讀使用，同時也可以作為產品經理和程式師的參考用書。

第1部分 Adobe XD從零到精通

第1章 Adobe XD基礎入門 1
1.1 Adobe XD簡介 2
1.2 Adobe XD的安裝 6
1.2.1 macOS版Adobe XD的安裝 6
1.2.2 Windows版Adobe XD的安裝 8
1.3 Adobe XD的歡迎介面 9
1.4 Adobe XD的常見問題 14
1.4.1 Adobe XD是否是免費的 14
1.4.2 Adobe XD對系統版本的要求 14
1.4.3 Adobe XD是否可以離線安裝 15
1.4.4 Adobe XD的卸載 15
1.4.5 能否使用Windows 10的觸控功能操作Adobe XD 16
1.4.6 Adobe XD官方中文版 16

第2章 Adobe XD的設計模式詳解 17
2.1 Adobe XD的介面佈局 18
2.1.1 macOS版Adobe XD的介面佈局 18
2.1.2 Windows版Adobe XD的介面佈局 18
2.2 Adobe XD的工具及其用法 20
2.2.1 選擇工具 20
2.2.2 矩形工具 22
2.2.3 橢圓工具 31
2.2.4 直線工具 31
2.2.5 鋼筆工具 31
2.2.6 文本工具 35
2.2.7 畫板工具 37
2.2.8 縮放工具 39
2.3 Adobe XD的資源面板和圖層面板 40
2.3.1 資源面板 40
2.3.2 圖層面板 45
2.4 重複網格 47
2.4.1 創建重複網格 48
2.4.2 為重複網格添加內容 50
2.4.3 批量修改樣式 54
2.5 Adobe XD其他補充知識 55
2.5.1 蒙版遮罩 55
2.5.2 將文本轉換為路徑 57

第3章 Adobe XD的原型模式詳解 59
3.1 Adobe XD的原型模式 60
3.1.1 進入Adobe XD的原型模式 60
3.1.2 設置主介面 60
3.1.3 設置滾動頁面 61
3.1.4 設置固定位置 62
3.1.5 設置頁面跳轉 62
3.1.6 設置跳轉效果 64
3.1.7 錄製交互預覽效果 67
3.2 在移動設備上預覽設計和原型 68
3.2.1 移動版Adobe XD的APP安裝 68
3.2.2 Adobe XD文檔 68
3.2.3 即時預覽 70
3.2.4 設置 70

第4章 Adobe XD的匯出和共用 71
4.1 Adobe XD的匯出 72
4.1.1 匯出畫板和圖層 72
4.1.2 匯出選項 74
4.2 Adobe XD的共用 75
4.2.1 共用原型 76
4.2.2 共用設計規範 78
4.2.3 管理發佈的連結 79

第2部分 Adobe XD設計實例

第5章 用Adobe XD設計圖示 81
5.1 線框圖標設計 82
5.1.1 搜索圖示設計 82
5.1.2 燈泡圖示設計 85
5.1.3 扳手圖示設計 86
5.2 扁平圖示設計 88
5.2.1 圖片檔圖示設計 88
5.2.2 實驗器材圖示設計 90
5.2.3 花朵圖示設計 92

第6章 用Adobe XD設計UI介面 97
6.1 UI設計前的準備 98
6.2 登錄介面的設計 98
6.2.1 輕量化登錄介面設計 98
6.2.2 帶鍵盤交互的登錄介面設計 106
6.2.3 傳統的登錄介面設計 111
6.3 主介面的設計 117
6.3.1 App store的Today介面設計 118
6.3.2 旅遊APP的首頁設計 122
6.4 內容介面的設計 130
App store的內容頁設計 130
6.5 個人中心介面的設計 132
App store的個人中心介面設計 132

第3部分 Adobe XD和協力廠商應用的銜接

第7章 將外部資源導入Adobe XD 137
7.1 PSD文件的導入 138
7.1.1 在Photoshop中複製內容 138
7.1.2 用Adobe XD打開PSD文件 140
7.2 AI文件的導入 143
7.3 Sketc第一件的導入 144
7.3.1 在Sketch中複製內容 144
7.3.2 使用Adobe XD打開Sketc**件 146
7.4 其他資源的導入 149

第8章 Adobe XD與藍湖的銜接 151
8.1 快速上手藍湖 152
8.1.1 認識藍湖 152
8.1.2 使用藍湖前的準備工作 153
8.1.3 上傳畫板到藍湖 154
8.1.4 藍湖的基礎使用 156
8.1.5 切圖 159
8.2 藍湖的其他實用功能 160
8.2.1 團隊管理 160
8.2.2 交互原型 160
8.2.3 在移動設備上預覽 161
8.2.4 項目文檔 161

第9章 用ProtoPie與Adobe XD銜接製作交互動效 163
9.1 ProtoPie的基礎入門 164
9.1.1 瞭解ProtoPie 164
9.1.2 ProtoPie的官網 166
9.1.3 ProtoPie的安裝與購買 168
9.1.4 ProtoPie的介面 170
9.1.5 ProtoPie的工作邏輯 173
9.1.6 ProtoPie的預覽和視頻錄製 176
9.1.7 移動設備預覽原型 176
9.1.8 原型上傳和雲端共用 177
9.2 ProtoPie和Adobe XD的銜接 178
9.3 幾種常見交互動效的製作 179
9.3.1 滑屏交互動效製作 179
9.3.2 翻頁交互動效製作 180
9.3.3 文字輸入交互動效製作 182

黃方聞

交互設計師，IXDC、UI 中國等平臺講師，曾實現過多款產品的從0到1，《動靜之美——Sketch移動UI與交互動效設計詳解》的作者。