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

CHAPTER 1
關(guān)于軟件UI設(shè)計(jì)
1.1 軟件UI設(shè)計(jì)基礎(chǔ) 2
1.1.1 什么是UI設(shè)計(jì) 2
1.1.2 軟件UI設(shè)計(jì) 2
1.1.3 網(wǎng)站UI設(shè)計(jì)和軟件UI設(shè)計(jì)的區(qū)別 3
1.2 了解UI設(shè)計(jì)師 4
1.2.1 研究界面——圖形設(shè)計(jì)師 4
1.2.2 研究人與界面的關(guān)系——交互
???設(shè)計(jì)師 4
1.2.3 研究人——用戶測試/研究
???工程師 4
1.3 軟件界面設(shè)計(jì)常見類別 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è)計(jì)流程 7
1.5 軟件界面設(shè)計(jì)的黃金法則 8
1.5.1 在實(shí)現(xiàn)功能的框下設(shè)計(jì) 8
1.5.2 層次結(jié)構(gòu)清晰 9
1.5.3 一致性和標(biāo)準(zhǔn)化 12
1.5.4 給予足夠的視覺反饋 13
1.6 軟件UI的擬物化和扁平化設(shè)計(jì) 14
1.7 扁平化UI設(shè)計(jì)的特點(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è)計(jì)要素
2.1 軟件界面的視覺識別元素 24
2.2 軟件按鈕和圖標(biāo)設(shè)計(jì) 26
2.2.1 什么是軟件圖標(biāo) 26
2.2.2 軟件圖標(biāo)設(shè)計(jì)原則 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è)計(jì) 60
2.3.1 軟件開關(guān) 60
【自測5】繪制軟件開關(guān)按鈕 60
2.3.2 進(jìn)度條 64
【自測6】繪制圓形加載進(jìn)度條 65
2.4 軟件菜單和工具欄設(shè)計(jì) 70
2.4.1 菜單的重要性 70
2.4.2 軟件菜單的設(shè)計(jì)要點(diǎn) 70
【自測7】繪制清爽簡潔的軟件菜單 71
2.4.3 軟件工具欄的作用 74
【自測8】繪制軟件快捷工具欄 75
2.5 專家支招 80
2.6 本章小結(jié) 81

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

CHAPTER 4
移動APP軟件界面設(shè)計(jì)
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è)計(jì)APP軟件啟動界面 143
4.2.5 APP軟件引導(dǎo)界面的設(shè)計(jì)分類 150
【自測2】設(shè)計(jì)APP軟件引導(dǎo)界面 152
4.3 APP軟件界面布局 156
4.3.1 Android系統(tǒng)APP軟件布局說明 156
4.3.2 天氣APP軟件界面 156
【自測3】設(shè)計(jì)天氣APP軟件界面 157
4.3.3 iOS系統(tǒng)APP軟件布局說明 163
4.3.4 音樂APP軟件界面 164
【自測4】設(shè)計(jì)音樂APP軟件界面 164
4.4 APP軟件界面的設(shè)計(jì)要求 173
4.4.1 APP軟件界面的特點(diǎn) 173
4.4.2 APP軟件界面設(shè)計(jì)流程 173
4.4.3 APP軟件界面的色彩搭配 174
4.4.4 平板電腦軟件界面的特點(diǎn) 175
【自測5】設(shè)計(jì)iPad軟件界面 175
4.5 APP軟件界面的設(shè)計(jì)原則 185
【自測6】設(shè)計(jì)照片分享APP軟件界面 186
4.6 專家支招 193
4.7 本章小結(jié) 193


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

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

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