內容簡介

《Photoshop移動UI設計從入門到精通(第2版)》是一本介紹如何使用Photoshop軟件進行移動UI設計的實例操作型教程，可以幫助UI設計愛好者，特別是手機APP設計人員提高UI設計能力。

《Photoshop移動UI設計從入門到精通(第2版)》從兩條線幫助讀者學習Photoshop移動UI設計：一條是案例線，通過對安卓界面、蘋果界面、微軟界面、影音游戲界面等UI案例講解，幫助讀者快速精通各類型的移動UI設計方法。另一條是技能線，介紹了Photoshop移動UI設計的核心技法：文字排版+頁面布局+素材處理+色彩校正+界面構成+濾鏡使用等，幫助讀者快速掌握移動UI設計的精髓。

《Photoshop移動UI設計從入門到精通(第2版)》結構清晰、語言簡潔、實例豐富、版式精美，適合Photoshop移動UI設計初、中級讀者，以及UI設計工作者和愛好者閱讀，同時也可以作為各類計算機培訓中心、大中專院校和技工學校的輔導教材。

前 言

寫作驅動

本書是初學者自學Photoshop 移動UI 設計的經典教程。全書從實用角度出發，全面、系統地講解了Photoshop 移動UI 設計的方法，基本上涵蓋了Photoshop 全部工具、面板和菜單命令。書中在介紹軟件功能的同時，還精心安排了50 多個具有針對性的實例，幫助讀者輕松掌握軟件具體應用，以做到學用結合。本書全部實例都配有視頻教學錄像，詳細演示案例制作過程。此外，還提供了用于查詢軟件的功能和實例的索引。

本書特色

• 58 個專家提醒奉送：作者在編寫時，將平時工作中總結的各方面軟件的實戰技巧、設計經驗等毫無保留地奉獻給讀者，不僅能夠豐富和提高本書的含金量，更方便讀者提升自身的實戰技巧與經驗，還能夠提高讀者的學習與工作效率，學有所成。

• 50 多個技能實例講解：本書通過50 多個技能實例來輔講軟件，幫助讀者在實戰演練中逐步掌握軟件的核心技能，與同類書相比，讀者可以省去學無用理論的時間，更能掌握超出同類書大量的實用技能和案例，讓學習更高效。

• 260 分鐘視頻演示：本書的軟件操作實例，全部錄制了帶語音講解的視頻，時間長度達260 分鐘（4 個多小時），重現書中所有實例操作，讀者可以結合書本觀看視頻演示，讓學習變得更加輕松。

• 200 多款素材效果奉獻：本書贈送了114 個素材文件和87 個效果文件。其中素材包括商業素材、UI 素材、電影素材、天氣預報素材、風景素材、美食素材、系統界面素材、系統按鈕素材等供讀者使用。

• 800 多張圖片全程圖解：本書采用了800 多張圖片對軟件技術、實例進行講解和效果展示，通過這些清晰的圖片，讓實例的內容變得更通俗易懂，讀者可以快速領會，舉一反三。

編著者售后

本書由匯學互聯網營銷學院編著，參與編寫的人員有王碧清、劉勝璋、劉向東、劉松異、劉偉、盧博、周旭陽、袁淑敏、譚中陽、楊端陽、李四華、王力建、柏承能、劉桂花、柏松、譚賢、譚俊杰、徐茜、劉嬪、蘇高、柏慧等人，在此表示感謝。由于作者知識水平有限，書中難免有疏漏之處，懇請廣大讀者批評、指正。

編 者

目 錄

第1 章　新手入門：移動UI 設計常識             1

1.1　便捷生活：認識移動UI 設計                    2

1.1.1　連接工具和人之間的界面                  2

1.1.2　連接用戶和手機、平板電腦之間的界面      2

1.1.3　移動UI 設計特點                         3

1.1.4　移動UI 設計基礎                         5

1.2　主流系統：深入了解UI 操作平臺                7

1.2.1　谷歌Android 系統                        8

1.2.2　蘋果iOS 系統     10

1.2.3　微軟Windows Phone 系統               12

1.3　熟悉界面：了解手機與平板電腦界面             14

1.3.1　手機界面         14

1.3.2　平板電腦界面     17

1.3.3　流程分析         19

1.3.4　注意事項         19

第2 章　掌控布局：移動UI 設計的布局原則     21

2.1　初級布局：解析移動UI 縱橫布局                22

2.1.1　豎向排列布局     22

2.1.2　橫向排列布局     22

2.1.3　九宮格排列布局                         23

2.2　高級布局：解析移動UI 特殊布局                24

2.2.1　彈出框式布局     24

2.2.2　熱門標簽布局     24

2.2.3　側邊欄式布局     25

2.2.4　陳列館式布局     26

2.2.5　分段菜單式布局                         27

2.2.6　點聚式布局       28

2.2.7　轉盤式布局       29

2.2.8　導航欄置底式布局                       29

2.2.9　磁貼狀態式布局                         29

2.2.10　超級菜單式布局                         30

2.2.11　導航欄置頂式布局                     30

2.2.12　幻燈片式布局                         31

2.3　優化布局：掌握移動UI 布局策略                33

2.3.1　圖表信息布局設計方法                   33

2.3.2　界面細節設計方法                       33

2.3.3　移動UI 的布局規則                      35

第３章　透析本質：移動UI 視覺交互設計法則   39

3.1　博人眼球：掌握UI 的視覺特色                  40

3.1.1　打造簡潔與抽象美感                     40

3.1.2　營造趣味視覺畫面                       41

3.1.3　塑造華麗視覺效果                       41

3.1.4　把握色彩的使用特點                     42

3.2　挖掘內涵：提升UI 的文字設計水平              42

3.2.1　內容設計簡化     42

3.2.2　合理的字體設計                         43

3.2.3　突出文字層次     45

3.2.4　信息表達清晰     45

3.2.5　掌握文字間距     47

3.2.6　文字顏色設計     48

3.2.7　畫面美感設計     49

3.2.8　實用性能優化     50

3.3　精益求精：優化移動UI 的圖案效果              51

3.3.1　分辨率影響美感                         51

3.3.2　拉伸影響美感     52

3.3.3　特效美化界面     53

3.3.4　交互動作特性     54

3.3.5　增加真實感       54

3.3.6　透析事物關系     55

3.3.7　展現復雜效果     56

3.3.8　展現簡單動畫     57

3.3.9　實現夸張想象     57

第4 章　深入解析：移動UI 的構成元素         59

4.1　專注體驗：掌握基本元素的設計技巧             60

4.1.1　用戶體驗         60

4.1.2　模糊背景         61

4.1.3　滾動模式         62

4.1.4　色調搭配         62

4.1.5　情景感知         63

4.1.6　擬物設計         65

4.1.7　簡潔提示         66

4.2　對點切入：靈活的帶入情感元素                 67

4.2.1　情感切入點       68

4.2.2　驚喜拉近距離     68

4.2.3　真實獲得認可     69

4.3　組件解析：熟知移動UI 的按鈕組件              70

4.3.1　常規按鈕設計     70

4.3.2　編輯輸入框設計                         71

4.3.3　開關按鈕設計     71

4.3.4　瀏覽模式設計     72

4.3.5　文本標簽設計     72

4.3.6　警告框設計       73

4.3.7　導航欄設計       73

4.3.8　頁面切換設計     74

4.3.9　進度條設計       74

4.3.10　ico 圖標設計     75

第５章　軟件進階：Photoshop 移動UI 快速上手                     77

5.1　快速上手：Photoshop 移動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　狀態欄           83

5.2.3　工具屬性欄       84

5.2.4　工具箱           84

5.2.5　圖像編輯窗口     85

5.2.6　浮動控制面板     86

5.3　圖像知識：識別移動UI 設計的基本圖像          87

5.3.1　位圖與矢量圖     87

5.3.2　像素與分辨率     88

5.3.3　圖片顏色模式     89

5.3.4　存儲文件格式     91

5.4　圖像操作：了解移動UI 圖像的操作模式          92

5.4.1　新建空白圖像文件                       93

5.4.2　打開UI 圖像文件                        93

5.4.3　保存UI 圖像文件                        94

5.4.4　關閉UI 圖像文件                        95

5.4.5　完成圖像的撤銷操作                     96

5.4.6　應用快照還原圖像                       96

5.4.7　恢復圖像初始狀態                       97

5.5　窗口調節：掌握移動UI 圖像的窗口操作          97

5.5.1　調整還原窗口設置                       97

5.5.2　展開/ 折疊面板設置                     98

5.5.3　移動調整面板設置                       99

5.5.4　圖像編輯窗口排列設置                  101

5.5.5　圖像編輯窗口切換設置                  102

5.5.6　圖像編輯窗口大小調整                  103

5.5.7　移動圖像編輯窗口                      104

第６章　視覺美感：UI 的色彩與風格設計      105

6.1　色彩解析：了解移動UI 圖像的顏色屬性        106

6.1.1　色相區分        106

6.1.2　明度標準        107

6.1.3　色彩飽和度      107

6.1.4　顏色的分布狀態                        108

6.1.5　顏色模式轉換    110

6.1.6　色域范圍的識別                        114

6.2　自動調色：自動校正移動UI 圖像色彩          115

6.2.1　“自動色調”命令                      115

6.2.2　“自動對比度”命令                    116

6.2.3　“自動顏色”命令                      117

6.3　色調調整：調整移動UI 圖像的影調            118

6.3.1　“色階”命令    119

6.3.2　“亮度/ 對比度”命令                  121

6.3.3　“曲線”命令    122

6.3.4　“曝光度”命令                        124

第7 章　畫龍點睛：移動UI 文字編排設計      127

7.1　文字排列：掌握移動UI 中文字的排列          128

7.1.1　常見文字類型    128

7.1.2　文字屬性設置    128

7.1.3　橫排文字輸入    130

7.1.4　直排文字輸入    132

7.1.5　段落文字輸入    134

7.1.6　選區文字輸入    135

7.2　完善效果：設置移動UI 中的文字效果          138

7.2.1　文字屬性的設置                        138

7.2.2　段落屬性的設置                        140

7.2.3　選擇和移動UI 圖像文字                 141

7.2.4　設置文字的方向互換                    142

7.2.5　段落文本與點文本的切換                143

7.2.6　文字的拼寫檢查                        144

7.2.7　文字的查找與替換                      146

第8 章　界面合成：移動UI 圖像摳取與合成   149

8.1　摳圖命令：掌握移動UI 圖像命令摳圖技法      150

8.1.1　“反向”命令    150

8.1.2　“色彩范圍”命令                      151

8.1.3　“擴大選取”命令                      152

8.1.4　“選取相似”命令                      153

8.2　工具摳圖：掌握移動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　魔術橡皮擦工具                        168

8.2.9　鋼筆工具        169

8.2.10　自由鋼筆工具    172

第9 章　界面特效：移動UI 圖像特效質感設計  177

9.1　特效解析：為移動UI 圖像添加簡單的特效      178

9.1.1　編輯智能濾鏡    178

9.1.2　添加波浪效果    178

9.1.3　添加玻璃效果    179

9.1.4　添加水波效果    179

9.1.5　添加旋轉扭曲效果                      180

9.1.6　添加點狀化效果                        180

9.1.7　添加彩塊化效果                        181

9.2　特效實操：為移動UI 圖像添加復雜的特效      182

9.2.1　添加彩色半調的方法                    182

9.2.2　添加液化的方法                        183

9.2.3　使用濾鏡庫編輯移動UI 圖像的方法       185

9.2.4　添加切變的方法                        186

9.2.5　添加波紋的方法                        188

9.2.6　添加海洋波紋的方法                    189

9.2.7　添加擴散亮光的方法                    191

9.2.8　創建智能濾鏡    192

第10 章　常用元素：圖標、圖形、按鈕設計   195

10.1 圖標元素：掌握移動UI 圖標的設計           196

10.1.1 音樂APP 圖標的背景效果設計          196

10.1.2 音樂APP 圖標的主體效果設計          198

10.1.3 音樂APP 圖標的細節效果設計          200

10.2 圖形元素：掌握移動UI 控件的設計           204

10.2.1 切換條的背景效果設計                  204

10.2.2 切換條的主體效果設計                  205

10.2.3 切換條的細節效果設計                  208

10.3 基礎元素：掌握移動UI 搜索框的設計         212

10.3.1 搜索框的主體效果設計                  212

10.3.2 搜索框搜索圖標的效果設計              214

10.3.3 搜索框二維碼的效果設計                216

第11 章　蘋果系統：常見蘋果系統UI 設計                          219

11.1 天氣界面：掌握天氣控件界面的設計          220

11.1.1 設計天氣控件界面的背景效果          220

11.1.2 設計天氣控件界面的主體效果          222

11.2 日歷界面：掌握手機日歷界面的設計          228

11.2.1 設計日歷APP 界面的背景效果          229

11.2.2 設計日歷APP 界面的主體效果          231

第12 章　安卓系統：常見安卓系統UI 設計                          243

12.1 鎖屏界面：掌握安卓系統個性鎖屏界面的設計                        244

12.1.1 設計安卓系統鎖屏界面的背景效果      244

12.1.2 設計安卓系統鎖屏界面的主體效果      248

12.2 程序界面：掌握安卓系統程序界面的設計      251

12.2.1 安卓應用程序界面的主體效果設計      252

12.2.2 安卓應用程序界面的整體效果設計      257

第13 章　微軟系統：常見微軟系統UI 設計                          265

13.1 撥號鍵盤：掌握微軟手機撥號鍵盤的設計      266

13.1.1 微軟手機撥號鍵盤界面的背景效果設計  266

13.1.2 微軟手機撥號鍵盤界面的主體效果設計  271

13.2 用戶界面：掌握微軟手機用戶界面的設計      274

13.2.1 微軟手機用戶界面的背景效果設計      275

13.2.2 微軟系統用戶界面的整體效果設計      280

第14 章　登錄界面：社交與免費WiFi 登錄UI 設計                  289

14.1 云社交：掌握云社交登錄界面的設計          290

14.1.1 云社交APP 登錄界面的背景效果設計    290

14.1.2 云社交APP 登錄界面的文字效果設計    294

14.2 免費WiFi：掌握免費WiFi 登錄界面的設計   297

14.2.1 免費WiFi 應用登錄界面的背景效果設計  298

14.2.2 免費WiFi 應用登錄界面的表單按鈕設計  302

14.2.3 免費WiFi 應用登錄界面的細節和文本設計                      310

第15 章　影音游戲：影音與游戲UI 設計       315

15.1 視頻播放：掌握視頻播放APP 界面的設計                          316

15.1.1 視頻播放APP 界面的主體效果設計      316

15.1.2 視頻播放APP 界面的細節效果設計      318

15.2 休閑游戲：掌握休閑游戲APP 界面的設計                          321

15.2.1 休閑游戲界面的背景效果設計          321

15.2.2 休閑游戲界面的主體效果設計          324

15.2.3 休閑游戲界面的文本效果設計          327

第16 章　媒體平臺：豆瓣與小程序UI 設計                          333

16.1　豆瓣設計：書店頁面廣告設計                334

16.1.1　制作豆瓣書店頁面廣告主體效果        334

16.1.2　制作豆瓣書店頁面廣告文字效果        337

16.2　小程序設計：婚紗攝影小程序界面設計        341

16.2.1　制作婚紗攝影小程序首頁廣告效果      341

16.2.2　制作婚紗攝影小程序服務中心效果      344

16.2.3　制作婚紗攝影小程序彩色導航欄        347