設計必修課：Adobe XD 移動 UI 設計 (微課視頻版)

第1章了解Adobe XD
1.1 移動端UI設計基礎1
1.1.1 了解移動UI設計1
1.1.2 iOS系統與Android系統2
1.1.3 移動端與PC端UI設計的區別6
1.2 移動UI設計流程8
1.2.1 需求分析8
1.2.2 交互原型設計9
1.2.3 視覺界面設計9
1.3 移動UI設計常用工具10
1.4 關於Adobe XD 13
1.4.1 Adobe XD簡介13
1.4.2 Adobe XD的應用領域14
1.4.3 Adobe XD的特點14
1.5 下載和安裝Adobe XD 14
1.5.1 下載Adobe XD 15
1.5.2 應用案例——安裝和啟動Adobe XD 15
1.5.3 使用Creative Cloud Cleaner Tool 16
1.6 Adobe XD的工作界面17
1.6.1 菜單欄17
1.6.2 工具欄18
1.6.3 模式欄19
1.6.4 “屬性”面板19
1.6.5 工作區域19
1.7 Adobe XD的幫助資源20
1.8 解惑答疑22
1.8.1 Adobe XD的工作流程是怎樣的22
1.8.2 Adobe XD的試用時間為多長22
1.9 總結擴展22
1.9.1 本章小結22
1.9.2 擴展練習——卸載Adobe XD 22

第2章Adobe XD的基本操作
2.1 主頁24
2.2 新建文件25
2.3 創建和管理畫板25
2.3.1 創建新畫板25
2.3.2 應用案例——創建iOS系統App文件27
2.3.3 使用現有畫板28
2.3.4 管理畫板28
2.3.5 應用案例——創建Android系統App文件31
2.4 打開文件32
2.4.1 “從您的計算機中打開”命令32
2.4.2 “打開”命令33
2.4.3 “在您的計算機上”按鈕33
2.4.4 “*近打開文件”命令34
2.5 導入文件34
2.6 存儲文件35
2.6.1 “保存”命令35
2.6.2 “存儲為本地文檔”命令36
2.6.3 “重命名”命令36
2.6.4 應用案例——保存iOS和Android系統UI文件37
2.7 獲取用戶界面套件37
2.8 撤銷與恢復操作38
2.8.1 還原與重做38
2.8.2 恢復文件38
2.8.3 文檔歷史記錄39
2.9 輔助工具39
2.9.1 應用案例——為iOS系統UI設計創建參考線39
2.9.2 管理參考線40
2.9.3 使用智能參考線41
2.9.4 應用網格定位對象41
2.9.5 管理網格42
2.10 解惑答疑44
2.10.1 如何在iOS或Android設備中預覽XD設計44
2.10.2 Adobe XD為何不提示用戶將文件保存在Windows中44
2.11 總結擴展44
2.11.1 本章小結44
2.11.2 擴展練習——為Android系統UI設計添加參考線45

第3章使用Adobe XD完成原型設計
3.1 創建對象46
3.1.1 使用“矩形工具”創建對象46
3.1.2 使用“橢圓工具”創建對象47
3.1.3 使用“直線工具”創建對象47
3.1.4 使用“多邊形工具”創建對象47
3.1.5 使用“鋼筆工具”創建對象49
3.2 為對象設置樣式51
3.2.1 設置填充、邊界和陰影52
3.2.2 應用案例——繪製iOS系統的狀態欄圖標57
3.2.3 布爾運算59
3.2.4 應用案例——繪製iOS系統Wi-Fi和電池圖標61
3.2.5 形狀蒙版62
3.2.6 創建重複元素63
3.3 編輯對象64
3.3.1 選擇和移動對象64
3.3.2 複製、粘貼和刪除對象65
3.3.3 對齊、分佈和排列對象66
3.3.4 應用案例——設計製作扁平風格裝飾圖標68
3.3.5 調整和旋轉對象71
3.3.6 編組和鎖定對象72
3.3.7 應用案例——設計製作視頻App啟動圖標73
3.4 創建文本76
3.4.1 輸入文本76
3.4.2 拼寫檢查77
3.4.3 導入文本77
3.5 管理文本79
3.5.1 設置文本格式79
3.5.2 文本變換81
3.5.3 調整段落文本的寬和高82
3.5.4 應用案例——設計製作App高保真原型的上新部分84
3.6 設計畫板86
3.6.1 創建垂直滾動86
3.6.2 創建滾動組87
3.6.3 應用案例——設計製作App高保真原型的推薦部分89
3.7 解惑答疑90
3.7.1 如何使用“多邊形工具”繪製“收藏”圖標90
3.7.2 App圖標集的工作流程是否與UI設計一致91
3.8 總結擴展92
3.8.1 本章小結93
3.8.2 擴展練習—— 設計製作Android系統App原型界面93

第4章使用Adobe XD完成UI設計
4.1 使用處理設計系統94
4.1.1 創建庫資源94
4.1.2 管理庫資源97
4.1.3 共享庫資源99
4.1.4 應用案例——創建移動UI處理設計系統101
4.2 使用圖層102
4.2.1 “圖層”面板102
4.2.2 搜索圖層102
4.2.3 管理圖層103
4.2.4 應用案例——繪製App收藏界面的心形元素105
4.3 為對象設置效果106
4.3.1 使用模糊效果107
4.3.2 應用案例——設計製作App收藏界面108
4.3.3 使用混合效果109
4.3.4 應用案例——繪製App界面中的卡片模塊112
4.4 設計UI界面的結構113
4.4.1 響應式調整大小113
4.4.2 創建和使用組件115
4.4.3 應用案例——設計製作Android系統App主題界面116
4.4.4 覆蓋組件實例118
4.4.5 為組件添加多個狀態119
4.4.6 應用案例——為移動端UI設計添加不同狀態121
4.4.7 使用嵌套組件123
4.5 使用3D變換進行透視設計124
4.5.1 啟用3D變換124
4.5.2 旋轉物體125
4.5.3 應用案例——繪製App界面的基礎結構125
4.5.4 使用Z軸應用深度128
4.5.5 應用案例——設計製作Android系統App點餐界面128
4.6 解惑答疑130
4.6.1 如何確定移動App UI項目中的配色130
4.6.2 如何處理Adobe XD中的缺失字體131
4.7 總結擴展132
4.7.1 本章小結132
4.7.2 擴展練習——設計製作iOS系統圖片瀏覽界面133

第5章使用Adobe XD完成UX設計
5.1 添加交互134
5.1.1 設置主頁屏幕134
5.1.2 建立鏈接135
5.1.3 設置交互效果137
5.1.4 應用案例——設計製作App聊天氣泡交互動效140
5.1.5 鏈接上一個畫板144
5.1.6 取消鏈接144
5.1.7 應用案例——設計製作App貓爪菜單交互動效144
5.2 交互動畫147
5.2.1 創建交互動畫147
5.2.2 應用案例——設計製作App刪除和置頂交互動效148
5.3 使用其他方式創建交互152
5.3.1 使用鍵盤和遊戲手柄創建交互152
5.3.2 使用“語音”命令和“語音放”操作類型創建交互153
5.4 創建定時過渡155
5.4.1 使用“時間”觸發條件創建交互155
5.4.2 應用案例—— 設計製作App加載界面交互動效155
5.5 添加疊加157
5.5.1 使用“疊加”操作類型創建交互157
5.5.2 應用案例——設計製作App搜索界面交互動效157
5.6 創建錨點鏈接159
5.7 預覽UI與UX設計160
5.7.1 預覽UI設計161
5.7.2 應用案例——預覽App界面中的交互動效162
5.8 解惑答疑164
5.8.1 交互用戶的工作內容164
5.8.2 動效設計製作工具有哪些165
5.9 總結擴展167
5.9.1 本章小結167
5.9.2 擴展練習——設計製作App界面中的輪播圖167

第6章輸出、標註和共享UI設計
6.1 使用Adobe XD輸出設計資源169
6.1.1 導出切片資源169
6.1.2 不同格式的切片資源172
6.2 輸出iOS系統的UI設計175
6.2.1 iOS系統向下和向上適配176
6.2.2 適配切片命名規範178
6.2.3 應用案例——完成iOS系統UI界面的切片輸出180
6.3 輸出Android系統的UI設計181
6.3.1 Android系統中的“點9”切圖181
6.3.2 適配輸出中的一稿兩用185
6.3.3 應用案例——完成Android系統UI界面的切片輸出186
6.4 標註移動App UI設計187
6.4.1 App界面標註內容187
6.4.2 標註的聲明文檔188
6.4.3 應用案例——使用PxCook標註App瀏覽界面189
6.4.4 UI設計的標註規範190
6.4.5 應用案例——使用PxCook標註App主題界面192
6.5 共享移動App UI設計193
6.5.1 共享UI設計193
6.5.2 使用共享UI設計197
6.5.3 創建共享鏈接198
6.5.4 應用案例——共享移動App UI界面200
6.5.5 使用設計規範200
6.5.6 應用案例——發布與共享App的設計規範202
6.6 解惑答疑203
6.6.1 切片的尺寸為什麼必須是雙數203
6.6.2 如何協同編輯共享的UI設計203
6.7 總結擴展203
6.7.1 本章小結204
6.7.2 擴展練習——完成UI界面的切片輸出204

第7章綜合案例
7.1 設計製作美妝App項目205
7.1.1 美妝App項目分析205
7.1.2 製作美妝App草圖206
7.1.3 美妝App界面色彩搭配208
7.1.4 美妝App界面元素分析209
7.1.5 美妝App UI設計211
7.1.6 美妝App 交互設計213
7.1.7 輸出美妝App切片資源215
7.1.8 標註美妝App 217
7.2 設計製作社交App項目219
7.2.1 社交App項目分析220
7.2.2 製作社交App草圖220
7.2.3 社交App界面色彩搭配222
7.2.4 社交App界面元素分析223
7.2.5 社交App UI設計225
7.2.6 社交App交互設計227
7.2.7 輸出社交App切片資源230
7.2.8 標註社交App 232
7.3 設計製作日曆App項目234
7.3.1 日曆App項目分析234
7.3.2 製作日曆App草圖234
7.3.3 日曆App界面色彩搭配237
7.3.4 日曆App界面元素分析237
7.3.5 日曆App UI設計239
7.3.6 日曆App交互設計240
7.3.7 輸出日曆App切片資源242
7.3.8 標註日曆App 244