APP UI主題設(shè)計

第1章 APP UI設(shè)計基礎(chǔ) 1
1.1　APP UI設(shè)計入門 2
1.1.1 什么是APP UI 2
1.1.2 APP UI設(shè)計的原則 2
1.1.3 APP UI的表現(xiàn)形式 5
1.1.4 APP UI設(shè)計流程 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è)計基礎(chǔ) 12
1.3.1 APP UI中的圖片格式 13
1.3.2 設(shè)計尺寸規(guī)范 13
1.3.3 配色原理 17
1.4　設(shè)計師心得 19
1.4.1 APP UI設(shè)計師必須掌握的技能 19
1.4.2 APP UI的發(fā)展趨勢 20
第2章 Photoshop在APP UI設(shè)計中的 基礎(chǔ)應(yīng)用 23
2.1　APP UI中的基本圖形繪制 24
2.1.1 簡單圖形 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è)計師心得 57
2.3.1 光影在不同材質(zhì)上的表現(xiàn) 57
2.3.2 扁平化設(shè)計的流行配色方案 62
第3章 APP界面中常見元素設(shè)計 65
3.1　常見界面控件設(shè)計 66
3.1.1 常見的控件元素 66
3.1.2 按鈕設(shè)計 68
3.1.3 對話框設(shè)計 72
3.1.4 導(dǎo)航標(biāo)簽設(shè)計 76
3.1.5 進(jìn)度條設(shè)計 82
3.1.6 滑塊按鈕 84
3.1.7 搜索欄 89
3.1.8 列表菜單 92
3.2　圖標(biāo)的設(shè)計 95
3.2.1 扁平化圖標(biāo)設(shè)計 95
3.2.2 線性圖標(biāo)設(shè)計 104
3.2.3 立體圖標(biāo)設(shè)計 110
3.3　設(shè)計師心得 116
3.3.1 讓按鈕更吸引人的方法 116
3.3.2 如何設(shè)計優(yōu)秀的應(yīng)用圖標(biāo) 118
第4章 常見界面構(gòu)圖與設(shè)計 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　常見界面設(shè)計 130
4.2.1 啟動界面 引導(dǎo)界面 130
4.2.2 登錄界面 136
4.2.3 設(shè)置界面 138
4.2.4 空狀態(tài)界面 144
4.3　設(shè)計師心得 146
4.3.1 APP引導(dǎo)界面設(shè)計注意事項(xiàng) 146
4.3.2 界面布局的基本原則 149
第5章 游戲類APP UI設(shè)計 152
5.1　設(shè)計準(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 歡迎頁 155
5.2.2 闖關(guān)頁 161
5.2.3 設(shè)置頁 169
5.2.4 道具購買頁 174
5.3　設(shè)計師心得 181
5.3.1 游戲類APP設(shè)計要想方設(shè)法吸引用戶 181
5.3.2 游戲中的按鈕 184
第6章 音樂類APP UI設(shè)計 186
6.1　設(shè)計準(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 首頁 189
6.2.2 個人主頁 196
6.2.3 音樂播放頁 201
6.3　設(shè)計師心得 206
6.3.1 Android界面的點(diǎn)九切圖 206
6.3.2 常見的APP登錄界面分析 208
第7章 社交類APP UI設(shè)計 212
7.1　設(shè)計準(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 首頁 215
7.2.2 聊天界面 221
7.2.3 個人主頁 225
7.3　設(shè)計師心得 228
7.3.1 APP設(shè)計中需要注意的問題 228
7.3.2 平面設(shè)計師如何轉(zhuǎn)型為APP設(shè)計師 230
第8章 購物理財類APP UI設(shè)計 232
8.1　設(shè)計準(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 制作分類界面 240
8.2.3 制作詳情界面 245
8.3　設(shè)計師心得 250
8.3.1 APP中反饋提示的設(shè)計方法 250
8.3.2 如何做好扁平化設(shè)計 253
第9章 寵物類APP UI設(shè)計 256
9.1　設(shè)計準(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 首頁 259
9.2.2 詳情頁 265
9.2.3 個人主頁 270
9.3　設(shè)計師心得 274
9.3.1 界面設(shè)計中需要注意的細(xì)節(jié) 274
9.3.2 設(shè)計者需要遵守哪些設(shè)計準(zhǔn)則 276