軟件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 在實現(xiàn)功能的框下設(shè)計8

1 5 2 層次結(jié)構(gòu)清晰   9

1 5 3 一致性和標準化 12

1 5 4 給予足夠的視覺反饋 13

1 6 軟件UI的擬物化和扁平化設(shè)計14

1 7 扁平化UI設(shè)計的特點 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 軟件按鈕和圖標設(shè)計 26

2 2 1 什么是軟件圖標 26

2 2 2 軟件圖標設(shè)計原則 27

2 2 3 圖標的常用格式 29

2 2 4 簡約軟件圖標    30

【自測1】繪制簡約純色圖標31

2 2 5 擬物化軟件圖標 34

【自測2】繪制擬物化相機圖標35

2 2 6 扁平化軟件圖標 45

【自測3】繪制扁平化天氣圖標47

2 2 7 軟件按鈕   54

【自測4】繪制精美軟件按鈕54

2 3 軟件開關(guān)和進度條設(shè)計 60

2 3 1 軟件開關(guān)   60

【自測5】繪制軟件開關(guān)按鈕60

2 3 2 進度條    64

【自測6】繪制圓形加載進度條 65

2 4 軟件菜單和工具欄設(shè)計70

2 4 1 菜單的重要性 70

2 4 2 軟件菜單的設(shè)計要點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 智能手機與平板電腦系統(tǒng)138

4 2 手機屏幕尺寸140

4 2 1 Android系統(tǒng)手機屏幕尺寸 140

4 2 2 iOS系統(tǒng)手機屏幕尺寸141

4 2 3 Windows系統(tǒng)手機屏幕尺寸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軟件界面的特點173

4 4 2 APP軟件界面設(shè)計流程173

4 4 3 APP軟件界面的色彩搭配174

4 4 4 平板電腦軟件界面的特點 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è)計要點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è)計的特點 218

【自測3】設(shè)計視頻點播系統(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è)計要點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