APP UI設(shè)計(jì)之道

目 錄
第1 章 Photoshop 系統(tǒng)的使用基礎(chǔ) 1
1.1 Photoshop 的安裝、卸載、啟動(dòng)和退出 2
1.1.1 安裝Photoshop 2
1.1.2 卸載Photoshop 2
1.1.3 啟動(dòng)Photoshop 2
1.1.4 退出Photoshop 3
1.2 圖形圖像文件的基本操作 4
1.3 Photoshop 系統(tǒng)界面調(diào)整 8
1.3.1 界面組成部分 9
1.3.2 調(diào)整界面 14
第2 章 APP UI 設(shè)計(jì)基礎(chǔ) 15
2.1　APP UI 設(shè)計(jì)概述 16
2.1.1 UI 設(shè)計(jì)概述 16
2.1.2 APP 概述 16
2.1.3 Photoshop 軟件 17
2.1.4 APP UI 設(shè)計(jì)必備技術(shù) 18
2.2　APP UI 界面設(shè)計(jì)團(tuán)隊(duì)與流程 20
2.2.1　APP 界面設(shè)計(jì)者與產(chǎn)品團(tuán)隊(duì) 20
2.2.2　APP 界面設(shè)計(jì)與項(xiàng)目流程 21
2.2.3　視覺設(shè)計(jì) 22
2.3　APP UI 界面設(shè)計(jì)理論 23
2.3.1　用戶操作習(xí)慣 23
2.3.2　界面布局 23
2.3.3　操作簡單 28
2.3.4　在操作方式上創(chuàng)新 29
2.3.5　在設(shè)計(jì)中投入情感 29
2.3.6　APP UI 的配色理論 29
2.4　APP UI 界面設(shè)計(jì)技巧 33
2.4.1 完整的APP UI 設(shè)計(jì)流程 34
2.4.2 圖標(biāo)設(shè)計(jì)的流程 37
2.4.3 讓圖標(biāo)更具吸引力 37
第3 章 APP 中的光影設(shè)計(jì) 39
3.1　玻璃質(zhì)感圖標(biāo)設(shè)計(jì) 40
3.1.1 設(shè)計(jì)構(gòu)思 40
3.1.2 操作步驟 40
3.2　牛仔褲質(zhì)感設(shè)計(jì) 49
3.2.1 設(shè)計(jì)構(gòu)思 49
3.2.2 操作步驟 49
3.3 木紋質(zhì)感設(shè)計(jì) 64
3.3.1 設(shè)計(jì)構(gòu)思 64
3.3.2 操作步驟 64
3.4　絢麗光線界面設(shè)計(jì) 94
3.4.1 設(shè)計(jì)構(gòu)思 94
3.4.2 操作步驟 94
3.5　UI 設(shè)計(jì)師必備技能：顏色搭配 102
3.5.1　簡約配色設(shè)計(jì) 102
3.5.2　混合特效設(shè)計(jì) 103
3.5.3　具體案例 104
第4 章 APP 中的字體設(shè)計(jì) 105
4.1　斜面浮雕字體設(shè)計(jì) 106
4.1.1 設(shè)計(jì)構(gòu)思 106
4.1.2 操作步驟 106
4.2　鉆石字體設(shè)計(jì) 112
4.2.1 設(shè)計(jì)構(gòu)思 112
4.2.2 操作步驟 113
4.3　立體巖石材質(zhì)字體設(shè)計(jì) 118
4.3.1 設(shè)計(jì)構(gòu)思 118
4.3.2 操作步驟 118
4.4　 UI 設(shè)計(jì)師必備技能：文字設(shè)計(jì) 126
4.4.1　字號設(shè)計(jì) 126
4.4.2　UI 文字設(shè)計(jì)標(biāo)準(zhǔn) 127
第5 章 APP 中的簡約Icon設(shè)計(jì) 129
5.1　聯(lián)系人圖標(biāo)設(shè)計(jì) 130
5.1.1 設(shè)計(jì)構(gòu)思 130
5.1.2 操作步驟 130
5.2　搜索圖標(biāo)設(shè)計(jì) 132
5.2.1 設(shè)計(jì)構(gòu)思 132
5.2.2 操作步驟 133
5.3　照相機(jī)圖標(biāo)設(shè)計(jì) 135
5.3.1 設(shè)計(jì)構(gòu)思 135
5.3.2 操作步驟 135
5.4　鬧鐘圖標(biāo)設(shè)計(jì) 140
5.4.1 設(shè)計(jì)構(gòu)思 140
5.4.2 操作步驟 140
5.5　簡約平面圖標(biāo)整套設(shè)計(jì) 150
5.5.1 設(shè)計(jì)構(gòu)思 150
5.5.2 操作步驟 151
5.6　設(shè)計(jì)師必備技能：圖標(biāo)大小選擇 163
第6 章 APP 中的三維Icon設(shè)計(jì) 165
6.1　音樂圖標(biāo)設(shè)計(jì) 166
6.1.1 設(shè)計(jì)構(gòu)思 166
6.1.2 操作步驟 166
6.2　錄音器圖標(biāo)設(shè)計(jì) 172
6.2.1 設(shè)計(jì)構(gòu)思 172
6.2.2 操作步驟 173
6.3　電話簿圖標(biāo)設(shè)計(jì) 177
6.3.1 設(shè)計(jì)構(gòu)思 177
6.3.2 操作步驟 177
6.4　立體勾選框圖標(biāo)設(shè)計(jì) 182
6.4.1 設(shè)計(jì)構(gòu)思 182
6.4.2 操作步驟 182
6.5　實(shí)體手機(jī)設(shè)計(jì) 188
6.5.1 設(shè)計(jì)構(gòu)思 188
6.5.2 操作步驟 188
6.6 UI 設(shè)計(jì)師必備技能：圖標(biāo)的設(shè)計(jì) 202
6.6.1 表現(xiàn)形態(tài) 202
6.6.2 圖標(biāo)特性 203
6.6.3 圖標(biāo)設(shè)計(jì)的構(gòu)思 204
第7 章 APP 中的多種圖形設(shè)計(jì) 205
7.1　二維碼掃描圖形設(shè)計(jì) 206
7.1.1 設(shè)計(jì)構(gòu)思 206
7.1.2 操作步驟 206
7.2　徽標(biāo)圖形設(shè)計(jì) 210
7.2.1 設(shè)計(jì)構(gòu)思 210
7.2.2 操作步驟 210
7.3　個(gè)性條形碼設(shè)計(jì) 218
7.3.1 設(shè)計(jì)構(gòu)思 218
7.3.2 操作步驟 218
7.4　夏日海景宣傳海報(bào)設(shè)計(jì) 222
7.4.1 設(shè)計(jì)構(gòu)思 222
7.4.2 操作步驟 222
7.5 UI 設(shè)計(jì)師必備技能：構(gòu)圖技巧 231
7.5.1 粗細(xì)對比 231
7.5.2 遠(yuǎn)近對比 231
7.5.3 疏密對比 231
7.5.4 動(dòng)靜對比 231
7.5.5 中西對比 232
7.5.6 古今對比 232
第8 章 APP 中的控件設(shè)計(jì) 233
8.1 立體旋鈕設(shè)計(jì) 234
8.1.1 設(shè)計(jì)構(gòu)思 234
8.1.2 操作步驟 234
8.2　開關(guān)按鈕設(shè)計(jì) 243
8.2.1 設(shè)計(jì)構(gòu)思 243
8.2.2 操作步驟 243
8.3　金屬質(zhì)感旋鈕設(shè)計(jì) 250
8.3.1 設(shè)計(jì)構(gòu)思 251
8.3.2 操作步驟 251
8.4 進(jìn)度按鈕設(shè)計(jì) 260
8.4.1 設(shè)計(jì)構(gòu)思 260
8.4.2 操作步驟 260
8.5 透明界面按鈕設(shè)計(jì) 266
8.5.1 設(shè)計(jì)構(gòu)思 266
8.5.2 操作步驟 266
8.6 滑動(dòng)控件設(shè)計(jì) 287
8.6.1 設(shè)計(jì)構(gòu)思 287
8.6.2 操作步驟 287
8.7　UI 設(shè)計(jì)師必讀：如何設(shè)計(jì)按鈕 292
8.7.1　關(guān)聯(lián)分組 292
8.7.2　層級關(guān)系 292
8.7.3　善用陰影 292
8.7.4　圓角邊界 293
8.7.5　強(qiáng)調(diào)重點(diǎn) 293
8.7.6　按鈕尺寸 293
8.7.7　表述必須明確 294
第9 章 APP 中的界面設(shè)計(jì) 295
9.1　Loading 游戲加載界面設(shè)計(jì) 296
9.1.1 設(shè)計(jì)構(gòu)思 296
9.1.2 操作步驟 296
9.2　日歷和撥號界面設(shè)計(jì) 304
9.2.1 設(shè)計(jì)構(gòu)思 304
9.2.2 操作步驟 304
9.3　清新主題的對話框設(shè)計(jì) 326
9.3.1 設(shè)計(jì)構(gòu)思 327
9.3.2 操作步驟 327
9.4　個(gè)性化報(bào)錯(cuò)界面設(shè)計(jì) 333
9.4.1 設(shè)計(jì)構(gòu)思 333
9.4.2 操作步驟 334
9.5 UI 設(shè)計(jì)師必備技能：界面設(shè)計(jì) 343
9.5.1 清晰地展現(xiàn)信息層級 343
9.5.2 采用一致的設(shè)計(jì)語言 344
9.5.3 在細(xì)節(jié)上給予驚喜 344
第10 章 APP 中的導(dǎo)航設(shè)計(jì) 345
10.1　導(dǎo)航欄設(shè)計(jì) 346
10.1.1 設(shè)計(jì)構(gòu)思 346
10.1.2 操作步驟 346
10.2　透明列表界面設(shè)計(jì) 349
10.2.1 設(shè)計(jì)構(gòu)思 350
10.2.2 操作步驟 350
10.3　設(shè)置界面設(shè)計(jì) 359
10.3.1 設(shè)計(jì)構(gòu)思 360
10.3.2 操作步驟 360
10.4　扁平化手機(jī)界面的設(shè)計(jì) 365
10.4.1 設(shè)計(jì)構(gòu)思 366
10.4.2 操作步驟 366
10.5 UI 設(shè)計(jì)師必備技能：UI 設(shè)計(jì)原則 373
10.5.1 可視性 373
10.5.2 反饋 374
10.5.3 限制 374
10.5.4 映射 374
10.5.5 一致性 374
10.5.6 啟發(fā)性 374
第11 章 APP 綜合案例設(shè)計(jì) 375
11.1　引導(dǎo)界面設(shè)計(jì) 376
11.1.1 設(shè)計(jì)構(gòu)思 376
11.1.2 操作步驟 376
11.2　登錄/ 注冊界面的設(shè)計(jì) 381
11.2.1 設(shè)計(jì)構(gòu)思 381
11.2.2 操作步驟 381
11.3　扁平化選擇列表設(shè)計(jì) 385
11.3.1 設(shè)計(jì)構(gòu)思 385
11.3.2 操作步驟 385
11.4　歡迎界面的設(shè)計(jì) 389
11.4.1 設(shè)計(jì)構(gòu)思 389
11.4.2 操作步驟 389