智能手機APP UI設(shè)計與應用任務教程

1.1 UI設(shè)計概述2
1.1.1　UI設(shè)計的概念2
1.1.2　UI發(fā)展史3
1.1.3　UI設(shè)計分類7
1.1.4　UI設(shè)計師標準9
1.2?認識APP設(shè)計9
1.2.1　APP設(shè)計的
概念10
1.2.2　APP的優(yōu)勢10
1.2.3　APP設(shè)計分類10
1.2.4　APP構(gòu)成元素11
1.3?APP設(shè)計流程14
1.4?移動設(shè)備尺寸16
1.4.1　英寸16
1.4.2　像素16
1.4.3　分辨率16
1.4.4　網(wǎng)點密度16
1.4.5　像素密度17
1.4.6　常見手機屏幕
規(guī)格17
1.5?APP設(shè)計軟件17
1.5.1　Photoshop CC17
1.5.2　Illustrator CC18
1.6?APP設(shè)計要素19
1.6.1　色彩19
1.6.2　界面布局22
1.7?UI設(shè)計風格22
1.7.1　扁平化風格23
1.7.2　擬物化風格25
1.8?智能手機操作系統(tǒng)26
1.8.1　iOS系統(tǒng)26
1.8.2　Android系統(tǒng)27
基礎(chǔ)操練29

2.1?圖標設(shè)計基礎(chǔ)知識31
2.1.1　認識圖標31
2.1.2　圖標設(shè)計流程31
2.1.3　圖標設(shè)計原則34
2.1.4　圖標設(shè)計技巧35
2.1.5　圖標設(shè)計規(guī)范36
2.2?【任務1】扁平化照相機
?? 圖標設(shè)計39
2.2.1　任務描述39
2.2.2　思路剖析39
2.2.3　任務實現(xiàn)40
2.3?【任務2】微扁平照相機
? 圖標設(shè)計42
2.3.1　任務描述42
2.3.2　思路剖析42
2.3.3　任務實現(xiàn)43
2.4?【任務3】照相機寫實
?? 圖標設(shè)計45
2.4.1　任務描述46
2.4.2　思路剖析46
2.4.3　任務實現(xiàn)46
基礎(chǔ)操練62

3.1?滑塊設(shè)計基礎(chǔ)知識64
3.1.1　滑塊的構(gòu)成要素64
3.1.2　滑塊類型64
3.1.3　滑塊的設(shè)計
要點66
3.2?【任務4】音量調(diào)節(jié)滑塊
???設(shè)計67
3.2.1　任務描述67
3.2.2　思路剖析67
3.2.3　任務實現(xiàn)68
3.3?【任務5】金屬質(zhì)感旋鈕
? 滑塊設(shè)計72
3.3.1　任務描述72
3.3.2　思路剖析73
3.3.3　任務實現(xiàn)73
3.4?【任務6】極簡風格滑塊
? 設(shè)計85
3.4.1　任務描述85
3.4.2　思路剖析85
3.4.3　任務實現(xiàn)86
基礎(chǔ)操練88

4.1?按鈕設(shè)計基礎(chǔ)知識91
4.1.1　按鈕的不同
狀態(tài)91
4.1.2　按鈕設(shè)計技巧91
4.2?【任務7】色塊按鈕
? 設(shè)計93
4.2.1　任務描述93
4.2.2　思路剖析93
4.2.3　任務實現(xiàn)93
4.3?【任務8】漸變質(zhì)感按鈕
? 設(shè)計94
4.3.1　任務描述94
4.3.2　思路剖析95
4.3.3　任務實現(xiàn)95
4.4?【任務9】水晶按鈕
? 設(shè)計99
4.4.1　任務描述99
4.4.2　思路剖析99
4.4.3　任務實現(xiàn)99
基礎(chǔ)操練105

5.1?表單控件設(shè)計基礎(chǔ)知識108
5.1.1　認識表單控件108
5.1.2　表單控件設(shè)計
原則109
5.2?【任務10】單選按鈕和
? 復選框設(shè)計110
5.2.1　任務描述110
5.2.2　思路剖析110
5.2.3　任務實現(xiàn)111
5.3?【任務11】下拉列表框
? 設(shè)計114
5.3.1　任務描述114
5.3.2　思路剖析114
5.3.3　任務實現(xiàn)114
5.4?【任務12】搜索框
? 設(shè)計117
5.4.1　任務描述117
5.4.2　思路剖析117
5.4.3　任務實現(xiàn)118
基礎(chǔ)操練121

6.1?認識APP導航123
6.2?【任務13】標簽式
? 導航設(shè)計126
6.2.1　任務描述127
6.2.2　思路剖析127
6.2.3　任務實現(xiàn)127
6.3?【任務14】宮格式導航
? 設(shè)計130
6.3.1　任務描述130
6.3.2　思路剖析131
6.3.3　任務實現(xiàn)132
基礎(chǔ)操練138

7.1?圖片效果設(shè)計技巧140
7.2?【任務15】音樂播放
? 界面設(shè)計142
7.2.1　任務描述142
7.2.2　思路剖析142
7.2.3　任務實現(xiàn)143
7.3?【任務16】APP引導頁
? 設(shè)計147
7.3.1?任務描述147
7.3.2?思路剖析148
7.3.3?任務實現(xiàn)148
基礎(chǔ)操練151

8.1?產(chǎn)品定位及優(yōu)勢154
8.2?繪制草圖和原型圖154
8.3?項目設(shè)計定位164
8.4?項目設(shè)計剖析165
8.4.1　啟動圖標165
8.4.2　加載頁166
8.4.3　引導頁166
8.4.4　首頁167
8.4.5　搜索頁172
8.4.6　搜索結(jié)果頁174
8.4.7　商品分類頁175
8.4.8　商品詳情頁177
8.4.9　登錄頁178
8.4.10　購物車頁180
8.4.11　訂單結(jié)算頁182
8.4.12　用戶中心頁183
基礎(chǔ)操練186