智能手機(jī)APP UI設(shè)計與應(yīng)用任務(wù)教程

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è)計師標(biāo)準(zhǔn)9
1.2?認(rèn)識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　常見手機(jī)屏幕
規(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è)計風(fēng)格22
1.7.1　扁平化風(fēng)格23
1.7.2　擬物化風(fēng)格25
1.8?智能手機(jī)操作系統(tǒng)26
1.8.1　iOS系統(tǒng)26
1.8.2　Android系統(tǒng)27
基礎(chǔ)操練29

2.1?圖標(biāo)設(shè)計基礎(chǔ)知識31
2.1.1　認(rèn)識圖標(biāo)31
2.1.2　圖標(biāo)設(shè)計流程31
2.1.3　圖標(biāo)設(shè)計原則34
2.1.4　圖標(biāo)設(shè)計技巧35
2.1.5　圖標(biāo)設(shè)計規(guī)范36
2.2?【任務(wù)1】扁平化照相機(jī)
?? 圖標(biāo)設(shè)計39
2.2.1　任務(wù)描述39
2.2.2　思路剖析39
2.2.3　任務(wù)實現(xiàn)40
2.3?【任務(wù)2】微扁平照相機(jī)
? 圖標(biāo)設(shè)計42
2.3.1　任務(wù)描述42
2.3.2　思路剖析42
2.3.3　任務(wù)實現(xiàn)43
2.4?【任務(wù)3】照相機(jī)寫實
?? 圖標(biāo)設(shè)計45
2.4.1　任務(wù)描述46
2.4.2　思路剖析46
2.4.3　任務(wù)實現(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?【任務(wù)4】音量調(diào)節(jié)滑塊
???設(shè)計67
3.2.1　任務(wù)描述67
3.2.2　思路剖析67
3.2.3　任務(wù)實現(xiàn)68
3.3?【任務(wù)5】金屬質(zhì)感旋鈕
? 滑塊設(shè)計72
3.3.1　任務(wù)描述72
3.3.2　思路剖析73
3.3.3　任務(wù)實現(xiàn)73
3.4?【任務(wù)6】極簡風(fēng)格滑塊
? 設(shè)計85
3.4.1　任務(wù)描述85
3.4.2　思路剖析85
3.4.3　任務(wù)實現(xiàn)86
基礎(chǔ)操練88

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

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

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

7.1?圖片效果設(shè)計技巧140
7.2?【任務(wù)15】音樂播放
? 界面設(shè)計142
7.2.1　任務(wù)描述142
7.2.2　思路剖析142
7.2.3　任務(wù)實現(xiàn)143
7.3?【任務(wù)16】APP引導(dǎo)頁
? 設(shè)計147
7.3.1?任務(wù)描述147
7.3.2?思路剖析148
7.3.3?任務(wù)實現(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　啟動圖標(biāo)165
8.4.2　加載頁166
8.4.3　引導(dǎo)頁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