軟件UI設(shè)計之道（全彩）

CHAPTER 1
關(guān)于軟件UI設(shè)計
1.1 軟件UI設(shè)計基礎(chǔ) 2
1.1.1 什么是UI設(shè)計 2
1.1.2 軟件UI設(shè)計 2
1.1.3 網(wǎng)站UI設(shè)計和軟件UI設(shè)計的區(qū)別 3
1.2 了解UI設(shè)計師 4
1.2.1 研究界面——圖形設(shè)計師 4
1.2.2 研究人與界面的關(guān)系——交互
???設(shè)計師 4
1.2.3 研究人——用戶測試/研究
???工程師 4
1.3 軟件界面設(shè)計常見類別 4
1.3.1 Windows應(yīng)用軟件界面 5
1.3.2 網(wǎng)站界面 5
1.3.3 Web應(yīng)用軟件界面 6
1.3.4 移動APP軟件界面 6
1.3.5 游戲軟件界面 7
1.4 軟件界面的設(shè)計流程 7
1.5 軟件界面設(shè)計的黃金法則 8
1.5.1 在實(shí)現(xiàn)功能的框下設(shè)計 8
1.5.2 層次結(jié)構(gòu)清晰 9
1.5.3 一致性和標(biāo)準(zhǔn)化 12
1.5.4 給予足夠的視覺反饋 13
1.6 軟件UI的擬物化和扁平化設(shè)計 14
1.7 扁平化UI設(shè)計的特點(diǎn) 17
1.7.1 快速高效 17
1.7.2 內(nèi)容與功能更加突出 18
1.7.3 界面簡潔清晰 18
1.7.4 修改方便 18
1.8 軟件界面中的色彩搭配 19
1.9 本章小結(jié) 21

CHAPTER 2
軟件界面設(shè)計要素
2.1 軟件界面的視覺識別元素 24
2.2 軟件按鈕和圖標(biāo)設(shè)計 26
2.2.1 什么是軟件圖標(biāo) 26
2.2.2 軟件圖標(biāo)設(shè)計原則 27
2.2.3 圖標(biāo)的常用格式 29
2.2.4 簡約軟件圖標(biāo) 30
【自測1】繪制簡約純色圖標(biāo) 31
2.2.5 擬物化軟件圖標(biāo) 34
【自測2】繪制擬物化相機(jī)圖標(biāo) 35
2.2.6 扁平化軟件圖標(biāo) 45
【自測3】繪制扁平化天氣圖標(biāo) 47
2.2.7 軟件按鈕 54
【自測4】繪制精美軟件按鈕 54
2.3 軟件開關(guān)和進(jìn)度條設(shè)計 60
2.3.1 軟件開關(guān) 60
【自測5】繪制軟件開關(guān)按鈕 60
2.3.2 進(jìn)度條 64
【自測6】繪制圓形加載進(jìn)度條 65
2.4 軟件菜單和工具欄設(shè)計 70
2.4.1 菜單的重要性 70
2.4.2 軟件菜單的設(shè)計要點(diǎn) 70
【自測7】繪制清爽簡潔的軟件菜單 71
2.4.3 軟件工具欄的作用 74
【自測8】繪制軟件快捷工具欄 75
2.5 專家支招 80
2.6 本章小結(jié) 81

CHAPTER 3
軟件安裝與啟動界面設(shè)計
3.1 關(guān)于軟件安裝界面設(shè)計 84
【自測1】軟件安裝界面 87
3.2 了解軟件啟動界面設(shè)計 94
3.2.1 什么是軟件啟動界面 94
3.2.2 軟件啟動界面的作用是什么 94
3.2.3 軟件啟動界面的設(shè)計原則 95
3.3 軟件啟動界面設(shè)計需要注意的問題 96
【自測2】軟件啟動界面 97
3.4 軟件面板設(shè)計 106
3.4.1 合理安排面板的功能區(qū) 106
【自測3】設(shè)計事件備忘面板 107
3.4.2 軟件面板的設(shè)計原則 112
【自測4】設(shè)計文件下載管理面板 114
3.5 軟件皮膚設(shè)計 120
3.5.1 天氣應(yīng)用皮膚設(shè)計原則 120
【自測5】設(shè)計天氣應(yīng)用皮膚 122
3.5.2 輸入法皮膚 129
【自測6】設(shè)計酷黑輸入法皮膚 129
3.6 專家支招 135
3.7 本章小結(jié) 135

CHAPTER 4
移動APP軟件界面設(shè)計
4.1 關(guān)于移動APP軟件 138
4.1.1 什么是APP軟件 138
4.1.2 智能手機(jī)與平板電腦系統(tǒng) 138
4.2 手機(jī)屏幕尺寸 140
4.2.1 Android系統(tǒng)手機(jī)屏幕尺寸 140
4.2.2 iOS系統(tǒng)手機(jī)屏幕尺寸 141
4.2.3 Windows系統(tǒng)手機(jī)屏幕尺寸 142
4.2.4 APP軟件啟動界面 143
【自測1】設(shè)計APP軟件啟動界面 143
4.2.5 APP軟件引導(dǎo)界面的設(shè)計分類 150
【自測2】設(shè)計APP軟件引導(dǎo)界面 152
4.3 APP軟件界面布局 156
4.3.1 Android系統(tǒng)APP軟件布局說明 156
4.3.2 天氣APP軟件界面 156
【自測3】設(shè)計天氣APP軟件界面 157
4.3.3 iOS系統(tǒng)APP軟件布局說明 163
4.3.4 音樂APP軟件界面 164
【自測4】設(shè)計音樂APP軟件界面 164
4.4 APP軟件界面的設(shè)計要求 173
4.4.1 APP軟件界面的特點(diǎn) 173
4.4.2 APP軟件界面設(shè)計流程 173
4.4.3 APP軟件界面的色彩搭配 174
4.4.4 平板電腦軟件界面的特點(diǎn) 175
【自測5】設(shè)計iPad軟件界面 175
4.5 APP軟件界面的設(shè)計原則 185
【自測6】設(shè)計照片分享APP軟件界面 186
4.6 專家支招 193
4.7 本章小結(jié) 193


CHAPTER 5
家庭智能設(shè)備界面設(shè)計
5.1 關(guān)于智能手表 196
5.2 智能手表界面設(shè)計要點(diǎn) 197
【自測1】設(shè)計智能手表界面 199
5.3 車載系統(tǒng)界面設(shè)計 207
【自測2】設(shè)計汽車多媒體系統(tǒng)界面 209
5.4 智能電視界面設(shè)計 217
5.4.1 什么是智能電視 217
5.4.2 智能電視界面設(shè)計的特點(diǎn) 218
【自測3】設(shè)計視頻點(diǎn)播系統(tǒng)界面 220
【自測4】設(shè)計智能電視界面 227
5.5 專家支招 238
5.6 本章小結(jié) 239

CHAPTER 6
應(yīng)用軟件界面設(shè)計
6.1 了解應(yīng)用軟件界面設(shè)計 242
6.1.1 什么是應(yīng)用軟件界面設(shè)計 242
6.1.2 應(yīng)用軟件界面設(shè)計要點(diǎn) 242
6.2 Web軟件界面設(shè)計 243
6.2.1 什么是Web軟件 243
6.2.2 Web應(yīng)用軟件界面設(shè)計原則 244
【自測1】設(shè)計上網(wǎng)測速軟件界面 244
【自測2】設(shè)計云空間軟件界面 255
6.3 軟件界面設(shè)計的趨勢 262
6.3.1 傳統(tǒng)軟件界面設(shè)計 262
【自測3】設(shè)計錄音軟件界面 262
6.3.2 扁平化的軟件界面設(shè)計 274
【自測4】設(shè)計聊天軟件界面 275
6.4 軟件界面設(shè)計規(guī)范 284
6.4.1 軟件界面的屏幕顯示 284
【自測5】設(shè)計透明軟件界面 284
6.4.2 軟件界面的設(shè)計原則 295
【自測6】設(shè)計視頻轉(zhuǎn)換軟件界面 295
6.5 專家支招 307
6.6 本章小結(jié) 308

CHAPTER 7
播放器界面設(shè)計
7.1 關(guān)于播放器界面 310
【自測1】設(shè)計簡約網(wǎng)絡(luò)視頻播放器 310
7.2 人性化的播放器界面設(shè)計 319
【自測2】設(shè)計音樂播放器界面 320
【自測3】設(shè)計簡約半透明播放器 326
7.3 播放器界面設(shè)計原則 335
7.3.1 對比原則 335
7.3.2 協(xié)調(diào)原則 336
7.3.3 趣味原則 336
【自測4】設(shè)計質(zhì)感音樂播放器 337
【自測5】設(shè)計媒體音樂盒界面 347
【自測6】設(shè)計質(zhì)感視頻播放器 360
7.4 專家支招 370
7.5 本章小結(jié) 370