UI設計其實很簡單：Photoshop界面設計高手之道

《UI設計其實很簡單：Photoshop界面設計高手之道》是2019年9月電子工業出版社出版的圖書，作者是創銳設計。

基本介紹

• 書名：UI設計其實很簡單：Photoshop界面設計高手之道
• 作者：創銳設計 
• ISBN：9787121372452
• 頁數：264頁 
• 定價：99元
• 出版社：電子工業出版社
• 出版時間：2019年9月   
• 開本：16開

內容簡介

隨著智慧型設備的飛速發展，移動設備 App 界面設計領域也得到了行業的關注和重視。人們在不斷追求 App 界面設計的個性化與酷炫效果的同時，企業更希望通過 App 界面設計為產品提供行銷服務。因此，也就有越來越多的人參與移動設備 App 的界面設計與開發。本書的作者有豐富的移動 UI 界面的設計經驗，從基礎的設計知識入手，詳細講解了 App 的設計原則、界面中的元素及製作方法等。全書共包含 UI 設計你要知道的事兒、UI 設計你要會用Photoshop、不同系統及其組件的設計、移動 UI 界面中的常用元素設計、界面元素的組合套用、購物App 界面設計、音樂 App 界面設計、資訊 App 界面設計和遊戲 App 界面設計 9 章的內容。讀者通過對本書的學習，既能掌握相關的設計理論知識，同時還能通過書中案例提高設計 App 界面的實戰技能。 全書結構清晰、內容由簡到難、案例精美、步驟詳細，使讀者學習起來更為輕鬆。為了方便讀者學習，本書還贈送了超值資料包，收錄了書中所有案例的素材和源檔案，方便讀者隨時查閱。

目錄

第 1 章 UI 設計你要知道的事兒 / 1

1.1 認識 UI 設計 / 2

1.2 UI 設計的原則 / 4

1.2.1 一致性原則 / 4

1.2.2 完整性原則 / 5

1.2.3 直觀性原則 / 6

1.2.4 習慣性原則 / 7

1.3 確定 UI 視覺風格的構成要素 / 7

1.3.1 色彩 / 7

1.3.2 文字 / 10

1.3.3 圖示 / 13

1.3.4 圖片 / 15

1.4 UI 視覺設計中的常用布局 / 17

1.4.1 列表式布局 / 17

1.4.2 陳列館式布局 / 18

1.4.3 九宮格布局 / 18

1.4.4 選項卡式布局 / 18

1.4.5 旋轉木馬式布局 / 19

1.4.6 行為擴展式布局 / 19

1.4.7 多面板式布局 / 20

1.4.8 圖表式布局 / 20

1.5 UI 設計的流程 / 20

1.5.1 產品定位及市場分析階段 / 21

1.5.2 互動設計階段 / 21

1.5.3 界面視覺設計階段 / 23

1.5.4 界面輸出階段 / 24

1.5.5 可用性測試階段 / 26

第 2 章 UI 設計你要會用 Photoshop / 27

2.1 初識 Photoshop / 28

2.1.1 掌握 Photoshop 的界面構成 / 28

2.1.2 新建圖像檔案 / 28

2.1.3 打開和最近打開檔案 / 29

2.1.4 在 Photoshop 中置入檔案 / 31

2.1.5 保存與關閉檔案 / 32

2.2 圖層的運用 / 33

2.2.1 “圖層”面板 / 33

2.2.2 創建圖層與圖層組 / 34

2.2.3 複製和刪除圖層 / 35

2.2.4 圖層樣式的套用 / 36

2.2.5 設定圖層的整體和填充不透明度 / 39

2.3 選區的設定 / 40

2.3.1 規則選區的創建 / 40

2.3.2 不規則選區的創建 / 41

2.3.3 調整與編輯選區 / 42

2.4 圖形的繪製 / 44

2.4.1 基礎圖形的繪製 / 44

2.4.2 自定義形狀的繪製 / 46

2.4.3 繪製任意所需的圖形 / 47

2.5 蒙版的編輯 / 49

2.5.1 圖層蒙版 / 49

2.5.2 剪貼蒙版 / 51

2.5.3 矢量蒙版 / 52

2.6 文字編排設計 / 53

2.6.1 文字的添加與設定 / 53

2.6.2 變形文字的製作 / 55

第 3 章 不同系統及其組件的設計 / 57

3.1 iOS 系統及其組件的設計 / 58

3.1.1 iOS 系統的特點 / 58

3.1.2 iOS 系統的適配規則 / 61

3.1.3 iOS 系統設計的規範 / 64

3.1.4 iOS 系統界面設計實戰 / 71

3.2 Android 系統及其組件的設計 / 73

3.2.1 Android 系統的特點 / 73

3.2.2 Android 系統的適配規則 / 76

3.2.3 Android 系統設計的規範 / 82

3.2.4 Android 系統界面設計實戰 / 85

第 4 章 移動 UI 界面中的常用元素設計 / 87

4.1 圖示 / 88

4.1.1 擬物化的圖示設計 / 88

4.1.2 扁平化的圖示設計 / 95

4.2 按鈕 / 99

4.2.1 突顯狀態的按鈕設計 / 99

4.2.2 皮革質感的按鈕設計 / 102

4.3 開關 / 106

4.3.1 擬物效果的開關設計 / 106

4.3.2 層次分明的開關設計 / 109

4.3.3 單選和複選開關設計 / 112

4.4 進度條 / 114

4.4.1 發光效果的線形進度條設計 / 114

4.4.2 清新風格的圓形進度條設計 / 118

4.5 搜尋欄 / 121

4.5.1 扁平化的搜尋欄設計 / 121

4.5.2 布紋材質的搜尋欄設計 / 123

4.6 列表框 / 126

4.6.1 整潔風格的列表框設計 / 126

4.6.2 暗色冷酷風格的列表框設計 / 128

4.7 標籤欄 / 131

4.7.1 線形風格的標籤欄設計 / 131

4.7.2 組合式標籤欄的設計 / 133

4.8 圖示欄 / 136

4.8.1 簡單時尚的圖示欄設計 / 136

4.8.2 立體化的圖示欄設計 / 139

第 5 章 界面元素的組合套用 / 142

5.1 引導頁設計 / 143

5.1.1 營造趣味感的引導頁設計 / 143

5.1.2 半透明質感的引導頁設計 / 147

5.1.3 線形風格的引導頁設計 / 150

5.2 登錄頁設計 / 152

5.2.1 扁平化的登錄頁設計 / 152

5.2.2 黑白主題的登錄頁設計 / 155

5.2.3 時尚紫色風格的登錄頁設計 / 158

5.3 首頁設計 / 161

5.3.1 甜美風格的首頁設計 / 161

5.3.2 時尚酷炫的首頁設計 / 165

5.3.3 乾淨清爽的首頁設計 / 169

5.4 列表頁設計 / 172

5.4.1 工整的產品列表頁設計 / 172

5.4.2 時間軸列表頁設計 / 176

5.5 詳情頁設計 / 180

5.5.1 突出活動內容的詳情頁設計 / 180

5.5.2 白色清新風格的詳情頁設計 / 185

5.6 個人中心頁面設計 / 190

5.6.1 簡約風格的個人中心頁面設計 / 190

5.6.2 藍色清爽風格的個人中心頁面設計 / 193

第 6 章 購物 App 界面設計 / 197

6.1 界面布局規劃 / 198

6.2 創意思路剖析 / 198

6.3 確定配色方案 / 199

6.4 定義組件風格 / 199

6.5 製作步驟詳解 / 199

6.5.1 啟動界面 / 200

6.5.2 登錄界面 / 202

6.5.3 首頁界面 / 205

6.5.4 分類界面 / 207

6.5.5 商品詳情界面 / 209

6.5.6 購買界面 / 212

6.5.7 商品結算界面 / 213

6.5.8 個人中心界面 / 215

第 7 章 音樂 App 界面設計 / 217

7.1 界面布局規劃 / 218

7.2 創意思路剖析 / 218

7.3 確定配色方案 / 219

7.4 定義組件風格 / 219

7.5 製作步驟詳解 / 220

7.5.1 首頁界面 / 220

7.5.2 發現界面 / 224

7.5.3 電台界面 / 225

7.5.4 歌曲播放界面 / 228

7.5.5 音效調節界面 / 230

7.5.6 個人中心界面 / 232

第 8 章 資訊 App 界面設計 / 236

8.1 界面布局規劃 / 237

8.2 創意思路剖析 / 237

8.3 確定配色方案 / 238

8.4 定義組件風格 / 238

8.5 製作步驟詳解 / 239

8.5.1 登錄界面 / 239

8.5.2 個人界面 / 240

8.5.3 新聞首頁界面 / 241

8.5.4 下載分區界面 / 242

8.5.5 新聞內容界面 / 244

8.5.6 評論界面 / 244

第 9 章 遊戲 App 界面設計 / 246

9.1 界面布局規劃 / 247

9.2 創意思路剖析 / 247

9.3 確定配色方案 / 248

9.4 定義組件風格 / 248

9.5 製作步驟詳解 / 249

9.5.1 歡迎界面 / 249

9.5.2 載入界面 / 250

9.5.3 積分界面 / 252

9.5.4 遊戲界面 / 254

9.5.5 預覽界面 / 255

9.5.6 結束界面 / 255,第 1 章 UI 設計你要知道的事兒 / 1

1.1 認識 UI 設計 / 2

1.2 UI 設計的原則 / 4

1.2.1 一致性原則 / 4

1.2.2 完整性原則 / 5

1.2.3 直觀性原則 / 6

1.2.4 習慣性原則 / 7

1.3 確定 UI 視覺風格的構成要素 / 7

1.3.1 色彩 / 7

1.3.2 文字 / 10

1.3.3 圖示 / 13

1.3.4 圖片 / 15

1.4 UI 視覺設計中的常用布局 / 17

1.4.1 列表式布局 / 17

1.4.2 陳列館式布局 / 18

1.4.3 九宮格布局 / 18

1.4.4 選項卡式布局 / 18

1.4.5 旋轉木馬式布局 / 19

1.4.6 行為擴展式布局 / 19

1.4.7 多面板式布局 / 20

1.4.8 圖表式布局 / 20

1.5 UI 設計的流程 / 20

1.5.1 產品定位及市場分析階段 / 21

1.5.2 互動設計階段 / 21

1.5.3 界面視覺設計階段 / 23

1.5.4 界面輸出階段 / 24

1.5.5 可用性測試階段 / 26

第 2 章 UI 設計你要會用 Photoshop / 27

2.1 初識 Photoshop / 28

2.1.1 掌握 Photoshop 的界面構成 / 28

2.1.2 新建圖像檔案 / 28

2.1.3 打開和最近打開檔案 / 29

2.1.4 在 Photoshop 中置入檔案 / 31

2.1.5 保存與關閉檔案 / 32

2.2 圖層的運用 / 33

2.2.1 “圖層”面板 / 33

2.2.2 創建圖層與圖層組 / 34

2.2.3 複製和刪除圖層 / 35

2.2.4 圖層樣式的套用 / 36

2.2.5 設定圖層的整體和填充不透明度 / 39

2.3 選區的設定 / 40

2.3.1 規則選區的創建 / 40

2.3.2 不規則選區的創建 / 41

2.3.3 調整與編輯選區 / 42

2.4 圖形的繪製 / 44

2.4.1 基礎圖形的繪製 / 44

2.4.2 自定義形狀的繪製 / 46

2.4.3 繪製任意所需的圖形 / 47

2.5 蒙版的編輯 / 49

2.5.1 圖層蒙版 / 49

2.5.2 剪貼蒙版 / 51

2.5.3 矢量蒙版 / 52

2.6 文字編排設計 / 53

2.6.1 文字的添加與設定 / 53

2.6.2 變形文字的製作 / 55

第 3 章 不同系統及其組件的設計 / 57

3.1 iOS 系統及其組件的設計 / 58

3.1.1 iOS 系統的特點 / 58

3.1.2 iOS 系統的適配規則 / 61

3.1.3 iOS 系統設計的規範 / 64

3.1.4 iOS 系統界面設計實戰 / 71

3.2 Android 系統及其組件的設計 / 73

3.2.1 Android 系統的特點 / 73

3.2.2 Android 系統的適配規則 / 76

3.2.3 Android 系統設計的規範 / 82

3.2.4 Android 系統界面設計實戰 / 85

第 4 章 移動 UI 界面中的常用元素設計 / 87

4.1 圖示 / 88

4.1.1 擬物化的圖示設計 / 88

4.1.2 扁平化的圖示設計 / 95

4.2 按鈕 / 99

4.2.1 突顯狀態的按鈕設計 / 99

4.2.2 皮革質感的按鈕設計 / 102

4.3 開關 / 106

4.3.1 擬物效果的開關設計 / 106

4.3.2 層次分明的開關設計 / 109

4.3.3 單選和複選開關設計 / 112

4.4 進度條 / 114

4.4.1 發光效果的線形進度條設計 / 114

4.4.2 清新風格的圓形進度條設計 / 118

4.5 搜尋欄 / 121

4.5.1 扁平化的搜尋欄設計 / 121

4.5.2 布紋材質的搜尋欄設計 / 123

4.6 列表框 / 126

4.6.1 整潔風格的列表框設計 / 126

4.6.2 暗色冷酷風格的列表框設計 / 128

4.7 標籤欄 / 131

4.7.1 線形風格的標籤欄設計 / 131

4.7.2 組合式標籤欄的設計 / 133

4.8 圖示欄 / 136

4.8.1 簡單時尚的圖示欄設計 / 136

4.8.2 立體化的圖示欄設計 / 139

第 5 章 界面元素的組合套用 / 142

5.1 引導頁設計 / 143

5.1.1 營造趣味感的引導頁設計 / 143

5.1.2 半透明質感的引導頁設計 / 147

5.1.3 線形風格的引導頁設計 / 150

5.2 登錄頁設計 / 152

5.2.1 扁平化的登錄頁設計 / 152

5.2.2 黑白主題的登錄頁設計 / 155

5.2.3 時尚紫色風格的登錄頁設計 / 158

5.3 首頁設計 / 161

5.3.1 甜美風格的首頁設計 / 161

5.3.2 時尚酷炫的首頁設計 / 165

5.3.3 乾淨清爽的首頁設計 / 169

5.4 列表頁設計 / 172

5.4.1 工整的產品列表頁設計 / 172

5.4.2 時間軸列表頁設計 / 176

5.5 詳情頁設計 / 180

5.5.1 突出活動內容的詳情頁設計 / 180

5.5.2 白色清新風格的詳情頁設計 / 185

5.6 個人中心頁面設計 / 190

5.6.1 簡約風格的個人中心頁面設計 / 190

5.6.2 藍色清爽風格的個人中心頁面設計 / 193

第 6 章 購物 App 界面設計 / 197

6.1 界面布局規劃 / 198

6.2 創意思路剖析 / 198

6.3 確定配色方案 / 199

6.4 定義組件風格 / 199

6.5 製作步驟詳解 / 199

6.5.1 啟動界面 / 200

6.5.2 登錄界面 / 202

6.5.3 首頁界面 / 205

6.5.4 分類界面 / 207

6.5.5 商品詳情界面 / 209

6.5.6 購買界面 / 212

6.5.7 商品結算界面 / 213

6.5.8 個人中心界面 / 215

第 7 章 音樂 App 界面設計 / 217

7.1 界面布局規劃 / 218

7.2 創意思路剖析 / 218

7.3 確定配色方案 / 219

7.4 定義組件風格 / 219

7.5 製作步驟詳解 / 220

7.5.1 首頁界面 / 220

7.5.2 發現界面 / 224

7.5.3 電台界面 / 225

7.5.4 歌曲播放界面 / 228

7.5.5 音效調節界面 / 230

7.5.6 個人中心界面 / 232

第 8 章 資訊 App 界面設計 / 236

8.1 界面布局規劃 / 237

8.2 創意思路剖析 / 237

8.3 確定配色方案 / 238

8.4 定義組件風格 / 238

8.5 製作步驟詳解 / 239

8.5.1 登錄界面 / 239

8.5.2 個人界面 / 240

8.5.3 新聞首頁界面 / 241

8.5.4 下載分區界面 / 242

8.5.5 新聞內容界面 / 244

8.5.6 評論界面 / 244

第 9 章 遊戲 App 界面設計 / 246

9.1 界面布局規劃 / 247

9.2 創意思路剖析 / 247

9.3 確定配色方案 / 248

9.4 定義組件風格 / 248

9.5 製作步驟詳解 / 249

9.5.1 歡迎界面 / 249

9.5.2 載入界面 / 250

9.5.3 積分界面 / 252

9.5.4 遊戲界面 / 254

9.5.5 預覽界面 / 255

9.5.6 結束界面 / 255