移動(dòng)UI界面設(shè)計(jì)(第2版)(微課版)
定 價(jià):79.8 元
- 作者:張曉景,李曉斌
- 出版時(shí)間:2023/4/1
- ISBN:9787115612281
- 出 版 社:人民郵電出版社
- 中圖法分類(lèi):TN929.53
- 頁(yè)碼:0
- 紙張:
- 版次:02
- 開(kāi)本:16開(kāi)
本書(shū)采用項(xiàng)目引入的方式,針對(duì)iOS系統(tǒng)、Android系統(tǒng)、HarmonyOS系統(tǒng)和微信小程序UI設(shè)計(jì)規(guī)范進(jìn)行講解。全書(shū)采用任務(wù)驅(qū)動(dòng)法帶動(dòng)知識(shí)點(diǎn)的教學(xué)方式,將枯燥的知識(shí)點(diǎn)融入豐富有趣的案例制作中,全面解析移動(dòng)端App UI設(shè)計(jì)的流程及設(shè)計(jì)技巧。書(shū)中案例均使用Adobe XD和PxCook主流UI設(shè)計(jì)軟件制作。本書(shū)共五個(gè)項(xiàng)目,項(xiàng)目一,移動(dòng)UI設(shè)計(jì)基礎(chǔ);項(xiàng)目二,iOS系統(tǒng)UI設(shè)計(jì);項(xiàng)目三,Android系統(tǒng)UI設(shè)計(jì);項(xiàng)目四,HarmonyOS系統(tǒng)UI設(shè)計(jì);項(xiàng)目五,微信小程序UI設(shè)計(jì)。
本書(shū)適合UI設(shè)計(jì)愛(ài)好者、移動(dòng)UI設(shè)計(jì)從業(yè)者閱讀,也適合作為各院校相關(guān)設(shè)計(jì)專業(yè)的參考教材。
1.十三五國(guó)規(guī)。
2.暢銷(xiāo)教材作者撰寫(xiě)。
3.整體框架上做了變化,項(xiàng)目任務(wù)式寫(xiě)法,符合高職使用習(xí)慣。
4.內(nèi)容設(shè)計(jì)上增加了國(guó)產(chǎn)鴻蒙系統(tǒng)及微信小程序UI設(shè)計(jì)。
5.配套豐富的教學(xué)資源及講解操作視頻。
張曉景 Adobe專家組成員。國(guó)家軟件協(xié)會(huì)會(huì)員, 國(guó)家863專業(yè)講師。資深設(shè)計(jì)師,Adobe專家委員會(huì)成員,Adobe網(wǎng)頁(yè)設(shè)計(jì)師認(rèn)證講師,Adobe用戶界面設(shè)計(jì)師,國(guó)家信息產(chǎn)業(yè)部653工程講師,中國(guó)軟件行業(yè)協(xié)會(huì)專家委員,參與國(guó)家開(kāi)放大學(xué)網(wǎng)頁(yè)UI設(shè)計(jì)與制作。
目 錄
項(xiàng)目一 移動(dòng)UI設(shè)計(jì)基礎(chǔ)
相關(guān)知識(shí): 3
1.1 熟悉移動(dòng)UI設(shè)計(jì) 3
1.1.1 了解UI設(shè)計(jì) 3
1.1.2 什么是App 4
1.1.3 移動(dòng)UI設(shè)計(jì)與平面UI設(shè)計(jì)的區(qū)別 5
1.2 移動(dòng)UI設(shè)計(jì)平臺(tái) 7
1.2.1 Android系統(tǒng) 7
1.2.2 HarmonyOS系統(tǒng) 8
1.2.3 iOS系統(tǒng)和iPadOS系統(tǒng) 9
1.2.4 Wear OS和WatchOS系統(tǒng) 11
1.3 移動(dòng)App項(xiàng)目開(kāi)發(fā)職業(yè)劃分 12
1.2.5 產(chǎn)品經(jīng)理 12
1.2.6 項(xiàng)目經(jīng)理 12
1.2.7 頁(yè)面設(shè)計(jì)師 13
1.2.8 開(kāi)發(fā)人員 13
1.4 移動(dòng)UI設(shè)計(jì)常用軟件 13
1.4.1 XMind和Axure RP 13
1.4.2 Photoshop和Sketch 14
1.4.3 Adobe XD和Figma 15
1.4.4 PxCook和Assistor PS 16
任務(wù)實(shí)施: 17
1.5 任務(wù)一 分析移動(dòng)UI設(shè)計(jì)的需求 17
1.5.1 任務(wù)分析——移動(dòng)UI需求分析 17
1.5.2 任務(wù)實(shí)施——“茶道”App的用戶分析 20
1.6 任務(wù)二 移動(dòng)UI交互設(shè)計(jì) 21
1.7.1 任務(wù)分析——移動(dòng)UI交互設(shè)計(jì)流程 21
1.7.2 任務(wù)實(shí)施——設(shè)計(jì)“茶道”App交互原型 24
1.7 任務(wù)三 移動(dòng)UI視覺(jué)設(shè)計(jì) 25
1.7.3 任務(wù)實(shí)施——移動(dòng)UI視覺(jué)設(shè)計(jì)步驟 25
1.7.4 任務(wù)實(shí)施——設(shè)計(jì)“茶道”App首頁(yè)UI 26
1.8 總結(jié)擴(kuò)展 28
1.8.2 項(xiàng)目小結(jié) 28
1.8.3 思政導(dǎo)入 28
1.8.4 拓展案例——設(shè)計(jì)制作“茶道”App其他頁(yè)面UI 28
1.9 課后測(cè)試 28
1.9.1 選擇題 29
1.9.2 判斷題 29
1.9.3 創(chuàng)新題 29
項(xiàng)目二 iOS系統(tǒng)UI設(shè)計(jì)
相關(guān)知識(shí): 31
2.1 屏幕密度與分辨率 31
2.1.1 網(wǎng)點(diǎn)密度和屏幕密度 31
2.1.2 屏幕分辨率 31
2.2 iOS系統(tǒng)界面尺寸和組件 32
2.2.1 iOS系統(tǒng)界面設(shè)計(jì)尺寸 32
2.2.2 iOS系統(tǒng)組件 33
2.3 iOS系統(tǒng)文字設(shè)計(jì)規(guī)范 36
2.3.1 字體 36
2.3.2 字號(hào) 37
2.3.3 顏色和字重 37
2.4 iOS系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范 38
2.5 iOS系統(tǒng)圖片設(shè)計(jì)規(guī)范 39
2.5.1 圖片的比例 40
2.5.2 圖片的格式 41
2.6 iOS系統(tǒng)內(nèi)容布局 41
2.6.1 列表式布局 41
2.6.2 陳列館式布局 42
2.6.3 宮格式布局 42
2.6.4 卡片式布局 43
2.7 iOS系統(tǒng)版式設(shè)計(jì)規(guī)范 44
任務(wù)實(shí)施: 44
2.8 任務(wù)一 設(shè)計(jì)制作App產(chǎn)品原型 44
2.8.1 任務(wù)分析——App UI的尺寸和布局 45
2.8.2 任務(wù)實(shí)施——設(shè)計(jì)制作“茶道”App原型 46
2.9 任務(wù)二 設(shè)計(jì)制作App產(chǎn)品交互流程 51
2.9.1 任務(wù)分析——交互流程設(shè)計(jì)的必要性 51
2.9.2 任務(wù)實(shí)施——設(shè)計(jì)制作“茶道”App頁(yè)面交互 52
2.10 任務(wù)三 設(shè)計(jì)制作App產(chǎn)品視覺(jué)效果 55
2.10.1 任務(wù)分析——確定“茶道”App UI配色方案 56
2.10.2 任務(wù)實(shí)施——設(shè)計(jì)制作“茶道”App視覺(jué)效果 56
2.11 總結(jié)擴(kuò)展 63
2.11.1 項(xiàng)目小結(jié) 63
2.11.2 思政導(dǎo)入 63
2.11.3 拓展案例——設(shè)計(jì)制作“品茶”App界面 63
2.12 課后測(cè)試 63
2.12.1 選擇題 64
2.12.2 判斷題 64
2.12.2 創(chuàng)新題 64
項(xiàng)目三Android系統(tǒng)UI設(shè)計(jì)
相關(guān)知識(shí): 66
3.1 了解Android系統(tǒng)“碎片化” 66
3.2 Android系統(tǒng)單位與尺寸 67
3.2.1 Android系統(tǒng)屏幕密度 67
3.2.2 Android系統(tǒng)單位 68
3.2.3 Android系統(tǒng)設(shè)計(jì)尺寸 68
3.3 Android系統(tǒng)組件設(shè)計(jì)尺寸 69
3.3.1 Android系統(tǒng)組件尺寸 69
3.3.2 Android系統(tǒng)元素間距 69
3.4 Android系統(tǒng)文字設(shè)計(jì)規(guī)范 70
3.4.1 字體 70
3.4.2 字號(hào) 71
3.5 Android系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范 71
3.5.1 圖標(biāo)的尺寸 73
3.5.2 觸摸反饋 74
任務(wù)實(shí)施: 75
3.6 任務(wù)一 設(shè)計(jì)制作旗袍App產(chǎn)品原型與交互 75
3.6.1 任務(wù)分析——旗袍App產(chǎn)品思維導(dǎo)圖與布局分析 75
3.6.2 任務(wù)實(shí)施——設(shè)計(jì)制作旗袍App原型和交互 78
3.7 任務(wù)二 設(shè)計(jì)制作旗袍App圖標(biāo)組與UI 84
3.7.1 任務(wù)分析——圖標(biāo)設(shè)計(jì)的優(yōu)點(diǎn)與原則 84
3.7.2 任務(wù)實(shí)施——設(shè)計(jì)制作旗袍App頁(yè)面UI 85
3.8 任務(wù)三 輸出旗袍App頁(yè)面并完成適配 92
3.8.1 任務(wù)分析——如何做到一稿多用 93
3.8.2 任務(wù)實(shí)施——輸出、適配和標(biāo)注旗袍App頁(yè)面 94
3.9 總結(jié)擴(kuò)展 98
3.9.1 項(xiàng)目小結(jié) 98
3.9.2 思政導(dǎo)入 98
3.9.3 拓展案例——設(shè)計(jì)制作詩(shī)詞App界面 98
3.10 課后測(cè)試 98
3.10.1 選擇題 98
3.10.2 判斷題 99
3.10.3 創(chuàng)新題 99
項(xiàng)目四HarmonyOS系統(tǒng)UI設(shè)計(jì)
相關(guān)知識(shí): 101
4.1 了解HarmonyOS系統(tǒng) 101
4.1.1 HarmonyOS系統(tǒng)的誕生與特點(diǎn) 101
4.1.2 HarmonyOS與iOS和Android的區(qū)別 102
4.2 HarmonyOS系統(tǒng)單位與尺寸 102
4.2.1 HarmonyOS系統(tǒng)的單位 103
4.2.2 HarmonyOS系統(tǒng)的組件尺寸 103
4.3 HarmonyOS系統(tǒng)文字設(shè)計(jì)規(guī)范 105
4.3.1 字體 105
4.1.3 字號(hào) 106
4.1.4 對(duì)齊規(guī)則 106
4.4 HarmonyOS系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范 106
4.4.1 圖標(biāo)圖形大小布局 107
4.4.2 圖標(biāo)圖形的特征 108
4.5 HarmonyOS系統(tǒng)的間距 108
任務(wù)實(shí)施: 110
4.6 任務(wù)一 設(shè)計(jì)制作戲曲App原型 110
4.6.1 任務(wù)分析——項(xiàng)目頁(yè)面尺寸和布局類(lèi)型 110
4.6.2 任務(wù)實(shí)施——設(shè)計(jì)制作戲曲App產(chǎn)品原型 111
4.7 任務(wù)二 設(shè)計(jì)制作戲曲App視覺(jué)效果 117
4.7.1 任務(wù)分析——交互設(shè)計(jì)需要考慮的內(nèi)容 117
4.7.2 任務(wù)實(shí)施——設(shè)計(jì)制作戲曲App視覺(jué)效果 118
4.8 任務(wù)三 輸出與適配戲曲App頁(yè)面 123
4.8.1 任務(wù)分析——“點(diǎn)9”切圖的應(yīng)用 124
4.8.2 任務(wù)實(shí)施——輸出與標(biāo)注戲曲App產(chǎn)品頁(yè)面 127
4.9 總結(jié)擴(kuò)展 133
4.9.1 項(xiàng)目小結(jié) 133
4.9.2 思政導(dǎo)入 133
4.9.3 拓展案例——設(shè)計(jì)制作京劇App界面 133
4.10 課后測(cè)試 133
4.10.1 選擇題 133
4.10.2 判斷題 134
4.10.3 創(chuàng)新題 134
項(xiàng)目五 微信小程序UI設(shè)計(jì)
相關(guān)知識(shí): 136
5.1 了解小程序UI設(shè)計(jì) 136
5.2 小程序UI設(shè)計(jì)尺寸和區(qū)域 137
5.2.1 小程序UI設(shè)計(jì)尺寸 137
5.2.2 小程序UI設(shè)計(jì)區(qū)域 137
5.3 啟動(dòng)頁(yè)加載 140
5.4 小程序UI組件設(shè)計(jì) 141
5.4.1 導(dǎo)航欄設(shè)計(jì) 141
5.4.2 標(biāo)簽欄設(shè)計(jì) 143
5.5 小程序UI文字設(shè)計(jì) 144
5.5.1 字體與字號(hào) 144
5.5.2 字體顏色 145
5.6 任務(wù)一 設(shè)計(jì)制作瓷器小程序原型 145
5.6.1 任務(wù)分析——瓷器小程序UI設(shè)計(jì)分析 146
5.6.2 任務(wù)實(shí)施——設(shè)計(jì)制作瓷器小程序UI原型 147
5.7 任務(wù)二 設(shè)計(jì)制作瓷器小程序視覺(jué)效果 152
5.7.1 任務(wù)分析——瓷器小程序UI配色方案 152
5.7.2 任務(wù)實(shí)施——設(shè)計(jì)制作瓷器小程序UI與交互 152
5.8 任務(wù)三 標(biāo)注與適配瓷器小程序頁(yè)面 158
5.8.1 任務(wù)分析——掌握切片命名規(guī)范 159
5.8.2 任務(wù)實(shí)施——標(biāo)注與輸出瓷器小程序頁(yè)面 161
5.9 總結(jié)擴(kuò)展 167
4.9.1 項(xiàng)目小結(jié) 167
4.9.2 思政導(dǎo)入 167
4.9.3 拓展案例——設(shè)計(jì)制作旅游微信小程序界面 167
5.10 課后測(cè)試 167
5.10.1 選擇題 168
5.10.2 判斷題 168
4.10.3 創(chuàng)新題 168