突破平面 Photoshop UI 界面設計與製作剖析

第1章 UI界面設計概述1

1.1 認識UI界面設計1

1.1.1 什麽是UI界面設計1

1.1.2 UI界面的類型1

1.1.3 UI界面設計的流程4

1.1.4 UI設計的配色5

1.1.5 UI界面設計的原則6

1.2 UI界面設計的軟件7

1.2.1 Adobe Photoshop7

1.2.2 Adobe Illustrator14

1.3 本章小結14

 

第2章 UI界面元素設計15

2.1 按鈕15

2.1.1 按鈕的設計規範15

2.1.2 繪制開始游戲按鈕16

2.1.3 繪制撤銷按鈕19

2.1.4 繪制立即購買按鈕23

2.2 導航25

2.2.1 導航的設計規範25

2.2.2 繪制圖標式導航27

2.2.3 繪制列表式導航29

2.2.4 繪制滑動式導航32

2.3 繪制其他類型的界面元素37

2.3.1 繪制搜索列表37

2.3.2 繪制調研對話框41

2.3.3 繪制播放器控件43

2.3.4 繪制寵物網站導航49

2.4 課後習題52

2.4.1 繪制登錄按鈕52

2.4.2 繪制播放進度條52

2.5 本章小結52

 

第3章 繪制圖標53

3.1 圖標設計基礎53

3.1.1 圖標設計的原則53

3.1.2 圖標設計的流程53

3.1.3 圖標的風格54

3.2 折紙圖標55

3.3 瀏覽器圖標56

3.3.1 繪制輪廓57

3.3.2 繪制指針59

3.4 音量圖標60

3.5 社交軟件圖標62

3.6 網站圖標65

3.6.1 繪制矩形65

3.6.2 添加素材66

3.6.3 繪制光影68

3.7 雲空間圖標69

3.7.1 繪制圖形70

3.7.2 添加樣式70

3.8 課後習題73

3.8.1 音樂圖標73

3.8.2 日歷圖標73

3.8.3 水晶圖標73

3.9 本章小結74

 

第4章 繪制手機APP界面75

4.1 APP界面的設計基礎75

4.1.1 APP界面的設計規範75

4.1.2 APP界面的設計流程81

4.1.3 APP界面的分類81

4.2 認識APP界面的組成元素83

4.2.1 狀態欄83

4.2.2 搜索框84

4.2.3 內容區域84

4.2.4 導航84

4.2.5 其他組件85

4.3 製作首頁85

4.4 製作精選界面87

4.4.1 整理圖形88

4.4.2 添加素材88

4.5 製作個人界面92

4.6 製作詳情界面94

4.6.1 整理圖形94

4.6.2 添加商品信息95

4.7 課後習題99

4.7.1 繪制美食APP登錄界面99

4.7.2 繪制天氣APP主界面99

4.7.3 繪制聊天APP界面99

4.8 本章小結100

 

第5章 繪制網絡直播界面101

5.1 網絡直播界面設計基礎101

5.1.1 網絡直播界面概述101

5.1.2 網絡直播界面的設計流程101

5.1.3 網絡直播界面的設計原則101

5.2 製作中國風直播預熱頁102

5.2.1 繪制背景102

5.2.2 繪制窗口103

5.2.3 繪制邊框105

5.2.4 繪制文字107

5.2.5 繪制彈窗108

5.2.6 最終結果109

5.3 製作休閑食品直播界面111

5.3.1 繪制背景111

5.3.2 添加素材112

5.3.3 繪制大標題113

5.3.4 繪制裝飾元素115

5.4 製作美妝直播預告界面116

5.4.1 繪制背景117

5.4.2 添加圖形與文字素材118

5.4.3 最終結果121

5.5 課後習題122

5.5.1 繪制雙11直播界面122

5.5.2 繪制6·18直播界面122

5.6 本章小結123

 

第6章 繪制網頁界面124

6.1 網頁界面設計基礎124

6.1.1 網頁界面的設計原則124

6.1.2 網頁界面的設計流程124

6.1.3 網頁界面的類型125

6.2 APP界面與網頁界面的異同127

6.2.1 尺寸差異127

6.2.2 習慣差異128

6.2.3 精準度差異128

6.2.4 按鈕位置128

6.2.5 按鈕類型129

6.3 製作音樂網站主頁130

6.3.1 繪制背景130

6.3.2 添加素材131

6.3.3 輸入文字133

6.4 製作網上商城首頁134

6.4.1 繪制背景134

6.4.2 添加圖形與文字素材135

6.4.3 最終結果138

6.5 製作餐廳網站首頁140

6.5.1 繪制背景140

6.5.2 繪制欄目內容141

6.5.3 最終結果144

6.6 製作設計機構網站首頁147

6.6.1 繪制背景147

6.6.2 添加素材148

6.7 課後習題151

6.7.1 繪制北歐家居網站首頁151

6.7.2 繪制旅游網站首頁151

6.8 本章總結151

 

第7章 繪制游戲界面152

7.1 游戲界面設計基礎152

7.1.1 游戲界面的概念152

7.1.2 游戲界面的設計流程152

7.1.3 游戲界面的設計原則152

7.2 製作歡迎頁154

7.2.1 繪制背景154

7.2.2 繪制標題文字154

7.2.3 繪制按鈕158

7.3 製作關卡頁160

7.3.1 繪制背景160

7.3.2 繪制“上一關”按鈕162

7.3.3 添加其他按鈕165

7.3.4 繪制游戲區域167

7.3.5 繪制解鎖按鈕167

7.4 製作闖關成功頁169

7.4.1 繪制背景169

7.4.2 繪制內部框架170

7.4.3 繪制標題172

7.4.4 繪制星星173

7.4.5 添加道具174

7.4.6 繪制詢問按鈕175

7.5 課後習題177

7.5.1 繪制商城頁177

7.5.2 繪制通關頁178

7.6 本章小結178

 

第8章 繪制平板電腦界面179

8.1 平板電腦界面概述179

8.2 繪制平板電腦音樂APP首頁179

8.2.1 劃分區域179

8.2.2 繪制輪播區域181

8.2.3 繪制主打歌曲內容182

8.2.4 繪制側欄183

8.2.5 繪制播放進度區域184

8.3 繪制平板電腦音樂APP搜索頁187

8.3.1 整理圖形187

8.3.2 繪制鍵盤189

8.4 繪制平板電腦音樂APP登錄界面190

8.5 課後習題193

8.5.1 繪制平板電腦視頻APP首頁193

8.5.2 繪制平板電腦健身APP首頁193

8.6 本章小結194

 

第9章 繪制軟件界面195

9.1 軟件界面概述195

9.2 繪制殺毒軟件界面197

9.2.1 繪制背景198

9.2.2 繪制控件198

9.2.3 添加元素200

9.3 繪制截圖軟件主界面202

9.3.1 繪制背景202

9.3.2 添加按鈕202

9.3.3 繪制控件203

9.4 繪制聊天軟件界面206

9.4.1 繪制背景206

9.4.2 添加元素207

9.5 繪制網盤軟件登錄界面209

9.5.1 繪制背景210

9.5.2 添加元素211

9.5.3 載入圖標212

9.5.4 最終結果212

9.6 繪制壓縮軟件界面213

9.6.1 規劃界面213

9.6.2 添加圖標214

9.6.3 繪制其他內容216

9.7 課後習題218

9.7.1 繪制翻譯軟件界面218

9.7.2 繪制輸入法軟件界面218

9.8 本章小結218