移動端UI設(shè)計(jì)及規(guī)范——分分鐘搞定App UI設(shè)計(jì)

注重實(shí)用技能培養(yǎng)——打造“互聯(lián)網(wǎng)+”UI 設(shè)計(jì)師 突出創(chuàng)意設(shè)計(jì)訓(xùn)練——授人以漁而不只是作品臨摹

真實(shí)商業(yè)項(xiàng)目驅(qū)動——行業(yè)知識與專業(yè)設(shè)計(jì)相呼應(yīng) 學(xué)習(xí)體驗(yàn)時尚前衛(wèi)——傳統(tǒng)教材與二維碼革命性攜手

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

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

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

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

（3）更時尚的二維碼學(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）

前言
課程設(shè)計(jì)說明
關(guān)于引用作品的版權(quán)聲明
第1章   　移動App圖標(biāo)的基本概念及設(shè)計(jì)方法
本章簡介 2
理論講解 2
1.1 移動UI設(shè)計(jì)的相關(guān)概念 2
1.2 移動UI三大操作系統(tǒng) 3
1.2.1 Android系統(tǒng)界面 3
1.2.2 iOS系統(tǒng)界面 3
1.2.3 Windows Phone系統(tǒng)界面 4
1.3 移動UI設(shè)計(jì)常用軟件 5
1.3.1 Photoshop 5
1.3.2 Illustrator 6
1.3.3 CorelDraw 7
1.4 移動UI常見儲存格式 8
1.4.1 JPEG（.jpg） 8
1.4.2 GIF（.gif） 8
1.4.3 PNG（.png） 8
1.5 尺寸相關(guān)的術(shù)語概念和標(biāo)準(zhǔn) 9
1.5.1 屏幕尺寸 9
1.5.2 分辨率 9
1.5.3 屏幕密度 10
1.6 初入圖標(biāo)世界 11
1.6.1 圖標(biāo)的概念 12
1.6.2 圖標(biāo)的分類 14
1.6.3 啟動圖標(biāo)的規(guī)范 18
1.6.4 圖標(biāo)的設(shè)計(jì)方法 19
實(shí)戰(zhàn)案例 20
本章總結(jié) 22
本章作業(yè) 23
第2章   　扁平化圖標(biāo)——長陰影風(fēng)格
本章簡介 28
理論講解 28
2.1 扁平化設(shè)計(jì)的概念和特點(diǎn) 28
2.1.1 扁平化設(shè)計(jì)的概念 28
2.1.2 扁平化設(shè)計(jì)的原則 30
2.1.3 扁平化設(shè)計(jì)的特點(diǎn) 33
2.2 扁平化設(shè)計(jì)成為發(fā)展趨勢 34
2.3 扁平化圖標(biāo)的風(fēng)格分類 35
2.4 扁平化圖標(biāo)的優(yōu)缺點(diǎn) 38
2.4.1 扁平化圖標(biāo)的優(yōu)點(diǎn) 38
2.4.2 扁平化圖標(biāo)的缺點(diǎn) 38
2.5 長陰影風(fēng)格相關(guān)知識 39
實(shí)戰(zhàn)案例 40
本章總結(jié) 42
本章作業(yè) 43
第3章   　扁平化圖標(biāo)——折紙風(fēng)格
本章簡介 46
理論講解 46
3.1 折紙風(fēng)格圖標(biāo)分析 46
3.2 折紙風(fēng)格圖標(biāo)的藝術(shù)特征 46
實(shí)戰(zhàn)案例 48
本章總結(jié) 50
本章作業(yè) 51
第4章   　扁平化圖標(biāo)——iOS風(fēng)格
本章簡介 54
理論講解 54
4.1 iOS簡介 54
4.2 iOS圖標(biāo)分析 55
4.2.1 應(yīng)用圖標(biāo) 55
4.2.2 欄圖標(biāo) 55
4.2.3 iOS新扁平化PK舊擬物化 56
4.3 iOS圖標(biāo)設(shè)計(jì)規(guī)范 57
4.3.1 iOS啟動圖標(biāo)設(shè)計(jì)規(guī)范 58
4.3.2 iOS圖標(biāo)文字規(guī)范 59
實(shí)戰(zhàn)案例 60
本章總結(jié) 61
本章作業(yè) 62
第5章   　擬物化圖標(biāo)——日歷
本章簡介 64
理論講解 64
5.1 擬物化設(shè)計(jì)的概念 64
5.2 擬物化設(shè)計(jì)的優(yōu)缺點(diǎn) 66
5.2.1 擬物化設(shè)計(jì)的優(yōu)點(diǎn) 66
5.2.2 擬物化設(shè)計(jì)的缺點(diǎn) 68
5.3 擬物化圖標(biāo)欣賞 68
5.4 啟動圖標(biāo)的制作尺寸 68
實(shí)戰(zhàn)案例 69
本章總結(jié) 71
本章作業(yè) 72
第6章   　擬物化圖標(biāo)——抽屜郵件
本章簡介 76
理論講解 76
6.1 擬物化啟動圖標(biāo)的設(shè)計(jì)流程 76
6.2 啟動圖標(biāo)的設(shè)計(jì)原則 78
實(shí)戰(zhàn)案例 81
6.3 “抽屜郵件”啟動圖標(biāo)制作方法分析 81
6.3.1 圖標(biāo)制作步驟 81
6.3.2 通過實(shí)際案例講解圖標(biāo)的設(shè)計(jì)流程 81
6.4 案例實(shí)操：PS圖層樣式的實(shí)際應(yīng)用 83
本章總結(jié) 84
本章作業(yè) 85
第7章   　擬物化圖標(biāo)——照相機(jī)
本章簡介 88
理論講解 88
7.1 擬物化相機(jī)圖標(biāo)案例解析 88
7.1.1 項(xiàng)目需求 88
7.1.2 案例解析步驟 89
7.2 擬物化相機(jī)圖標(biāo)制作方法 91
7.3 制作過程中的重難點(diǎn)提示 92
本章總結(jié) 93
本章作業(yè) 94
第8章    Android系統(tǒng)UI設(shè)計(jì)規(guī)范（一）
本章簡介 96
理論講解 96
8.1 移動端手機(jī)界面設(shè)計(jì)原則 96
8.1.1 移動設(shè)備的概念 96
8.1.2 移動設(shè)備界面的設(shè)計(jì)原則 97
8.2 Android手機(jī)界面設(shè)計(jì)基礎(chǔ) 100
8.2.1 Android簡介 100
8.2.2 Android App特性 101
8.3 Android界面設(shè)計(jì)尺寸規(guī)范 102
8.3.1 界面尺寸及分辨率 102
8.3.2 界面基本組成元素 103
8.3.3 字體規(guī)范 105
實(shí)戰(zhàn)案例 107
本章總結(jié) 109
本章作業(yè) 110
第9章   　Android系統(tǒng)UI設(shè)計(jì)規(guī)范（二）
本章簡介 112
理論講解 112
9.1 從設(shè)計(jì)師的角度理解px和dp 112
9.2 Android界面中的圖標(biāo)規(guī)范 113
9.3 原生Android界面的色彩參考 115
9.4 Android界面尺寸標(biāo)注 116
實(shí)戰(zhàn)案例 120
本章總結(jié) 123
本章作業(yè) 124
第10章   　iOS系統(tǒng)UI設(shè)計(jì)規(guī)范（一）
本章簡介 128
理論講解 128
10.1 iOS系統(tǒng)簡介 128
10.2 iOS6與iOS7界面風(fēng)格對比 129
10.3 iOS App界面設(shè)計(jì)尺寸規(guī)范 133
10.3.1 界面尺寸及分辨率 133
10.3.2 界面基本組成元素 133
10.3.3 字體規(guī)范 135
實(shí)戰(zhàn)案例 137
本章總結(jié) 139
本章作業(yè) 140
第11章    iOS系統(tǒng)UI設(shè)計(jì)規(guī)范（二）
本章簡介 142
理論講解 142
11.1 iOS App設(shè)計(jì)技巧 142
11.2 iOS的配色 148
實(shí)戰(zhàn)案例 150
本章總結(jié) 153
本章作業(yè) 154
第12章   　綜合項(xiàng)目——休閑娛樂類App設(shè)計(jì)
本章簡介 156
項(xiàng)目實(shí)戰(zhàn) 157
12.1 設(shè)計(jì)制作Android應(yīng)用程序“生活幫幫幫”App界面 157
12.1.1 理論概要 157
12.1.2 項(xiàng)目思路分析 161
12.2 Android應(yīng)用程序項(xiàng)目案例——“生活幫幫幫”項(xiàng)目需求概述 162
12.2.1 項(xiàng)目名稱 162
12.2.2 項(xiàng)目背景 162
12.2.3 目標(biāo)用戶 162
12.2.4 主要功能 162
12.3 “生活幫幫幫”界面設(shè)計(jì)實(shí)現(xiàn)思路 164
12.3.1 內(nèi)容優(yōu)先，合理布局 164
12.3.2 界面的繪制和構(gòu)造 165
12.3.3 功能架構(gòu) 165
12.3.4 色彩運(yùn)用 166
12.3.5 技能要點(diǎn) 167
12.3.6 設(shè)計(jì)前的注意事項(xiàng) 167
本章總結(jié) 168

1. Python程序設(shè)計(jì)案例教程（微課版） [主編　石利平　田輝平　余以勝]
2. Java面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 姜春磊 陳虹潔]
3. C語言程序設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)與實(shí)訓(xùn)（第二版） [主編 倪燃]
4. Python程序設(shè)計(jì)及實(shí)踐教程 [肖朝暉]
5. C語言程序設(shè)計(jì) [魏琴 劉祖珉 趙仕波 肖陽春]
6. C語言程序設(shè)計(jì)實(shí)驗(yàn)教程 [張小剛 司春景]
7. 電氣控制與PLC程序設(shè)計(jì)（第二版） [胡冠山]
8. Java Web項(xiàng)目化設(shè)計(jì)實(shí)踐教程 [邱云 曾陳萍]
9. C語言程序設(shè)計(jì)（第三版） [主編 丁紅 王立新 蔡開立]
10. Python數(shù)據(jù)分析 [主編　馮志輝　趙磊　李放]
11. Python程序設(shè)計(jì)與應(yīng)用（第二版） [主編 張廣淵]
12. C程序設(shè)計(jì)實(shí)踐教程 [劉衛(wèi)國]
13. C程序設(shè)計(jì)（慕課版） [劉衛(wèi)國]
14. 程序設(shè)計(jì)基礎(chǔ)實(shí)踐教程（C/C++語言版） [張桂芬 葛麗娜]
15. C++案例項(xiàng)目精講 [主編 楊國興]
16. SwiftUI完全開發(fā) [李智威 著]
17. MySQL數(shù)據(jù)庫項(xiàng)目式教程 [陳亞峰]
18. C語言程序設(shè)計(jì)習(xí)題與實(shí)驗(yàn)指導(dǎo)（第二版） [主編 甄增榮 張賓]
19. C語言程序設(shè)計(jì)（第二版） [主編 甄增榮 田云霞]
20. Unity3D虛擬現(xiàn)實(shí)應(yīng)用開發(fā)實(shí)踐 [主 編 劉龍]
21. Python程序設(shè)計(jì) [主編 姜春磊 陳虹潔]
22. C語言程序設(shè)計(jì)實(shí)踐教程（活頁式） [主編 鄭茵 陳巍 滕泓虬]
23. 面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 張勇 張平華 趙小龍]
24. Python程序設(shè)計(jì)基礎(chǔ)及實(shí)戰(zhàn) [主編　劉健]
25. C語言程序設(shè)計(jì) [姜雪]
26. Python程序設(shè)計(jì)實(shí)踐教程 [王鶴琴 蔡正保]
27. C++程序設(shè)計(jì)實(shí)踐教程（第三版） [主編 劉衛(wèi)國 曹岳輝]
28. C++程序設(shè)計(jì)（第三版） [主編 曹岳輝 劉衛(wèi)國]
29. C語言程序設(shè)計(jì)項(xiàng)目化教程（活頁式） [主編 張利華 潘曉利]
30. 機(jī)器人流程自動化（RPA）實(shí)戰(zhàn)——基于UiPath [主編　金鑫]