Photoshop移動UI界面設計實用教程全彩超值版

《Photoshop移動UI界面設計實用教程全彩超值版》是2016年12月1日人民郵電出版社出版的圖書，作者是水木居士。

基本介紹

• 中文名：Photoshop移動UI界面設計實用教程全彩超值版
• 作者：水木居士
• 出版社：人民郵電出版社
• ISBN：9787115440228

內容簡介

這是一本全面介紹如何使用Photoshop進行UI界面設計的實用教程。本書完全針對零基礎讀者而編寫，是入門級讀者快速而全面掌握利用Photoshop 進行UI界面設計的必讀參考書。

本書由有著多年豐富UI設計經驗的一線設計師精心編寫，通過全實例、圖文並茂的詳細闡述，全面展示UI界面設計精髓，從UI界面設計基礎到精緻按鈕及旋鈕設計，從寫實到扁平風格等，對UI設計中的各種流行設計風格做了全面剖析，每個案例都有製作流程詳解，並且為讀者朋友安排了相關的課後習題，讀者在學完案例後可繼續參考習題進行深入練習，以拓展自己的創意思維，提高UI界面的設計水平。

本書還為廣大讀者提供了一張DVD多媒體光碟，收錄了本書中所有的調用素材及源檔案，還包括了本書所有實例及課後習題的多媒體高清有聲視頻錄像。另外，為方便老師教學，本書還提供了PPT教學課件，以供老師參考。

本書特別適合智慧型手機UI界面設計的初學者，可作為平面設計師和智慧型手機APP開發人員的參考用書，也可以作為培訓學校、大中專院校相關專業的教學參考書或上機實踐指導用書。

圖書目錄

目錄

第1章 初識UI界面設計 9

1．1　認識UI設計　10

1．2　常用UI設計單位解析　10

1．3　UI設計常用圖像格式　11

1．4　UI設計準則　11

1．5　UI設計與團隊合作關係　12

1．5．1　團隊成員　12

1．5．2　UI設計與項目流程步驟　12

1．6　智慧型手機作業系統簡介　12

1．7　UI界面設計常用的軟體　14

1．7．1　Photoshop　14

1．7．2　Illustrator　14

1．7．3　CorelDRAW　14

1．8　UI色彩學基礎知識　15

1．8．1　顏色的概念　15

1．8．2　色彩三要素　16

1．8．3　加法混色　17

1．8．4　減法混色　17

1．8．5　補色　17

1．8．6　芒塞爾色彩系統（Munsell Color System）　17

1．9　UI設計常見配色方案　18

1．10　UI設計配色秘籍　19

1．11　UI設計色彩學　20

1．11．1　色彩與生活　21

1．11．2　色彩意象　21

1．12　精彩UI界面設計賞析　23

1．13　本章小結　23

第2章　精緻按鈕及旋鈕設計　24

2．1　理論知識—移動APP按鈕尺寸分析　25

2．2　課堂案例—下單按鈕　25

2．2．1　打開素材　26

2．2．2　添加質感　26

2．3　課堂案例—下載按鈕　27

2．3．1　打開素材　27

2．3．2　添加質感　27

2．4　課堂案例—簡潔進度條　28

2．4．1　打開素材　28

2．4．2　複製變換圖形　28

2．5　課堂案例—音量滑動條　29

2．5．1　打開素材　29

2．5．2　繪製圖形　30

2．6　課堂案例—圓形開關按鈕　30

2．6．1　製作背景並繪製圖形　30

2．6．2　添加文字　34

2．7　課堂案例—功能旋鈕　35

2．7．1　製作背景並繪製圖形　35

2．7．2　繪製功能圖像　37

2．7．3　製作立體質感　38

2．7．4　繪製指示圖形　40

2．7．5　添加文字　41

2．8　課堂案例—金屬旋鈕　42

2．8．1　製作背景並繪製圖形　42

2．8．2　製作質感　44

2．8．3　製作指示標記　46

2．8．4　製作滑塊圖形　48

2．8．5　製作插孔　52

2．9　課堂案例—皮革旋鈕　56

2．9．1　製作背景　56

2．9．2　繪製圖形　57

2．9．3　製作控制項　60

2．10　課堂案例—品質音量控制項　64

2．10．1　製作背景　64

2．10．2　製作控制項　65

2．10．3　製作細節　74

2．11　課堂案例—音頻調節控制項　76

2．11．1　製作背景並繪製圖形　76

2．11．2　繪製刻度　79

2．11．3　製作控制項　82

2．12　本章小結　86

2．13　課後習題　86

2．13．1　習題1—白金質感開關按鈕　86

2．13．2　習題2—品質音量旋鈕　87

2．13．3　習題3—音量控制項　87

第3章　趨勢流行扁平風　88

3．1　理論知識—扁平化設計　89

3．1．1　何為扁平化設計　89

3．1．2　扁平化設計的優缺點　89

3．1．3　扁平化設計四大原則　89

3．2　課堂案例—扁平鉛筆圖示　91

3．2．1　繪製圖示　91

3．2．2　變換圖形　92

3．2．3　繪製細節　93

3．2．4　製作陰影　95

3．3　課堂案例—微信圖示　97

3．3．1　製作背景　97

3．3．2　繪製圖示　98

3．4　課堂案例—淡雅套用圖示控制項　99

3．4．1　製作背景　100

3．4．2　繪製圖形　100

3．4．3　添加素材　103

3．5　課堂案例—扁平化信箱界面　104

3．5．1　製作背景及狀態欄　104

3．5．2　添加文字　105

3．6　課堂案例—iOS風格音樂播放器界面　107

3．6．1　製作套用界面　107

3．6．2　展示頁面　113

3．7　課堂案例—社交套用登錄框　114

3．7．1　製作背景　115

3．7．2　繪製界面　116

3．8　課堂案例—簡約風天氣APP　118

3．8．1　製作背景　119

3．8．2　添加素材並繪製圖形　119

3．9　課堂案例—個人套用APP界面　121

3．9．1　製作背景　122

3．9．2　繪製界面圖形　122

3．9．3　添加文字並製作細節　123

3．9．4　繪製二級功能頁面　125

3．10　本章小結　127

3．11　課後習題　127

3．11．1　習題1—便簽圖示設計　127

3．11．2　習題2—扁平相機圖示　128

3．11．3　習題3—天氣Widget　128

第4章　超強表現力之寫實風格　129

4．1　理論知識—寫實風格解析　130

4．1．1　寫實的藝術表現形式　130

4．1．2　UI設計的寫實表現　130

4．2　課堂實例—寫實計算器圖示　132

4．2．1　製作背景並繪製圖形　132

4．2．2　添加文字　134

4．2．3　繪製按鍵　135

4．3　課堂實例—寫實信箱圖示　137

4．3．1　製作背景並繪製圖形　138

4．3．2　製作高光質感　138

4．3．3　製作陰影質感　139

4．3．4　繪製細節圖像　140

4．3．5　繪製郵筒元素圖像　142

4．4　課堂實例—寫實電視圖示　145

4．4．1　製作背景並繪製圖形　145

4．4．2　添加素材　147

4．4．3　添加高光質感　148

4．5　課堂實例—寫實小票圖示　152

4．5．1　製作背景並繪製圖形　152

4．5．2　製作鋸齒效果　155

4．5．3　添加文字並製作陰影　155

4．6　課堂實例—寫實開關圖示　157

4．6．1　製作背景　157

4．6．2　繪製圖形　158

4．6．3　製作控制項　160

4．7　課堂實例—寫實牛皮錢包圖示　164

4．7．1　製作背景並繪製圖形　164

4．7．2　製作高光質感　167

4．7．3　添加素材並製作質感　168

4．7．4　製作細節　170

4．8　本章小結　173

4．9　課後習題　174

4．9．1　習題1—寫實手機圖示　174

4．9．2　習題2—寫實鬧鐘圖示　174

4．9．3　習題3—寫實鋼琴圖示　174

4．9．4　習題4—寫實開關設計　175

第5章　iOS風格界面設計　176

5．1　理論知識—認識iOS風格　177

5．1．1　iOS的發展及界面分布　177

5．1．2　認識iOS的控制項　177

5．2　課堂案例—蘋果風格登錄界面　178

5．2．1　製作背景　179

5．2．2　繪製圖形　179

5．2．3　添加素材　181

5．2．4　繪製文本框　182

5．3　課堂案例—電話界面　184

5．3．1　製作背景並繪製圖形　184

5．3．2　添加文字　186

5．3．3　製作界面元素　187

5．3．4　添加素材　188

5．4　課堂案例—用戶界面　191

5．4．1　製作背景　191

5．4．2　添加素材　195

5．4．3　繪製圖形　197

5．4．4　添加素材及文字　200

5．4．5　繪製擬物圖形　204

5．5　課堂案例—會員登錄框界面　208

5．5．1　製作背景並繪製圖形　208

5．5．2　添加文字並繪製文本框圖形　210

5．6　課堂案例—翻頁登錄界面　215

5．6．1　製作背景　215

5．6．2　繪製圖形　215

5．6．3　製作界面細節　217

5．7　本章小結　220

5．8　課後習題　220

5．8．1　習題1—攝影網站會員登錄　220

5．8．2　習題2—iPod套用登錄界面　221

5．8．3　習題3—木質登錄界面　221

第6章　精品極致圖示製作　222

6．1　理論知識—了解圖示　223

6．1．1　圖示的分類　223

6．1．2　圖示的作用　223

6．1．3　圖示的格式　223

6．1．4　圖示和圖像大小　224

6．1．5　精美APP圖示欣賞　226

6．2　課堂案例—簡潔羅盤圖示　226

6．2．1　製作背景並繪製圖形　226

6．2．2　繪製表座　228

6．2．3　繪製指針　229

6．3　課堂案例—簡潔進程圖示　230

6．3．1　製作背景並添加圖像　231

6．3．2　繪製圖形　231

6．4　課堂案例—唱片機圖示　232

6．4．1　製作背景並繪製圖形　233

6．4．2　製作紋理圖像　234

6．4．3　繪製托盤　236

6．4．4　繪製卡座　239

6．4．5　繪製線纜圖形　239

6．5　課堂案例—濕度計圖示　240

6．5．1　製作背景並繪製圖形　240

6．5．2　定義筆觸並設定　243

6．5．3　繪製刻度圖形　244

6．6　課堂案例—小黃人圖示　246

6．6．1　製作背景並繪製圖形　246

6．6．2　製作圖示元素　248

6．6．3　繪製眼鏡圖形　249

6．6．4　繪製嘴巴圖形　255

6．7　課堂案例—流量計圖示　257

6．7．1　製作背景並繪製圖形　257

6．7．2　定義筆觸　259

6．7．3　繪製指針　261

6．8　課堂案例—清新郵件圖示　262

6．8．1　製作背景並繪製圖形　262

6．8．2　繪製鎖扣圖形　264

6．9　課堂案例—清新音樂圖示　265

6．9．1　製作背景並繪製圖形　266

6．9．2　製作光碟圖形　266

6．10　課堂案例—下載圖示　267

6．10．1　製作背景並繪製圖形　267

6．10．2　製作圖示元素　269

6．11　本章小結　272

6．12　課後習題　272

6．12．1　習題1—清新日曆圖示　272

6．12．2　習題2—進度圖示　273

6．12．3　習題3—日曆和天氣圖示　273

6．12．4　習題4—指南針圖示　274

第7章　流行界面設計薈萃　275

7．1　理論知識—UI界面設計尺寸　276

7．1．1　iPhone和Android設計尺寸　276

7．1．2　Android 系統換算及主流手機設定　277

7．2　課堂案例—天氣界面　279

7．2．1　製作背景　279

7．2．2　繪製第1個界面　280

7．2．3　添加文字及素材　280

7．2．4　繪製第2個界面　283

7．3　課堂案例—票券APP界面　284

7．3．1　製作背景並繪製狀態欄　284

7．3．2　添加素材　285

7．3．3　添加文字　286

7．3．4　繪製按鈕圖形　287

7．3．5　添加文字及素材　288

7．4　課堂案例—下載數據界面　290

7．4．1　製作背景並繪製狀態欄　290

7．4．2　繪製圖形　290

7．4．3　添加文字　291

7．5　課堂案例—遊戲界面　294

7．5．1　製作背景　294

7．5．2　繪製界面　296

7．5．3　繪製界面元素　297

7．5．4　添加文字　298

7．5．5　製作按鈕控制項　302

7．6　課堂案例—APP遊戲個人界面　307

7．6．1　創建畫布並添加素材　307

7．6．2　添加文字　309

7．6．3　添加圖示　311

7．7　課堂案例—iOS風格電台界面　312

7．7．1　製作背景並製作狀態欄　312

7．7．2　製作界面元素　312

7．7．3　製作界面細節　317

7．7．4　添加素材　318

7．8　本章小結　320

7．9　課後習題　320

7．9．1　習題1—影視播放界面　320

7．9．2　習題2—美食套用APP界面　320

7．9．3　習題3—經典音樂播放器界面　321

第8章　綜合設計實戰　322

8．1　課堂案例—精緻CD控制項　323

8．1．1　製作背景並繪製圖形　323

8．1．2　繪製旋鈕　324

8．1．3　製作質感　325

8．1．4　製作細節　327

8．1．5　添加文字　329

8．2　課堂案例—信息接收控制項　330

8．2．1　製作背景並繪製圖形　330

8．2．2　製作控制項元素　332

8．2．3　添加文字　333

8．3　課堂案例—天氣信息控制項　334

8．3．1　製作背景　334

8．3．2　繪製界面　336

8．3．3　添加文字　345

8．4　課堂案例—Windows Phone界面　346

8．4．1　製作背景　346

8．4．2　繪製圖形　347

8．4．3　添加文字及素材　349

8．5　課堂案例—APP遊戲下載頁　351

8．5．1　製作背景並添加素材　352

8．5．2　繪製圖形　352

8．5．3　繪製細節圖形　354

8．6　課堂案例—APP遊戲安裝頁　355

8．6．1　製作背景並繪製圖形　356

8．6．2　添加素材並繪製圖形　356

8．6．3　添加文字　357

8．6．4　添加素材　357

8．7　本章小結　359

8．8　課後習題　359

8．8．1　習題1—點餐APP界面　359

8．8．2　習題2—概念手機界面　360