《UI設計全書（全彩）》是2020年電子工業出版社出版的圖書，作者是胡衛軍。
基本介紹
- 中文名：UI設計全書（全彩）
- 作者：胡衛軍
- 出版社： 電子工業出版社
- 出版時間：2020年12月
- 頁數：628 頁
- 定價：148 元
- 開本：16 開
- ISBN： 9787121389184
內容簡介,圖書目錄,
內容簡介
本書是一本使用Photoshop CC 2018進行UI界面設計製作的案例教程，語言淺顯易懂，配合大量精美的UI界面設計案例，講解了有關UI界面設計的相關知識和使用Photoshop CC 2018進行UI界面設計製作的方法和技巧。使讀者在掌握UI界面設計各方面知識的同時，能夠在UI界面設計製作基礎上做到活學活用。 本書共分為15章，全面介紹了UI界面設計中的理論設計知識以及具體案例的製作方法，第1章 UI設計基礎，第2章 UI設計配色，第3章 圖示按鈕設計，第4章 套用軟體UI設計，第5章 遊戲UI設計，第6章 網頁UI設計，第7章 淘寶店鋪UI設計,第8章 移動端APP設計,第9章 圖示按鈕綜合案例,第10章 UI配色設計綜合案例,第11章 套用軟體綜合案例,第12章 遊戲UI綜合案例,第13章 網頁UI綜合案例,第14章 淘寶店鋪綜合案例,第15章 移動端APP綜合案例。
圖書目錄
第1 章 關於UI 設計…………………………………………………………… 1
1.1 關於UI 設計……………………………………………………………………… 2
1.1.1 UI 設計概念 ………………………………………………………………… 2
1.1.2 設計類別 ……………………………………………………………………… 2
1.1.3 UI 設計流程 ………………………………………………………………… 6
1.2 了解UI 設計師…………………………………………………………………… 8
1.2.1 研究界面——圖形設計師 …………………………………………………… 8
1.2.2 研究人與界面的關係——互動設計師 ……………………………………… 8
1.2.3 研究人——用戶測試/ 研究工程師 ………………………………………… 9
1.3 UI 設計套用軟體………………………………………………………………… 9
1.3.1 圖片處理——Photoshop……………………………………………………… 9
1.3.2 矢量繪圖——Illustrator …………………………………………………… 10
1.3.3 矢量繪圖——Sketch ……………………………………………………… 10
1.3.4 互動效果——Axure RP …………………………………………………… 11
1.3.5 小動畫——Flash …………………………………………………………… 11
1.4 UI 設計的構成元素…………………………………………………………… 12
1.4.1 文字元素 …………………………………………………………………… 12
1.4.2 圖形符號元素 ……………………………………………………………… 13
1.4.3 圖像元素 …………………………………………………………………… 13
1.4.4 多媒體元素 ………………………………………………………………… 13
1.4.5 色彩元素 …………………………………………………………………… 13
1.5 UI 設計的重要原則…………………………………………………………… 14
1.5.1 清晰明了的設計 …………………………………………………………… 14
1.5.2 記憶負擔最小化 …………………………………………………………… 14
1.5.3 設計的一致性 ……………………………………………………………… 15
1.5.4 美觀大方的設計 …………………………………………………………… 15
Ⅵ
1.5.5 從用戶習慣考慮 …………………………………………………………… 15
1.5.6 安全性 ……………………………………………………………………… 16
1.5.7 靈活性 ……………………………………………………………………… 16
1.5.8 人性化 ……………………………………………………………………… 16
1.6 專題討論… …………………………………………………………………… 17
1.6.1 為什麼要培養設計師的產品思維？ ……………………………………… 17
1.6.2 產品層面思考 ……………………………………………………………… 18
1.7 本章小結… …………………………………………………………………… 18
第2 章 UI 設計配色… ……………………………………………………… 19
2.1 初識色彩… …………………………………………………………………… 20
2.1.1 色彩屬性 …………………………………………………………………… 20
2.1.2 基礎配色 …………………………………………………………………… 21
2.2 軟體界面中的色彩搭配… …………………………………………………… 23
2.2.1 色調的一致性 ……………………………………………………………… 23
2.2.2 保守地使用色彩 …………………………………………………………… 24
2.2.3 色彩的選擇儘可能符合人們的視覺習慣 ………………………………… 24
2.2.4 使用色彩作為功能分界的識別元素 ……………………………………… 25
2.2.5 用戶擁有調整界面的配色方案 …………………………………………… 25
2.2.6 色彩搭配要便於閱讀 ……………………………………………………… 26
2.2.7 控制色彩的使用數量 ……………………………………………………… 26
2.3 色彩在網站UI 設計中的作用………………………………………………… 26
2.3.1 突出主題 …………………………………………………………………… 27
2.3.2 劃分視覺區域 ……………………………………………………………… 27
2.3.3 吸引用戶 …………………………………………………………………… 28
2.3.4 增強藝術性 ………………………………………………………………… 35
2.4 網站UI 設計中的色彩搭配…………………………………………………… 36
2.4.1 網站UI 設計配色基礎 …………………………………………………… 36
2.4.2 網站UI 設計配色原則 …………………………………………………… 38
2.5 網站UI 設計配色方法………………………………………………………… 40
2.5.1 主色 ………………………………………………………………………… 40
2.5.2 背景色 ……………………………………………………………………… 40
2.5.3 輔色 ………………………………………………………………………… 41
2.5.4 點綴色 ……………………………………………………………………… 42
2.6 網站文本配色… ……………………………………………………………… 50
2.6.1 網頁與文本的配色關係 …………………………………………………… 51
2.6.2 良好的網頁文本配色 ……………………………………………………… 51
2.6.3 網頁文本配色要點 ………………………………………………………… 52
2.7 網頁元素的色彩搭配… ……………………………………………………… 52
2.7.1 Logo 與廣告 ………………………………………………………………… 52
2.7.2 導航選單 …………………………………………………………………… 53
2.7.3 背景與文字 ………………………………………………………………… 53
2.7.4 連結文字 …………………………………………………………………… 54
2.8 手機遊戲界面配色… ………………………………………………………… 55
2.8.1 手機遊戲界面設計中的色彩表現 ………………………………………… 55
2.8.2 手機遊戲界面設計中的色彩設計方法 …………………………………… 56
2.9 專題討論… …………………………………………………………………… 57
2.9.1 網站界面配色的基本方法是什麼？ ……………………………………… 57
2.9.2 怎樣培養對色彩的敏感度？ ……………………………………………… 57
2.10 本章小結……………………………………………………………………… 58
第3 章 圖示按鈕設計……………………………………………………… 59
3.1 圖示按鈕設計概述… ………………………………………………………… 60
3.1.1 圖示按鈕的起源 …………………………………………………………… 60
3.1.2 圖示按鈕的分類 …………………………………………………………… 61
3.2 軟體圖示按鈕設計… ………………………………………………………… 63
3.2.1 圖示設計規範 ……………………………………………………………… 63
3.2.2 圖示常用格式 ……………………………………………………………… 65
3.2.3 軟體按鈕設計 ……………………………………………………………… 66
3.3 圖示設計風格… ……………………………………………………………… 66
3.3.1 簡約化軟體圖示 …………………………………………………………… 66
3.3.2 扁平化軟體圖示 …………………………………………………………… 70
3.3.3 擬物化軟體圖示 …………………………………………………………… 76
3.4 網頁圖示按鈕設計… ………………………………………………………… 77
3.4.1 網頁中按鈕的設計規則 …………………………………………………… 77
3.4.2 網頁中常見的按鈕類型 …………………………………………………… 79
3.4.3 網頁中按鈕的特點 ………………………………………………………… 80
3.4.4 網頁圖示的套用 …………………………………………………………… 86
3.5 網頁中按鈕的實際作用… …………………………………………………… 87
3.5.1 具有提交功能的按鈕 ……………………………………………………… 87
3.5.2 具有連結功能的按鈕 ……………………………………………………… 88
3.6 遊戲界面中的按鈕設計… …………………………………………………… 89
3.6.1 按鈕元素 …………………………………………………………………… 89
3.6.2 遊戲按鈕的視覺表現 ……………………………………………………… 90
3.7 專題討論… …………………………………………………………………… 96
3.7.1 圖示的常用尺寸有哪些？ ………………………………………………… 96
3.7.2 如何設計出好的圖示或按鈕？ …………………………………………… 96
3.8 本章小結… …………………………………………………………………… 97
第4 章 套用軟體UI 設計…………………………………………………… 99
4.1 了解軟體UI 設計……………………………………………………………… 100
4.1.1 軟體UI 設計基礎 ………………………………………………………… 100
4.1.2 軟體UI 設計原則 ………………………………………………………… 101
4.1.3 軟體UI 設計分類 ………………………………………………………… 108
4.1.4 軟體UI 設計元素 ………………………………………………………… 111
4.2 開關和進度條設計… ………………………………………………………… 112
4.2.1 開關設計 …………………………………………………………………… 112
4.2.2 進度條設計 ………………………………………………………………… 117
4.3 軟體選單和工具列設計… …………………………………………………… 122
4.3.1 軟體選單的必要性 ………………………………………………………… 122
4.3.2 軟體選單的設計原則 ……………………………………………………… 123
4.3.3 軟體工具列的作用 ………………………………………………………… 124
4.4 軟體啟動界面設計… ………………………………………………………… 129
4.4.1 軟體啟動界面的作用 ……………………………………………………… 129
4.4.2 軟體啟動界面的設計原則 ………………………………………………… 137
4.4.3 設計軟體啟動界面需要注意的事項 ……………………………………… 137
4.5 軟體皮膚設計… ……………………………………………………………… 140
4.5.1 天氣軟體皮膚設計 ………………………………………………………… 140
4.5.2 輸入法軟體皮膚設計 ……………………………………………………… 148
4.6 專題討論… …………………………………………………………………… 148
4.6.1 如何在軟體安裝界面設計中提高用戶對軟體的認知？ ………………… 149
4.6.2 在軟體啟動界面中通常會為用戶提供哪些信息？ ……………………… 149
4.7 本章小結… …………………………………………………………………… 149
第5 章 遊戲UI 設計………………………………………………………… 151
5.1 了解遊戲UI 設計……………………………………………………………… 152
5.1.1 遊戲UI 設計基礎 ………………………………………………………… 152
5.1.2 確定遊戲設計風格 ………………………………………………………… 154
5.1.3 遊戲UI 設計規範 ………………………………………………………… 155
5.1.4 遊戲UI 的三種設計方式 ………………………………………………… 158
5.2 遊戲UI 設計元素……………………………………………………………… 160
5.2.1 圖形圖像元素 ……………………………………………………………… 160
5.2.2 文字元素 …………………………………………………………………… 161
5.2.3 動態顯示元素 ……………………………………………………………… 162
5.2.4 視聽元素 …………………………………………………………………… 168
5.3 網頁遊戲UI 設計……………………………………………………………… 169
5.3.1 熟悉網頁遊戲 ……………………………………………………………… 169
5.3.2 設計流程 …………………………………………………………………… 172
5.3.3 設計規則 …………………………………………………………………… 180
5.3.4 設計目標 …………………………………………………………………… 182
5.4 iOS 系統遊戲UI 設計………………………………………………………… 184
5.4.1 設計基礎 …………………………………………………………………… 184
5.4.2 設計原則 …………………………………………………………………… 185
5.4.3 移動端遊戲UI 的特點 …………………………………………………… 189
5.4.4 iPad 遊戲視覺設計要素 …………………………………………………… 190
5.5 Android 系統遊戲UI 設計… ………………………………………………… 199
5.5.1 設計基礎 …………………………………………………………………… 199
5.5.2 設計規範 …………………………………………………………………… 200
5.5.3 傳統遊戲與手機遊戲UI 設計 …………………………………………… 210
5.5.4 手機遊戲UI 設計常見問題 ……………………………………………… 211
5.6 專題討論… …………………………………………………………………… 213
5.6.1 什麼是人性化的網頁遊戲UI ？ ………………………………………… 213
5.6.2 網頁遊戲UI 為什麼要具有一定的可擴充性？ ………………………… 213
5.7 本章小結… …………………………………………………………………… 213
第6 章 網頁UI 設計………………………………………………………… 215
6.1 網頁UI 設計詳解……………………………………………………………… 216
6.1.1 認識網頁界面設計 ………………………………………………………… 216
6.1.2 網頁界面設計要點 ………………………………………………………… 219
6.1.3 網頁界面設計規範 ………………………………………………………… 223
6.1.4 網頁界面設計思路 ………………………………………………………… 225
6.2 網頁Logo 設計… …………………………………………………………… 226
6.2.1 網頁Logo 的表現形式 …………………………………………………… 226
6.2.2 網頁Logo 的設計特點 …………………………………………………… 227
6.2.3 網頁Logo 的設計原則 …………………………………………………… 228
6.3 網頁導航設計… ……………………………………………………………… 235
6.3.1 網頁導航概述 ……………………………………………………………… 235
6.3.2 導航在網頁中的表現形式 ………………………………………………… 236
6.3.3 導航的擺放位置 …………………………………………………………… 237
6.4 網頁廣告設計… ……………………………………………………………… 247
6.4.1 網頁廣告的特點 …………………………………………………………… 247
6.4.2 常見的網頁廣告類型 ……………………………………………………… 249
6.5 網頁布局與版式設計… ……………………………………………………… 250
6.5.1 了解網頁布局 ……………………………………………………………… 250
6.5.2 常見的網頁布局形式 ……………………………………………………… 251
6.5.3 網頁構成的藝術表現 ……………………………………………………… 263
6.5.4 網頁界面風格設計 ………………………………………………………… 265
6.6 專題討論… …………………………………………………………………… 267
6.6.1 互動式導航的優勢與劣勢 ………………………………………………… 267
6.6.2 文字排版設計在網站界面中起到的作用 ………………………………… 267
6.6.3 什麼是網站界面布局的連貫性和多樣性？ ……………………………… 267
6.7 本章小結… …………………………………………………………………… 268
第7 章 淘寶店鋪UI 設計…………………………………………………… 269
7.1 淘寶店鋪UI 設計基本元素…………………………………………………… 270
7.1.1 關於網店設計 ……………………………………………………………… 270
7.1.2 店鋪中的導航表現形式 …………………………………………………… 271
7.1.3 設計店鋪中的工具列 ……………………………………………………… 275
7.2 淘寶店鋪視覺設計原則… …………………………………………………… 276
7.2.1 功能性原則 ………………………………………………………………… 276
7.2.2 實用性原則 ………………………………………………………………… 277
7.2.3 一致性原則 ………………………………………………………………… 279
7.3 店鋪專題海報設計… ………………………………………………………… 280
7.3.1 海報的擺放位置 …………………………………………………………… 280
7.3.2 海報設計的層次 …………………………………………………………… 281
7.3.3 海報設計中文字的作用 …………………………………………………… 285
7.3.4 利用設計凸顯海報主題 …………………………………………………… 289
7.4 淘寶店鋪廣告設計… ………………………………………………………… 293
7.4.1 移動端與PC 端淘寶店鋪廣告的不同 …………………………………… 293
7.4.2 廣告設計元素 ……………………………………………………………… 294
7.4.3 廣告設計要點 ……………………………………………………………… 296
7.4.4 廣告設計技巧 ……………………………………………………………… 300
7.5 專題討論… …………………………………………………………………… 312
7.5.1 淘寶店鋪的海報尺寸 ……………………………………………………… 312
7.5.2 店招的作用 ………………………………………………………………… 312
7.6 本章小結… …………………………………………………………………… 313
第8 章 移動端App 設計… ………………………………………………… 315
8.1 初識移動端App… …………………………………………………………… 316
8.1.1 什麼是App ………………………………………………………………… 316
8.1.2 智慧型設備 …………………………………………………………………… 317
8.2 移動端螢幕尺寸… …………………………………………………………… 318
8.2.1 Android 系統螢幕尺寸 …………………………………………………… 319
8.2.2 iOS 系統螢幕尺寸 ………………………………………………………… 319
8.2.3 App 啟動界面 ……………………………………………………………… 319
8.2.4 App 引導界面分類 ………………………………………………………… 320
8.3 App 界面布局… ……………………………………………………………… 327
8.3.1 Android 系統軟體界面布局 ……………………………………………… 327
8.3.2 iOS 系統軟體布局 ………………………………………………………… 328
8.3.3 音樂App 界面布局 ………………………………………………………… 328
8.3.4 App 界面設計要求 ………………………………………………………… 341
8.3.5 App 軟體界面設計原則 …………………………………………………… 343
8.4 App 界面視覺設計規範… …………………………………………………… 353
8.4.1 視覺設計規範的意義 ……………………………………………………… 354
8.4.2 常見的App 視覺設計流程 ………………………………………………… 354
8.4.3 注意事項 …………………………………………………………………… 355
8.5 專題討論… …………………………………………………………………… 356
8.5.1 移動端App UI 設計與軟體UI 設計之間的區別是什麼？ ……………… 356
8.5.2 為什麼App 軟體界面非常重要？ ………………………………………… 356
8.6 本章小結… …………………………………………………………………… 356
第9 章 圖示按鈕設計綜合案例…………………………………………… 357
9.1 繪製電源按鈕… ……………………………………………………………… 358
9.1.1 按鈕在不同頁面中的作用 ………………………………………………… 358
9.1.2 按鈕在不同環境下的狀態 ………………………………………………… 361
9.1.3 案例解析 …………………………………………………………………… 361
9.1.4 操作步驟 …………………………………………………………………… 362
9.2 繪製遊戲啟動圖示… ………………………………………………………… 368
9.2.1 產品構思 …………………………………………………………………… 368
9.2.2 最佳化設計 …………………………………………………………………… 368
9.2.3 案例解析 …………………………………………………………………… 369
9.2.4 操作步驟 …………………………………………………………………… 370
9.3 繪製遊戲圖示… ……………………………………………………………… 380
9.3.1 按鈕屬性 …………………………………………………………………… 381
9.3.2 按鈕分類 …………………………………………………………………… 381
9.3.3 案例解析 …………………………………………………………………… 382
9.3.4 操作步驟 …………………………………………………………………… 383
9.4 繪製水晶質感圖示… ………………………………………………………… 390
9.4.1 按界面位置和模組分類 …………………………………………………… 391
9.4.2 按功能模組分類 …………………………………………………………… 392
9.4.3 案例解析 …………………………………………………………………… 392
9.4.4 操作步驟 …………………………………………………………………… 393
9.5 本章小結… …………………………………………………………………… 406
第10 章 UI 配色設計綜合案例……………………………………………… 407
10.1 繪製新春海報………………………………………………………………… 408
10.1.1 配色技巧——同色系搭配 ……………………………………………… 408
10.1.2 配色方案的熟練使用 …………………………………………………… 408
10.1.3 案例解析 ………………………………………………………………… 410
10.1.4 操作步驟 ………………………………………………………………… 411
10.2 製作Banner 海報…………………………………………………………… 415
10.2.1 配色技巧——對比配色 ………………………………………………… 415
10.2.2 色彩心理學的重要性 …………………………………………………… 416
10.2.3 案例解析 ………………………………………………………………… 417
10.2.4 操作步驟 ………………………………………………………………… 418
10.3 繪製休閒食品海報…………………………………………………………… 426
10.3.1 配色技巧——鄰近色配色 ……………………………………………… 427
XIV
10.3.2 從生活中獲取配色 ……………………………………………………… 427
10.3.3 案例解析 ………………………………………………………………… 429
10.3.4 操作步驟 ………………………………………………………………… 429
10.4 繪製數碼產品促銷海報……………………………………………………… 437
10.4.1 配色技巧——互補色配色 ……………………………………………… 438
10.4.2 色彩搭配中的文化差異 ………………………………………………… 439
10.4.3 案例解析 ………………………………………………………………… 439
10.4.4 操作步驟 ………………………………………………………………… 440
10.5 本章小結……………………………………………………………………… 452
第11 章 套用軟體設計綜合案例… ………………………………………… 453
11.1 繪製視頻播放器界面………………………………………………………… 454
11.1.1 播放器界面設計 ………………………………………………………… 454
11.1.2 案例解析 ………………………………………………………………… 454
11.1.3 操作步驟 ………………………………………………………………… 455
11.2 半透明音樂播放器界面……………………………………………………… 463
11.2.1 人性化的播放器界面設定 ……………………………………………… 463
11.2.2 軟體界面設計要點 ……………………………………………………… 465
11.2.3 案例解析 ………………………………………………………………… 466
11.2.4 製作步驟 ………………………………………………………………… 467
11.3 雲空間軟體界面……………………………………………………………… 475
11.3.1 Web 界面設計要點 ……………………………………………………… 476
11.3.2 播放器界面設計原則 …………………………………………………… 477
11.3.3 案例解析 ………………………………………………………………… 480
11.3.4 製作步驟 ………………………………………………………………… 481
11.4 繪製視頻設定界面…………………………………………………………… 487
11.4.1 界面設計趨勢 …………………………………………………………… 487
11.4.2 軟體界面的螢幕顯示 …………………………………………………… 490
11.4.3 案例解析 ………………………………………………………………… 491
11.4.4 製作步驟 ………………………………………………………………… 491
11.5 本章小結……………………………………………………………………… 502
第12 章 遊戲UI 設計綜合案例… ………………………………………… 503
12.1 繪製遊戲幫助界面…………………………………………………………… 504
12.1.1 按遊戲種類分類 ………………………………………………………… 504
12.1.2 按遊戲模式分類 ………………………………………………………… 505
12.1.3 案例解析 ………………………………………………………………… 507
12.1.4 製作步驟 ………………………………………………………………… 508
12.2 繪製桌球網頁遊戲界面……………………………………………………… 515
12.2.1 網路遊戲設計要求 ……………………………………………………… 515
12.2.2 了解遊戲的世界觀 ……………………………………………………… 518
12.2.3 案例解析 ………………………………………………………………… 519
12.2.4 製作步驟 ………………………………………………………………… 520
12.3 繪製拼圖網頁遊戲界面……………………………………………………… 532
12.3.1 遊戲界面的製作流程 …………………………………………………… 533
12.3.2 案例解析 ………………………………………………………………… 535
12.3.3 製作步驟 ………………………………………………………………… 536
12.4 繪製馬會遊戲界面…………………………………………………………… 544
12.4.1 色彩元素在遊戲界面中的作用 ………………………………………… 544
12.4.2 案例解析 ………………………………………………………………… 545
12.4.3 製作步驟 ………………………………………………………………… 545
12.5 本章小結……………………………………………………………………… 556
第13 章 網頁設計綜合案例… ……………………………………………… 557
13.1 設計製作企業網站界面……………………………………………………… 558
13.1.1 了解企業網站設計 ……………………………………………………… 558
13.1.2 了解兒童網站設計 ……………………………………………………… 560
13.1.3 案例解析 ………………………………………………………………… 563
13.1.4 製作步驟 ………………………………………………………………… 564
13.2 設計製作咖啡網站界面……………………………………………………… 579
13.2.1 網頁布局設計 …………………………………………………………… 580
13.2.2 網頁布局原則 …………………………………………………………… 581
13.2.3 案例解析 ………………………………………………………………… 582
13.2.4 製作步驟 ………………………………………………………………… 583
13.3 設計製作淘寶促銷網頁……………………………………………………… 591
13.3.1 網頁中文字設計要求 …………………………………………………… 592
13.3.2 網頁中文字設計原則 …………………………………………………… 593
13.3.3 案例解析 ………………………………………………………………… 596
13.3.4 製作步驟 ………………………………………………………………… 597
13.4 本章小結……………………………………………………………………… 609
