Photoshop移動UI設計從入門到精通（第2版）

《Photoshop移動UI設計從入門到精通（第2版）》是2019年清華大學出版社出版的圖書，作者是匯學網際網路行銷學院。主要講述了Photoshop軟體基本操作和UI設計的實例教程。

基本介紹

• 書名：Photoshop移動UI設計從入門到精通（第2版）
• 作者：匯學網際網路行銷學院
• ISBN：9787302528012
• 定價：88元
• 出版時間：2019.07.01

圖書簡介

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

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

圖書目錄

第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

第3章　透析本質：移動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

第5章　軟體進階：Photoshop移動UI快速上手77

5.1　快速上手：Photoshop移動UI安裝與卸載78

5.1.1　PhotoshopCC的安裝78

5.1.2　PhotoshopCC的卸載80

5.2　界面詳解：熟悉PhotoshopCC的工作界面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

第6章　視覺美感：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