內(nèi)容簡介

本書是一本講解如何使用Photoshop軟件進行移動UI設(shè)計的實例操作型自學(xué)教程，可以幫助UI設(shè)計愛好者，特別是手機APP設(shè)計人員，提高UI制作能力，拓展移動UI視覺設(shè)計的創(chuàng)作思路。

本書從兩條線出發(fā)，幫助讀者學(xué)習(xí)Photoshop移動UI設(shè)計。

一條是橫向案例線，通過對各種類型的素材進行后期制作，如安卓界面、蘋果界面、微軟界面、影音游戲界面等案例，幫助讀者快速精通各類型的移動UI設(shè)計方法。

另一條是縱向技能線，介紹了Photoshop移動UI設(shè)計的核心技法：文字排版+頁面布局+素材處理+色彩校正+界面構(gòu)成+濾鏡使用等，對移動UI設(shè)計的核心技術(shù)與精髓內(nèi)容進行了全面且詳細的講解，幫助讀者快速掌握移動UI設(shè)計的精髓。

本書共分為15章，內(nèi)容包括：移動UI的設(shè)計常識，移動UI設(shè)計的布局原則，移動UI視覺交互設(shè)計法則，移動UI的構(gòu)成元素，Photoshop移動UI快速上手，UI的色彩與風(fēng)格設(shè)計，移動UI文字的編排設(shè)計，移動UI圖像的摳取與合成，移動UI圖像特效質(zhì)感設(shè)計，圖標、圖形、按鈕設(shè)計，常見蘋果系統(tǒng)UI設(shè)計，常見安卓系統(tǒng)UI設(shè)計，常見微軟系統(tǒng)UI設(shè)計，社交與免費WiFi登錄UI設(shè)計，影音與游戲UI設(shè)計。全書使用自帶素材，通過對素材的不同處理，制作出精美的界面效果。制作界面過程已被錄制為視頻，刻錄為光盤，在手機與網(wǎng)絡(luò)中進行分享，讀者學(xué)后可以融會貫通、舉一反三，從而更好地完成自己的作品。

本書結(jié)構(gòu)清晰，語言簡潔，實例豐富，版式精美，適合Photoshop移動UI設(shè)計初、中級讀者閱讀，包括廣大UI設(shè)計愛好者、UI設(shè)計工作者，同時也可以作為各類計算機培訓(xùn)中心、技工學(xué)校和大中專職業(yè)院校的輔導(dǎo)教材。

前 言

寫作驅(qū)動

本書是初、中級讀者全面自學(xué)Photoshop 移動UI 設(shè)計的經(jīng)典暢銷教程，作者從實用角度出發(fā)，全面、系統(tǒng)地講解了Photoshop 移動UI 設(shè)計的方法，基本上涵蓋了Photoshop 主要工具、面板和菜單命令。本書在介紹軟件功能的同時，還精心安排了50 多個具有針對性的實例，幫助讀者輕松掌握軟件使用技巧和具體應(yīng)用，以做到“學(xué)用結(jié)合”。此外，全部實例都配有視頻教學(xué)，詳細演示了實例制作過程。

本書特色

58 個專家指點放送：本書在編寫時將平時工作中總結(jié)的軟件各方面的實戰(zhàn)技巧、設(shè)計經(jīng)驗等毫無保留地奉獻給讀者，不僅使本書更具有含金量，而且更方便讀者提升軟件實戰(zhàn)技巧與經(jīng)驗，從而大大提高讀者學(xué)習(xí)與工作的效率，使讀者學(xué)有所成。

50 多個技能實例奉獻：本書通過大量技能實例來輔講軟件，達50 多個，幫助讀者在實戰(zhàn)演練中逐步掌握軟件的核心技能與操作技巧，與同類書相比，使讀者可以省去學(xué)煩瑣理論的時間，更能掌握超出同類書的大量實用技能，讓學(xué)習(xí)更高效。

250 分鐘音視頻演示：本書中的軟件操作技能實例，全部錄制了帶語音講解的視頻，時間長度達250 分鐘（4 個多小時），重現(xiàn)書中所有實例操作過程，讀者可以結(jié)合書本，也可以獨立觀看視頻演示，像看電影一樣進行學(xué)習(xí)，讓學(xué)習(xí)變得更加輕松。

180 多款素材效果奉獻：隨書光盤包含了105 個素材文件，80 個效果文件。其中，素材涉及商業(yè)素材、UI 素材、電影素材、天氣預(yù)報素材、風(fēng)景素材、美食素材、系統(tǒng)界面素材、系統(tǒng)按鈕素材等，應(yīng)有盡有，供讀者使用。

800 多張圖片全程圖解：本書采用了800 多張圖片對軟件技術(shù)、實例制作，進行了全程式的圖解，通過這些清晰的圖片，讓實例的內(nèi)容變得更通俗易懂，使讀者可以一目了然，快速領(lǐng)會，舉一反三，制作出更多優(yōu)秀的移動UI 作品。

編著者售后

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

                                                               編 者

 

目 錄

第1 章 新手導(dǎo)航：移動UI 的設(shè)計常識 ……………………………………… 1

1.1　便捷生活：認識移動UI 設(shè)計 ………………………………………………… 2

1.1.1 連接工具和人的界面 ………………………………………………………2

1.1.2 連接用戶和手機的界面 ……………………………………………………2

1.1.3 移動UI 的設(shè)計特點 ………………………………………………………3

1.1.4 移動UI 的設(shè)計基礎(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 熟悉界面：了解手機與平板的界面 …………………………………………… 15

1.3.1 手機界面 ………………………………………………………………… 15

1.3.2 平板電腦界面 …………………………………………………………… 18

1.3.3 流程分析 ………………………………………………………………… 20

1.3.4 注意事項 ………………………………………………………………… 20

第2 章 掌控布局：移動UI 設(shè)計的布局原則 ……………………………… 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 側(cè)邊欄式布局 …………………………………………………………… 25

2.2.4 陳列館式布局 …………………………………………………………… 26

2.2.5 分段菜單式布局 ………………………………………………………… 28

2.2.6 點聚式布局 ……………………………………………………………… 28

2.2.7 轉(zhuǎn)盤式布局 ……………………………………………………………… 29

2.2.8 導(dǎo)航欄置底式布局 ……………………………………………………… 29

2.2.9 磁貼狀態(tài)式布局 ………………………………………………………… 30

2.2.10 超級菜單式布局 ………………………………………………………… 30

2.2.11 導(dǎo)航欄置頂式布局……………………………………………………… 31

2.2.12 幻燈片式布局…………………………………………………………… 32

2.3 優(yōu)化布局：掌握移動UI 的布局策略 ………………………………………… 33

2.3.1 圖表信息布局的設(shè)計方法 ……………………………………………… 33

2.3.2 界面細節(jié)的設(shè)計方法 …………………………………………………… 34

2.3.3 移動UI 的布局規(guī)則 …………………………………………………… 36

第3 章 透析本質(zhì)：移動UI 視覺交互設(shè)計法則 …………………………… 41

3.1 博人眼球：把握UI 的視覺特色 ……………………………………………… 42

3.1.1 打造簡潔與抽象美感 …………………………………………………… 42

3.1.2 營造趣味視覺畫面 ……………………………………………………… 43

3.1.3 塑造華麗視覺效果 ……………………………………………………… 44

3.1.4 把握色彩的使用特點 …………………………………………………… 45

3.2 挖掘內(nèi)涵：提升UI 的文字設(shè)計 ……………………………………………… 45

3.2.1 內(nèi)容設(shè)計簡化 …………………………………………………………… 46

3.2.2 字體設(shè)計合理 …………………………………………………………… 46

3.2.3 突出文字層次 …………………………………………………………… 48

3.2.4 信息表達清晰 …………………………………………………………… 50

3.2.5 掌握文字間距 …………………………………………………………… 52

3.2.6 文字顏色設(shè)計 …………………………………………………………… 52

3.2.7 畫面美感設(shè)計 …………………………………………………………… 54

3.2.8 實用性能優(yōu)化 …………………………………………………………… 55

3.3 精益求精：優(yōu)化移動UI 的圖案效果 ………………………………………… 56

3.3.1 分辨率影響美感 ………………………………………………………… 56

3.3.2 拉伸影響美感 …………………………………………………………… 57

3.3.3 特效美化界面 …………………………………………………………… 58

3.3.4 交互動作特性 …………………………………………………………… 59

3.3.5 增加真實感 ……………………………………………………………… 59

3.3.6 透析事物關(guān)系 …………………………………………………………… 60

3.3.7 展現(xiàn)復(fù)雜效果 …………………………………………………………… 61

3.3.8 展現(xiàn)簡單動畫 …………………………………………………………… 62

3.3.9 實現(xiàn)夸張想象 …………………………………………………………… 62

第4 章 深入解析：移動UI 的構(gòu)成元素 …………………………………… 63

4.1 專注體驗：掌握基本元素的設(shè)計技巧 ………………………………………… 64

4.1.1 用戶體驗 ………………………………………………………………… 64

4.1.2 模糊背景 ………………………………………………………………… 65

4.1.3 滾動功能 ………………………………………………………………… 66

4.1.4 色調(diào)搭配 ………………………………………………………………… 66

4.1.5 情景感知 ………………………………………………………………… 67

4.1.6 擬物設(shè)計 ………………………………………………………………… 69

4.1.7 簡潔提示 ………………………………………………………………… 70

4.2 對點切入：靈活地帶入情感元素 ……………………………………………… 71

4.2.1 情感切入點 ……………………………………………………………… 72

4.2.2 驚喜拉近距離 …………………………………………………………… 73

4.2.3 真實獲得認可 …………………………………………………………… 74

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

4.3.1 常規(guī)按鈕設(shè)計 …………………………………………………………… 75

4.3.2 編輯輸入框設(shè)計 ………………………………………………………… 76

4.3.3 開關(guān)按鈕設(shè)計 …………………………………………………………… 76

4.3.4 瀏覽模式設(shè)計 …………………………………………………………… 77

4.3.5 文本標簽設(shè)計 …………………………………………………………… 78

4.3.6 警告框設(shè)計 ……………………………………………………………… 78

4.3.7 導(dǎo)航欄設(shè)計 ……………………………………………………………… 79

4.3.8 頁面切換設(shè)計 …………………………………………………………… 79

4.3.9 進度條設(shè)計 ……………………………………………………………… 80

4.3.10 ico 圖標設(shè)計 …………………………………………………………… 81

第5 章 軟件進階：Photoshop 移動UI 快速上手 ……………………… 83

5.1 軟件進階：Photoshop 移動UI 快速上手 ………………………………… 84

5.1.1 Photoshop CC 的安裝 ………………………………………………… 84

5.1.2 Photoshop CC 的卸載 ………………………………………………… 86

5.2 界面詳解：熟悉Photoshop CC 的工作界面 ……………………………… 87

5.2.1 菜單欄 …………………………………………………………………… 88

5.2.2 狀態(tài)欄 …………………………………………………………………… 89

5.2.3 工具屬性欄 ……………………………………………………………… 90

5.2.4 工具箱 …………………………………………………………………… 91

5.2.5 圖像編輯窗口 …………………………………………………………… 91

5.2.6 浮動控制面板 …………………………………………………………… 92

5.3 圖像知識：識別移動UI 設(shè)計的基本圖像 …………………………………… 93

5.3.1 位圖與矢量圖形 ………………………………………………………… 93

5.3.2 像素與分辨率 …………………………………………………………… 94

5.3.3 圖像顏色模式 …………………………………………………………… 96

5.3.4 存儲文件格式 …………………………………………………………… 98

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

5.4.1 新建空白圖像文件 ……………………………………………………… 99

5.4.2 打開UI 圖像文件 ………………………………………………………100

5.4.3 保存UI 圖像文件 ………………………………………………………101

5.4.4 關(guān)閉UI 圖像文件 ………………………………………………………102

5.4.5 完成圖像撤銷操作 ………………………………………………………103

5.4.6 應(yīng)用快照還原圖像 ………………………………………………………103

5.4.7 恢復(fù)圖像初始狀態(tài) ………………………………………………………104

5.5 窗口調(diào)節(jié)：掌握移動UI 圖像的窗口操作 ………………………………… 104

5.5.1 調(diào)整還原窗口設(shè)置 ………………………………………………………105

5.5.2 展開/ 折疊面板設(shè)置 ……………………………………………………106

5.5.3 移動調(diào)整面板設(shè)置 ………………………………………………………107

5.5.4 圖像編輯窗口排列設(shè)置 …………………………………………………109

5.5.5 圖像編輯窗口切換設(shè)置 …………………………………………………111

5.5.6 圖像編輯窗口大小調(diào)整 …………………………………………………112

5.5.7 移動圖像編輯窗口 ………………………………………………………114

第6 章 視覺美感：UI 的色彩與風(fēng)格設(shè)計 …………………………………115

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

6.1.1 色相區(qū)分 …………………………………………………………………116

6.1.2 明度標準 …………………………………………………………………117

6.1.3 色彩飽和度 ………………………………………………………………117

6.1.4 顏色的分布狀態(tài) …………………………………………………………118

6.1.5 顏色模式轉(zhuǎn)換 ……………………………………………………………120

6.1.6 色域范圍的識別 …………………………………………………………124

6.2 自動調(diào)色：自動校正移動UI 圖像的色彩 ………………………………… 125

6.2.1 “自動色調(diào)”命令 ………………………………………………………125

6.2.2 “自動對比度”命令 ……………………………………………………126

6.2.3 “自動顏色”命令 ………………………………………………………127

6.3 色調(diào)調(diào)整：調(diào)整移動UI 圖像的影調(diào) ……………………………………… 129

6.3.1 “色階”命令 ……………………………………………………………129

6.3.2 “亮度/ 對比度”命令 …………………………………………………131

6.3.3 “曲線”命令 ……………………………………………………………133

6.3.4 “曝光度”命令 …………………………………………………………135

第7 章 畫龍點睛：移動UI 文字的編排設(shè)計 ………………………………137

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

7.1.1 常見文字類型 ……………………………………………………………138

7.1.2 文字屬性設(shè)置 ……………………………………………………………138

7.1.3 橫排文字輸入 ……………………………………………………………141

7.1.4 直排文字輸入 ……………………………………………………………142

7.1.5 段落文字輸入 ……………………………………………………………144

7.1.6 選區(qū)文字輸入 ……………………………………………………………146

7.2 完善效果：設(shè)置移動UI 中的文字效果 …………………………………… 149

7.2.1 文字屬性的設(shè)置 …………………………………………………………149

7.2.2 段落屬性的設(shè)置 …………………………………………………………150

7.2.3 選擇和移動UI 圖像文字 ………………………………………………152

7.2.4 設(shè)置文字的方向互換 ……………………………………………………153

7.2.5 段落文本與點文本的切換 ………………………………………………153

7.2.6 文字的拼寫檢查 …………………………………………………………155

7.2.7 文字的查找與替換 ………………………………………………………157

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

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

8.1.1 “反向”命令 ……………………………………………………………160

8.1.2 “色彩范圍”命令 ………………………………………………………161

8.1.3 “擴大選取”命令…………………………………………………………163

8.1.4 “選取相似”命令 ………………………………………………………164

8.2 工具摳圖：掌握移動UI 圖像工具摳圖技法 ……………………………… 165

8.2.1 快速選擇工具 ……………………………………………………………165

8.2.2 魔棒工具 …………………………………………………………………167

8.2.3 矩形選框工具 ……………………………………………………………170

8.2.4 橢圓選框工具 ……………………………………………………………173

8.2.5 套索工具 …………………………………………………………………174

8.2.6 多邊形套索工具 …………………………………………………………175

8.2.7 磁性套索工具 ……………………………………………………………177

8.2.8 魔術(shù)橡皮擦工具 …………………………………………………………179

8.2.9 鋼筆工具 …………………………………………………………………181

8.2.10 自由鋼筆工具 ……………………………………………………………184

第9 章 界面特效：移動UI 圖像特效質(zhì)感設(shè)計 ………………………… 187

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

9.1.1 編輯智能濾鏡 ……………………………………………………………188

9.1.2 添加波浪效果 ……………………………………………………………189

9.1.3 添加玻璃效果 ……………………………………………………………189

9.1.4 添加水波效果 ……………………………………………………………190

9.1.5 添加旋轉(zhuǎn)扭曲效果 ………………………………………………………190

9.1.6 添加點狀化效果 …………………………………………………………191

9.1.7 添加彩塊化效果 …………………………………………………………191

9.2 特效實操：為移動UI 圖像添加復(fù)雜的特效 ……………………………… 192

9.2.1 添加彩色半調(diào)的方法 ……………………………………………………192

9.2.2 添加液化的方法 …………………………………………………………194

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

9.2.4 添加切變效果的方法 ……………………………………………………198

9.2.5 添加波紋的方法 …………………………………………………………199

9.2.6 添加海洋波紋的方法 ……………………………………………………200

9.2.7 添加擴散亮光的方法 ……………………………………………………201

9.2.8 創(chuàng)建智能濾鏡 ……………………………………………………………203

第10 章 常用元素：圖標、圖形、按鈕設(shè)計 …………………………… 205

10.1 圖標元素：掌握移動UI 圖標的設(shè)計 ……………………………………… 206

10.1.1 音樂APP 圖標的背景效果設(shè)計 ………………………………………206

10.1.2 音樂APP 圖標的主體效果設(shè)計 ………………………………………208

10.1.3 音樂APP 圖標的細節(jié)效果設(shè)計 ………………………………………210

10.2 圖形元素：掌握移動UI 圖形的設(shè)計 ……………………………………… 214

10.2.1 切換條的背景效果設(shè)計 …………………………………………………214

10.2.2 切換條的主體效果設(shè)計 …………………………………………………215

10.2.3 切換條的細節(jié)效果設(shè)計 …………………………………………………218

10.3 基礎(chǔ)元素：掌握移動UI 按鈕的設(shè)計 ……………………………………… 222

10.3.1 搜索框的主體效果設(shè)計 …………………………………………………222

10.3.2 搜索框搜索圖標的效果設(shè)計 ……………………………………………224

10.3.3 搜索框二維碼的效果設(shè)計 ………………………………………………226

第11 章 蘋果系統(tǒng)：常見蘋果系統(tǒng)UI 設(shè)計 …………………………… 229

11.1 天氣界面：掌握天氣控件界面的設(shè)計 …………………………………… 230

11.1.1 設(shè)計天氣控件界面的背景效果…………………………………………230

11.1.2 設(shè)計天氣控件界面的主體效果…………………………………………232

11.2 日歷界面：掌握手機日歷界面的設(shè)計 …………………………………… 238

11.2.1 設(shè)計日歷APP 界面的背景效果 ………………………………………239

11.2.2 設(shè)計日歷APP 界面的主體效果 ………………………………………241

第12 章 安卓系統(tǒng)：常見安卓系統(tǒng)UI 設(shè)計 …………………………… 253

12.1 鎖屏界面：掌握安卓系統(tǒng)個性鎖屏界面的設(shè)計 ………………………… 254

12.1.1 設(shè)計安卓系統(tǒng)鎖屏界面的背景效果……………………………………254

12.1.2 設(shè)計安卓系統(tǒng)鎖屏界面的主體效果……………………………………258

12.2 程序界面：掌握安卓系統(tǒng)程序界面的設(shè)計 ……………………………… 261

12.2.1 安卓應(yīng)用程序界面的主體效果設(shè)計……………………………………262

12.2.2 安卓應(yīng)用程序界面的整體效果設(shè)計……………………………………267

第13 章 微軟系統(tǒng)：常見微軟系統(tǒng)UI 設(shè)計 …………………………… 275

13.1 撥號鍵盤：掌握微軟手機撥號鍵盤的設(shè)計 ……………………………… 276

13.1.1 微軟手機撥號鍵盤界面的背景效果設(shè)計………………………………276

13.1.2 微軟手機撥號鍵盤界面的主體效果設(shè)計………………………………281

13.2 用戶界面：掌握微軟手機用戶界面的設(shè)計 ……………………………… 284

13.2.1 微軟手機用戶界面的背景效果設(shè)計……………………………………285

13.2.2 微軟系統(tǒng)用戶界面的整體效果設(shè)計……………………………………290

第14 章 登錄界面：社交與免費WiFi 登錄UI 設(shè)計 ………………… 299

14.1 云社交：掌握云社交登錄界面的設(shè)計 …………………………………… 300

14.1.1 云社交APP 登錄界面的背景效果設(shè)計 ………………………………300

14.1.2 云社交APP 登錄界面的文字效果設(shè)計 ………………………………304

14.2 免費WiFi：掌握免費WiFi 登錄界面的設(shè)計 …………………………… 307

14.2.1 免費WiFi 應(yīng)用登錄界面的背景效果設(shè)計 ……………………………308

14.2.2 免費WiFi 應(yīng)用登錄界面的表單按鈕設(shè)計 ……………………………312

14.2.3 免費WiFi 應(yīng)用登錄界面的細節(jié)和文本設(shè)計 …………………………320

第15 章 影音游戲：影音與游戲UI 設(shè)計 ……………………………… 325

15.1 視頻播放：掌握視頻播放APP 界面的設(shè)計 …………………………… 326

15.1.1 視頻播放APP 界面的主體效果設(shè)計 …………………………………326

15.1.2 視頻播放APP 界面的細節(jié)效果設(shè)計 …………………………………328

15.2 休閑游戲：掌握休閑游戲APP 界面的設(shè)計 …………………………… 331

15.2.1 休閑游戲界面的背景效果設(shè)計…………………………………………331

15.2.2 休閑游戲界面的主體效果設(shè)計…………………………………………334

15.2.3 休閑游戲界面的文本效果設(shè)計…………………………………………337