微課學(xué)Adobe XD移動UI設(shè)計
定 價:79.8 元
叢書名:清華電腦學(xué)堂
- 作者:高鵬
- 出版時間:2024/12/1
- ISBN:9787302697749
- 出 版 社:清華大學(xué)出版社
- 中圖法分類:TN929.53
- 頁碼:
- 紙張:膠版紙
- 版次:
- 開本:16開
《微課學(xué)AdobeXD移動UI設(shè)計》以項目引入的方式講解,針對iOS系統(tǒng)和Android系統(tǒng)兩種移動設(shè)備界面的結(jié)構(gòu)及設(shè)計規(guī)范進行學(xué)習(xí)!段⒄n學(xué)AdobeXD移動UI設(shè)計》采用案例帶動知識點的教學(xué)方式,將枯燥的知識點融入到豐富有趣的案例制作中,全面解析移動端APP界面設(shè)計的流程及設(shè)計技巧。書中案例使用AdobeXD主流UI設(shè)計軟件制作。《微課學(xué)AdobeXD移動UI設(shè)計》將提供全部案例的素材、源文件和教學(xué)視頻,讀者可以結(jié)合書、練習(xí)文件和教學(xué)視頻,提升移動端APPUI界面設(shè)計的學(xué)習(xí)效率。
本書特色《微課學(xué)AdobeXD移動UI設(shè)計》以豐富應(yīng)用案例為骨架,從iOS、Android到HarmonyOS系統(tǒng)的UI文件創(chuàng)建,從圖標(biāo)設(shè)計、頁面原型到交互動效制作,手把手帶你掌握從需求分析到最終輸出的完整流程;輔以拓展案例,兼顧技能培養(yǎng);每章配備選擇、判斷、創(chuàng)新題,助力鞏固知識、激發(fā)設(shè)計思維。《微課學(xué)AdobeXD移動UI設(shè)計》贈送源文件、素材、教學(xué)視頻和PPT課件,讀者可以結(jié)合書、練習(xí)文件和教學(xué)視頻,提升移動端APPUI界面設(shè)計的學(xué)習(xí)效率。讀者對象《微課學(xué)AdobeXD移動UI設(shè)計》適合UI設(shè)計愛好者、App界面設(shè)計、移動UI設(shè)計從業(yè)者閱讀,也適合作為各院校相關(guān)設(shè)計專業(yè)的參考教材。
前言
在科技不斷發(fā)展的今天,手機與大眾生活的聯(lián)系日益密切,其功能也越來越強大,而手機的軟件系統(tǒng)因其美觀實用、操作便捷為用戶所青睞,已成為用戶直接操作的主體,因此用戶界面設(shè)計的規(guī)范性就顯得尤為重要。
本書主要依據(jù)不同移動系統(tǒng)的構(gòu)成元素,由淺入深地講解使用Adobe XD設(shè)計制作App產(chǎn)品UI的方法和技巧。本書結(jié)合第三方制作的實例進行講解,詳細地介紹了制作步驟和軟件的應(yīng)用技巧,使讀者能輕松地學(xué)習(xí)并掌握。
本書章節(jié)及內(nèi)容安排
本書從實用的角度出發(fā),全面、系統(tǒng)地講解了Adobe XD的各項功能和使用方法,書中內(nèi)容基本上涵蓋了Adobe XD的全部工具和重要功能,并運用多個精彩實例貫穿于整個講解過程,操作一目了然,語言通俗易懂,適合讀者自學(xué)。
本書共分為7章,各章的主要內(nèi)容如下:
第1章,講解Adobe XD的基礎(chǔ)知識,包括移動端UI設(shè)計基礎(chǔ)、移動UI設(shè)計流程、移動UI設(shè)計常用工具、關(guān)于Adobe XD、下載和安裝Adobe XD、Adobe XD的工作界面和Adobe XD的幫助資源等內(nèi)容。
第2章,講解Adobe XD的基本操作,包括使用主頁、新建文件、創(chuàng)建和管理畫板、打開文件、導(dǎo)入文件、存儲文件、獲取UI套件、撤銷與恢復(fù)操作,以及輔助工具等內(nèi)容。
第3章,講解Adobe XD創(chuàng)建與編輯對象的方法,包括創(chuàng)建對象、編輯對象、布爾運算和為對象設(shè)置樣式等內(nèi)容。
第4章,主要講解Adobe XD設(shè)計制作產(chǎn)品原型的方法,包括創(chuàng)建文本、管理文本、形狀蒙版、重復(fù)網(wǎng)格、設(shè)置滾動和設(shè)置版面等內(nèi)容。
第5章,講解使用Adobe XD設(shè)計制作產(chǎn)品UI的方法,包括創(chuàng)建庫資源、應(yīng)用庫資源、管理和編輯庫資源、使用圖層、效果和混合模式,以及使用3D變換進行透視設(shè)計等內(nèi)容。
第6章,講解使用Adobe XD設(shè)置制作頁面交互的方法,包括添加交互、自動制作動畫、使用其他方式構(gòu)建交互、創(chuàng)建定時過渡、添加疊加、創(chuàng)建錨點鏈接和預(yù)覽UI設(shè)計等內(nèi)容。
第7章,講解輸出和標(biāo)注UI設(shè)計的方法,包括使用Adobe XD輸出設(shè)計資源、輸出iOS系統(tǒng)的UI設(shè)計、輸出Android系統(tǒng)的UI設(shè)計和標(biāo)注移動App UI設(shè)計等內(nèi)容。
本書的知識結(jié)構(gòu)清晰、內(nèi)容有針對性、案例精美實用,隨書附贈了書中所有案例的教學(xué)視頻、源文件和PPT課件,用于補充書中部分細節(jié)內(nèi)容,方便讀者學(xué)習(xí)和參考。讀者掃描下方二維碼,即可下載獲取。
由于編者水平和經(jīng)驗有限,書中難免有不足之處,敬請讀者批評指正。
編者
高鵬從事相關(guān)設(shè)計工作多年,能夠獨立完成各類UI界面的設(shè)計與制作,同時熟悉廣告設(shè)計流程與印刷流程,對于色彩搭配有獨特的設(shè)計理念,具有較強的文檔及報告的編寫能力,熟練使用Axure,Photoshop;C4D;Illustrator;VISIO等相關(guān)軟件。熟悉短視頻開發(fā)與制作流程,并能熟練掌握各種短視頻拍攝與制作軟件。
目錄
第1章 了解Adobe XD
1.1 移動端UI設(shè)計基礎(chǔ)
1.1.1?了解移動UI設(shè)計
1.1.2?移動端UI設(shè)計平臺
1.1.3?移動端與PC端UI設(shè)計的區(qū)別
1.2 移動UI設(shè)計流程
1.2.1?需求分析
1.2.2?交互設(shè)計
1.2.3?視覺界面設(shè)計
1.3 移動UI設(shè)計常用工具
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 關(guān)于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 總結(jié)拓展
1.9 課后測試
第2章 Adobe XD的基本操作
2.1 使用主頁
2.2 新建文件
2.3 創(chuàng)建和管理畫板
2.3.1?創(chuàng)建新畫板
2.3.2?應(yīng)用案例——創(chuàng)建iOS系統(tǒng)App文件
2.3.3?使用現(xiàn)有畫板
2.3.4?管理畫板
2.3.5?應(yīng)用案例——創(chuàng)建Android系統(tǒng)App文件
2.4 打開文件
2.4.1?“打開”命令
2.4.2?從您的計算機中打開
2.4.3?最近打開文件
2.5 導(dǎo)入文件
2.5.1?“導(dǎo)入”命令
2.5.2?應(yīng)用案例——拖曳導(dǎo)入圖片素材
2.6 存儲文件
2.6.1?“保存”與“另存為”命令
2.6.2?存儲為本地文檔
2.6.3?重命名
2.6.4?應(yīng)用案例——保存HarmonyOS系統(tǒng)UI文件
2.7 獲取UI套件
2.8 撤銷與恢復(fù)操作
2.8.1?撤銷與重做
2.8.2?恢復(fù)文件
2.9 輔助工具
2.9.1?應(yīng)用案例——為iOS系統(tǒng)UI設(shè)計創(chuàng)建參考線
2.9.2?管理參考線
2.9.3?使用智能參考線
2.9.4?應(yīng)用網(wǎng)格定位對象
2.9.5?管理網(wǎng)格
2.10 總結(jié)拓展
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?應(yīng)用案例——設(shè)計制作標(biāo)簽欄圖標(biāo)
3.2 編輯對象
3.2.1?選擇和刪除對象
3.2.2?拷貝和粘貼對象
3.2.3?對齊和分布對象
3.2.4?排列對象
3.2.5?應(yīng)用案例——設(shè)計制作扁平風(fēng)格裝飾圖標(biāo)
3.2.6?調(diào)整和旋轉(zhuǎn)對象
3.2.7?編組和鎖定對象
3.2.8?應(yīng)用案例——繪制iOS系統(tǒng)的狀態(tài)欄圖標(biāo)
3.3 布爾運算
3.3.1?添加
3.3.2?減去
3.3.3?交叉
3.3.4?排除重疊
3.3.5?應(yīng)用案例——繪制iOS系統(tǒng)Wi-Fi電池圖標(biāo)
3.4 為對象設(shè)置樣式
3.4.1?設(shè)置填充
3.4.2?設(shè)置邊界
3.4.3?設(shè)置內(nèi)陰影
3.4.4?設(shè)置投影
3.4.5?應(yīng)用案例——設(shè)計制作視頻App啟動圖標(biāo)
3.5 總結(jié)拓展
3.6 課后測試
第4章 Adobe XD設(shè)計制作產(chǎn)品原型
4.1 創(chuàng)建文本
4.1.1?輸入文本
4.1.2?導(dǎo)入文本
4.2 管理文本
4.2.1?設(shè)置文本格式
4.2.2?設(shè)置文本變換
4.2.3?設(shè)置段落的寬高
4.2.4?應(yīng)用案例——設(shè)計制作購物App原型上新部分
4.2.5?拼寫檢查
4.3 形狀蒙版
4.4 重復(fù)網(wǎng)格
4.4.1?創(chuàng)建重復(fù)網(wǎng)格
4.4.2?編輯重復(fù)網(wǎng)格
4.4.3?應(yīng)用案例——更新重復(fù)網(wǎng)格中的文本和圖片
4.5 設(shè)置滾動
4.5.1?創(chuàng)建垂直滾動
4.5.2?創(chuàng)建滾動組
4.5.3?應(yīng)用案例——設(shè)計制作購物App原型推薦部分
4.6 設(shè)置版面
4.6.1?使用響應(yīng)式調(diào)整大小
4.6.2?手動編輯約束
4.6.3?應(yīng)用案例——調(diào)整頁面適配平板設(shè)備
4.7 總結(jié)拓展
4.8 課后測試
第5章 Adobe XD設(shè)計制作產(chǎn)品UI
5.1 創(chuàng)建庫資源
5.1.1?添加顏色資源
5.1.2?添加字符樣式資源
5.1.3?添加組件資源
5.1.4?應(yīng)用案例——創(chuàng)建iOS系統(tǒng)UI設(shè)計系統(tǒng)
5.1.5?添加視頻資源
5.2 應(yīng)用庫資源
5.2.1?應(yīng)用顏色資源
5.2.2?應(yīng)用組件資源
5.2.3?應(yīng)用案例——為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?應(yīng)用案例——設(shè)計制作茶道App市集頁面 UI
5.5 效果和混合模式
5.5.1?使用效果
5.5.2?應(yīng)用案例——為UI中的圖片添加內(nèi)陰影效果
5.5.3?使用混合效果
5.5.4?應(yīng)用案例——為App界面背景添加花紋
5.6 使用3D變換進行透視設(shè)計
5.6.1?啟用3D變換
5.6.2?旋轉(zhuǎn)物體
5.6.3?應(yīng)用深度
5.7 總結(jié)拓展
5.8 課后測試
第6章 Adobe XD設(shè)計制作頁面交互
6.1 添加交互
6.1.1?設(shè)置主頁
6.1.2?建立鏈接
6.1.3?設(shè)置交互效果
6.1.4?鏈接上一個畫板
6.1.5?取消鏈接
6.1.6?應(yīng)用案例——設(shè)計制作App頁面交互動畫
6.2 自動制作動畫
6.2.1?創(chuàng)建交互式動畫
6.2.2?應(yīng)用案例——設(shè)計制作App頁面輪播交互效果
6.3 使用其他方式構(gòu)建交互
6.3.1?使用按鍵和游戲手柄創(chuàng)建交互
6.3.2?使用語音命令和語音播放創(chuàng)建交互
6.4 創(chuàng)建定時過渡
6.4.1?使用“時間”觸發(fā)條件創(chuàng)建交互
6.4.2?應(yīng)用案例——設(shè)計制作App加載進度條動效
6.5 添加疊加
6.5.1?使用“疊加”操作類型創(chuàng)建交互
6.5.2?應(yīng)用案例——設(shè)計制作App搜索界面的交互動效
6.6 創(chuàng)建錨點鏈接
6.7 預(yù)覽UI設(shè)計
6.7.1?預(yù)覽交互動效
6.7.2?預(yù)覽“語音”命令下的交互動效
6.8 總結(jié)拓展
6.9 課后測試
第7章 輸出和標(biāo)注UI設(shè)計
7.1 使用Adobe XD輸出設(shè)計資源
7.1.1?導(dǎo)出切片資源
7.1.2?不同格式的切片資源
7.2 輸出iOS系統(tǒng)的UI設(shè)計
7.2.1?iOS系統(tǒng)向下和向上適配
7.2.2?適配切片命名規(guī)范
7.2.3?應(yīng)用案例——完成iOS系統(tǒng)UI界面的切片輸出
7.3 輸出Android系統(tǒng)的UI設(shè)計
7.3.1?Android系統(tǒng)中的“點9”切圖
7.3.2?適配輸出中的一稿兩用
7.3.3?應(yīng)用案例——完成Android系統(tǒng)UI界面的切片輸出
7.4 標(biāo)注移動App UI設(shè)計
7.4.1?App界面標(biāo)注內(nèi)容
7.4.2?標(biāo)注的聲明文檔
7.4.3?UI設(shè)計的標(biāo)注規(guī)范
7.4.4?常用的標(biāo)注工具
7.5 總結(jié)拓展
7.6 課后測試