UI設計全書（全彩）

第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　為什么要培養(yǎng)設計師的產(chǎn)品思維？ ……………………………………… 17
1．6．2　產(chǎn)品層面思考 ……………………………………………………………… 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　控制色彩的使用數(shù)量 ……………………………………………………… 26
2．3　色彩在網(wǎng)站UI 設計中的作用………………………………………………… 26
2．3．1　突出主題 …………………………………………………………………… 27
2．3．2　劃分視覺區(qū)域 ……………………………………………………………… 27
2．3．3　吸引用戶 …………………………………………………………………… 28
2．3．4　增強藝術性 ………………………………………………………………… 35
2．4　網(wǎng)站UI 設計中的色彩搭配…………………………………………………… 36
2．4．1　網(wǎng)站UI 設計配色基礎 …………………………………………………… 36
2．4．2　網(wǎng)站UI 設計配色原則 …………………………………………………… 38
2．5　網(wǎng)站UI 設計配色方法………………………………………………………… 40
2．5．1　主色 ………………………………………………………………………… 40
2．5．2　背景色 ……………………………………………………………………… 40
2．5．3　輔色 ………………………………………………………………………… 41
2．5．4　點綴色 ……………………………………………………………………… 42
2．6　網(wǎng)站文本配色… ……………………………………………………………… 50
2．6．1　網(wǎng)頁與文本的配色關系 …………………………………………………… 51
2．6．2　良好的網(wǎng)頁文本配色 ……………………………………………………… 51
2．6．3　網(wǎng)頁文本配色要點 ………………………………………………………… 52
2．7　網(wǎng)頁元素的色彩搭配… ……………………………………………………… 52
2．7．1　Logo 與廣告 ………………………………………………………………… 52
2．7．2　導航菜單 …………………………………………………………………… 53
2．7．3　背景與文字 ………………………………………………………………… 53
2．7．4　鏈接文字 …………………………………………………………………… 54
2．8　手機游戲界面配色… ………………………………………………………… 55
2．8．1　手機游戲界面設計中的色彩表現(xiàn) ………………………………………… 55
2．8．2　手機游戲界面設計中的色彩設計方法 …………………………………… 56
2．9　專題討論… …………………………………………………………………… 57
2．9．1　網(wǎng)站界面配色的基本方法是什么？ ……………………………………… 57
2．9．2　怎樣培養(yǎng)對色彩的敏感度？ ……………………………………………… 57
2．10　本章小結……………………………………………………………………… 58
第3 章 圖標按鈕設計……………………………………………………… 59
3．1 圖標按鈕設計概述… ………………………………………………………… 60
3．1．1 圖標按鈕的起源 …………………………………………………………… 60
3．1．2 圖標按鈕的分類 …………………………………………………………… 61
3．2 軟件圖標按鈕設計… ………………………………………………………… 63
3．2．1 圖標設計規(guī)范 ……………………………………………………………… 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　網(wǎng)頁圖標按鈕設計… ………………………………………………………… 77
3．4．1 網(wǎng)頁中按鈕的設計規(guī)則 …………………………………………………… 77
3．4．2 網(wǎng)頁中常見的按鈕類型 …………………………………………………… 79
3．4．3 網(wǎng)頁中按鈕的特點 ………………………………………………………… 80
3．4．4 網(wǎng)頁圖標的應用 …………………………………………………………… 86
3．5 網(wǎng)頁中按鈕的實際作用… …………………………………………………… 87
3．5．1 具有提交功能的按鈕 ……………………………………………………… 87
3．5．2 具有鏈接功能的按鈕 ……………………………………………………… 88
3．6 游戲界面中的按鈕設計… …………………………………………………… 89
3．6．1 按鈕元素 …………………………………………………………………… 89
3．6．2 游戲按鈕的視覺表現(xiàn) ……………………………………………………… 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 設計規(guī)范 ………………………………………………………… 155
5．1．4 游戲UI 的三種設計方式 ………………………………………………… 158
5．2 游戲UI 設計元素……………………………………………………………… 160
5．2．1 圖形圖像元素 ……………………………………………………………… 160
5．2．2 文字元素 …………………………………………………………………… 161
5．2．3 動態(tài)顯示元素 ……………………………………………………………… 162
5．2．4 視聽元素 …………………………………………………………………… 168
5．3 網(wǎng)頁游戲UI 設計……………………………………………………………… 169
5．3．1 熟悉網(wǎng)頁游戲 ……………………………………………………………… 169
5．3．2 設計流程 …………………………………………………………………… 172
5．3．3 設計規(guī)則 …………………………………………………………………… 180
5．3．4 設計目標 …………………………………………………………………… 182
5．4 iOS 系統(tǒng)游戲UI 設計………………………………………………………… 184
5．4．1 設計基礎 …………………………………………………………………… 184
5．4．2 設計原則 …………………………………………………………………… 185
5．4．3 移動端游戲UI 的特點 …………………………………………………… 189
5．4．4 iPad 游戲視覺設計要素 …………………………………………………… 190
5．5 Android 系統(tǒng)游戲UI 設計… ………………………………………………… 199
5．5．1 設計基礎 …………………………………………………………………… 199
5．5．2 設計規(guī)范 …………………………………………………………………… 200
5．5．3 傳統(tǒng)游戲與手機游戲UI 設計 …………………………………………… 210
5．5．4 手機游戲UI 設計常見問題 ……………………………………………… 211
5．6 專題討論… …………………………………………………………………… 213
5．6．1 什么是人性化的網(wǎng)頁游戲UI ？ ………………………………………… 213
5．6．2 網(wǎng)頁游戲UI 為什么要具有一定的可擴充性？ ………………………… 213
5．7 本章小結… …………………………………………………………………… 213
第6 章 網(wǎng)頁UI 設計………………………………………………………… 215
6．1 網(wǎng)頁UI 設計詳解……………………………………………………………… 216
6．1．1 認識網(wǎng)頁界面設計 ………………………………………………………… 216
6．1．2 網(wǎng)頁界面設計要點 ………………………………………………………… 219
6．1．3 網(wǎng)頁界面設計規(guī)范 ………………………………………………………… 223
6．1．4 網(wǎng)頁界面設計思路 ………………………………………………………… 225
6．2 網(wǎng)頁Logo 設計… …………………………………………………………… 226
6．2．1 網(wǎng)頁Logo 的表現(xiàn)形式 …………………………………………………… 226
6．2．2 網(wǎng)頁Logo 的設計特點 …………………………………………………… 227
6．2．3 網(wǎng)頁Logo 的設計原則 …………………………………………………… 228
6．3 網(wǎng)頁導航設計… ……………………………………………………………… 235
6．3．1 網(wǎng)頁導航概述 ……………………………………………………………… 235
6．3．2 導航在網(wǎng)頁中的表現(xiàn)形式 ………………………………………………… 236
6．3．3 導航的擺放位置 …………………………………………………………… 237
6．4 網(wǎng)頁廣告設計… ……………………………………………………………… 247
6．4．1 網(wǎng)頁廣告的特點 …………………………………………………………… 247
6．4．2 常見的網(wǎng)頁廣告類型 ……………………………………………………… 249
6．5 網(wǎng)頁布局與版式設計… ……………………………………………………… 250
6．5．1 了解網(wǎng)頁布局 ……………………………………………………………… 250
6．5．2 常見的網(wǎng)頁布局形式 ……………………………………………………… 251
6．5．3 網(wǎng)頁構成的藝術表現(xiàn) ……………………………………………………… 263
6．5．4 網(wǎng)頁界面風格設計 ………………………………………………………… 265
6．6 專題討論… …………………………………………………………………… 267
6．6．1 交互式導航的優(yōu)勢與劣勢 ………………………………………………… 267
6．6．2 文字排版設計在網(wǎng)站界面中起到的作用 ………………………………… 267
6．6．3 什么是網(wǎng)站界面布局的連貫性和多樣性？ ……………………………… 267
6．7 本章小結… …………………………………………………………………… 268
第7 章 淘寶店鋪UI 設計…………………………………………………… 269
7．1 淘寶店鋪UI 設計基本元素…………………………………………………… 270
7．1．1 關于網(wǎng)店設計 ……………………………………………………………… 270
7．1．2 店鋪中的導航表現(xiàn)形式 …………………………………………………… 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 系統(tǒng)屏幕尺寸 …………………………………………………… 319
8．2．2 iOS 系統(tǒng)屏幕尺寸 ………………………………………………………… 319
8．2．3 App 啟動界面 ……………………………………………………………… 319
8．2．4 App 引導界面分類 ………………………………………………………… 320
8．3 App 界面布局… ……………………………………………………………… 327
8．3．1 Android 系統(tǒng)軟件界面布局 ……………………………………………… 327
8．3．2 iOS 系統(tǒng)軟件布局 ………………………………………………………… 328
8．3．3 音樂App 界面布局 ………………………………………………………… 328
8．3．4 App 界面設計要求 ………………………………………………………… 341
8．3．5 App 軟件界面設計原則 …………………………………………………… 343
8．4 App 界面視覺設計規(guī)范… …………………………………………………… 353
8．4．1 視覺設計規(guī)范的意義 ……………………………………………………… 354
8．4．2 常見的App 視覺設計流程 ………………………………………………… 354
8．4．3 注意事項 …………………………………………………………………… 355
8．5 專題討論… …………………………………………………………………… 356
8．5．1 移動端App UI 設計與軟件UI 設計之間的區(qū)別是什么？ ……………… 356
8．5．2 為什么App 軟件界面非常重要？ ………………………………………… 356
8．6 本章小結… …………………………………………………………………… 356
第9 章 圖標按鈕設計綜合案例…………………………………………… 357
9．1 繪制電源按鈕… ……………………………………………………………… 358
9．1．1 按鈕在不同頁面中的作用 ………………………………………………… 358
9．1．2 按鈕在不同環(huán)境下的狀態(tài) ………………………………………………… 361
9．1．3 案例解析 …………………………………………………………………… 361
9．1．4 操作步驟 …………………………………………………………………… 362
9．2 繪制游戲啟動圖標… ………………………………………………………… 368
9．2．1 產(chǎn)品構思 …………………………………………………………………… 368
9．2．2 優(yōu)化設計 …………………………………………………………………… 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 繪制數(shù)碼產(chǎn)品促銷海報……………………………………………………… 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 繪制桌球網(wǎng)頁游戲界面……………………………………………………… 515
12．2．1 網(wǎng)絡游戲設計要求 ……………………………………………………… 515
12．2．2 了解游戲的世界觀 ……………………………………………………… 518
12．2．3 案例解析 ………………………………………………………………… 519
12．2．4 制作步驟 ………………………………………………………………… 520
12．3 繪制拼圖網(wǎng)頁游戲界面……………………………………………………… 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 章 網(wǎng)頁設計綜合案例… ……………………………………………… 557
13．1 設計制作企業(yè)網(wǎng)站界面……………………………………………………… 558
13．1．1 了解企業(yè)網(wǎng)站設計 ……………………………………………………… 558
13．1．2 了解兒童網(wǎng)站設計 ……………………………………………………… 560
13．1．3 案例解析 ………………………………………………………………… 563
13．1．4 制作步驟 ………………………………………………………………… 564
13．2 設計制作咖啡網(wǎng)站界面……………………………………………………… 579
13．2．1 網(wǎng)頁布局設計 …………………………………………………………… 580
13．2．2 網(wǎng)頁布局原則 …………………………………………………………… 581
13．2．3 案例解析 ………………………………………………………………… 582
13．2．4 制作步驟 ………………………………………………………………… 583
13．3 設計制作淘寶促銷網(wǎng)頁……………………………………………………… 591
13．3．1 網(wǎng)頁中文字設計要求 …………………………………………………… 592
13．3．2 網(wǎng)頁中文字設計原則 …………………………………………………… 593
13．3．3 案例解析 ………………………………………………………………… 596
13．3．4 制作步驟 ………………………………………………………………… 597
13．4 本章小結……………………………………………………………………… 609