123,123

內(nèi)容簡(jiǎn)介

　　本書(shū)是移動(dòng)端APP UI設(shè)計(jì)的自學(xué)教程，通過(guò)大量的綜合任務(wù)案例，介紹如何設(shè)計(jì)與制作移動(dòng)端交互界面。全書(shū)分為6個(gè)單元，分別介紹交互式UI設(shè)計(jì)基礎(chǔ)、交互式原型設(shè)計(jì)、Photoshop圖標(biāo)設(shè)計(jì)、Illustrator綜合圖標(biāo)設(shè)計(jì)、UI界面設(shè)計(jì)以及UI動(dòng)效設(shè)計(jì)基礎(chǔ)。其中涉及Axure RP、Photoshop、Illustrator、After Effects等軟件的操作。本書(shū)內(nèi)容從兩條主線進(jìn)行組織編寫(xiě)，一條主線是實(shí)際操作案例，在案例選擇上由淺入深，循序漸進(jìn)，另一條主線是基礎(chǔ)理論知識(shí)，兩條主線緊密融合，非常完整地展現(xiàn)了整個(gè)UI設(shè)計(jì)流程，幫助讀者融會(huì)貫通，制作出更好的移動(dòng)APP UI作品。本書(shū)結(jié)構(gòu)清晰、語(yǔ)言簡(jiǎn)潔、實(shí)例豐富、版式精美，可以作為高等職業(yè)院校、培訓(xùn)機(jī)構(gòu)的參考教材，也適合移動(dòng)APP UI設(shè)計(jì)初、中級(jí)讀者及廣大UI設(shè)計(jì)愛(ài)好者和從業(yè)者閱讀。

作者簡(jiǎn)介

　　阮進(jìn)軍，安徽商貿(mào)職業(yè)技術(shù)學(xué)院副教授，電子信息工程系主任。近5年主要成果：主持教育部高等職業(yè)教育創(chuàng)新發(fā)展行動(dòng)計(jì)劃項(xiàng)目1項(xiàng)，國(guó)家職業(yè)教育專業(yè)教學(xué)資源庫(kù)課程建設(shè)項(xiàng)目1項(xiàng)，主持完成安徽省高校自然科學(xué)研究重點(diǎn)項(xiàng)目1項(xiàng)，主持完成省級(jí)質(zhì)量工程項(xiàng)目1項(xiàng)，獲實(shí)用新型專利授權(quán)2項(xiàng)，指導(dǎo)學(xué)生參加全國(guó)職業(yè)院校技能大賽，獲得二等獎(jiǎng)1項(xiàng)，本人參加安徽省信息化教學(xué)大賽獲得一等獎(jiǎng)1項(xiàng)，獲得安徽省教學(xué)成果一等獎(jiǎng)2項(xiàng)、二等獎(jiǎng)3項(xiàng)、三等獎(jiǎng)3項(xiàng)，發(fā)表教科研論文4篇，主編高職高專教材1部，參編2部。獲得的職業(yè)資格證書(shū)：（1） Oracle OCP認(rèn)證；（2）微軟MCP認(rèn)證工程師；（3）安徽省高等職業(yè)院校高級(jí)“雙師型”教師。孫握瑜，安徽商貿(mào)職業(yè)技術(shù)學(xué)院講師。獲得過(guò)的職業(yè)資格證書(shū)：（1）數(shù)據(jù)庫(kù)應(yīng)用系統(tǒng)設(shè)計(jì)工程師；（2）微軟MCP認(rèn)證工程師；（3）安徽省高等職業(yè)院校“雙師型”教師（中級(jí)）；（4）人工智能研發(fā)工程師。主要成果有：主持安徽省級(jí)重點(diǎn)科研項(xiàng)目1項(xiàng)，主持安徽省教育廳大規(guī)模在線開(kāi)放課程（MOOC）示范項(xiàng)目《UI交互設(shè)計(jì)與實(shí)現(xiàn)》項(xiàng)目1項(xiàng)，參與安徽省《計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)綜合改革試點(diǎn)》項(xiàng)目1項(xiàng)。教學(xué)成果和獎(jiǎng)勵(lì)：（1）榮獲安徽省教學(xué)成果一等獎(jiǎng)1次，榮獲安徽省教學(xué)成果二等獎(jiǎng)4次，榮獲安徽省教學(xué)成果三等獎(jiǎng)一次。副主副教材1種，參編教材1種。專利 2種。

圖書(shū)目錄

單元1交互式UI設(shè)計(jì)基礎(chǔ) 1
認(rèn)識(shí)我們的手機(jī) 1
任務(wù)1.1　查看手機(jī)屏幕相關(guān)參數(shù) 1
知識(shí)庫(kù) 2
一、屏幕（主屏）尺寸 2
二、屏幕分辨率 3
三、網(wǎng)點(diǎn)密度 4
四、像素密度 4
五、DPI和PPI 4
六、dp、pt、sp的概念 5
七、dp和px的轉(zhuǎn)換 5
八、像素比 6
認(rèn)識(shí)手機(jī)APP 7
任務(wù)1.2　查看常見(jiàn)手機(jī)APP的界面組成 7
知識(shí)庫(kù) 8
一、 UI設(shè)計(jì)的概念 8
二、手機(jī)UI設(shè)計(jì) 8
三、手機(jī)UI設(shè)計(jì)要點(diǎn) 8
四、 APP界面組成說(shuō)明 9
UI設(shè)計(jì)基本流程實(shí)操 11
任務(wù)1.3　民宿APP UI設(shè)計(jì) 12
知識(shí)庫(kù) 15
一、用戶需求 15
二、繪制草圖 16
三、繪制低保真原型（線框圖） 17
四、設(shè)計(jì)高保真原型（效果圖） 17
五、手機(jī)APP UI設(shè)計(jì)規(guī)范 17
單元2交互式原型設(shè)計(jì) 19
規(guī)劃軟件原型結(jié)構(gòu) 19
任務(wù)2.1　徜徉紅途APP項(xiàng)目規(guī)劃 20
知識(shí)庫(kù) 23
一、認(rèn)識(shí)Axure工作界面 23
二、頁(yè)面管理區(qū)域的使用 25
利用元件搭建APP原型界面 25
任務(wù)2.2　注冊(cè)界面搭建 25
知識(shí)庫(kù) 30
一、基本元件 30
二、表單元件 32
三、菜單和表格 34
四、下載并載入元件庫(kù)和自定義元件庫(kù) 35
利用動(dòng)態(tài)面板制作輪播動(dòng)態(tài)效果 36
任務(wù)2.3　動(dòng)態(tài)面板實(shí)現(xiàn)輪播效果 37
知識(shí)庫(kù) 44
動(dòng)態(tài)面板 44
利用母版設(shè)計(jì)APP主界面 46
任務(wù)2.4　母版設(shè)計(jì)導(dǎo)航模塊 46
知識(shí)庫(kù) 48
一、母版 48
二、母版創(chuàng)建方式 48
三、母版的拖放行為 49
利用變量制作交互效果 49
任務(wù)2.5　首頁(yè)拖動(dòng)及回彈 50
知識(shí)庫(kù) 58
Axure提供了全局變量和局部變量 58
利用變量值在頁(yè)面間傳遞 58
任務(wù)2.6　搜索旅游線路 58
知識(shí)庫(kù) 65
變量值在頁(yè)面間傳遞 65
利用部件行為制作交互效果 65
任務(wù)2.7　省市級(jí)聯(lián)菜單 65
知識(shí)庫(kù) 73
部件行為 73
單元3Photoshop圖標(biāo)設(shè)計(jì) 79
設(shè)計(jì)扁平化圖標(biāo) 79
任務(wù)3.1　制作信封圖標(biāo) 79
任務(wù)3.2　制作日歷圖標(biāo) 82
任務(wù)3.3　制作“徜徉紅途APP”啟動(dòng)圖標(biāo) 84
任務(wù)3.4　制作折紙風(fēng)格日歷圖標(biāo) 89
知識(shí)庫(kù) 98
一、扁平化設(shè)計(jì)特點(diǎn) 98
二、扁平化設(shè)計(jì)原則 99
設(shè)計(jì)擬物化圖標(biāo) 102
任務(wù)3.5　制作通訊錄圖標(biāo) 102
任務(wù)3.6　制作指南針圖標(biāo) 112
知識(shí)庫(kù) 122
一、擬物化設(shè)計(jì)的特點(diǎn) 122
二、擬物化和扁平化設(shè)計(jì) 122
單元4Illustrator綜合圖標(biāo)設(shè)計(jì) 125
平面風(fēng)格圖標(biāo)設(shè)計(jì) 125
任務(wù)4.1　紅色旅游景點(diǎn)圖標(biāo)設(shè)計(jì) 125
知識(shí)庫(kù) 132
圖標(biāo)參考線繪制 132
立體風(fēng)格圖標(biāo)設(shè)計(jì) 135
任務(wù)4.2　友稅APP圖標(biāo)設(shè)計(jì) 135
知識(shí)庫(kù) 144
形狀編輯工具 144
線性風(fēng)格圖標(biāo)設(shè)計(jì) 145
任務(wù)4.3　設(shè)計(jì)標(biāo)簽欄圖標(biāo) 145
知識(shí)庫(kù) 148
描邊面板 148
功能導(dǎo)航圖標(biāo)設(shè)計(jì) 149
任務(wù)4.4　紅色之旅功能導(dǎo)航圖標(biāo)設(shè)計(jì) 150
知識(shí)庫(kù) 154
路徑查找器 154
控件圖標(biāo)設(shè)計(jì) 156
任務(wù)4.5　輸入文本框設(shè)計(jì) 156
知識(shí)庫(kù) 159
字符面板設(shè)置 159
任務(wù)4.6　滑塊圖標(biāo)的設(shè)計(jì) 159
知識(shí)庫(kù) 163
漸變面板設(shè)置 163
單元5UI界面設(shè)計(jì) 165
制作“引導(dǎo)頁(yè)”頁(yè)面 165
任務(wù)5.1　制作徜徉紅途APP引導(dǎo)頁(yè)1 165
任務(wù)5.2　制作徜徉紅途APP引導(dǎo)頁(yè)2 170
任務(wù)5.3　制作徜徉紅途APP引導(dǎo)頁(yè)3 172
知識(shí)庫(kù) 175
制作“首頁(yè)”頁(yè)面 176
任務(wù)5.4　標(biāo)簽欄導(dǎo)航制作 176
任務(wù)5.5　狀態(tài)欄制作 179
任務(wù)5.6　搜索欄制作 183
任務(wù)5.7　主界面的制作 184
知識(shí)庫(kù) 189
制作“行程”頁(yè)面 190
任務(wù)5.8　制作“行程”頁(yè)面 190
知識(shí)庫(kù) 196
制作“定制”頁(yè)面 196
任務(wù)5.9　制作“定制”頁(yè)面 196
知識(shí)庫(kù) 202
單元6UI動(dòng)效設(shè)計(jì)基礎(chǔ) 203
制作圖標(biāo)動(dòng)效 203
任務(wù)6.1　設(shè)計(jì)圖標(biāo)動(dòng)效 203
APP引導(dǎo)頁(yè)動(dòng)效 210
任務(wù)6.2　制作徜徉紅途APP引導(dǎo)頁(yè)動(dòng)效 210
制作APP界面動(dòng)效 215
任務(wù)6.3　備忘錄APP界面動(dòng)效 215
知識(shí)庫(kù) 221
一、什么是移動(dòng)APP動(dòng)效設(shè)計(jì) 221
二、移動(dòng)APP動(dòng)效的作用 221
三、常用動(dòng)效設(shè)計(jì)工具 222
四、圖標(biāo)動(dòng)效設(shè)計(jì)思路 222單元1交互式UI設(shè)計(jì)基礎(chǔ) 1
認(rèn)識(shí)我們的手機(jī) 1
任務(wù)1.1　查看手機(jī)屏幕相關(guān)參數(shù) 1
知識(shí)庫(kù) 2
一、屏幕（主屏）尺寸 2
二、屏幕分辨率 3
三、網(wǎng)點(diǎn)密度 4
四、像素密度 4
五、DPI和PPI 4
六、dp、pt、sp的概念 5
七、dp和px的轉(zhuǎn)換 5
八、像素比 6
認(rèn)識(shí)手機(jī)APP 7
任務(wù)1.2　查看常見(jiàn)手機(jī)APP的界面組成 7
知識(shí)庫(kù) 8
一、 UI設(shè)計(jì)的概念 8
二、手機(jī)UI設(shè)計(jì) 8
三、手機(jī)UI設(shè)計(jì)要點(diǎn) 8
四、 APP界面組成說(shuō)明 9
UI設(shè)計(jì)基本流程實(shí)操 11
任務(wù)1.3　民宿APP UI設(shè)計(jì) 12
知識(shí)庫(kù) 15
一、用戶需求 15
二、繪制草圖 16
三、繪制低保真原型（線框圖） 17
四、設(shè)計(jì)高保真原型（效果圖） 17
五、手機(jī)APP UI設(shè)計(jì)規(guī)范 17
單元2交互式原型設(shè)計(jì) 19
規(guī)劃軟件原型結(jié)構(gòu) 19
任務(wù)2.1　徜徉紅途APP項(xiàng)目規(guī)劃 20
知識(shí)庫(kù) 23
一、認(rèn)識(shí)Axure工作界面 23
二、頁(yè)面管理區(qū)域的使用 25
利用元件搭建APP原型界面 25
任務(wù)2.2　注冊(cè)界面搭建 25
知識(shí)庫(kù) 30
一、基本元件 30
二、表單元件 32
三、菜單和表格 34
四、下載并載入元件庫(kù)和自定義元件庫(kù) 35
利用動(dòng)態(tài)面板制作輪播動(dòng)態(tài)效果 36
任務(wù)2.3　動(dòng)態(tài)面板實(shí)現(xiàn)輪播效果 37
知識(shí)庫(kù) 44
動(dòng)態(tài)面板 44
利用母版設(shè)計(jì)APP主界面 46
任務(wù)2.4　母版設(shè)計(jì)導(dǎo)航模塊 46
知識(shí)庫(kù) 48
一、母版 48
二、母版創(chuàng)建方式 48
三、母版的拖放行為 49
利用變量制作交互效果 49
任務(wù)2.5　首頁(yè)拖動(dòng)及回彈 50
知識(shí)庫(kù) 58
Axure提供了全局變量和局部變量 58
利用變量值在頁(yè)面間傳遞 58
任務(wù)2.6　搜索旅游線路 58
知識(shí)庫(kù) 65
變量值在頁(yè)面間傳遞 65
利用部件行為制作交互效果 65
任務(wù)2.7　省市級(jí)聯(lián)菜單 65
知識(shí)庫(kù) 73
部件行為 73
單元3Photoshop圖標(biāo)設(shè)計(jì) 79
設(shè)計(jì)扁平化圖標(biāo) 79
任務(wù)3.1　制作信封圖標(biāo) 79
任務(wù)3.2　制作日歷圖標(biāo) 82
任務(wù)3.3　制作“徜徉紅途APP”啟動(dòng)圖標(biāo) 84
任務(wù)3.4　制作折紙風(fēng)格日歷圖標(biāo) 89
知識(shí)庫(kù) 98
一、扁平化設(shè)計(jì)特點(diǎn) 98
二、扁平化設(shè)計(jì)原則 99
設(shè)計(jì)擬物化圖標(biāo) 102
任務(wù)3.5　制作通訊錄圖標(biāo) 102
任務(wù)3.6　制作指南針圖標(biāo) 112
知識(shí)庫(kù) 122
一、擬物化設(shè)計(jì)的特點(diǎn) 122
二、擬物化和扁平化設(shè)計(jì) 122
單元4Illustrator綜合圖標(biāo)設(shè)計(jì) 125
平面風(fēng)格圖標(biāo)設(shè)計(jì) 125
任務(wù)4.1　紅色旅游景點(diǎn)圖標(biāo)設(shè)計(jì) 125
知識(shí)庫(kù) 132
圖標(biāo)參考線繪制 132
立體風(fēng)格圖標(biāo)設(shè)計(jì) 135
任務(wù)4.2　友稅APP圖標(biāo)設(shè)計(jì) 135
知識(shí)庫(kù) 144
形狀編輯工具 144
線性風(fēng)格圖標(biāo)設(shè)計(jì) 145
任務(wù)4.3　設(shè)計(jì)標(biāo)簽欄圖標(biāo) 145
知識(shí)庫(kù) 148
描邊面板 148
功能導(dǎo)航圖標(biāo)設(shè)計(jì) 149
任務(wù)4.4　紅色之旅功能導(dǎo)航圖標(biāo)設(shè)計(jì) 150
知識(shí)庫(kù) 154
路徑查找器 154
控件圖標(biāo)設(shè)計(jì) 156
任務(wù)4.5　輸入文本框設(shè)計(jì) 156
知識(shí)庫(kù) 159
字符面板設(shè)置 159
任務(wù)4.6　滑塊圖標(biāo)的設(shè)計(jì) 159
知識(shí)庫(kù) 163
漸變面板設(shè)置 163
單元5UI界面設(shè)計(jì) 165
制作“引導(dǎo)頁(yè)”頁(yè)面 165
任務(wù)5.1　制作徜徉紅途APP引導(dǎo)頁(yè)1 165
任務(wù)5.2　制作徜徉紅途APP引導(dǎo)頁(yè)2 170
任務(wù)5.3　制作徜徉紅途APP引導(dǎo)頁(yè)3 172
知識(shí)庫(kù) 175
制作“首頁(yè)”頁(yè)面 176
任務(wù)5.4　標(biāo)簽欄導(dǎo)航制作 176
任務(wù)5.5　狀態(tài)欄制作 179
任務(wù)5.6　搜索欄制作 183
任務(wù)5.7　主界面的制作 184
知識(shí)庫(kù) 189
制作“行程”頁(yè)面 190
任務(wù)5.8　制作“行程”頁(yè)面 190
知識(shí)庫(kù) 196
制作“定制”頁(yè)面 196
任務(wù)5.9　制作“定制”頁(yè)面 196
知識(shí)庫(kù) 202
單元6UI動(dòng)效設(shè)計(jì)基礎(chǔ) 203
制作圖標(biāo)動(dòng)效 203
任務(wù)6.1　設(shè)計(jì)圖標(biāo)動(dòng)效 203
APP引導(dǎo)頁(yè)動(dòng)效 210
任務(wù)6.2　制作徜徉紅途APP引導(dǎo)頁(yè)動(dòng)效 210
制作APP界面動(dòng)效 215
任務(wù)6.3　備忘錄APP界面動(dòng)效 215
知識(shí)庫(kù) 221
一、什么是移動(dòng)APP動(dòng)效設(shè)計(jì) 221
二、移動(dòng)APP動(dòng)效的作用 221
三、常用動(dòng)效設(shè)計(jì)工具 222
四、圖標(biāo)動(dòng)效設(shè)計(jì)思路 222