體驗至上——UI設計之道

一本專門介紹UI設計方案製作的教程，針對性強，目標清晰。內容實用、通俗易懂，操作性、趣味性和針對性強，適合相關專業的從業人員及廣大UI設計愛好者閱讀自學，也可作為大中院校學生的自學教程和參考書。

基本介紹

• 書名：體驗至上——UI設計之道
• 作者：齊琦 
• 出版社：清華大學出版社 
• 出版時間：2017年

基本信息

作者：齊琦
定價：79.80元
印次：1-1
ISBN：9787302476535
出版日期：2017.09.01
印刷日期：2017.08.22

內容簡介

本書是一本專門介紹UI設計方案製作的教程，針對性強，目標清晰。全書針對初學者，進行循序漸進的知識講解，能使讀者輕鬆掌握所學理論、技術，並達到學會和精通使用Photoshop進行UI設計方案製作的目的。本書共分為8章，從UI設計的基礎知識以及Photoshop的基本操作開始，進而深入講解Photoshop實用技法以及多種類型UI設計方案的製作方法，最後通過經典商業案例的練習，模擬工作中的實戰項目，使讀者在案例的練習過程中逐步掌握各類UI設計項目的製作流程。本書內容實用、通俗易懂，操作性、趣味性和針對性強，適合相關專業的從業人員及廣大UI設計愛好者閱讀自學，也可作為大中院校學生的自學教程和參考書。本書案例用Photoshop CC版本軟體製作和編寫，建議讀者使用Photoshop CC版本軟體學習。

目錄結構

第1章UI設計基礎知識

1.1當我們說UI設計時我們在說什麼2

1.1.1什麼是UI2

1.1.2UI設計的發展3

1.1.3UI設計構成要素4

1.1.4跨平台的UI設計5

1.2這不是一個人的工作——產品設計團隊6

1.2.1產品經理6

1.2.2互動設計師6

1.2.3圖形設計師7

1.2.4用戶體驗師7

1.3UI設計的基本流程8

1.3.1分析階段8

1.3.2設計階段8

1.3.3配合階段8

1.3.4驗證階段8

1.4不同平台的UI設計規範8

1.4.1Android作業系統設計規範9

1.4.2iOS作業系統設計規範10

1.5界面的顏色與風格11

1.5.1抓住用戶的色彩心理11

1.5.2選對色彩的小技巧13

1.5.3UI設計的流行趨勢14

第2章Photoshop基本操作

2.1初識Photoshop18

2.1.1認識Photoshop的操作界面18

2.1.2從零開始創建新的文檔20

2.1.3打開已有的圖像文檔20

2.1.4調整文檔顯示比例與顯示區域21

2.1.5向當前文檔中置入其他元素22

2.1.6存儲文檔23

2.1.7關閉文檔24

2.1.8列印文檔24

2.2掌握“圖層”的基本操作24

2.2.1選擇圖層26

2.2.2新建圖層26

2.2.3刪除圖層26

2.2.4複製圖層27

2.2.5調整圖層順序27

2.2.6移動圖層27

2.2.7對齊圖層28

2.2.8分布圖層29

2.2.9圖層的其他基本操作30

2.3撤銷錯誤操作30

2.3.1後退一步、前進一步、還原、重做30

2.3.2使用“歷史記錄”面板撤銷操作31

2.3.3將文檔恢復到上一次保存狀態31

2.4輔助工具31

2.4.1標尺與參考線32

2.4.2智慧型參考線33

2.4.3格線33

2.5圖像處理的基本操作33

2.5.1調整圖像尺寸33

2.5.2修改畫布大小34

2.5.3裁剪工具34

2.5.4透視裁剪工具35

2.5.5旋轉畫布35

2.5.6變換圖像36

2.5.7操控變形38

2.5.8內容識別比例38

2.6UI設計實戰：使用“自由變換”命令

製作UI設計方案效果圖39

第3章選區、摳圖與合成

3.1繪製簡單的選區42

3.1.1矩形選框工具42

3.1.2橢圓選框工具43

3.1.3單行選框工具和單列選框工具44

3.1.4套索工具44

3.1.5多邊形套索工具44

3.1.6操作練習：使用“選區工具”製作極簡

風格圖示45

3.1.7快速蒙版製作選區47

3.1.8創建文字選區49

3.2選區填充與描邊49

3.2.1填充選區49

3.2.2描邊選區50

3.3選區的基本編輯操作51

3.3.1載入圖層選區51

3.3.2移動選區51

3.3.3自由變換選區51

3.3.4全選52

3.3.5反選52

3.3.6取消選區52

3.3.7隱藏與顯示選區53

3.3.8選區的存儲與載入53

3.3.9調整邊緣53

3.3.10操作練習：使用“調整邊緣”命令快速

製作毛髮選區54

3.3.11修改選區56

3.4智慧型的選區創建工具58

3.4.1磁性套索工具58

3.4.2操作練習：使用“磁性套索工具”製作

選區並摳圖58

3.4.3魔棒工具61

3.4.4操作練習：使用魔棒摳圖製作促銷

活動頁面61

3.4.5快速選擇工具65

3.4.6操作練習：使用“快速選擇工具”

摳圖換背景65

3.5摳圖與合成67

3.5.1選區內容的剪下、複製、貼上、清除67

3.5.2使用“圖層蒙版”合成圖像69

3.5.3操作練習：使用“圖層蒙版”製作

遊戲界面70

3.5.4剪貼蒙版74

3.5.5操作練習：使用“剪貼蒙版”製作

簡約登錄界面75

3.5.6通道與摳圖78

3.6UI設計實戰：使用多種選區工具

製作折扣計算頁面80

第4章矢量製圖

4.1使用“鋼筆工具”與“形狀工具”繪圖86

4.1.1使用“鋼筆工具”繪製路徑86

4.1.2操作練習：使用“鋼筆工具”製作

APP標誌87

4.1.3使用“自由鋼筆工具”繪製路徑89

4.1.4繪製“形狀圖層”90

4.1.5使用“形狀工具”繪製基本圖形92

4.1.6操作練習：設定描邊屬性製作產品

詳情頁96

4.2調整路徑形態99

4.2.1添加錨點工具100

4.2.2刪除錨點工具100

4.2.3轉換點工具100

4.2.4選擇路徑101

4.2.5選擇路徑上的錨點101

4.2.6操作練習：使用“圓角矩形工具”與

“橢圓工具”製作許可按鈕101

4.3路徑的基本操作105

4.3.1路徑的變換105

4.3.2路徑運算106

4.3.3操作練習：使用“形狀工具”與

“路徑運算”製作引導頁106

4.3.4將路徑轉換為選區110

4.3.5操作練習：使用“鋼筆工具”摳圖

製作購物APP啟動頁面110

4.3.6填充路徑113

4.3.7描邊路徑114

4.3.8創建與使用矢量蒙版114

4.3.9操作練習：使用“矢量工具”製作

活動標誌115

4.4使用文字工具120

4.4.1認識文字工具120

4.4.2創建點文字122

4.4.3操作練習：使用“文字工具”製作

鎖屏頁面時鐘123

4.4.4操作練習：使用“直排文字工具”

製作中式水墨感歡迎頁面125

4.4.5創建段落文字128

4.4.6創建路徑文字129

4.4.7創建區域文字129

4.5編輯文字對象的屬性130

4.5.1使用“字元”面板編輯文字屬性130

4.5.2使用“段落”面板編輯段落屬性132

4.5.3將文字柵格化為普通圖層134

4.5.4將文字圖層轉換為形狀圖層134

4.5.5創建文字的工作路徑134

4.6UI設計實戰：天氣時鐘小組件界面設計135

第5章圖像編輯

5.1顏色的設定142

5.1.1前景色與背景色142

5.1.2“色板”面板142

5.1.3吸管工具143

5.2繪畫工具143

5.2.1畫筆工具143

5.2.2操作練習：使用“畫筆工具”製作

質感標誌144

5.2.3鉛筆工具148

5.2.4顏色替換工具148

5.2.5混合器畫筆工具149

5.2.6橡皮擦工具149

5.2.7背景橡皮擦工具150

5.2.8魔術橡皮擦工具150

5.2.9操作練習：使用“魔術橡皮擦工具”

去除照片背景151

5.2.10圖案圖章工具153

5.3“畫筆”面板154

5.3.1筆尖形狀設定154

5.3.2形狀動態155

5.3.3散布155

5.3.4紋理156

5.3.5雙重畫筆156

5.3.6顏色動態157

5.3.7傳遞157

5.3.8畫筆筆勢158

5.3.9其他選項158

5.3.10操作練習：使用“畫筆工具”與

“畫筆”面板製作星星158

5.4照片修飾工具161

5.4.1減淡工具161

5.4.2加深工具162

5.4.3海綿工具162

5.4.4模糊工具162

5.4.5銳化工具163

5.4.6塗抹工具163

5.4.7污點修復畫筆工具164

5.4.8修復畫筆工具164

5.4.9修補工具165

5.4.10內容感知移動工具165

5.4.11紅眼工具166

5.4.12仿製圖章工具166

5.5填充166

5.5.1油漆桶工具167

5.5.2漸變工具167

5.5.3操作練習：使用“漸變工具”

製作多彩壁紙170

5.5.4填充172

5.6調色技術172

5.6.1自動調色174

5.6.2亮度/對比度175

5.6.3色階175

5.6.4曲線177

5.6.5曝光度178

5.6.6自然飽和度179

5.6.7色相/飽和度179

5.6.8色彩平衡181

5.6.9黑白182

5.6.10照片濾鏡183

5.6.11通道混合器184

5.6.12顏色查找185

5.6.13反相185

5.6.14色調分離185

5.6.15閾值186

5.6.16漸變映射186

5.6.17可選顏色187

5.6.18陰影/高光187

5.6.19HDR色調188

5.6.20變化189

5.6.21去色190

5.6.22匹配顏色190

5.6.23替換顏色191

5.6.24色調均化193

5.6.25操作練習：使用“調色”命令製作

舊照片效果193

5.7使用“液化”濾鏡調整圖像196

5.8UI設計實戰：遊戲界面設計197

第6章特殊效果的製作

6.1圖層的混合模式與圖層樣式204

6.1.1圖層不透明度204

6.1.2圖層混合模式204

6.1.3使用圖層樣式208

6.1.4“斜面和浮雕”樣式209

6.1.5“描邊”樣式212

6.1.6“內陰影”樣式212

6.1.7“內發光”樣式213

6.1.8操作練習：使用“內發光”與

“內陰影”樣式製作時鐘214

6.1.9“光澤”樣式217

6.1.10“顏色疊加”樣式218

6.1.11“漸變疊加”樣式218

6.1.12“圖案疊加”樣式219

6.1.13“外發光”樣式219

6.1.14“投影”樣式219

6.1.15操作練習：使用“投影”樣式製作

UI展示效果220

6.2模擬特殊效果的“濾鏡”223

6.2.1使用“濾鏡庫”223

6.2.2使用濾鏡輕鬆製作“油畫”效果224

6.2.3使用濾鏡組225

6.2.4認識“風格化”濾鏡組225

6.2.5認識“模糊”濾鏡組226

6.2.6操作練習：利用“高斯模糊”濾鏡

製作虛化背景228

6.2.7認識“扭曲”濾鏡組230

6.2.8認識“銳化”濾鏡組232

6.2.9認識“像素化”濾鏡組233

6.2.10認識“渲染”濾鏡組234

6.2.11認識“雜色”濾鏡組235

6.2.12認識“其他”濾鏡組236

6.2.13操作練習：製作用戶信息頁面237

6.3操作練習：製作立體的3D效果240

6.4UI設計實戰：製作登錄界面242

第7章動態效果的製作

7.1初識“時間軸”面板248

7.1.1視頻時間軸248

7.1.2幀動畫249

7.2創建與編輯視頻圖層250

7.2.1導入視頻檔案250

7.2.2製作視頻動畫251

7.3創建與編輯幀動畫254

7.3.1創建幀動畫254

7.3.2操作練習：創建幀動畫製作界面

設計動態化演示256

7.4UI設計實戰：使用“時間軸”

製作變色按鈕259

第8章UI設計實戰

8.1水晶質感APP圖示264

8.2新鮮水果圖示設計268

8.3扁平化天氣小組件273

8.4鬧鐘小工具界面設計276

8.5時尚APP啟動頁面281

8.6外賣APP界面設計286

8.7健康生活APP界面設計291

8.8清新登錄界面設計294