WoW移動UI視覺設計全攻略

《WoW移動UI視覺設計全攻略》是2015年2月人民郵電出版社出版的圖書，作者是侯志剛、薛聰銳。

基本介紹

• 中文名：WoW移動UI視覺設計全攻略
• 作者：侯志剛、薛聰銳
• 出版時間：2015年2月
• 出版社：人民郵電出版社
• 頁數：340 頁
• ISBN：9787115369253
• 定價：79 元
• 開本：16 開
• 裝幀：平裝

內容簡介

移動UI視覺設計，是以移動設備為操作平台，對移動設備中使用的界面進行視覺設計，在創作中賦予界面情感意義，激起使用者的興趣。視覺設計包括對界面進行風格設定、色彩搭配和功能布局等多個內容，為界面創作出華麗而實用的外衣。

WoW！移動UI視覺設計全攻略 通過對移動設備三大主流作業系統的UI視覺設計的風格進行分析，講解了APP用戶界面的設計思路和製作過程，其中第 1部分為基礎篇，講述了與移動設備相關的基礎概念，以及Photoshop的繪圖功能和修飾技巧；第 2部分為入門篇，講述了圖示、按鈕和滑塊這三種基礎的界面元素的設計和創作要點；第3部分為進階篇，講述了時間界面、播放器界面、瀏覽器界面、遊戲界面和鎖屏界面的設計要領和技巧；第4部分為提升篇，以項目要求的形式提出設計的內容，根據要求來對界面進行布局、配色和風格設定，展示給讀者一個完整的APP界面的視覺設計流程。

附帶的學習資源包含書中所有案例的源檔案和教學視頻，方便讀者學習使用。本書特別適合移動設備UI視覺設計的初學者，同時對Photoshop使用者、平面設計師和APP開發設計人員也有參考價值。

圖書目錄

導讀 9

01 網際網路產品的設計 9

02 扁平化設計思想對移動UI視覺設計的影響 12

03 移動UI視覺設計的要點 13

第 1部分·基礎篇 15

第 1章 為移動UI視覺設計鋪路

—入門必 備 15

1.1 移動UI的基礎概念 16

1.1.1 什麼是移動UI 16

1.1.2 移動UI的套用範圍 17

1.1.3 APP與UI視覺設計的關係 17

1.1.4 移動UI視覺設計的重要性 18

1.1.5 移動UI視覺設計的原則 19

1.2 移動UI視覺設計的五大階段 21

1.2.1 產品定位及市場分析階段 21

1.2.2 初步構思及架構設計階段 21

1.2.3 修飾美化及界面設計階段 22

1.2.4 界面輸出及可用性測試階段 22

1.2.5 產品上線及最佳化方案階段 22

1.3 移動設備尺寸的相關概念 23

1.3.1 英寸 23

1.3.2 顯示解析度 23

1.3.3 像素密度 24

1.4 色彩對移動UI的重要性 25

1.4.1 色彩的基礎概念 25

1.4.2 移動UI視覺中常用的色彩對比 26

1.4.3 不同顏色的情感表達 27

1.4.4 移動UI中的色彩級別 28

1.4.5 不同系統的色彩套用規範 28

1.5 常見的移動UI設計工具 29

1.5.1 矢量圖形的編輯高手—Illustrator 29

1.5.2 強大的圖形圖像編輯利器—Photoshop 29

1.6 三大主流系統的UI設計特點 30

1.6.1 蘋果iOS7系統—扁平化 30

1.6.2 安卓Android系統—極高自由度 32

1.6.3 微軟Windows Phone8系統—極簡色塊 33

第 2章 讓操作更高效

—Photoshop基礎 35

2.1 五大必 備的核心功能 36

2.1.1 控制設計對象的順序—圖層 36

2.1.2 調整圖像的影調和色調—調整/填充圖層 38

2.1.3 編輯圖像的顯示區域—蒙版 39

2.1.4 精 確把握編輯的區域—選區 40

2.1.5 準確傳遞UI的信息—文字 40

2.2 七種不同的繪圖工具 41

2.2.1 規則直角方形的繪製—矩形工具 41

2.2.2 圓角方形的繪製—圓角矩形工具 43

2.2.3 橢圓圖形的繪製—橢圓工具 44

2.2.4 星形和多邊形的繪製—多邊形工具 44

2.2.5 線段和虛線的繪製—直線工具 45

2.2.6 複雜圖形的繪製—自動形狀工具 46

2.2.7 任意圖形的繪製—鋼筆工具 47

2.3 十大圖層樣式提升設計質感 48

2.3.1 組合高光和陰影—斜面和浮雕 48

2.3.2 修飾輪廓色—描邊 50

2.3.3 製作凹陷外觀—內陰影 51

2.3.4 提升內部層次—內發光 52

2.3.5 創建光滑表面—光澤 53

2.3.6 更改填充色—顏色疊加 54

2.3.7 打造炫彩效果—漸變疊加 55

2.3.8 添加花樣填色—圖案疊加 56

2.3.9 增強外部邊緣光暈—外發光 57

2.3.10 增強立體感—投影 58

第 2部分·入門篇 59

第3章 準確傳遞功能套用

—圖示的設計 59

3.1 與圖示設計相關 60

3.1.1 圖示的標準格式及大小 60

3.1.2 圖示設計的三大原則 63

3.1.3 不同系統下圖示的設計特點 65

3.2 圖示設計案例 67

3.2.1 線性風格的圖示製作 67

3.2.2 單色風格的圖示製作 70

3.2.3 摺紙效果的圖示製作 73

3.2.4 可愛風格的圖示製作 77

3.2.5 金屬材質的圖示製作 82

第4章 控制和調節套用程度

—滑塊的設計 87

4.1 與滑塊設計相關 88

4.1.1 滑塊的構成要素和作用 88

4.1.2 滑塊的類型 89

4.1.3 不同系統中滑塊的設計要點 89

4.2 滑塊設計案例 91

4.2.1 簡約圖形組成的滑塊 91

4.2.2 清新自然的滑塊製作 96

4.2.3 漸變效果的滑塊製作 101

4.2.4 粉嫩可愛風格的滑塊 107

4.2.5 藍色酷炫風格的滑塊 111

第5章 接通和斷開功能

—按鈕的設計 115

5.1 與按鈕設計相關 116

5.1.1 按鈕的不同狀態 116

5.1.2 按鈕形狀及作用之間的影響 117

5.1.3 不同系統下按鈕的設計風格 117

5.1.4 按鈕設計的三大技巧 119

5.2 按鈕設計案例 121

5.2.1 扁平化按鈕的製作 121

5.2.2 白色簡易效果的按鈕 125

5.2.3 半透明按鈕的製作 129

5.2.4 夜光效果的按鈕製作 133

5.2.5 木製效果的按鈕製作 137

第3部分·進階篇 141

第6章 讓時鐘表現更有品味

—時鐘界面設計 141

6.1 翻轉式時鐘界面設計 142

靈感構思解析 142

設計元素簡述 143

色彩搭配技巧 143

製作步驟詳解 143

01 魔方的繪製與組合 144

02 界面布局製作 144

03 圖示和文字的添加 145

04 變換對象製作翻轉效果 146

不同套用平台展示 147

6.2 齒輪狀平板鐘面設計 148

靈感構思解析 148

設計元素簡述 149

色彩搭配技巧 149

製作步驟詳解 149

01 時鐘界面的繪製 150

02 齒輪狀設定區域的製作 150

03 頁面的組合和修飾 151

不同套用平台展示 152

6.3 天氣刻度樣式的時間界面 153

靈感構思解析 153

設計元素簡述 154

色彩搭配技巧 154

製作步驟詳解 154

01 天氣刻度樣式的鐘面繪製 150

02 時鐘界面的組合和修飾 151

03 日曆設定頁面繪製 151

不同套用平台展示 158

6.4 半透明線條感的時間界面 159

靈感構思解析 159

設計元素簡述 160

色彩搭配技巧 160

製作步驟詳解 160

01 界面背景的編輯 161

02 半透明鐘面的繪製 161

03 頁面的修飾和完善 162

04 事件設定界面的繪製 163

不同套用平台展示 164

第7章 傳遞**美妙的音樂

—播放器界面設計 165

7.1 帶聲波的播放器界面設計 166

靈感構思解析 166

設計元素簡述 167

色彩搭配技巧 167

製作步驟詳解 167

01 製作出背景界面 168

02 繪製音波和播放控制項 169

03 製作專輯界面 170

不同套用平台展示 171

7.2 清新自然風格的播放器界面設計 172

靈感構思解析 172

設計元素簡述 173

色彩搭配技巧 173

製作步驟詳解 173

01 播放界面頂欄的繪製 174

02 播放滑塊的製作 175

03 對象的組合 176

不同套用平台展示 176

7.3 冷酷簡約風格的播放器界面設計 177

靈感構思解析 177

設計元素簡述 178

色彩搭配技巧 178

製作步驟詳解 178

01 繪製背景和按鈕 179

02 繪製播放器 179

03 添加光碟圖像 180

不同套用平台展示 181

7.4 單色調風格的播放器界面設計 182

靈感構思解析 182

設計元素簡述 183

色彩搭配技巧 183

製作步驟詳解 183

01 播放區域的繪製 184

02 按鈕控制項的繪製 185

03 歌曲列表的繪製 187

不同套用平台展示 188

第8章 把網際網路裝入口袋

—瀏覽器界面設計 189

8.1 白色聖潔風格的瀏覽器界面 190

構圖布局解析 190

設計元素簡述 191

色彩搭配技巧 191

製作步驟詳解 191

01 界面中基本元素的繪製 192

02 文字、圖示與基本元素的組合 193

03 界面的完善和拼接 194

不同套用平台展示 194

8.2 線性扁平風格的瀏覽器界面 195

構圖布局解析 195

設計元素簡述 196

色彩搭配技巧 196

製作步驟詳解 196

01 界面背景的繪製 197

02 賬號選擇界面的製作 197

03 信息界面的製作 199

不同套用平台展示 200

8.3 聖誕主題風格的瀏覽器界面 201

構圖布局解析 201

設計元素簡述 202

色彩搭配技巧 202

製作步驟詳解 202

01 按鈕和滑塊的繪製 203

02 搜尋欄和標題欄的製作 204

03 界面的完善和組合 206

不同套用平台展示 207

8.4 暗色簡約風格的瀏覽器界面 208

構圖布局解析 209

設計元素簡述 209

色彩搭配技巧 209

製作步驟詳解 210

01 網站首頁的繪製 210

02 購物頁面的繪製 211

03 個人信息頁面的繪製 212

04 搜尋頁面的繪製 213

不同套用平台展示 214

第9章 讓娛樂變得更享受

—遊戲界面設計 215