智能手機APP UI設計與應用任務教程

1.1 UI設計概述2
1.1.1　UI設計的概念2
1.1.2　UI發(fā)展史3
1.1.3　UI設計分類7
1.1.4　UI設計師標準9
1.2?認識APP設計9
1.2.1　APP設計的
概念10
1.2.2　APP的優(yōu)勢10
1.2.3　APP設計分類10
1.2.4　APP構成元素11
1.3?APP設計流程14
1.4?移動設備尺寸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設計軟件17
1.5.1　Photoshop CC17
1.5.2　Illustrator CC18
1.6?APP設計要素19
1.6.1　色彩19
1.6.2　界面布局22
1.7?UI設計風格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
基礎操練29

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

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

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

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

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

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

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