APP UI元素設(shè)計(jì)

目　錄
第1 章　APP UI 元素設(shè)計(jì)基礎(chǔ) 1
1.1　什么是APP UI 元素 2
1.1.1　認(rèn)識UI 2
1.1.2　APP UI 元素的重要性 5
1.2　元素設(shè)計(jì)要點(diǎn) 6
1.2.1　風(fēng)格 6
1.2.2　顏色 7
1.2.3　透視關(guān)系 9
1.2.4　陰影與投影 10
1.3　使用Photoshop 繪制基礎(chǔ)圖形 11
1.3.1　矩形和圓角矩形 11
1.3.2　橢圓 13
1.3.3　組合圖形 15
1.4　設(shè)計(jì)師心得 20
1.4.1　APP UI 設(shè)計(jì)師到底應(yīng)該掌握些什么 20
1.4.2　APP UI 設(shè)計(jì)師有多大的就業(yè)前景 21
1.4.3　關(guān)于APP UI 設(shè)計(jì)的那些事兒 21
第2 章　APP 圖標(biāo)設(shè)計(jì) 25
2.1　APP 圖標(biāo)設(shè)計(jì)基礎(chǔ) 26
2.1.1　圖標(biāo)的分類 26
2.1.2　圖標(biāo)的標(biāo)準(zhǔn)尺寸 27
2.1.3　圖標(biāo)的設(shè)計(jì)原則 30
2.1.4　圖標(biāo)的設(shè)計(jì)流程 36
2.2　不同風(fēng)格的圖標(biāo)設(shè)計(jì) 36
2.2.1　線性圖標(biāo)的設(shè)計(jì) 36
2.2.2　扁平化圖標(biāo)的設(shè)計(jì) 38
2.2.3　立體圖標(biāo)的設(shè)計(jì) 40
2.2.4　逼真寫實(shí)圖標(biāo)的設(shè)計(jì) 51
2.3　不同質(zhì)感紋理與效果的圖標(biāo)設(shè)計(jì) 57
2.3.1　金屬質(zhì)感 57
2.3.2　玻璃質(zhì)感 61
2.3.3　皮質(zhì)質(zhì)感 67
2.3.4　木頭紋理 71
2.3.5　發(fā)光效果 79
2.4　應(yīng)用圖標(biāo)設(shè)計(jì) 90
2.4.1　日歷圖標(biāo) 90
2.4.2　郵件圖標(biāo) 92
2.4.3　計(jì)算器圖標(biāo) 95
2.5　功能圖標(biāo)設(shè)計(jì) 99
2.6　設(shè)計(jì)師心得 101
2.6.1　圖標(biāo)設(shè)計(jì)的重要細(xì)節(jié) 101
2.6.2　什么樣的圖標(biāo)才更加吸引用戶 103
第3 章　按鈕設(shè)計(jì) 105
3.1　按鈕設(shè)計(jì)技巧 106
3.1.1　按鈕的尺寸 106
3.1.2　關(guān)聯(lián)分組 107
3.1.3　善用陰影 107
3.1.4　圓角邊界 108
3.1.5　強(qiáng)調(diào)重點(diǎn) 108
3.2　按鈕設(shè)計(jì)案例 110
3.2.1　開關(guān)按鈕 110
3.2.2　電源按鈕 114
3.2.3　滑塊按鈕 120
3.3　設(shè)計(jì)師心得 126
3.3.1　APP UI 設(shè)計(jì)為什么這么受歡迎 126
3.3.2　如何將iOS 的UI 設(shè)計(jì)換成安卓的UI 設(shè)計(jì) 127
第4 章　導(dǎo)航設(shè)計(jì) 129
4.1　常見的UI 設(shè)計(jì)模式 130
4.1.1　主體 細(xì)節(jié)模式 130
4.1.2　分欄瀏覽模式 131
4.1.3　搜索 結(jié)果模式 132
4.1.4　過濾數(shù)據(jù)組模式 133
4.1.5　表單模式 134
4.1.6　向?qū)Ｊ? 135
4.2　標(biāo)簽式導(dǎo)航 136
4.2.1　底部標(biāo)簽式導(dǎo)航 136
4.2.2　頂部標(biāo)簽式導(dǎo)航 138
4.2.3　底部標(biāo)簽的擴(kuò)展導(dǎo)航 139
4.2.4　設(shè)計(jì)實(shí)例 140
4.3　抽屜式導(dǎo)航 145
4.3.1　關(guān)于抽屜式導(dǎo)航 145
4.3.2　設(shè)計(jì)實(shí)例 147
4.4　列表式導(dǎo)航 156
4.4.1　關(guān)于列表式導(dǎo)航 157
4.4.2　設(shè)計(jì)實(shí)例 158
4.5　平鋪式導(dǎo)航 164
4.6　宮格式導(dǎo)航 166
4.7　懸浮式導(dǎo)航 167
4.8　設(shè)計(jì)師心得 169
第5 章　其他界面元素設(shè)計(jì) 173
5.1　表單設(shè)計(jì) 174
5.1.1　登錄表單 174
5.1.2　注冊表單 178
5.1.3　計(jì)算表單 186
5.1.4　搜索表單 187
5.1.5　長表單 188
5.2　視覺吸引元素 204
5.2.1　對話框設(shè)計(jì) 204
5.2.2　提示設(shè)計(jì) 205
5.2.3　使用向?qū)гO(shè)計(jì) 205
5.2.4　幻燈片設(shè)計(jì) 206
5.2.5　首次使用引導(dǎo)設(shè)計(jì) 207
5.2.6　持續(xù)視覺吸引設(shè)計(jì) 207
5.2.7　可發(fā)現(xiàn)的視覺吸引設(shè)計(jì) 207
5.3　反饋信息設(shè)計(jì) 208
5.3.1　操作反饋設(shè)計(jì) 209
5.3.2　出錯信息設(shè)計(jì) 209
5.3.3　確認(rèn)信息設(shè)計(jì) 210
5.4　設(shè)計(jì)師心得 211
第6 章　APP 完整應(yīng)用界面設(shè)計(jì) 217
6.1　界面設(shè)計(jì)基礎(chǔ) 218
6.1.1　界面的構(gòu)圖 218
6.1.2　常見的界面 219
6.1.3　界面切圖與導(dǎo)出 225
6.2　不同風(fēng)格的界面設(shè)計(jì) 229
6.2.1　游戲類APP 界面設(shè)計(jì)（安卓系統(tǒng)） 230
6.2.2　音樂類APP 界面設(shè)計(jì)（iOS 系統(tǒng)） 231
6.2.3　新聞類APP 界面設(shè)計(jì) 239
6.2.4　旅游類APP 界面設(shè)計(jì) 240
6.2.5　交友類APP 界面設(shè)計(jì) 245
6.2.6　購物類APP 界面設(shè)計(jì) 255
6.2.7　攝影圖像類APP 界面設(shè)計(jì) 255
6.3　設(shè)計(jì)師心得 265
6.3.1　什么是好的設(shè)計(jì) 265
6.3.2　關(guān)于安卓屏幕 265