移動(dòng)UI設(shè)計(jì)實(shí)戰(zhàn)（微課版）
定 價(jià)：69.8 元
叢書名：“十三五”高等院校數(shù)字藝術(shù)精品課程規(guī)劃教材
- 作者：張磊 黃瑋雯
- 出版時(shí)間：2021/8/1
- ISBN：9787115546722
- 出 版 社：人民郵電出版社
- 中圖法分類：TN929.53
- 頁(yè)碼：
- 紙張：膠版紙
- 版次：
- 開本：128開
內(nèi)容提要
本書以項(xiàng)目引入的方式講解，針對(duì)iOS系統(tǒng)和Android系統(tǒng)兩種移動(dòng)設(shè)備界面的結(jié)構(gòu)及設(shè)計(jì)規(guī)范進(jìn)行學(xué)習(xí)。采用案例帶動(dòng)知識(shí)點(diǎn)的教學(xué)方式，將枯燥的知識(shí)點(diǎn)融入豐富有趣的案例制作中，全面解析移動(dòng)端App界面設(shè)計(jì)的流程及設(shè)計(jì)技巧。書中案例使用Adobe XD、Photoshop和PxCook主流UI設(shè)計(jì)軟件制作。
本書共5個(gè)項(xiàng)目。項(xiàng)目1，移動(dòng)UI界面設(shè)計(jì)基礎(chǔ)；項(xiàng)目2，掌握移動(dòng)UI圖標(biāo)設(shè)計(jì)；
項(xiàng)目3，iOS系統(tǒng)電子商務(wù)App界面設(shè)計(jì)；項(xiàng)目4，iOS系統(tǒng)美食App界面設(shè)計(jì)；項(xiàng)目5，Android系統(tǒng)創(chuàng)意家居App界面設(shè)計(jì)。
本書將提供全部案例的素材、源文件和教學(xué)視頻，讀者可以結(jié)合書、練習(xí)文件和教學(xué)視頻，提升移動(dòng)端App UI界面設(shè)計(jì)的學(xué)習(xí)效率。
本書適合UI設(shè)計(jì)愛(ài)好者、App界面設(shè)計(jì)、移動(dòng)UI設(shè)計(jì)從業(yè)者閱讀，也適合作為各院校相關(guān)設(shè)計(jì)專業(yè)的參考教材。
1.本書采用全新的寫法，走在同類選題之前。
2.全書將針對(duì)移動(dòng)UI設(shè)計(jì)領(lǐng)域中為常見(jiàn)的行業(yè)進(jìn)行講解，即有利于讀者理解，又方便查找相關(guān)內(nèi)容學(xué)習(xí)。
3.本書中將用戶體驗(yàn)知識(shí)點(diǎn)融入到移動(dòng)UI設(shè)計(jì)案例中。在教會(huì)讀者設(shè)計(jì)移動(dòng)UI界面的同時(shí)，也告訴讀者為什么4.慕課視頻。幫助讀者加深理解，強(qiáng)化操作。
5.每個(gè)知識(shí)點(diǎn)針對(duì)一個(gè)真實(shí)的案例進(jìn)行分析，也能夠幫助讀者鞏固所學(xué)內(nèi)容。
Adobe專家組成員。國(guó)家軟件協(xié)會(huì)會(huì)員， 國(guó)家863專業(yè)講師。
出版過(guò)多本暢銷教材，深受讀者好評(píng)
從事UI設(shè)計(jì)工作多年，曾出版多本UI設(shè)計(jì)方面的暢銷書籍。
項(xiàng)目1 移動(dòng)UI界面設(shè)計(jì)基礎(chǔ)
1.1 熟悉移動(dòng)UI設(shè)計(jì) 1
1.1.1 了解UI設(shè)計(jì) 1
1.1.2 了解移動(dòng)UI設(shè)計(jì) 2
1.1.3 移動(dòng)UI與平面UI 2
1.2 移動(dòng)UI設(shè)計(jì)的平臺(tái)分類 4
1.2.1 Android系統(tǒng) 4
1.2.2 iOS系統(tǒng) 6
1.2.3 Wear OS系統(tǒng)和Watch OS系統(tǒng) 7
1.3 了解移動(dòng)UI設(shè)計(jì)常用軟件 8
1.3.1 Axure RP和Adobe XD 8
1.3.2 Photoshop和Sketch 9
1.3.3 PxCook和Assistor PS 10
1.4 分析互聯(lián)網(wǎng)產(chǎn)品的需求 11
1.4.1 知識(shí)鏈接——互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)流程 11
1.4.2 技術(shù)引入——了解互聯(lián)網(wǎng)產(chǎn)品職業(yè)劃分 11
1.4.3 實(shí)戰(zhàn)案例——分析互聯(lián)網(wǎng)產(chǎn)品需求 13
1.5 設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品交互效果 15
1.5.1 知識(shí)鏈接——互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計(jì)流程 15
1.5.2 技術(shù)引入——了解交互設(shè)計(jì)和交互設(shè)計(jì)師 16
1.5.3 實(shí)戰(zhàn)案例——分析互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計(jì) 17
1.6 設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品視覺(jué)效果 19
1.6.1 知識(shí)鏈接——互聯(lián)網(wǎng)產(chǎn)品配色趨勢(shì) 20
1.6.2 技術(shù)引入——頁(yè)面布局影響視覺(jué)效果 22
1.6.3 實(shí)戰(zhàn)案例——互聯(lián)網(wǎng)產(chǎn)品視覺(jué)設(shè)計(jì)流程 24
1.6 舉一反三——互聯(lián)網(wǎng)產(chǎn)品專屬色彩的變更 25
1.7 本章小結(jié) 27
1.8 課后測(cè)試 27
1.8.1 選擇題 27
1.8.2 判斷題 28
1.8.3 創(chuàng)新題 28
項(xiàng)目2 掌握移動(dòng)UI圖標(biāo)設(shè)計(jì)
2.1 圖標(biāo)設(shè)計(jì)的必要性 29
2.2 了解圖標(biāo)柵格系統(tǒng) 30
2.2.1 系統(tǒng)圖標(biāo)柵格 31
2.2.2 不同造型圖標(biāo)的柵格規(guī)范 31
2.3 圖標(biāo)集的制作流程 33
2.31. 創(chuàng)建制作清單 33
2.3.2 設(shè)計(jì)草圖 33
2.3.3 數(shù)字呈現(xiàn) 34
2.3.4 確定終效果 34
2.3.5 命名并導(dǎo)出 34
2.4 移動(dòng)UI圖標(biāo)設(shè)計(jì)形式 34
2.4.1 中文形式 34
2.4.2 英文形式 36
2.4.3 圖形形式 37
2.4.4 數(shù)字和特殊符號(hào)形式 37
2.5 設(shè)計(jì)制作工具圖標(biāo) 38
2.5.1 知識(shí)鏈接——工具圖標(biāo)的設(shè)計(jì)風(fēng)格 38
2.5.2 技術(shù)引入——Android系統(tǒng)圖標(biāo)分類和尺寸 39
2.5.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作產(chǎn)品工具圖標(biāo) 41
2.6 設(shè)計(jì)制作裝飾圖標(biāo) 45
2.6.1 知識(shí)鏈接——裝飾圖標(biāo)設(shè)計(jì)風(fēng)格 46
2.6.2 技術(shù)引入——iOS系統(tǒng)圖標(biāo)尺寸 47
2.6.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作饒舌音樂(lè)風(fēng)格裝飾圖標(biāo) 48
2.7 設(shè)計(jì)制作啟動(dòng)圖標(biāo) 51
2.7.1 知識(shí)鏈接——啟動(dòng)圖標(biāo)設(shè)計(jì)形式 51
2.7.2 技術(shù)引入——啟動(dòng)圖標(biāo)設(shè)計(jì)要求與規(guī)范 52
2.7.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作收音機(jī)APP啟動(dòng)圖標(biāo) 54
2.8 舉一反三——設(shè)計(jì)制作iOS系統(tǒng)圖標(biāo) 60
2.9 本章小結(jié) 60
2.10 課后測(cè)試 61
2.10.1 選擇題 61
2.10.2 判斷題 61
2.10.3 創(chuàng)新題 61
項(xiàng)目3 iOS系統(tǒng)電子商務(wù)APP界面設(shè)計(jì)
3.1 電子商務(wù)APP項(xiàng)目——“約起”界面設(shè)計(jì) 63
3.1.1 分析電子商務(wù)APP項(xiàng)目背景 63
3.1.2 繪制電子商務(wù)APP項(xiàng)目用戶畫像 64
3.2 電子商務(wù)APP草圖制作 64
3.2.1 電子商務(wù)類APP界面尺寸 64
3.2.2 電子商務(wù)類APP界面布局類型 65
3.2.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作電子商務(wù)APP“首頁(yè)”草圖 66
3.3 電子商務(wù)APP界面色彩搭配 69
3.3.1 電子商務(wù)APP界面主色的確定 69
3.3.2 電子商務(wù)APP輔色的確定 69
3.3.3 電子商務(wù)APP文本色確定 69
3.4 電子商務(wù)APP界面頁(yè)面元素分析 70
3.4.1 界面中的圖標(biāo)設(shè)置 70
3.4.2 界面中的圖片設(shè)置 70
3.4.3 界面中的文字設(shè)置 71
3.4.4 實(shí)戰(zhàn)案例——設(shè)計(jì)制作電子商務(wù)APP圖標(biāo)組 71
3.5 電子商務(wù)APP界面設(shè)計(jì) 73
3.5.1 知識(shí)鏈接——了解像素與分辨率 73
3.5.2 技術(shù)引入——iOS系統(tǒng)界面設(shè)計(jì)尺寸 74
3.5.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作電子商務(wù)APP界面 75
3.6 電子商務(wù)APP交互設(shè)計(jì) 80
3.6.1 交互設(shè)計(jì)的重要性 80
3.6.2 交互設(shè)計(jì)的基本流程 81
3.6.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作電子商務(wù)APP交互效果 82
3.7 電子商務(wù)APP界面的標(biāo)注 84
3.7.1 位置與尺寸標(biāo)注 84
3.7.2 色彩與字號(hào)標(biāo)注 85
3.7.3 實(shí)戰(zhàn)案例——使用PxCook完成“首頁(yè)”界面的標(biāo)注 85
3.8 電子商務(wù)APP界面適配 89
3.8.1 iOS系統(tǒng)向下和向上適配 89
3.8.2 適配切片命名規(guī)范 91
3.8.3 實(shí)戰(zhàn)案例——使用Adobe XD完成“首頁(yè)”界面的適配輸出 92
3.9 舉一反三——設(shè)計(jì)制作電子商務(wù)APP界面 94
3.10 本章小結(jié) 94
3.11 課后測(cè)試 95
3.11.1 選擇題 95
3.11.2 判斷題 95
3.11.3 創(chuàng)新題 95
項(xiàng)目4 iOS系統(tǒng)美食APP界面設(shè)計(jì)
4.1 美食APP項(xiàng)目——“吃吃喝喝”界面設(shè)計(jì) 97
4.1.1 分析美食APP項(xiàng)目背景 97
4.1.2 繪制美食APP項(xiàng)目用戶畫像 98
4.2 美食APP草圖制作 98
4.2.1 美食APP界面尺寸 98
4.2.2 美食APP界面布局類型 99
4.2.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作美食APP“首頁(yè)”草圖 100
4.3 美食APP界面色彩搭配 104
4.3.1 美食APP界面主色的確定 104
4.3.2 美食APP輔色的確定 104
4.3.3 美食APP文本色確定 105
4.4 美食APP界面頁(yè)面元素分析 105
4.4.1 界面中的圖片設(shè)置 105
4.4.2 界面中的文字設(shè)置 106
4.4.3 界面中的圖標(biāo)設(shè)置 106
4.4.4 實(shí)戰(zhàn)案例——設(shè)計(jì)制作美食APP圖標(biāo)組 107
4.5 美食APP界面設(shè)計(jì) 109
4.5.1 知識(shí)鏈接——了解APP界面中的邊距 109
4.5.2 技術(shù)引入——設(shè)置APP內(nèi)容間距 110
4.5.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作美食APP界面 111
4.6 美食APP交互設(shè)計(jì) 115
4.6.1 Adobe XD檢查APP界面交互 115
4.6.2 實(shí)戰(zhàn)案例——設(shè)計(jì)制作電子商務(wù)APP交互效果 116
4.7 美食APP界面標(biāo)注 118
4.7.1 APP界面標(biāo)注內(nèi)容 118
4.7.2 列一份總表 118
4.7.3 實(shí)戰(zhàn)案例——使用PxCook標(biāo)注美食APP界面 119
4.8 美食APP界面適配與切圖 122
4.8.1 iOS系統(tǒng)適配iPhone X 122
4.8.2 切圖操作中的兩個(gè)重要因素 123
4.8.3 實(shí)戰(zhàn)案例——完成“首頁(yè)”界面素材切片輸出 123
4.9 舉一反三——設(shè)計(jì)制作外賣APP界面 125
4.10 本章小結(jié) 126
4.11 課后測(cè)試 126
4.11.1 選擇題 126
4.11.2 判斷題 127
4.11.3 創(chuàng)新題 127
項(xiàng)目5 Android系統(tǒng)創(chuàng)意家居APP界面設(shè)計(jì)
5.1 創(chuàng)意家居APP項(xiàng)目——“ICON”界面設(shè)計(jì) 128
4.1.1 完成創(chuàng)意家居APP思維導(dǎo)圖 128
4.1.2 繪制創(chuàng)意家居APP項(xiàng)目用戶畫像 130
5.2 創(chuàng)意家居APP草圖制作 130
5.2.1 創(chuàng)意家居APP界面布局分析 130
5.2.2 創(chuàng)意家居APP界面布局類型 131
5.2.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作創(chuàng)意家居APP草圖 132
5.3 創(chuàng)意家居APP界面色彩搭配 138
5.3.1 創(chuàng)意家居APP界面主色的確定 138
5.3.2 創(chuàng)意家居APP輔色的確定 139
5.3.3 創(chuàng)意家居APP文本色確定 139
5.4 創(chuàng)意家居APP界面頁(yè)面元素分析 139
5.4.1 界面元素間距設(shè)置 139
5.4.2 界面中的文本設(shè)置 140
5.4.3 界面中的圖標(biāo)設(shè)置 141
5.4.4 實(shí)戰(zhàn)案例——設(shè)計(jì)制作創(chuàng)意家居APP圖標(biāo)組 142
5.5 創(chuàng)意家居APP界面設(shè)計(jì) 146
5.5.1 知識(shí)鏈接——了解屏幕密度和開發(fā)單位 146
5.5.2 技術(shù)引入——了解Android系統(tǒng)的開發(fā)單位 147
5.5.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作創(chuàng)意家居APP界面 147
5.6 創(chuàng)意家居APP交互設(shè)計(jì) 152
5.6.1 交互設(shè)計(jì)需要考慮的內(nèi)容 153
5.6.2 交互設(shè)計(jì)需要遵循的習(xí)慣 153
5.6.3 實(shí)戰(zhàn)案例——設(shè)計(jì)制作創(chuàng)意教具APP交互效果 154
5.7 創(chuàng)意家居APP界面標(biāo)注 158
5.7.1 Android系統(tǒng)界面的標(biāo)注 158
5.7.2 實(shí)戰(zhàn)案例——使用PxCook標(biāo)注創(chuàng)意家居APP界面 159
5.8 創(chuàng)意家居APP界面切圖與適配 163
5.8.1 Android系統(tǒng)中的“點(diǎn)9”切圖 163
5.8.2 如何做到一稿兩用 166
5.8.3 實(shí)戰(zhàn)案例——完成“首頁(yè)”界面素材切片輸出 167
5.9 舉一反三——設(shè)計(jì)制作創(chuàng)意家居APP其他頁(yè)面 169
5.10 本章小結(jié) 169
5.11 課后測(cè)試 169
5.11.1 選擇題 169
5.11.2 判斷題 170
5.11.3 創(chuàng)新題 170
書單推薦
