《微課學AdobeXD移動UI設計》以項目引入的方式講解，針對iOS系統(tǒng)和Android系統(tǒng)兩種移動設備界面的結構及設計規(guī)范進行學習。《微課學AdobeXD移動UI設計》采用案例帶動知識點的教學方式，將枯燥的知識點融入到豐富有趣的案例制作中，全面解析移動端APP界面設計的流程及設計技巧。書中案例使用AdobeXD主流UI設計軟件制作�！段⒄n學AdobeXD移動UI設計》將提供全部案例的素材、源文件和教學視頻，讀者可以結合書、練習文件和教學視頻，提升移動端APPUI界面設計的學習效率。
本書特色《微課學AdobeXD移動UI設計》以豐富應用案例為骨架，從iOS、Android到HarmonyOS系統(tǒng)的UI文件創(chuàng)建，從圖標設計、頁面原型到交互動效制作，手把手帶你掌握從需求分析到最終輸出的完整流程；輔以拓展案例，兼顧技能培養(yǎng)；每章配備選擇、判斷、創(chuàng)新題，助力鞏固知識、激發(fā)設計思維�！段⒄n學AdobeXD移動UI設計》贈送源文件、素材、教學視頻和PPT課件,讀者可以結合書、練習文件和教學視頻，提升移動端APPUI界面設計的學習效率。讀者對象《微課學AdobeXD移動UI設計》適合UI設計愛好者、App界面設計、移動UI設計從業(yè)者閱讀，也適合作為各院校相關設計專業(yè)的參考教材。
前言
在科技不斷發(fā)展的今天，手機與大眾生活的聯(lián)系日益密切，其功能也越來越強大，而手機的軟件系統(tǒng)因其美觀實用、操作便捷為用戶所青睞，已成為用戶直接操作的主體，因此用戶界面設計的規(guī)范性就顯得尤為重要。
本書主要依據不同移動系統(tǒng)的構成元素，由淺入深地講解使用Adobe XD設計制作App產品UI的方法和技巧。本書結合第三方制作的實例進行講解，詳細地介紹了制作步驟和軟件的應用技巧，使讀者能輕松地學習并掌握。
本書章節(jié)及內容安排
本書從實用的角度出發(fā)，全面、系統(tǒng)地講解了Adobe XD的各項功能和使用方法，書中內容基本上涵蓋了Adobe XD的全部工具和重要功能，并運用多個精彩實例貫穿于整個講解過程，操作一目了然，語言通俗易懂，適合讀者自學。
本書共分為7章，各章的主要內容如下：
第1章，講解Adobe XD的基礎知識，包括移動端UI設計基礎、移動UI設計流程、移動UI設計常用工具、關于Adobe XD、下載和安裝Adobe XD、Adobe XD的工作界面和Adobe XD的幫助資源等內容。
第2章，講解Adobe XD的基本操作，包括使用主頁、新建文件、創(chuàng)建和管理畫板、打開文件、導入文件、存儲文件、獲取UI套件、撤銷與恢復操作，以及輔助工具等內容。
第3章，講解Adobe XD創(chuàng)建與編輯對象的方法，包括創(chuàng)建對象、編輯對象、布爾運算和為對象設置樣式等內容。
第4章，主要講解Adobe XD設計制作產品原型的方法，包括創(chuàng)建文本、管理文本、形狀蒙版、重復網格、設置滾動和設置版面等內容。
第5章，講解使用Adobe XD設計制作產品UI的方法，包括創(chuàng)建庫資源、應用庫資源、管理和編輯庫資源、使用圖層、效果和混合模式，以及使用3D變換進行透視設計等內容。
第6章，講解使用Adobe XD設置制作頁面交互的方法，包括添加交互、自動制作動畫、使用其他方式構建交互、創(chuàng)建定時過渡、添加疊加、創(chuàng)建錨點鏈接和預覽UI設計等內容。
第7章，講解輸出和標注UI設計的方法，包括使用Adobe XD輸出設計資源、輸出iOS系統(tǒng)的UI設計、輸出Android系統(tǒng)的UI設計和標注移動App UI設計等內容。
本書的知識結構清晰、內容有針對性、案例精美實用，隨書附贈了書中所有案例的教學視頻、源文件和PPT課件，用于補充書中部分細節(jié)內容，方便讀者學習和參考。讀者掃描下方二維碼，即可下載獲取。
由于編者水平和經驗有限，書中難免有不足之處，敬請讀者批評指正。
編者
高鵬從事相關設計工作多年，能夠獨立完成各類UI界面的設計與制作，同時熟悉廣告設計流程與印刷流程，對于色彩搭配有獨特的設計理念，具有較強的文檔及報告的編寫能力，熟練使用Axure，Photoshop；C4D；Illustrator；VISIO等相關軟件。熟悉短視頻開發(fā)與制作流程，并能熟練掌握各種短視頻拍攝與制作軟件。
目錄
第1章 了解Adobe XD
1.1 移動端UI設計基礎
1.1.1?了解移動UI設計
1.1.2?移動端UI設計平臺
1.1.3?移動端與PC端UI設計的區(qū)別
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?工作區(qū)域
1.7 Adobe XD的幫助資源
1.8 總結拓展
1.9 課后測試
第2章 Adobe XD的基本操作
2.1 使用主頁
2.2 新建文件
2.3 創(chuàng)建和管理畫板
2.3.1?創(chuàng)建新畫板
2.3.2?應用案例——創(chuàng)建iOS系統(tǒng)App文件
2.3.3?使用現(xiàn)有畫板
2.3.4?管理畫板
2.3.5?應用案例——創(chuàng)建Android系統(tǒng)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系統(tǒng)UI文件
2.7 獲取UI套件
2.8 撤銷與恢復操作
2.8.1?撤銷與重做
2.8.2?恢復文件
2.9 輔助工具
2.9.1?應用案例——為iOS系統(tǒng)UI設計創(chuàng)建參考線
2.9.2?管理參考線
2.9.3?使用智能參考線
2.9.4?應用網格定位對象
2.9.5?管理網格
2.10 總結拓展
2.11 課后測試
第3章 Adobe XD創(chuàng)建與編輯對象
3.1 創(chuàng)建對象
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系統(tǒng)的狀態(tài)欄圖標
3.3 布爾運算
3.3.1?添加
3.3.2?減去
3.3.3?交叉
3.3.4?排除重疊
3.3.5?應用案例——繪制iOS系統(tǒng)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 創(chuàng)建文本
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?創(chuàng)建重復網格
4.4.2?編輯重復網格
4.4.3?應用案例——更新重復網格中的文本和圖片
4.5 設置滾動
4.5.1?創(chuàng)建垂直滾動
4.5.2?創(chuàng)建滾動組
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 創(chuàng)建庫資源
5.1.1?添加顏色資源
5.1.2?添加字符樣式資源
5.1.3?添加組件資源
5.1.4?應用案例——創(chuàng)建iOS系統(tǒng)UI設計系統(tǒng)
5.1.5?添加視頻資源
5.2 應用庫資源
5.2.1?應用顏色資源
5.2.2?應用組件資源
5.2.3?應用案例——為App界面中的組件添加狀態(tài)
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?創(chuàng)建交互式動畫
6.2.2?應用案例——設計制作App頁面輪播交互效果
6.3 使用其他方式構建交互
6.3.1?使用按鍵和游戲手柄創(chuàng)建交互
6.3.2?使用語音命令和語音播放創(chuàng)建交互
6.4 創(chuàng)建定時過渡
6.4.1?使用“時間”觸發(fā)條件創(chuàng)建交互
6.4.2?應用案例——設計制作App加載進度條動效
6.5 添加疊加
6.5.1?使用“疊加”操作類型創(chuàng)建交互
6.5.2?應用案例——設計制作App搜索界面的交互動效
6.6 創(chuàng)建錨點鏈接
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系統(tǒng)的UI設計
7.2.1?iOS系統(tǒng)向下和向上適配
7.2.2?適配切片命名規(guī)范
7.2.3?應用案例——完成iOS系統(tǒng)UI界面的切片輸出
7.3 輸出Android系統(tǒng)的UI設計
7.3.1?Android系統(tǒng)中的“點9”切圖
7.3.2?適配輸出中的一稿兩用
7.3.3?應用案例——完成Android系統(tǒng)UI界面的切片輸出
7.4 標注移動App UI設計
7.4.1?App界面標注內容
7.4.2?標注的聲明文檔
7.4.3?UI設計的標注規(guī)范
7.4.4?常用的標注工具
7.5 總結拓展
7.6 課后測試
書單推薦
