軟體UI設計之道（第二版）

《軟體UI設計之道（第二版）》是電子工業出版社出版圖書。

出版信息

作譯者：盛意文化

出版時間：2018年12月

千 字 數：608

版次：01-01

頁 數：380

開本：16開

I S B N ：9787121354243

內容簡介

本書是一本使用Photoshop 進行軟體UI 設計製作的案例教程，語言淺顯易懂，配合大量精美的軟體UI 設計案例，講解了有關軟體UI 設計的相關知識和使用Photoshop 進行軟體UI 設計製作的方法與技巧。讀者在掌握軟體UI 設計各方面知識的同時，能夠在軟體UI 設計製作的基礎上做到活學活用。全書共分為7 章，全面介紹了軟體UI 設計中的理論設計知識，以及具體案例的製作方法；第1 章為關於軟體UI 設計的基礎知識，第2 章介紹了軟體界面設計要素，第3 章介紹了軟體安裝與啟動界面設計，第4 章介紹了移動APP 軟體界面設計，第5 章介紹了家庭智慧型設備界面設計，第6 章介紹了套用軟體界面設計，第7 章介紹了播放器界面設計。

目錄

CHAPTER 1

關於軟體UI設計

1.1 軟體UI設計基礎......2

1.1.1 什麼是UI設計..2

1.1.2 軟體UI設計......2

1.1.3 網站UI設計和軟體UI設計的區別? ? 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 在實現功能的框下設計....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 合理安排面板的功能區.......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 智慧型手機與平板電腦系統....138

4.2 手機螢幕尺寸....140

4.2.1 Android系統手機螢幕尺寸.140

4.2.2 iOS系統手機螢幕尺寸141

4.2.3 Windows系統手機螢幕尺寸.......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系統APP軟體

布局說明.....156

4.3.2 天氣APP軟體界面.......156

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

4.3.3 iOS系統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 車載系統界面設計......207

【自測2】設計汽車多媒體系統界面.......209

5.4 智慧型電視界面設計......217

5.4.1 什麼是智慧型電視...217

5.4.2 智慧型電視界面設計的特點.....218

【自測3】設計視頻點播系統界面...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 傳統軟體界面設計......262

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

6.3.2 扁平化的軟體界面設計.......274

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

6.4 軟體界面設計規範......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 協調原則....336

7.3.3 趣味原則....336

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

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

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

7.4 專家支招...370

7.5 本章小結...370