移動端UI商業(yè)項(xiàng)目實(shí)戰(zhàn)——讓人愛不釋手的移動端UI設(shè)計(jì)

隨著移動互聯(lián)技術(shù)的飛速發(fā)展，“互聯(lián)網(wǎng)+”時(shí)代已經(jīng)悄然到來，這自然催生了各行業(yè)、企業(yè)對UI設(shè)計(jì)人才的大量需求。與傳統(tǒng)美工、設(shè)計(jì)人員相比，新“互聯(lián)網(wǎng)+”時(shí)代對UI設(shè)計(jì)師提出了更高的要求，傳統(tǒng)美工、設(shè)計(jì)人員已無法勝任。在這樣的大環(huán)境下，這套“互聯(lián)網(wǎng)UI設(shè)計(jì)師”系列教材應(yīng)運(yùn)而生，它旨在幫助讀者朋友快速成長為符合“互聯(lián)網(wǎng)+”時(shí)代企業(yè)需求的優(yōu)秀UI設(shè)計(jì)師。

這套教材是由課工場（kgc.cn）的UI/UE教研團(tuán)隊(duì)研發(fā)的。課工場是北大青鳥集團(tuán)下屬企業(yè)北京課工場教育科技有限公司推出的互聯(lián)網(wǎng)教育平臺，專注于互聯(lián)網(wǎng)企業(yè)各崗位人才的培養(yǎng)。平臺匯聚了數(shù)百位來自知名培訓(xùn)機(jī)構(gòu)、高校的頂級名師和互聯(lián)網(wǎng)企業(yè)的行業(yè)專家，面向大學(xué)生以及需要“充電”的在職人員，針對與互聯(lián)網(wǎng)相關(guān)的產(chǎn)品、設(shè)計(jì)、開發(fā)、運(yùn)維、推廣和運(yùn)營等崗位，提供在線的直播和錄播課程，并通過遍及全國的幾十家線下服務(wù)中心提供現(xiàn)場面授以及多種形式的教學(xué)服務(wù)，且同步研發(fā)出版最新的課程教材。

課工場為培養(yǎng)互聯(lián)網(wǎng)UI設(shè)計(jì)人才設(shè)立了UI/UE設(shè)計(jì)學(xué)院及線下服務(wù)中心，提供各種學(xué)習(xí)資源和支持，包括：

　現(xiàn)場面授課程

　在線直播課程

　錄播視頻課程

　案例素材下載

　學(xué)習(xí)交流社區(qū)

　作業(yè)提交批改系統(tǒng)

　QQ討論組（技術(shù)、就業(yè)、生活）

以上所有資源請?jiān)L問課工場UI/UE學(xué)院：kgc.cn/uiue。

■ 本套教材特點(diǎn)

（1）課程高端、實(shí)用——拒絕培養(yǎng)傳統(tǒng)美工。

　培養(yǎng)符合“互聯(lián)網(wǎng)+”時(shí)代需求的高端UI設(shè)計(jì)人才，包括移動UI設(shè)計(jì)師、網(wǎng)頁UI設(shè)計(jì)師、平面UI設(shè)計(jì)師。

　除UI設(shè)計(jì)師所必須具備的技能外，本課程還涵蓋網(wǎng)絡(luò)營銷推廣內(nèi)容，包括：網(wǎng)絡(luò)營銷基本常識、符合SEO標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)、Landing Page設(shè)計(jì)優(yōu)化、營銷型企業(yè)網(wǎng)站設(shè)計(jì)等。

　注重培養(yǎng)產(chǎn)品意識和用戶體驗(yàn)意識，包括電商網(wǎng)站設(shè)計(jì)、店鋪設(shè)計(jì)、用戶體驗(yàn)、交互設(shè)計(jì)等。

　學(xué)習(xí)W3C相關(guān)標(biāo)準(zhǔn)和設(shè)計(jì)規(guī)范，包括HTML5/CSS3、移動端Android/iOS相關(guān)設(shè)計(jì)規(guī)范等內(nèi)容。

（2）真實(shí)商業(yè)項(xiàng)目驅(qū)動——行業(yè)知識、專業(yè)設(shè)計(jì)一個(gè)也不能少。

　與知名4A公司合作，設(shè)計(jì)開發(fā)項(xiàng)目課程。

　幾十個(gè)實(shí)訓(xùn)項(xiàng)目，涵蓋電商、金融、教育、旅游、游戲等行業(yè)。

　不僅注重商業(yè)項(xiàng)目實(shí)訓(xùn)的流程和規(guī)范，還傳遞行業(yè)知識和業(yè)務(wù)需求。

（3）更時(shí)尚的二維碼學(xué)習(xí)體驗(yàn)——傳統(tǒng)紙質(zhì)教材學(xué)習(xí)方式的革命。

　每章提供二維碼掃描，可以直接觀看相關(guān)視頻講解和案例效果。

　課工場UI/UE學(xué)院（kgc.cn）開辟教材配套版塊，提供素材下載、學(xué)習(xí)社區(qū)等豐富的在線學(xué)習(xí)資源。

■ 讀者對象

（1）初學(xué)者：本套教材將幫助你快速進(jìn)入互聯(lián)網(wǎng)UI設(shè)計(jì)行業(yè)，從零開始，逐步成長為專業(yè)UI設(shè)計(jì)師。

（2）設(shè)計(jì)師：本套教材將帶你進(jìn)行全面、系統(tǒng)的互聯(lián)網(wǎng)UI設(shè)計(jì)學(xué)習(xí)，傳遞最全面、科學(xué)的設(shè)計(jì)理論，提供實(shí)用的設(shè)計(jì)技巧和項(xiàng)目經(jīng)驗(yàn)，幫助你向互聯(lián)網(wǎng)方向迅速轉(zhuǎn)型，拓寬設(shè)計(jì)業(yè)務(wù)范圍。

課工場出品（kgc.cn）

第1章   　移動端App設(shè)計(jì)——寫在設(shè)計(jì)之前
本章簡介 2
理論講解 2
1.1 實(shí)際企業(yè)中App設(shè)計(jì)的基本流程 2
1.2 實(shí)際項(xiàng)目中UI設(shè)計(jì)師前期需要確定的內(nèi)容 4
1.3 移動UI三大操作系統(tǒng) 6
1.3.1 Android系統(tǒng)界面 7
1.3.2 iOS系統(tǒng)界面 7
1.3.3 Windows Phone系統(tǒng)界面 8
1.4 與尺寸相關(guān)的術(shù)語概念和標(biāo)準(zhǔn) 9
1.4.1 屏幕尺寸 9
1.4.2 分辨率 10
1.4.3 實(shí)用軟件 10
第2章   　蘑菇街項(xiàng)目——電商類Android手機(jī)
    App設(shè)計(jì)（一）
本章簡介 14
2.1 蘑菇街項(xiàng)目——電商類Android手機(jī)App設(shè)計(jì)需求概述 14
2.1.1 項(xiàng)目名稱 14
2.1.2 項(xiàng)目定位 14
2.1.3 蘑菇街企業(yè)背景 15
2.1.4 蘑菇街App項(xiàng)目需求 16
2.1.5 蘑菇街App風(fēng)格要求 16
2.2 Android系統(tǒng)手機(jī)設(shè)計(jì)規(guī)范 18
2.2.1 Android系統(tǒng)界面尺寸和分辨率 19
2.2.2 Android系統(tǒng)字體與字號 25
2.2.3 Android系統(tǒng)圖標(biāo)設(shè)計(jì) 26
2.3 實(shí)戰(zhàn)案例——蘑菇街Android系統(tǒng)啟動圖標(biāo)設(shè)計(jì) 34
2.4 點(diǎn)9切圖的制作方法 35
2.4.1 點(diǎn)9切圖的概念 36
2.4.2 點(diǎn)9切圖的制作方法 36
2.5 對按鈕進(jìn)行點(diǎn)9切圖 37
本章總結(jié) 38
本章作業(yè) 39
第3章   　蘑菇街項(xiàng)目——電商類Android手機(jī)
    App設(shè)計(jì)（二）
本章簡介 42
3.1 電商類App設(shè)計(jì)理論 42
3.1.1 電商類App的常見分類 42
3.1.2 電商類App的特點(diǎn) 43
3.1.3 電商類App的常見視覺風(fēng)格 44
3.1.4 電商類App的常見功能 46
3.1.5 電商類App的目標(biāo)用戶分析 49
3.2 蘑菇街項(xiàng)目——電商類Android手機(jī)App設(shè)計(jì)分析 50
3.2.1 電商類App的制作流程 50
3.2.2 蘑菇街項(xiàng)目需求及主要目標(biāo)用戶分析 51
3.2.3 蘑菇街項(xiàng)目設(shè)計(jì)規(guī)劃 52
3.2.4 實(shí)戰(zhàn)案例——蘑菇街手機(jī)App關(guān)注頁界面設(shè)計(jì) 54
3.2.5 實(shí)戰(zhàn)案例——蘑菇街手機(jī)App購買（買買買）
   頁界面設(shè)計(jì) 56
3.3 啟動頁與引導(dǎo)頁的技巧及方法 57
3.3.1 啟動頁、引導(dǎo)頁概述 57
3.3.2 啟動頁、引導(dǎo)頁的設(shè)計(jì)原則 63
3.3.3 實(shí)戰(zhàn)案例——蘑菇街App引導(dǎo)頁設(shè)計(jì) 66
本章總結(jié) 70
本章作業(yè) 71
第4章   　課工場項(xiàng)目——教育類iOS手機(jī)
    App設(shè)計(jì)（一）
本章簡介 74
4.1 課工場項(xiàng)目——教育類iOS手機(jī)App設(shè)計(jì)需求概述 74
4.1.1 項(xiàng)目名稱 74
4.1.2 項(xiàng)目定位 74
4.1.3 課工場企業(yè)背景 74
4.1.4 課工場App項(xiàng)目需求 75
4.1.5 課工場App風(fēng)格要求 76
4.2 iOS系統(tǒng)手機(jī)界面設(shè)計(jì)規(guī)范 76
4.2.1 iOS系統(tǒng)界面尺寸和分辨率 77
4.2.2 iOS系統(tǒng)字體與字號 81
4.3 iOS系統(tǒng)圖標(biāo)設(shè)計(jì)尺寸及規(guī)范 82
4.3.1 iOS系統(tǒng)圖標(biāo)設(shè)計(jì)尺寸 82
4.3.2 iOS系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范 83
4.3.3 實(shí)戰(zhàn)案例——為課工場設(shè)計(jì)iOS系統(tǒng)啟動圖標(biāo) 84
4.4 標(biāo)注規(guī)范及設(shè)計(jì)技巧 85
4.4.1 界面標(biāo)注元素 85
4.4.2 界面標(biāo)注技巧 85
4.4.3 實(shí)戰(zhàn)案例——對課工場界面進(jìn)行標(biāo)注 87
本章總結(jié) 90
本章作業(yè) 91
第5章   　課工場項(xiàng)目——教育類iOS手機(jī)App設(shè)計(jì)（二）
本章簡介 94
5.1 教育類App設(shè)計(jì)理論 94
5.1.1 教育類App的常見分類 94
5.1.2 教育類App的優(yōu)勢 95
5.1.3 教育類App的常見視覺風(fēng)格 95
5.1.4 教育類App的常見功能 97
5.1.5 教育類App的目標(biāo)用戶分析 99
5.2 課工場手機(jī)App設(shè)計(jì)分析 100
5.2.1 課工場項(xiàng)目需求分析 100
5.2.2 課工場主要目標(biāo)用戶分析 100
5.2.3 課工場項(xiàng)目設(shè)計(jì)規(guī)劃 100
5.2.4 課工場手機(jī)App首頁設(shè)計(jì) 102
5.3 側(cè)邊欄導(dǎo)航與Tab導(dǎo)航 107
5.3.1 側(cè)邊欄導(dǎo)航與Tab導(dǎo)航概述 108
5.3.2 側(cè)邊欄導(dǎo)航與Tab導(dǎo)航的差異 110
5.3.3 實(shí)戰(zhàn)案例——課工場手機(jī)App側(cè)邊欄界面設(shè)計(jì) 111
5.4 整套圖標(biāo)的設(shè)計(jì)原則和注意事項(xiàng) 113
5.4.1 整套圖標(biāo)的設(shè)計(jì)原則 114
5.4.2 整套圖標(biāo)的注意事項(xiàng) 115
5.4.3 實(shí)戰(zhàn)案例——教育類App界面中需要調(diào)整的整套圖標(biāo) 116
本章總結(jié) 118
本章作業(yè) 119
第6章   　1號藥店項(xiàng)目——醫(yī)療類手機(jī)App設(shè)計(jì)
本章簡介 122
6.1 1號藥店項(xiàng)目——醫(yī)療類手機(jī)App設(shè)計(jì)需求概述 122
6.1.1 項(xiàng)目名稱 122
6.1.2 項(xiàng)目定位 122
6.1.3 1號藥店企業(yè)背景 123
6.1.4 1號藥店App項(xiàng)目需求 123
6.1.5 1號藥店App風(fēng)格要求 123
6.2 醫(yī)療類App設(shè)計(jì)理論 123
6.2.1 醫(yī)療類App的常見分類 123
6.2.2 醫(yī)療類App的特點(diǎn) 124
6.2.3 醫(yī)療類App的常見功能 125
6.2.4 醫(yī)療類App的目標(biāo)用戶分析 126
6.2.5 醫(yī)療類App的常見視覺風(fēng)格 126
6.3 擬物化設(shè)計(jì) 127
6.3.1 擬物化設(shè)計(jì)的概念 128
6.3.2 擬物化風(fēng)格界面的優(yōu)缺點(diǎn) 130
6.3.3 擬物化設(shè)計(jì)的技巧 131
6.3.4 擬物化設(shè)計(jì)的制作步驟 132
6.3.5 實(shí)戰(zhàn)案例——1號藥店啟動圖標(biāo)設(shè)計(jì) 132
6.3.6 實(shí)戰(zhàn)案例——1號藥店書架界面設(shè)計(jì) 134
6.4 iOS系統(tǒng)與Android系統(tǒng)原生App圖標(biāo)與界面的比較 137
6.4.1 iOS系統(tǒng)與Android系統(tǒng)的差異 137
6.4.2 iOS系統(tǒng)與Android系統(tǒng)原生圖標(biāo)的比較 138
6.4.3 iOS系統(tǒng)與Android系統(tǒng)原生App界面的比較 138
6.4.4 實(shí)戰(zhàn)案例——雙系統(tǒng)下的1號藥店界面原型圖設(shè)計(jì) 142
6.5 1號藥店項(xiàng)目——醫(yī)療類手機(jī)App設(shè)計(jì)分析 144
6.5.1 1號藥店項(xiàng)目需求及主要目標(biāo)用戶分析 144
6.5.2 1號藥店項(xiàng)目設(shè)計(jì)規(guī)劃 144
6.5.3 實(shí)戰(zhàn)案例——1號藥店手機(jī)App首頁界面設(shè)計(jì) 145
6.6 移動端App登錄、注冊界面設(shè)計(jì) 147
6.6.1 移動端登錄、注冊界面的設(shè)計(jì)原則和注意事項(xiàng) 147
6.6.2 移動端登錄、注冊界面的設(shè)計(jì)方法 148
6.6.3 實(shí)戰(zhàn)案例——1號藥店登錄原型圖界面設(shè)計(jì) 152
本章總結(jié) 155
本章作業(yè) 156
第7章   　刀塔傳奇項(xiàng)目——游戲類手機(jī)App設(shè)計(jì)
本章簡介 158
7.1 刀塔傳奇項(xiàng)目——游戲類手機(jī)App設(shè)計(jì)需求概述 158
7.1.1 項(xiàng)目名稱 158
7.1.2 項(xiàng)目定位 158
7.1.3 刀塔傳奇背景 159
7.1.4 刀塔傳奇App項(xiàng)目需求 159
7.1.5 刀塔傳奇App風(fēng)格要求 159
7.2 游戲類App設(shè)計(jì)理論 159
7.2.1 游戲類App的常見分類 160
7.2.2 游戲類App的特點(diǎn) 163
7.2.3 游戲類App的常見視覺風(fēng)格 163
7.2.4 游戲類App的目標(biāo)用戶分析和注意事項(xiàng) 165
7.2.5 游戲類App的制作流程 166
7.2.6 游戲類App的設(shè)計(jì)原則 168
7.2.7 充分考慮用戶體驗(yàn)與交互 174
7.3 游戲類App界面的設(shè)計(jì)技巧 179
7.4 刀塔傳奇項(xiàng)目——游戲類手機(jī)App設(shè)計(jì) 182
7.4.1 刀塔傳奇項(xiàng)目需求和主要目標(biāo)用戶分析 182
7.4.2 實(shí)戰(zhàn)案例——刀塔傳奇手機(jī)App場景界面設(shè)計(jì) 182
7.4.3 實(shí)戰(zhàn)案例——刀塔傳奇手機(jī)App英雄詳情頁設(shè)計(jì) 190
7.4.4 實(shí)戰(zhàn)案例——刀塔傳奇手機(jī)App全部英雄列表頁設(shè)計(jì) 192
本章總結(jié) 195
本章作業(yè) 196
第8章   　南豐鼎軒項(xiàng)目——餐飲類Pad端App設(shè)計(jì)
本章簡介 198
8.1 南豐鼎軒項(xiàng)目——餐飲類Pad端App設(shè)計(jì)需求概述 198
8.1.1 項(xiàng)目名稱 198
8.1.2 項(xiàng)目定位 198
8.2 餐飲類App設(shè)計(jì)理論 199
8.2.1 餐飲類App行業(yè)介紹 199
8.2.2 餐飲類App的分類 199
8.2.3 餐飲類App的常見功能 199
8.2.4 餐飲類App的制作流程 200
8.3 Pad端App設(shè)計(jì)的基礎(chǔ)理論 201
8.3.1 相關(guān)概念理論 201
8.3.2 Pad端App界面的設(shè)計(jì)規(guī)范 202
8.3.3 Pad端App的設(shè)計(jì)方法和用戶體驗(yàn) 203
8.4 南豐鼎軒項(xiàng)目——餐飲類手機(jī)App設(shè)計(jì) 205
8.4.1 南豐鼎軒企業(yè)及項(xiàng)目分析 205
8.4.2 實(shí)戰(zhàn)案例——南豐鼎軒點(diǎn)餐App開屏首頁設(shè)計(jì) 207
8.4.3 實(shí)戰(zhàn)案例——南豐鼎軒點(diǎn)餐App點(diǎn)餐界面設(shè)計(jì) 210
本章總結(jié) 212
本章作業(yè) 213
第9章   　移動端App設(shè)計(jì)——寫在設(shè)計(jì)之后
本章簡介 216
9.1 規(guī)范的重要性 216
9.1.1 重要的規(guī)范 216
9.1.2 變化著的設(shè)計(jì)規(guī)范 218
9.2 設(shè)計(jì)的流行趨勢 220
9.2.1 設(shè)計(jì)風(fēng)格的發(fā)展與延展 220
9.2.2 如何緊跟時(shí)代潮流掌握最新的設(shè)計(jì)流行趨勢 222
9.2.3 不盲目屈從流行趨勢，視覺風(fēng)格要從項(xiàng)目出發(fā) 223
9.3 從產(chǎn)品的角度看設(shè)計(jì) 223
本章總結(jié) 227

1. 深入淺出OpenHarmony——架構(gòu)、內(nèi)核、驅(qū)動及應(yīng)用開發(fā)全棧 [李傳釗 著]
2. Android高級程序設(shè)計(jì) [主編　周雯　舒松]
3. 基于Android平臺的移動開發(fā)技術(shù) [主編 徐碩博 黃衛(wèi)東 賈雁]
4. Android 應(yīng)用開發(fā)項(xiàng)目實(shí)戰(zhàn) [主編 梁 琨 朱冰鴻]
5. Android應(yīng)用開發(fā)基礎(chǔ)教程 [主編 巫湘林]
6. Java ME手機(jī)應(yīng)用程序開發(fā) [易燦 李志勇 編著]
7. 移動終端服務(wù)器管理與開發(fā) [主編 熊偉 曹天人]
8. 移動終端UI界面設(shè)計(jì)項(xiàng)目教程 [主編 沈強(qiáng)]
9. Android軟件應(yīng)用與實(shí)踐 [主編 梁平 高峰]
10. 移動端UI設(shè)計(jì)及規(guī)范——分分鐘搞定App UI設(shè)計(jì) [北京課工場教育科技有限公司Q]
11. Visual C++ & Android程序設(shè)計(jì)綜合實(shí)訓(xùn)（第二版） [主編 梁建武]
12. Android開發(fā)實(shí)用教程 [主編 王建華 張偉]
13. 單片機(jī)原理及應(yīng)用設(shè)計(jì)（第二版） [主編 胡輝 ]
14. C++應(yīng)用程序設(shè)計(jì) [劉彥姝 謝景偉]
15. Android基礎(chǔ)教程 [余 平 張建華]
16. ANSYS非線性有限元分析方法及范例應(yīng)用 [張洪偉 高相勝 張慶余 編著]
17. ANSYS信號完整性分析與仿真實(shí)例 [房麗麗 編著]
18. Android 4.X手機(jī)/平板電腦程序設(shè)計(jì)入門、應(yīng)用到精通（第二版） [孫宏明 著]
19. 壓力容器全模型ANSYS分析與強(qiáng)度計(jì)算新規(guī)范 [欒春遠(yuǎn) 編著]
20. Android開發(fā)完全講義（第二版） [李寧 編著]
21. Android手機(jī)程序設(shè)計(jì)入門、應(yīng)用到精通 [孫宏明 著]
22. ANSYS 13.0 Workbench數(shù)值模擬技術(shù) [許京荊]
23. Exchange Server 2010 SP1 實(shí)戰(zhàn)精粹 [職念文]
24. 單片機(jī)原理及應(yīng)用設(shè)計(jì) [胡輝 主編]