Photoshop智能手機(jī)APP 界面設(shè)計

前言
第1章 移動APP設(shè)計基礎(chǔ) 1
1.1 移動UI設(shè)計概述 2
1.1.1　什么是UI設(shè)計 2
1.1.2　移動UI設(shè)計的特點(diǎn) 3
1.1.3　移動UI與網(wǎng)站UI的區(qū)別 5
1.2 了解UI設(shè)計師 7
1.2.1　研究界面—圖形設(shè)計師（Graphic UI Designer） 7
1.2.2　研究人與界面的關(guān)系—交互設(shè)計師（Interaction Designer） 7
1.2.3　研究人—用戶測試/研究工程師（User Experience Engineer） 7
1.3 了解移動APP 7
1.3.1　什么是APP 8
1.3.2　APP視覺設(shè)計的奧秘 8
1.3.3　APP視覺效果的個性化 10
1.4 移動APP設(shè)計流程及視覺設(shè)計 11
1.4.1　移動APP設(shè)計流程 11
1.4.2　視覺設(shè)計 12
1.5 移動APP設(shè)計中的色彩搭配 14
1.5.1　認(rèn)識色彩 14
1.5.2　色彩在APP界面設(shè)計中的作用 15
1.5.3　APP界面配色原則 17
1.5.4　使用Kuler配色 19
1.6 常見移動設(shè)備尺寸標(biāo)準(zhǔn) 19
1.6.1　屏幕尺寸 19
1.6.2　屏幕分辨率 20
1.6.3　屏幕密度 21
1.7 本章小結(jié) 21
第2章 移動APP圖標(biāo)設(shè)計 22
2.1 了解APP圖標(biāo) 23
2.1.1　什么是圖標(biāo) 23
2.1.2　圖標(biāo)設(shè)計的作用 24
2.1.3　iOS系統(tǒng)圖標(biāo)常用尺寸 26
2.1.4　Android系統(tǒng)圖標(biāo)常用尺寸 28
2.1.5　圖標(biāo)常用格式 28
2.2 擬物化圖標(biāo) 30
2.2.1　什么是擬物化圖標(biāo) 30
2.2.2　擬物化圖標(biāo)的特點(diǎn) 31
實(shí)戰(zhàn)案例——設(shè)計擬物化時鐘圖標(biāo) 32
2.3 扁平化圖標(biāo) 40
2.3.1　什么是扁平化圖標(biāo) 40
2.3.2　扁平化圖標(biāo)的特點(diǎn) 40
2.3.3　基礎(chǔ)風(fēng)格扁平化圖標(biāo) 41
實(shí)戰(zhàn)案例——設(shè)計基礎(chǔ)風(fēng)格購物圖標(biāo) 42
2.3.4　陰影風(fēng)格扁平化圖標(biāo) 47
實(shí)戰(zhàn)案例——設(shè)計陰影風(fēng)格設(shè)置圖標(biāo) 47
2.3.5　長陰影風(fēng)格扁平化圖標(biāo) 53
實(shí)戰(zhàn)案例——設(shè)計長陰影風(fēng)格日期圖標(biāo) 54
2.3.6　微漸變風(fēng)格扁平化圖標(biāo) 62
實(shí)戰(zhàn)案例——設(shè)計微漸變風(fēng)格天氣圖標(biāo) 62
2.4 APP圖標(biāo)設(shè)計原則 68
2.4.1　辨識性 68
2.4.2　實(shí)用性 68
2.4.3　差異性 69
2.4.4　創(chuàng)意性 69
2.4.5　視覺性 70
2.4.6　協(xié)調(diào)性 70
實(shí)戰(zhàn)案例——設(shè)計音樂APP啟動圖標(biāo) 70
2.5 本章小結(jié) 77
第3章 移動APP界面基本元素設(shè)計 78
3.1 認(rèn)識APP界面基本圖形 79
3.1.1　直線 79
3.1.2　矩形 79
3.1.3　圓角矩形 80
3.1.4　圓形 80
3.1.5　其他圖形 81
實(shí)戰(zhàn)案例——設(shè)計APP登錄界面 81
3.2 按鈕設(shè)計 86
3.2.1　按鈕設(shè)計注意事項 86
3.2.2　游戲APP界面按鈕 87
實(shí)戰(zhàn)案例——設(shè)計游戲APP界面按鈕 87
3.3 開關(guān)與滾動條設(shè)計 91
3.3.1　開關(guān) 91
3.3.2　滾動條 92
實(shí)戰(zhàn)案例——設(shè)計APP設(shè)置界面 92
3.3.3　進(jìn)度條 97
實(shí)戰(zhàn)案例——設(shè)計游戲進(jìn)度條 98
3.4 搜索欄設(shè)計 102
3.4.1　了解APP界面中的搜索欄 102
3.4.2　扁平化搜索欄 103
實(shí)戰(zhàn)案例——設(shè)計APP搜索欄 103
3.5 菜單和工具欄設(shè)計 106
3.5.1　菜單的重要性 106
實(shí)戰(zhàn)案例——設(shè)計APP菜單界面 107
3.5.2　菜單的設(shè)計要點(diǎn) 111
實(shí)戰(zhàn)案例——設(shè)計彈出下拉菜單 111
3.5.3　工具欄的作用 116
實(shí)戰(zhàn)案例——設(shè)計圓形快捷工具欄 116
3.6 本章小結(jié) 122
第4章 iOS系統(tǒng)界面設(shè)計 123
4.1 iOS系統(tǒng) 124
4.1.1 iOS系統(tǒng)概述 124
4.1.2　iOS系統(tǒng)的發(fā)展 124
4.1.3　iOS系統(tǒng)的基本組件 126
4.2 iOS系統(tǒng)UI設(shè)計規(guī)范 127
4.2.1　iPhone界面尺寸 127
4.2.2　iPad界面尺寸 128
4.2.3　iOS系統(tǒng)APP布局 129
實(shí)戰(zhàn)案例——設(shè)計iOS系統(tǒng)待機(jī)界面 129
4.3 了解全新的iOS 9 135
4.3.1　iOS 8與iOS 9的區(qū)別 135
4.3.2　iOS 9的特點(diǎn) 138
4.3.3　iOS 9界面設(shè)計遵循的原則 140
實(shí)戰(zhàn)案例——設(shè)計iOS 9風(fēng)格日歷界面 141
4.4 iOS系統(tǒng)界面設(shè)計規(guī)范 146
4.4.1　iOS系統(tǒng)應(yīng)用特點(diǎn) 146
4.4.2　確保在iPhone和iPad上通用 146
4.4.3　重新考慮基于Web的設(shè)計 147
實(shí)戰(zhàn)案例——設(shè)計iOS系統(tǒng)主界面 147
4.5 如何設(shè)計出色的iOS系統(tǒng)應(yīng)用界面 154
4.5.1　內(nèi)容決定設(shè)計 154
4.5.2　保證清晰的視覺效果 155
4.5.3　使用深度層次進(jìn)行交流 156
實(shí)戰(zhàn)案例——設(shè)計iOS系統(tǒng)天氣界面 158
實(shí)戰(zhàn)案例——設(shè)計iOS系統(tǒng)通話界面 162
4.6 iOS系統(tǒng)界面的設(shè)計原則 166
4.6.1　美觀性 167
4.6.2　一致性 167
4.6.3　操作便捷 168
4.6.4　及時反饋 168
4.6.5　暗喻 169
4.6.6　用戶控制 170
實(shí)戰(zhàn)案例——設(shè)計iOS系統(tǒng)音樂播放界面 170
4.7 本章小結(jié) 176
第5章 Android系統(tǒng)界面設(shè)計 177
5.1　了解Android系統(tǒng) 178
5.1.1　Android系統(tǒng)概述 178
5.1.2　Android系統(tǒng)的發(fā)展 178
5.1.3　Android系統(tǒng)的基本組件 179
5.1.4　了解深度定制Android系統(tǒng) 179
5.2 Android系統(tǒng)UI設(shè)計規(guī)范 181
5.2.1　Android系統(tǒng)的設(shè)計尺寸 181
5.2.2　字體的使用標(biāo)準(zhǔn) 182
5.2.3　色彩的應(yīng)用標(biāo)準(zhǔn) 184
實(shí)戰(zhàn)案例——設(shè)計Android系統(tǒng)鎖屏界面 188
5.3 了解全新的Android L系統(tǒng) 192
5.3.1　全新的UI設(shè)計風(fēng)格 192
5.3.2　優(yōu)化用戶體驗(yàn) 193
5.3.3　增強(qiáng)的通知中心 194
5.3.4　增強(qiáng)的多任務(wù)功能 194
5.3.5　性能升級 194
5.3.6　增強(qiáng)電池續(xù)航能力 194
實(shí)戰(zhàn)案例——設(shè)計Android L風(fēng)格手機(jī)主界面 194
5.4 認(rèn)識Android系統(tǒng)APP布局 202
5.4.1　Android系統(tǒng)APP布局 202
5.4.2　Android與iOS系統(tǒng)界面設(shè)計區(qū)別 203
實(shí)戰(zhàn)案例——設(shè)計Android系統(tǒng)待機(jī)界面 206
5.5 Android系統(tǒng)界面的特點(diǎn) 211
5.5.1　簡約大方 212
5.5.2　操作便捷 212
5.5.3　通用性強(qiáng) 212
5.5.4　布局合理 213
實(shí)戰(zhàn)案例——設(shè)計Android系統(tǒng)主界面 213
5.6 Android系統(tǒng)的設(shè)計原則 218
5.6.1　美觀大方的界面 218
5.6.2　使用戶操作更加簡單 219
5.6.3　完善的操作流程 222
實(shí)戰(zhàn)案例——設(shè)計Android系統(tǒng)音樂APP界面 223
5.7　本章小結(jié) 233
第6章 Windows Phone系統(tǒng)界面設(shè)計 234
6.1　了解Windows Phone系統(tǒng) 235
6.1.1　Windows Phone系統(tǒng)概述 235
6.1.2　Windows Phone系統(tǒng)的發(fā)展 236
6.1.3　Windows Phone系統(tǒng)的特點(diǎn) 237
6.1.4　Windows Phone系統(tǒng)的基本組件 239
實(shí)戰(zhàn)案例——設(shè)計Windows Phone系統(tǒng)待機(jī)界面 239
6.2 認(rèn)識Windows Phone手機(jī)UI界面 243
6.2.1　Windows Phone 7手機(jī)界面 244
6.2.2　Windows Phone 8手機(jī)界面 245
6.2.3　Windows Phone 8系統(tǒng)的新功能 246
6.2.4　Windows Phone界面的設(shè)計理念 247
實(shí)戰(zhàn)案例——設(shè)計Windows Phone系統(tǒng)主界面 249
6.3 Windows Phone系統(tǒng)UI設(shè)計規(guī)范 254
6.3.1　Windows Phone系統(tǒng)手機(jī)屏幕尺寸 254
6.3.2　主界面 254
6.3.3　狀態(tài)欄 255
6.3.4　應(yīng)用程序欄 256
6.3.5　圖標(biāo) 256
6.3.6　屏幕方向 257
6.3.7　字體 257
6.3.8　推送通知 258
實(shí)戰(zhàn)案例——設(shè)計Windows Phone系統(tǒng)音樂播放界面 259
6.4 Tile（磁貼）與Pivot（樞軸視圖）設(shè)計 264
6.4.1　Tile（磁貼）簡介 264
6.4.2　Tile（磁貼）的類型 265
6.4.3　Tile（磁貼）的大小 266
6.4.4　Pivot（樞軸視圖）簡介 266
實(shí)戰(zhàn)案例——設(shè)計Windows Phone平板界面 267
6.5 獨(dú)特的Panorama（全景視圖） 273
6.5.1　Panorama（全景視圖）簡介 273
6.5.2　全景視圖設(shè)計注意事項 274
實(shí)戰(zhàn)案例——設(shè)計全景視圖界面 275
實(shí)戰(zhàn)案例——設(shè)計桌球手機(jī)游戲界面 283
6.6　本章小結(jié) 291
第7章 APP界面設(shè)計 292
7.1　常見的APP應(yīng)用類型 293
7.1.1　實(shí)用功能類APP應(yīng)用 293
7.1.2　社交類APP應(yīng)用 293
7.1.3　娛樂、游戲類APP應(yīng)用 294
7.2　APP界面設(shè)計視覺效果 294
7.2.1　簡潔型的APP界面 294
7.2.2　趣味與個性的APP界面 295
7.2.3　華麗的APP界面 295
實(shí)戰(zhàn)案例——設(shè)計iPad影視APP界面 296
7.3 APP引導(dǎo)界面 303
7.3.1　功能介紹類 304
7.3.2　使用說明類 304
7.3.3　推廣類 304
7.3.4　問題解決類 305
實(shí)戰(zhàn)案例——設(shè)計APP引導(dǎo)界面 305
7.4 APP界面設(shè)計要求 311
7.4.1　APP界面的特點(diǎn) 311
7.4.2　APP界面的設(shè)計流程 312
7.4.3　APP界面的色彩搭配 313
7.4.4　平板電腦界面的特點(diǎn) 314
實(shí)戰(zhàn)案例——設(shè)計音樂APP界面 314
實(shí)戰(zhàn)案例——設(shè)計iPad游戲登錄界面 322
7.5 APP界面設(shè)計原則 331
7.5.1　實(shí)用性 331
7.5.2　統(tǒng)一的色彩與風(fēng)格 331
7.5.3　合理的配色 332
7.5.4　規(guī)范的操作流程 332
7.5.5　視覺元素規(guī)范 332
實(shí)戰(zhàn)案例——設(shè)計購物APP界面 333
7.6 APP界面設(shè)計注意事項 340
7.6.1　APP界面視覺設(shè)計 341
7.6.2　APP界面設(shè)計的用戶體驗(yàn) 341
實(shí)戰(zhàn)案例——設(shè)計照片分享APP界面 342
7.7　本章小結(jié) 351