Photoshop移動(dòng)UI設(shè)計(jì)從入門到精通（第2版）

目 錄
第1 章　新手入門：移動(dòng)UI 設(shè)計(jì)常識             1
1.1　便捷生活：認(rèn)識移動(dòng)UI 設(shè)計(jì)                    2
1.1.1　連接工具和人之間的界面                  2
1.1.2　連接用戶和手機(jī)、平板電腦之間的界面      2
1.1.3　移動(dòng)UI 設(shè)計(jì)特點(diǎn)                         3
1.1.4　移動(dòng)UI 設(shè)計(jì)基礎(chǔ)                         5
1.2　主流系統(tǒng)：深入了解UI 操作平臺                7
1.2.1　谷歌Android 系統(tǒng)                        8
1.2.2　蘋果iOS 系統(tǒng)     10
1.2.3　微軟Windows Phone 系統(tǒng)               12
1.3　熟悉界面：了解手機(jī)與平板電腦界面             14
1.3.1　手機(jī)界面         14
1.3.2　平板電腦界面     17
1.3.3　流程分析         19
1.3.4　注意事項(xiàng)         19
第2 章　掌控布局：移動(dòng)UI 設(shè)計(jì)的布局原則     21
2.1　初級布局：解析移動(dòng)UI 縱橫布局                22
2.1.1　豎向排列布局     22
2.1.2　橫向排列布局     22
2.1.3　九宮格排列布局                         23
2.2　高級布局：解析移動(dòng)UI 特殊布局                24
2.2.1　彈出框式布局     24
2.2.2　熱門標(biāo)簽布局     24
2.2.3　側(cè)邊欄式布局     25
2.2.4　陳列館式布局     26
2.2.5　分段菜單式布局                         27
2.2.6　點(diǎn)聚式布局       28
2.2.7　轉(zhuǎn)盤式布局       29
2.2.8　導(dǎo)航欄置底式布局                       29
2.2.9　磁貼狀態(tài)式布局                         29
2.2.10　超級菜單式布局                         30
2.2.11　導(dǎo)航欄置頂式布局                     30
2.2.12　幻燈片式布局                         31
2.3　優(yōu)化布局：掌握移動(dòng)UI 布局策略                33
2.3.1　圖表信息布局設(shè)計(jì)方法                   33
2.3.2　界面細(xì)節(jié)設(shè)計(jì)方法                       33
2.3.3　移動(dòng)UI 的布局規(guī)則                      35
第３章　透析本質(zhì)：移動(dòng)UI 視覺交互設(shè)計(jì)法則   39
3.1　博人眼球：掌握UI 的視覺特色                  40
3.1.1　打造簡潔與抽象美感                     40
3.1.2　營造趣味視覺畫面                       41
3.1.3　塑造華麗視覺效果                       41
3.1.4　把握色彩的使用特點(diǎn)                     42
3.2　挖掘內(nèi)涵：提升UI 的文字設(shè)計(jì)水平              42
3.2.1　內(nèi)容設(shè)計(jì)簡化     42
3.2.2　合理的字體設(shè)計(jì)                         43
3.2.3　突出文字層次     45
3.2.4　信息表達(dá)清晰     45
3.2.5　掌握文字間距     47
3.2.6　文字顏色設(shè)計(jì)     48
3.2.7　畫面美感設(shè)計(jì)     49
3.2.8　實(shí)用性能優(yōu)化     50
3.3　精益求精：優(yōu)化移動(dòng)UI 的圖案效果              51
3.3.1　分辨率影響美感                         51
3.3.2　拉伸影響美感     52
3.3.3　特效美化界面     53
3.3.4　交互動(dòng)作特性     54
3.3.5　增加真實(shí)感       54
3.3.6　透析事物關(guān)系     55
3.3.7　展現(xiàn)復(fù)雜效果     56
3.3.8　展現(xiàn)簡單動(dòng)畫     57
3.3.9　實(shí)現(xiàn)夸張想象     57
第4 章　深入解析：移動(dòng)UI 的構(gòu)成元素         59
4.1　專注體驗(yàn)：掌握基本元素的設(shè)計(jì)技巧             60
4.1.1　用戶體驗(yàn)         60
4.1.2　模糊背景         61
4.1.3　滾動(dòng)模式         62
4.1.4　色調(diào)搭配         62
4.1.5　情景感知         63
4.1.6　擬物設(shè)計(jì)         65
4.1.7　簡潔提示         66
4.2　對點(diǎn)切入：靈活的帶入情感元素                 67
4.2.1　情感切入點(diǎn)       68
4.2.2　驚喜拉近距離     68
4.2.3　真實(shí)獲得認(rèn)可     69
4.3　組件解析：熟知移動(dòng)UI 的按鈕組件              70
4.3.1　常規(guī)按鈕設(shè)計(jì)     70
4.3.2　編輯輸入框設(shè)計(jì)                         71
4.3.3　開關(guān)按鈕設(shè)計(jì)     71
4.3.4　瀏覽模式設(shè)計(jì)     72
4.3.5　文本標(biāo)簽設(shè)計(jì)     72
4.3.6　警告框設(shè)計(jì)       73
4.3.7　導(dǎo)航欄設(shè)計(jì)       73
4.3.8　頁面切換設(shè)計(jì)     74
4.3.9　進(jìn)度條設(shè)計(jì)       74
4.3.10　ico 圖標(biāo)設(shè)計(jì)     75
第５章　軟件進(jìn)階：Photoshop 移動(dòng)UI 快速上手                     77
5.1　快速上手：Photoshop 移動(dòng)UI 安裝與卸載      78
5.1.1　Photoshop CC 的安裝                   78
5.1.2　Photoshop CC 的卸載                   80
5.2　界面詳解：熟悉Photoshop CC 的工作界面     81
5.2.1　菜單欄           82
5.2.2　狀態(tài)欄           83
5.2.3　工具屬性欄       84
5.2.4　工具箱           84
5.2.5　圖像編輯窗口     85
5.2.6　浮動(dòng)控制面板     86
5.3　圖像知識：識別移動(dòng)UI 設(shè)計(jì)的基本圖像          87
5.3.1　位圖與矢量圖     87
5.3.2　像素與分辨率     88
5.3.3　圖片顏色模式     89
5.3.4　存儲文件格式     91
5.4　圖像操作：了解移動(dòng)UI 圖像的操作模式          92
5.4.1　新建空白圖像文件                       93
5.4.2　打開UI 圖像文件                        93
5.4.3　保存UI 圖像文件                        94
5.4.4　關(guān)閉UI 圖像文件                        95
5.4.5　完成圖像的撤銷操作                     96
5.4.6　應(yīng)用快照還原圖像                       96
5.4.7　恢復(fù)圖像初始狀態(tài)                       97
5.5　窗口調(diào)節(jié)：掌握移動(dòng)UI 圖像的窗口操作          97
5.5.1　調(diào)整還原窗口設(shè)置                       97
5.5.2　展開/ 折疊面板設(shè)置                     98
5.5.3　移動(dòng)調(diào)整面板設(shè)置                       99
5.5.4　圖像編輯窗口排列設(shè)置                  101
5.5.5　圖像編輯窗口切換設(shè)置                  102
5.5.6　圖像編輯窗口大小調(diào)整                  103
5.5.7　移動(dòng)圖像編輯窗口                      104
第６章　視覺美感：UI 的色彩與風(fēng)格設(shè)計(jì)      105
6.1　色彩解析：了解移動(dòng)UI 圖像的顏色屬性        106
6.1.1　色相區(qū)分        106
6.1.2　明度標(biāo)準(zhǔn)        107
6.1.3　色彩飽和度      107
6.1.4　顏色的分布狀態(tài)                        108
6.1.5　顏色模式轉(zhuǎn)換    110
6.1.6　色域范圍的識別                        114
6.2　自動(dòng)調(diào)色：自動(dòng)校正移動(dòng)UI 圖像色彩          115
6.2.1　“自動(dòng)色調(diào)”命令                      115
6.2.2　“自動(dòng)對比度”命令                    116
6.2.3　“自動(dòng)顏色”命令                      117
6.3　色調(diào)調(diào)整：調(diào)整移動(dòng)UI 圖像的影調(diào)            118
6.3.1　“色階”命令    119
6.3.2　“亮度/ 對比度”命令                  121
6.3.3　“曲線”命令    122
6.3.4　“曝光度”命令                        124
第7 章　畫龍點(diǎn)睛：移動(dòng)UI 文字編排設(shè)計(jì)      127
7.1　文字排列：掌握移動(dòng)UI 中文字的排列          128
7.1.1　常見文字類型    128
7.1.2　文字屬性設(shè)置    128
7.1.3　橫排文字輸入    130
7.1.4　直排文字輸入    132
7.1.5　段落文字輸入    134
7.1.6　選區(qū)文字輸入    135
7.2　完善效果：設(shè)置移動(dòng)UI 中的文字效果          138
7.2.1　文字屬性的設(shè)置                        138
7.2.2　段落屬性的設(shè)置                        140
7.2.3　選擇和移動(dòng)UI 圖像文字                 141
7.2.4　設(shè)置文字的方向互換                    142
7.2.5　段落文本與點(diǎn)文本的切換                143
7.2.6　文字的拼寫檢查                        144
7.2.7　文字的查找與替換                      146
第8 章　界面合成：移動(dòng)UI 圖像摳取與合成   149
8.1　摳圖命令：掌握移動(dòng)UI 圖像命令摳圖技法      150
8.1.1　“反向”命令    150
8.1.2　“色彩范圍”命令                      151
8.1.3　“擴(kuò)大選取”命令                      152
8.1.4　“選取相似”命令                      153
8.2　工具摳圖：掌握移動(dòng)UI 工具摳圖技法          155
8.2.1　快速選擇工具    155
8.2.2　魔棒工具        157
8.2.3　矩形選框工具    159
8.2.4　橢圓選框工具    161
8.2.5　套索工具        163
8.2.6　多邊形套索工具                        164
8.2.7　磁性套索工具    166
8.2.8　魔術(shù)橡皮擦工具                        168
8.2.9　鋼筆工具        169
8.2.10　自由鋼筆工具    172
第9 章　界面特效：移動(dòng)UI 圖像特效質(zhì)感設(shè)計(jì)  177
9.1　特效解析：為移動(dòng)UI 圖像添加簡單的特效      178
9.1.1　編輯智能濾鏡    178
9.1.2　添加波浪效果    178
9.1.3　添加玻璃效果    179
9.1.4　添加水波效果    179
9.1.5　添加旋轉(zhuǎn)扭曲效果                      180
9.1.6　添加點(diǎn)狀化效果                        180
9.1.7　添加彩塊化效果                        181
9.2　特效實(shí)操：為移動(dòng)UI 圖像添加復(fù)雜的特效      182
9.2.1　添加彩色半調(diào)的方法                    182
9.2.2　添加液化的方法                        183
9.2.3　使用濾鏡庫編輯移動(dòng)UI 圖像的方法       185
9.2.4　添加切變的方法                        186
9.2.5　添加波紋的方法                        188
9.2.6　添加海洋波紋的方法                    189
9.2.7　添加擴(kuò)散亮光的方法                    191
9.2.8　創(chuàng)建智能濾鏡    192
第10 章　常用元素：圖標(biāo)、圖形、按鈕設(shè)計(jì)   195
10.1 圖標(biāo)元素：掌握移動(dòng)UI 圖標(biāo)的設(shè)計(jì)           196
10.1.1 音樂APP 圖標(biāo)的背景效果設(shè)計(jì)          196
10.1.2 音樂APP 圖標(biāo)的主體效果設(shè)計(jì)          198
10.1.3 音樂APP 圖標(biāo)的細(xì)節(jié)效果設(shè)計(jì)          200
10.2 圖形元素：掌握移動(dòng)UI 控件的設(shè)計(jì)           204
10.2.1 切換條的背景效果設(shè)計(jì)                  204
10.2.2 切換條的主體效果設(shè)計(jì)                  205
10.2.3 切換條的細(xì)節(jié)效果設(shè)計(jì)                  208
10.3 基礎(chǔ)元素：掌握移動(dòng)UI 搜索框的設(shè)計(jì)         212
10.3.1 搜索框的主體效果設(shè)計(jì)                  212
10.3.2 搜索框搜索圖標(biāo)的效果設(shè)計(jì)              214
10.3.3 搜索框二維碼的效果設(shè)計(jì)                216
第11 章　蘋果系統(tǒng)：常見蘋果系統(tǒng)UI 設(shè)計(jì)                          219
11.1 天氣界面：掌握天氣控件界面的設(shè)計(jì)          220
11.1.1 設(shè)計(jì)天氣控件界面的背景效果          220
11.1.2 設(shè)計(jì)天氣控件界面的主體效果          222
11.2 日歷界面：掌握手機(jī)日歷界面的設(shè)計(jì)          228
11.2.1 設(shè)計(jì)日歷APP 界面的背景效果          229
11.2.2 設(shè)計(jì)日歷APP 界面的主體效果          231
第12 章　安卓系統(tǒng)：常見安卓系統(tǒng)UI 設(shè)計(jì)                          243
12.1 鎖屏界面：掌握安卓系統(tǒng)個(gè)性鎖屏界面的設(shè)計(jì)                        244
12.1.1 設(shè)計(jì)安卓系統(tǒng)鎖屏界面的背景效果      244
12.1.2 設(shè)計(jì)安卓系統(tǒng)鎖屏界面的主體效果      248
12.2 程序界面：掌握安卓系統(tǒng)程序界面的設(shè)計(jì)      251
12.2.1 安卓應(yīng)用程序界面的主體效果設(shè)計(jì)      252
12.2.2 安卓應(yīng)用程序界面的整體效果設(shè)計(jì)      257
第13 章　微軟系統(tǒng)：常見微軟系統(tǒng)UI 設(shè)計(jì)                          265
13.1 撥號鍵盤：掌握微軟手機(jī)撥號鍵盤的設(shè)計(jì)      266
13.1.1 微軟手機(jī)撥號鍵盤界面的背景效果設(shè)計(jì)  266
13.1.2 微軟手機(jī)撥號鍵盤界面的主體效果設(shè)計(jì)  271
13.2 用戶界面：掌握微軟手機(jī)用戶界面的設(shè)計(jì)      274
13.2.1 微軟手機(jī)用戶界面的背景效果設(shè)計(jì)      275
13.2.2 微軟系統(tǒng)用戶界面的整體效果設(shè)計(jì)      280
第14 章　登錄界面：社交與免費(fèi)WiFi 登錄UI 設(shè)計(jì)                  289
14.1 云社交：掌握云社交登錄界面的設(shè)計(jì)          290
14.1.1 云社交APP 登錄界面的背景效果設(shè)計(jì)    290
14.1.2 云社交APP 登錄界面的文字效果設(shè)計(jì)    294
14.2 免費(fèi)WiFi：掌握免費(fèi)WiFi 登錄界面的設(shè)計(jì)   297
14.2.1 免費(fèi)WiFi 應(yīng)用登錄界面的背景效果設(shè)計(jì)  298
14.2.2 免費(fèi)WiFi 應(yīng)用登錄界面的表單按鈕設(shè)計(jì)  302
14.2.3 免費(fèi)WiFi 應(yīng)用登錄界面的細(xì)節(jié)和文本設(shè)計(jì)                      310
第15 章　影音游戲：影音與游戲UI 設(shè)計(jì)       315
15.1 視頻播放：掌握視頻播放APP 界面的設(shè)計(jì)                          316
15.1.1 視頻播放APP 界面的主體效果設(shè)計(jì)      316
15.1.2 視頻播放APP 界面的細(xì)節(jié)效果設(shè)計(jì)      318
15.2 休閑游戲：掌握休閑游戲APP 界面的設(shè)計(jì)                          321
15.2.1 休閑游戲界面的背景效果設(shè)計(jì)          321
15.2.2 休閑游戲界面的主體效果設(shè)計(jì)          324
15.2.3 休閑游戲界面的文本效果設(shè)計(jì)          327
第16 章　媒體平臺：豆瓣與小程序UI 設(shè)計(jì)                          333
16.1　豆瓣設(shè)計(jì)：書店頁面廣告設(shè)計(jì)                334
16.1.1　制作豆瓣書店頁面廣告主體效果        334
16.1.2　制作豆瓣書店頁面廣告文字效果        337
16.2　小程序設(shè)計(jì)：婚紗攝影小程序界面設(shè)計(jì)        341
16.2.1　制作婚紗攝影小程序首頁廣告效果      341
16.2.2　制作婚紗攝影小程序服務(wù)中心效果      344
16.2.3　制作婚紗攝影小程序彩色導(dǎo)航欄        347