APP UI元素設計

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