APP UI主題設(shè)計(jì)

第1章 APP UI設(shè)計(jì)基礎(chǔ) 1
1.1　APP UI設(shè)計(jì)入門(mén) 2
1.1.1 什么是APP UI 2
1.1.2 APP UI設(shè)計(jì)的原則 2
1.1.3 APP UI的表現(xiàn)形式 5
1.1.4 APP UI設(shè)計(jì)流程 9
1.2　不同系統(tǒng)的APP UI 11
1.2.1 iOS系統(tǒng) 11
1.2.2 Android系統(tǒng) 11
1.2.3 WP系統(tǒng) 12
1.3　APP設(shè)計(jì)基礎(chǔ) 12
1.3.1 APP UI中的圖片格式 13
1.3.2 設(shè)計(jì)尺寸規(guī)范 13
1.3.3 配色原理 17
1.4　設(shè)計(jì)師心得 19
1.4.1 APP UI設(shè)計(jì)師必須掌握的技能 19
1.4.2 APP UI的發(fā)展趨勢(shì) 20
第2章 Photoshop在APP UI設(shè)計(jì)中的 基礎(chǔ)應(yīng)用 23
2.1　APP UI中的基本圖形繪制 24
2.1.1 簡(jiǎn)單圖形 24
2.1.2 組合圖形 35
2.1.3 布爾運(yùn)算 36
2.2　APP UI中的光影處理 41
2.2.1 Photoshop的圖層樣式 41
2.2.2 立體效果 43
2.2.3 發(fā)光效果 48
2.2.4 投影效果 53
2.3　設(shè)計(jì)師心得 57
2.3.1 光影在不同材質(zhì)上的表現(xiàn) 57
2.3.2 扁平化設(shè)計(jì)的流行配色方案 62
第3章 APP界面中常見(jiàn)元素設(shè)計(jì) 65
3.1　常見(jiàn)界面控件設(shè)計(jì) 66
3.1.1 常見(jiàn)的控件元素 66
3.1.2 按鈕設(shè)計(jì) 68
3.1.3 對(duì)話框設(shè)計(jì) 72
3.1.4 導(dǎo)航標(biāo)簽設(shè)計(jì) 76
3.1.5 進(jìn)度條設(shè)計(jì) 82
3.1.6 滑塊按鈕 84
3.1.7 搜索欄 89
3.1.8 列表菜單 92
3.2　圖標(biāo)的設(shè)計(jì) 95
3.2.1 扁平化圖標(biāo)設(shè)計(jì) 95
3.2.2 線性圖標(biāo)設(shè)計(jì) 104
3.2.3 立體圖標(biāo)設(shè)計(jì) 110
3.3　設(shè)計(jì)師心得 116
3.3.1 讓按鈕更吸引人的方法 116
3.3.2 如何設(shè)計(jì)優(yōu)秀的應(yīng)用圖標(biāo) 118
第4章 常見(jiàn)界面構(gòu)圖與設(shè)計(jì) 121
4.1　界面構(gòu)圖 122
4.1.1 九宮格網(wǎng)格構(gòu)圖 122
4.1.2 圓心點(diǎn)放射狀構(gòu)圖 123
4.1.3 三角形構(gòu)圖 124
4.1.4 S、F形構(gòu)圖 126
4.2　常見(jiàn)界面設(shè)計(jì) 130
4.2.1 啟動(dòng)界面 引導(dǎo)界面 130
4.2.2 登錄界面 136
4.2.3 設(shè)置界面 138
4.2.4 空狀態(tài)界面 144
4.3　設(shè)計(jì)師心得 146
4.3.1 APP引導(dǎo)界面設(shè)計(jì)注意事項(xiàng) 146
4.3.2 界面布局的基本原則 149
第5章 游戲類(lèi)APP UI設(shè)計(jì) 152
5.1　設(shè)計(jì)準(zhǔn)備與規(guī)劃 153
5.1.1 素材準(zhǔn)備 154
5.1.2 界面布局規(guī)劃 154
5.1.3 確定風(fēng)格與配色 154
5.2　界面制作 155
5.2.1 歡迎頁(yè) 155
5.2.2 闖關(guān)頁(yè) 161
5.2.3 設(shè)置頁(yè) 169
5.2.4 道具購(gòu)買(mǎi)頁(yè) 174
5.3　設(shè)計(jì)師心得 181
5.3.1 游戲類(lèi)APP設(shè)計(jì)要想方設(shè)法吸引用戶 181
5.3.2 游戲中的按鈕 184
第6章 音樂(lè)類(lèi)APP UI設(shè)計(jì) 186
6.1　設(shè)計(jì)準(zhǔn)備與規(guī)劃 187
6.1.1 素材準(zhǔn)備 187
6.1.2 界面布局規(guī)劃 188
6.1.3 確定風(fēng)格與配色 189
6.2　界面制作 189
6.2.1 首頁(yè) 189
6.2.2 個(gè)人主頁(yè) 196
6.2.3 音樂(lè)播放頁(yè) 201
6.3　設(shè)計(jì)師心得 206
6.3.1 Android界面的點(diǎn)九切圖 206
6.3.2 常見(jiàn)的APP登錄界面分析 208
第7章 社交類(lèi)APP UI設(shè)計(jì) 212
7.1　設(shè)計(jì)準(zhǔn)備與規(guī)劃 213
7.1.1 素材準(zhǔn)備 213
7.1.2 界面布局規(guī)劃 214
7.1.3 確定風(fēng)格與配色 214
7.2　界面制作 215
7.2.1 首頁(yè) 215
7.2.2 聊天界面 221
7.2.3 個(gè)人主頁(yè) 225
7.3　設(shè)計(jì)師心得 228
7.3.1 APP設(shè)計(jì)中需要注意的問(wèn)題 228
7.3.2 平面設(shè)計(jì)師如何轉(zhuǎn)型為APP設(shè)計(jì)師 230
第8章 購(gòu)物理財(cái)類(lèi)APP UI設(shè)計(jì) 232
8.1　設(shè)計(jì)準(zhǔn)備與規(guī)劃 233
8.1.1 素材準(zhǔn)備 233
8.1.2 界面布局規(guī)劃 234
8.1.3 確定風(fēng)格與配色 235
8.2　界面制作 235
8.2.1 制作主界面 235
8.2.2 制作分類(lèi)界面 240
8.2.3 制作詳情界面 245
8.3　設(shè)計(jì)師心得 250
8.3.1 APP中反饋提示的設(shè)計(jì)方法 250
8.3.2 如何做好扁平化設(shè)計(jì) 253
第9章 寵物類(lèi)APP UI設(shè)計(jì) 256
9.1　設(shè)計(jì)準(zhǔn)備與規(guī)劃 257
9.1.1 素材準(zhǔn)備 257
9.1.2 界面布局規(guī)劃 258
9.1.3 確定風(fēng)格與配色 258
9.2　界面制作 259
9.2.1 首頁(yè) 259
9.2.2 詳情頁(yè) 265
9.2.3 個(gè)人主頁(yè) 270
9.3　設(shè)計(jì)師心得 274
9.3.1 界面設(shè)計(jì)中需要注意的細(xì)節(jié) 274
9.3.2 設(shè)計(jì)者需要遵守哪些設(shè)計(jì)準(zhǔn)則 276