軟件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 研究人——用戶測(cè)試/研究
???工程師 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 移動(dòng)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 界面簡(jiǎn)潔清晰 18
1.7.4 修改方便 18
1.8 軟件界面中的色彩搭配 19
1.9 本章小結(jié) 21

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

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

CHAPTER 4
移動(dòng)APP軟件界面設(shè)計(jì)
4.1 關(guān)于移動(dòng)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軟件啟動(dòng)界面 143
【自測(cè)1】設(shè)計(jì)APP軟件啟動(dòng)界面 143
4.2.5 APP軟件引導(dǎo)界面的設(shè)計(jì)分類 150
【自測(cè)2】設(shè)計(jì)APP軟件引導(dǎo)界面 152
4.3 APP軟件界面布局 156
4.3.1 Android系統(tǒng)APP軟件布局說(shuō)明 156
4.3.2 天氣APP軟件界面 156
【自測(cè)3】設(shè)計(jì)天氣APP軟件界面 157
4.3.3 iOS系統(tǒng)APP軟件布局說(shuō)明 163
4.3.4 音樂APP軟件界面 164
【自測(cè)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
【自測(cè)5】設(shè)計(jì)iPad軟件界面 175
4.5 APP軟件界面的設(shè)計(jì)原則 185
【自測(cè)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
【自測(cè)1】設(shè)計(jì)智能手表界面 199
5.3 車載系統(tǒng)界面設(shè)計(jì) 207
【自測(cè)2】設(shè)計(jì)汽車多媒體系統(tǒng)界面 209
5.4 智能電視界面設(shè)計(jì) 217
5.4.1 什么是智能電視 217
5.4.2 智能電視界面設(shè)計(jì)的特點(diǎn) 218
【自測(cè)3】設(shè)計(jì)視頻點(diǎn)播系統(tǒng)界面 220
【自測(cè)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
【自測(cè)1】設(shè)計(jì)上網(wǎng)測(cè)速軟件界面 244
【自測(cè)2】設(shè)計(jì)云空間軟件界面 255
6.3 軟件界面設(shè)計(jì)的趨勢(shì) 262
6.3.1 傳統(tǒng)軟件界面設(shè)計(jì) 262
【自測(cè)3】設(shè)計(jì)錄音軟件界面 262
6.3.2 扁平化的軟件界面設(shè)計(jì) 274
【自測(cè)4】設(shè)計(jì)聊天軟件界面 275
6.4 軟件界面設(shè)計(jì)規(guī)范 284
6.4.1 軟件界面的屏幕顯示 284
【自測(cè)5】設(shè)計(jì)透明軟件界面 284
6.4.2 軟件界面的設(shè)計(jì)原則 295
【自測(cè)6】設(shè)計(jì)視頻轉(zhuǎn)換軟件界面 295
6.5 專家支招 307
6.6 本章小結(jié) 308

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