微課學Adobe XD移動UI設計

目錄

第1章　了解Adobe XD

1.1　移動端UI設計基礎

1.1.1?了解移動UI設計

1.1.2?移動端UI設計平臺

1.1.3?移動端與PC端UI設計的區別

1.2　移動UI設計流程

1.2.1?需求分析

1.2.2?交互設計

1.2.3?視覺界面設計

1.3　移動UI設計常用工具

1.3.1?XMind和Axure RP

1.3.2?Photoshop和Sketch

1.3.3?Adobe XD和Figma

1.3.4?PxCook和Assistor PS

1.4　關於Adobe XD

1.4.1?Adobe XD簡介

1.4.2?Adobe XD的特點

1.5　下載和安裝Adobe XD

1.5.1?下載Adobe XD

1.5.2?使用Creative Cloud Cleaner Tool

1.6　Adobe XD的工作界面

1.6.1?菜單欄

1.6.2?工具箱

1.6.3?模式欄

1.6.4?“屬性”面板

1.6.5?工作區域

1.7　Adobe XD的幫助資源

1.8　總結拓展

1.9　課後測試

第2章　Adobe XD的基本操作

2.1　使用主頁

2.2　新建文件

2.3　創建和管理畫板

2.3.1?創建新畫板

2.3.2?應用案例——創建iOS系統App文件

2.3.3?使用現有畫板

2.3.4?管理畫板

2.3.5?應用案例——創建Android系統App文件

2.4　打開文件

2.4.1?“打開”命令

2.4.2?從您的計算機中打開

2.4.3?最近打開文件

2.5　導入文件

2.5.1?“導入”命令

2.5.2?應用案例——拖曳導入圖片素材

2.6　存儲文件

2.6.1?“保存”與“另存為”命令

2.6.2?存儲為本地文檔

2.6.3?重命名

2.6.4?應用案例——保存HarmonyOS系統UI文件

2.7　獲取UI套件

2.8　撤銷與恢復操作

2.8.1?撤銷與重做

2.8.2?恢復文件 

2.9　輔助工具

2.9.1?應用案例——為iOS系統UI設計創建參考線

2.9.2?管理參考線

2.9.3?使用智能參考線

2.9.4?應用網格定位對象

2.9.5?管理網格

2.10　總結拓展

2.11　課後測試

第3章　Adobe XD創建與編輯對象

3.1　創建對象

3.1.1?使用“矩形”工具

3.1.2?使用“橢圓”工具

3.1.3?使用“直線”工具

3.1.4?使用“多邊形”工具

3.1.5?使用“鋼筆”工具

3.1.6?應用案例——設計制作標簽欄圖標

3.2　編輯對象

3.2.1?選擇和刪除對象

3.2.2?拷貝和粘貼對象

3.2.3?對齊和分布對象

3.2.4?排列對象

3.2.5?應用案例——設計制作扁平風格裝飾圖標

3.2.6?調整和旋轉對象

3.2.7?編組和鎖定對象

3.2.8?應用案例——繪制iOS系統的狀態欄圖標

3.3　布爾運算

3.3.1?添加

3.3.2?減去

3.3.3?交叉

3.3.4?排除重疊

3.3.5?應用案例——繪制iOS系統Wi-Fi電池圖標

3.4　為對象設置樣式

3.4.1?設置填充

3.4.2?設置邊界

3.4.3?設置內陰影

3.4.4?設置投影

3.4.5?應用案例——設計制作視頻App啟動圖標

3.5　總結拓展

3.6　課後測試

第4章　Adobe XD設計制作產品原型

4.1　創建文本

4.1.1?輸入文本

4.1.2?導入文本

4.2　管理文本

4.2.1?設置文本格式

4.2.2?設置文本變換

4.2.3?設置段落的寬高

4.2.4?應用案例——設計制作購物App原型上新部分

4.2.5?拼寫檢查

4.3　形狀蒙版

4.4　重復網格

4.4.1?創建重復網格

4.4.2?編輯重復網格

4.4.3?應用案例——更新重復網格中的文本和圖片

4.5　設置滾動

4.5.1?創建垂直滾動

4.5.2?創建滾動組

4.5.3?應用案例——設計制作購物App原型推薦部分

4.6　設置版面

4.6.1?使用響應式調整大小

4.6.2?手動編輯約束

4.6.3?應用案例——調整頁面適配平板設備

4.7　總結拓展

4.8　課後測試

第5章　Adobe XD設計制作產品UI

5.1　創建庫資源

5.1.1?添加顏色資源

5.1.2?添加字符樣式資源

5.1.3?添加組件資源

5.1.4?應用案例——創建iOS系統UI設計系統

5.1.5?添加視頻資源

5.2　應用庫資源

5.2.1?應用顏色資源

5.2.2?應用組件資源

5.2.3?應用案例——為App界面中的組件添加狀態

5.3　管理和編輯庫資源

5.3.1?管理庫資源

5.3.2?編輯庫資源

5.4　使用圖層

5.4.1?“圖層”面板

5.4.2?搜索圖層

5.4.3?管理圖層

5.4.4?應用案例——設計制作茶道App市集頁面 UI

5.5　效果和混合模式

5.5.1?使用效果

5.5.2?應用案例——為UI中的圖片添加內陰影效果

5.5.3?使用混合效果

5.5.4?應用案例——為App界面背景添加花紋

5.6　使用3D變換進行透視設計

5.6.1?啟用3D變換

5.6.2?旋轉物體

5.6.3?應用深度

5.7　總結拓展

5.8　課後測試

第6章　Adobe XD設計制作頁面交互

6.1　添加交互

6.1.1?設置主頁

6.1.2?建立鏈接

6.1.3?設置交互效果

6.1.4?鏈接上一個畫板

6.1.5?取消鏈接

6.1.6?應用案例——設計制作App頁面交互動畫

6.2　自動制作動畫

6.2.1?創建交互式動畫

6.2.2?應用案例——設計制作App頁面輪播交互效果

6.3　使用其他方式構建交互

6.3.1?使用按鍵和遊戲手柄創建交互

6.3.2?使用語音命令和語音播放創建交互

6.4　創建定時過渡

6.4.1?使用“時間”觸發條件創建交互

6.4.2?應用案例——設計制作App加載進度條動效

6.5　添加疊加

6.5.1?使用“疊加”操作類型創建交互

6.5.2?應用案例——設計制作App搜索界面的交互動效

6.6　創建錨點鏈接

6.7　預覽UI設計

6.7.1?預覽交互動效

6.7.2?預覽“語音”命令下的交互動效

6.8　總結拓展

6.9　課後測試

第7章　輸出和標註UI設計

7.1　使用Adobe XD輸出設計資源

7.1.1?導出切片資源

7.1.2?不同格式的切片資源

7.2　輸出iOS系統的UI設計

7.2.1?iOS系統向下和向上適配

7.2.2?適配切片命名規範

7.2.3?應用案例——完成iOS系統UI界面的切片輸出

7.3　輸出Android系統的UI設計

7.3.1?Android系統中的“點9”切圖

7.3.2?適配輸出中的一稿兩用

7.3.3?應用案例——完成Android系統UI界面的切片輸出

7.4　標註移動App UI設計

7.4.1?App界面標註內容

7.4.2?標註的聲明文檔

7.4.3?UI設計的標註規範

7.4.4?常用的標註工具

7.5　總結拓展

7.6　課後測試