軟件UI設計之道（第二版 全彩）

CHAPTER 1

關于軟件UI設計

1 1 軟件UI設計基礎   2

1 1 1 什么是UI設計   2

1 1 2 軟件UI設計   2

1 1 3 網站UI設計和軟件UI設計的區(qū)別  3

1 2 了解UI設計師   4

1 2 1 研究界面——圖形設計師 4

1 2 2 研究人與界面的關系——交互

設計師   4

1 2 3 研究人——用戶測試/研究

工程師   4

1 3 軟件界面設計常見類別4

1 3 1 Windows應用軟件界面5

1 3 2 網站界面   5

1 3 3 Web應用軟件界面6

1 3 4 移動APP軟件界面6

1 3 5 游戲軟件界面   7

1 4 軟件界面的設計流程7

1 5 軟件界面設計的黃金法則 8

1 5 1 在實現(xiàn)功能的框下設計8

1 5 2 層次結構清晰   9

1 5 3 一致性和標準化 12

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

1 6 軟件UI的擬物化和扁平化設計14

1 7 扁平化UI設計的特點 17

1 7 1 快速高效   17

1 7 2 內容與功能更加突出 18

1 7 3 界面簡潔清晰    18

1 7 4 修改方便   18

1 8 軟件界面中的色彩搭配 19

1 9 本章小結   21

CHAPTER 2

軟件界面設計要素

2 1 軟件界面的視覺識別元素24

2 2 軟件按鈕和圖標設計 26

2 2 1 什么是軟件圖標 26

2 2 2 軟件圖標設計原則 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 軟件開關和進度條設計 60

2 3 1 軟件開關   60

【自測5】繪制軟件開關按鈕60

2 3 2 進度條    64

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

2 4 軟件菜單和工具欄設計70

2 4 1 菜單的重要性 70

2 4 2 軟件菜單的設計要點70

【自測7】繪制清爽簡潔的軟件菜單 71

2 4 3 軟件工具欄的作用 74

【自測8】繪制軟件快捷工具欄 75

2 5 專家支招   80

2 6 本章小結   81

CHAPTER 3

軟件安裝與啟動界面設計

3 1 關于軟件安裝界面設計84

【自測1】軟件安裝界面87

3 2 了解軟件啟動界面設計94

3 2 1 什么是軟件啟動界面94

3 2 2 軟件啟動界面的作用是什么 94

3 2 3 軟件啟動界面的設計原則95

3 3 軟件啟動界面設計需要注意

的問題   96

【自測2】軟件啟動界面97

3 4 軟件面板設計106

3 4 1 合理安排面板的功能區(qū)106

【自測3】設計事件備忘面板 107

3 4 2 軟件面板的設計原則112

【自測4】設計文件下載管理面板 114

3 5 軟件皮膚設計120

3 5 1 天氣應用皮膚設計原則120

【自測5】設計天氣應用皮膚 122

3 5 2 輸入法皮膚   129

【自測6】設計酷黑輸入法皮膚 129

3 6 專家支招   135

3 7 本章小結   135

CHAPTER 4

移動APP軟件界面設計

4 1 關于移動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】設計APP軟件啟動界面 143

4 2 5 APP軟件引導界面的設計分類150

【自測2】設計APP軟件引導界面 152

4 3 APP軟件界面布局 156

4 3 1 Android系統(tǒng)APP軟件布局說明   156

4 3 2 天氣APP軟件界面156

【自測3】設計天氣APP軟件界面 157

4 3 3 iOS系統(tǒng)APP軟件布局說明 163

4 3 4 音樂APP軟件界面164

【自測4】設計音樂APP軟件界面 164

4 4 APP軟件界面的設計要求173

4 4 1 APP軟件界面的特點173

4 4 2 APP軟件界面設計流程173

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

4 4 4 平板電腦軟件界面的特點 175

【自測5】設計iPad軟件界面 175

4 5 APP軟件界面的設計原則185

【自測6】設計照片分享APP

軟件界面   186

4 6 專家支招   193

4 7 本章小結   193

CHAPTER 5

家庭智能設備界面設計

5 1 關于智能手表 196

5 2 智能手表界面設計要點197

【自測1】設計智能手表界面 199

5 3 車載系統(tǒng)界面設計 207

【自測2】設計汽車多媒體系統(tǒng)界面209

5 4 智能電視界面設計 217

5 4 1 什么是智能電視217

5 4 2 智能電視界面設計的特點 218

【自測3】設計視頻點播系統(tǒng)界面220

【自測4】設計智能電視界面 227

5 5 專家支招   238

5 6 本章小結   239

CHAPTER 6

應用軟件界面設計

6 1 了解應用軟件界面設計242

6 1 1 什么是應用軟件界面設計242

6 1 2 應用軟件界面設計要點242

6 2 Web軟件界面設計 243

6 2 1 什么是Web軟件 243

6 2 2 Web應用軟件界面設計原則244

【自測1】設計上網測速軟件界面 244

【自測2】設計云空間軟件界面 255

6 3 軟件界面設計的趨勢262

6 3 1 傳統(tǒng)軟件界面設計 262

【自測3】設計錄音軟件界面 262

6 3 2 扁平化的軟件界面設計274

【自測4】設計聊天軟件界面 275

6 4 軟件界面設計規(guī)范 284

6 4 1 軟件界面的屏幕顯示284

【自測5】設計透明軟件界面 284

6 4 2 軟件界面的設計原則295

【自測6】設計視頻轉換軟件界面 295

6 5 專家支招   307

6 6 本章小結   308

CHAPTER 7

播放器界面設計

7 1 關于播放器界面 310

【自測1】設計簡約網絡視頻播放器 310

7 2 人性化的播放器界面設計319

【自測2】設計音樂播放器界面 320

【自測3】設計簡約半透明播放器 326

7 3 播放器界面設計原則335

7 3 1 對比原則    335

7 3 2 協(xié)調原則    336

7 3 3 趣味原則    336

【自測4】設計質感音樂播放器 337

【自測5】設計媒體音樂盒界面 347

【自測6】設計質感視頻播放器 360

7 4 專家支招   370

7 5 本章小結   370