第1章 了解Adobe XD
1.1 移動(dòng)端UI設(shè)計(jì)基礎(chǔ) 1
1.1.1 了解移動(dòng)UI設(shè)計(jì) 1
1.1.2 iOS系統(tǒng)與Android系統(tǒng) 2
1.1.3 移動(dòng)端與PC端UI設(shè)計(jì)的區(qū)別 6
1.2 移動(dòng)UI設(shè)計(jì)流程 8
1.2.1 需求分析 8
1.2.2 交互原型設(shè)計(jì) 9
1.2.3 視覺(jué)界面設(shè)計(jì) 9
1.3 移動(dòng)UI設(shè)計(jì)常用工具 10
1.4 關(guān)于Adobe XD 13
1.4.1 Adobe XD簡(jiǎn)介 13
1.4.2 Adobe XD的應(yīng)用領(lǐng)域 14
1.4.3 Adobe XD的特點(diǎn) 14
1.5 下載和安裝Adobe XD 14
1.5.1 下載Adobe XD 15
1.5.2 應(yīng)用案例——安裝和啟動(dòng)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 工作區(qū)域 19
1.7 Adobe XD的幫助資源 20
1.8 解惑答疑 22
1.8.1 Adobe XD的工作流程是怎樣的 22
1.8.2 Adobe XD的試用時(shí)間為多長(zhǎng) 22
1.9 總結(jié)擴(kuò)展 22
1.9.1 本章小結(jié) 22
1.9.2 擴(kuò)展練習(xí)——卸載Adobe XD 22
第2章 Adobe XD的基本操作
2.1 主頁(yè) 24
2.2 新建文件 25
2.3 創(chuàng)建和管理畫(huà)板 25
2.3.1 創(chuàng)建新畫(huà)板 25
2.3.2 應(yīng)用案例——創(chuàng)建iOS系統(tǒng)App文件 27
2.3.3 使用現(xiàn)有畫(huà)板 28
2.3.4 管理畫(huà)板 28
2.3.5 應(yīng)用案例——創(chuàng)建Android系統(tǒng)App文件 31
2.4 打開(kāi)文件 32
2.4.1 “從您的計(jì)算機(jī)中打開(kāi)”命令 32
2.4.2 “打開(kāi)”命令 33
2.4.3 “在您的計(jì)算機(jī)上”按鈕 33
2.4.4 “近打開(kāi)文件”命令 34
2.5 導(dǎo)入文件 34
2.6 存儲(chǔ)文件 35
2.6.1 “保存”命令 35
2.6.2 “存儲(chǔ)為本地文檔”命令 36
2.6.3 “重命名”命令 36
2.6.4 應(yīng)用案例——保存iOS和Android系統(tǒng)UI文件 37
2.7 獲取用戶(hù)界面套件 37
2.8 撤銷(xiāo)與恢復(fù)操作 38
2.8.1 還原與重做 38
2.8.2 恢復(fù)文件 38
2.8.3 文檔歷史記錄 39
2.9 輔助工具 39
2.9.1 應(yīng)用案例——為iOS系統(tǒng)UI設(shè)計(jì)創(chuàng)建參考線(xiàn) 39
2.9.2 管理參考線(xiàn) 40
2.9.3 使用智能參考線(xiàn) 41
2.9.4 應(yīng)用網(wǎng)格定位對(duì)象 41
2.9.5 管理網(wǎng)格 42
2.10 解惑答疑 44
2.10.1 如何在iOS或Android設(shè)備中預(yù)覽XD設(shè)計(jì) 44
2.10.2 Adobe XD為何不提示用戶(hù)將文件保存在Windows中 44
2.11 總結(jié)擴(kuò)展 44
2.11.1 本章小結(jié) 44
2.11.2 擴(kuò)展練習(xí)——為Android系統(tǒng) UI設(shè)計(jì)添加參考線(xiàn) 45
第3章 使用Adobe XD完成原型設(shè)計(jì)
3.1 創(chuàng)建對(duì)象 46
3.1.1 使用“矩形工具”創(chuàng)建對(duì)象 46
3.1.2 使用“橢圓工具”創(chuàng)建對(duì)象 47
3.1.3 使用“直線(xiàn)工具”創(chuàng)建對(duì)象 47
3.1.4 使用“多邊形工具”創(chuàng)建對(duì)象 47
3.1.5 使用“鋼筆工具”創(chuàng)建對(duì)象 49
3.2 為對(duì)象設(shè)置樣式 51
3.2.1 設(shè)置填充、邊界和陰影 52
3.2.2 應(yīng)用案例——繪制iOS系統(tǒng)的狀態(tài)欄圖標(biāo) 57
3.2.3 布爾運(yùn)算 59
3.2.4 應(yīng)用案例——繪制iOS系統(tǒng)Wi-Fi和電池圖標(biāo) 61
3.2.5 形狀蒙版 62
3.2.6 創(chuàng)建重復(fù)元素 63
3.3 編輯對(duì)象 64
3.3.1 選擇和移動(dòng)對(duì)象 64
3.3.2 復(fù)制、粘貼和刪除對(duì)象 65
3.3.3 對(duì)齊、分布和排列對(duì)象 66
3.3.4 應(yīng)用案例——設(shè)計(jì)制作扁平風(fēng)格裝飾圖標(biāo) 68
3.3.5 調(diào)整和旋轉(zhuǎn)對(duì)象 71
3.3.6 編組和鎖定對(duì)象 72
3.3.7 應(yīng)用案例——設(shè)計(jì)制作視頻App啟動(dòng)圖標(biāo) 73
3.4 創(chuàng)建文本 76
3.4.1 輸入文本 76
3.4.2 拼寫(xiě)檢查 77
3.4.3 導(dǎo)入文本 77
3.5 管理文本 79
3.5.1 設(shè)置文本格式 79
3.5.2 文本變換 81
3.5.3 調(diào)整段落文本的寬和高 82
3.5.4 應(yīng)用案例——設(shè)計(jì)制作App高保真原型的上新部分 84
3.6 設(shè)計(jì)畫(huà)板 86
3.6.1 創(chuàng)建垂直滾動(dòng) 86
3.6.2 創(chuàng)建滾動(dòng)組 87
3.6.3 應(yīng)用案例——設(shè)計(jì)制作App高保真原型的推薦部分 89
3.7 解惑答疑 90
3.7.1 如何使用“多邊形工具”繪制“收藏”圖標(biāo) 90
3.7.2 App圖標(biāo)集的工作流程是否與UI設(shè)計(jì)一致 91
3.8 總結(jié)擴(kuò)展 92
3.8.1 本章小結(jié) 93
3.8.2 擴(kuò)展練習(xí)—— 設(shè)計(jì)制作Android系統(tǒng)App原型界面 93
第4章 使用Adobe XD完成UI設(shè)計(jì)
4.1 使用處理設(shè)計(jì)系統(tǒng) 94
4.1.1 創(chuàng)建庫(kù)資源 94
4.1.2 管理庫(kù)資源 97
4.1.3 共享庫(kù)資源 99
4.1.4 應(yīng)用案例——創(chuàng)建移動(dòng)UI處理設(shè)計(jì)系統(tǒng) 101
4.2 使用圖層 102
4.2.1 “圖層”面板 102
4.2.2 搜索圖層 102
4.2.3 管理圖層 103
4.2.4 應(yīng)用案例——繪制App收藏界面的心形元素 105
4.3 為對(duì)象設(shè)置效果 106
4.3.1 使用模糊效果 107
4.3.2 應(yīng)用案例——設(shè)計(jì)制作App收藏界面 108
4.3.3 使用混合效果 109
4.3.4 應(yīng)用案例——繪制App界面中的卡片模塊 112
4.4 設(shè)計(jì)UI界面的結(jié)構(gòu) 113
4.4.1 響應(yīng)式調(diào)整大小 113
4.4.2 創(chuàng)建和使用組件 115
4.4.3 應(yīng)用案例——設(shè)計(jì)制作Android系統(tǒng)App主題界面 116
4.4.4 覆蓋組件實(shí)例 118
4.4.5 為組件添加多個(gè)狀態(tài) 119
4.4.6 應(yīng)用案例——為移動(dòng)端UI設(shè)計(jì)添加不同狀態(tài) 121
4.4.7 使用嵌套組件 123
4.5 使用3D變換進(jìn)行透視設(shè)計(jì) 124
4.5.1 啟用3D變換 124
4.5.2 旋轉(zhuǎn)物體 125
4.5.3 應(yīng)用案例——繪制App界面的基礎(chǔ)結(jié)構(gòu) 125
4.5.4 使用Z軸應(yīng)用深度 128
4.5.5 應(yīng)用案例——設(shè)計(jì)制作Android系統(tǒng)App點(diǎn)餐界面 128
4.6 解惑答疑 130
4.6.1 如何確定移動(dòng)App UI項(xiàng)目中的配色 130
4.6.2 如何處理Adobe XD中的缺失字體 131
4.7 總結(jié)擴(kuò)展 132
4.7.1 本章小結(jié) 132
4.7.2 擴(kuò)展練習(xí)——設(shè)計(jì)制作iOS系統(tǒng)圖片瀏覽界面 133
第5章 使用Adobe XD完成UX設(shè)計(jì)
5.1 添加交互 134
5.1.1 設(shè)置主頁(yè)屏幕 134
5.1.2 建立鏈接 135
5.1.3 設(shè)置交互效果 137
5.1.4 應(yīng)用案例——設(shè)計(jì)制作App聊天氣泡交互動(dòng)效 140
5.1.5 鏈接上一個(gè)畫(huà)板 144
5.1.6 取消鏈接 144
5.1.7 應(yīng)用案例——設(shè)計(jì)制作App貓爪菜單交互動(dòng)效 144
5.2 交互動(dòng)畫(huà) 147
5.2.1 創(chuàng)建交互動(dòng)畫(huà) 147
5.2.2 應(yīng)用案例——設(shè)計(jì)制作App刪除和置頂交互動(dòng)效 148
5.3 使用其他方式創(chuàng)建交互 152
5.3.1 使用鍵盤(pán)和游戲手柄創(chuàng)建交互 152
5.3.2 使用“語(yǔ)音”命令和“語(yǔ)音放”操作類(lèi)型創(chuàng)建交互 153
5.4 創(chuàng)建定時(shí)過(guò)渡 155
5.4.1 使用“時(shí)間”觸發(fā)條件創(chuàng)建交互 155
5.4.2 應(yīng)用案例—— 設(shè)計(jì)制作App加載界面交互動(dòng)效 155
5.5 添加疊加 157
5.5.1 使用“疊加”操作類(lèi)型創(chuàng)建交互 157
5.5.2 應(yīng)用案例——設(shè)計(jì)制作App搜索界面交互動(dòng)效 157
5.6 創(chuàng)建錨點(diǎn)鏈接 159
5.7 預(yù)覽UI與UX設(shè)計(jì) 160
5.7.1 預(yù)覽UI設(shè)計(jì) 161
5.7.2 應(yīng)用案例——預(yù)覽App界面中的交互動(dòng)效 162
5.8 解惑答疑 164
5.8.1 交互用戶(hù)的工作內(nèi)容 164
5.8.2 動(dòng)效設(shè)計(jì)制作工具有哪些 165
5.9 總結(jié)擴(kuò)展 167
5.9.1 本章小結(jié) 167
5.9.2 擴(kuò)展練習(xí)——設(shè)計(jì)制作App界面中的輪播圖 167
第6章 輸出、標(biāo)注和共享UI設(shè)計(jì)
6.1 使用Adobe XD輸出設(shè)計(jì)資源 169
6.1.1 導(dǎo)出切片資源 169
6.1.2 不同格式的切片資源 172
6.2 輸出iOS系統(tǒng)的UI設(shè)計(jì) 175
6.2.1 iOS系統(tǒng)向下和向上適配 176
6.2.2 適配切片命名規(guī)范 178
6.2.3 應(yīng)用案例——完成iOS系統(tǒng)UI界面的切片輸出 180
6.3 輸出Android系統(tǒng)的UI設(shè)計(jì) 181
6.3.1 Android系統(tǒng)中的“點(diǎn)9”切圖 181
6.3.2 適配輸出中的一稿兩用 185
6.3.3 應(yīng)用案例——完成Android系統(tǒng)UI界面的切片輸出 186
6.4 標(biāo)注移動(dòng)App UI設(shè)計(jì) 187
6.4.1 App界面標(biāo)注內(nèi)容 187
6.4.2 標(biāo)注的聲明文檔 188
6.4.3 應(yīng)用案例——使用PxCook標(biāo)注App瀏覽界面 189
6.4.4 UI設(shè)計(jì)的標(biāo)注規(guī)范 190
6.4.5 應(yīng)用案例——使用PxCook標(biāo)注App主題界面 192
6.5 共享移動(dòng)App UI設(shè)計(jì) 193
6.5.1 共享UI設(shè)計(jì) 193
6.5.2 使用共享UI設(shè)計(jì) 197
6.5.3 創(chuàng)建共享鏈接 198
6.5.4 應(yīng)用案例——共享移動(dòng)App UI界面 200
6.5.5 使用設(shè)計(jì)規(guī)范 200
6.5.6 應(yīng)用案例——發(fā)布與共享App的設(shè)計(jì)規(guī)范 202
6.6 解惑答疑 203
6.6.1 切片的尺寸為什么必須是雙數(shù) 203
6.6.2 如何協(xié)同編輯共享的UI設(shè)計(jì) 203
6.7 總結(jié)擴(kuò)展 203
6.7.1 本章小結(jié) 204
6.7.2 擴(kuò)展練習(xí)——完成UI界面的切片輸出 204
第7章 綜合案例
7.1 設(shè)計(jì)制作美妝App項(xiàng)目 205
7.1.1 美妝App項(xiàng)目分析 205
7.1.2 制作美妝App草圖 206
7.1.3 美妝App界面色彩搭配 208
7.1.4 美妝App界面元素分析 209
7.1.5 美妝App UI設(shè)計(jì) 211
7.1.6 美妝App 交互設(shè)計(jì) 213
7.1.7 輸出美妝App切片資源 215
7.1.8 標(biāo)注美妝App 217
7.2 設(shè)計(jì)制作社交App項(xiàng)目 219
7.2.1 社交App項(xiàng)目分析 220
7.2.2 制作社交App草圖 220
7.2.3 社交App界面色彩搭配 222
7.2.4 社交App界面元素分析 223
7.2.5 社交App UI設(shè)計(jì) 225
7.2.6 社交App交互設(shè)計(jì) 227
7.2.7 輸出社交App切片資源 230
7.2.8 標(biāo)注社交App 232
7.3 設(shè)計(jì)制作日歷App項(xiàng)目 234
7.3.1 日歷App項(xiàng)目分析 234
7.3.2 制作日歷App草圖 234
7.3.3 日歷App界面色彩搭配 237
7.3.4 日歷App界面元素分析 237
7.3.5 日歷App UI設(shè)計(jì) 239
7.3.6 日歷App交互設(shè)計(jì) 240
7.3.7 輸出日歷App切片資源 242
7.3.8 標(biāo)注日歷App 244