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

1.1 UI設(shè)計(jì)概述2
1.1.1　UI設(shè)計(jì)的概念2
1.1.2　UI發(fā)展史3
1.1.3　UI設(shè)計(jì)分類7
1.1.4　UI設(shè)計(jì)師標(biāo)準(zhǔn)9
1.2?認(rèn)識(shí)APP設(shè)計(jì)9
1.2.1　APP設(shè)計(jì)的
概念10
1.2.2　APP的優(yōu)勢(shì)10
1.2.3　APP設(shè)計(jì)分類10
1.2.4　APP構(gòu)成元素11
1.3?APP設(shè)計(jì)流程14
1.4?移動(dòng)設(shè)備尺寸16
1.4.1　英寸16
1.4.2　像素16
1.4.3　分辨率16
1.4.4　網(wǎng)點(diǎn)密度16
1.4.5　像素密度17
1.4.6　常見手機(jī)屏幕
規(guī)格17
1.5?APP設(shè)計(jì)軟件17
1.5.1　Photoshop CC17
1.5.2　Illustrator CC18
1.6?APP設(shè)計(jì)要素19
1.6.1　色彩19
1.6.2　界面布局22
1.7?UI設(shè)計(jì)風(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è)計(jì)基礎(chǔ)知識(shí)31
2.1.1　認(rèn)識(shí)圖標(biāo)31
2.1.2　圖標(biāo)設(shè)計(jì)流程31
2.1.3　圖標(biāo)設(shè)計(jì)原則34
2.1.4　圖標(biāo)設(shè)計(jì)技巧35
2.1.5　圖標(biāo)設(shè)計(jì)規(guī)范36
2.2?【任務(wù)1】扁平化照相機(jī)
?? 圖標(biāo)設(shè)計(jì)39
2.2.1　任務(wù)描述39
2.2.2　思路剖析39
2.2.3　任務(wù)實(shí)現(xiàn)40
2.3?【任務(wù)2】微扁平照相機(jī)
? 圖標(biāo)設(shè)計(jì)42
2.3.1　任務(wù)描述42
2.3.2　思路剖析42
2.3.3　任務(wù)實(shí)現(xiàn)43
2.4?【任務(wù)3】照相機(jī)寫實(shí)
?? 圖標(biāo)設(shè)計(jì)45
2.4.1　任務(wù)描述46
2.4.2　思路剖析46
2.4.3　任務(wù)實(shí)現(xiàn)46
基礎(chǔ)操練62

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

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

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

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

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

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