Photoshop CC 移動UI 界面設(shè)計與實(shí)戰(zhàn)（第2版）

Part 1 移動UI設(shè)計基礎(chǔ) / 1

1．1 UI設(shè)計存在的意義 / 2

1．1．1 人機(jī)交互的橋梁 / 2

1．1．2 操作邏輯系統(tǒng)的展現(xiàn) / 3

1．1．3 展現(xiàn)系統(tǒng)的整體風(fēng)格 / 3

1．2 移動UI設(shè)計的原則 / 4

1．2．1 視覺一致性原則 / 4

1．2．2 視覺簡易性原則 / 5

1．2．3 從用戶的習(xí)慣考慮 / 6

1．2．4 操作的靈活性及人性化 / 8

1．3 兩大主流操作系統(tǒng)的特點(diǎn)對比 / 9

1．4 不同系統(tǒng)UI視覺的主要組成要素及特征 / 10

1．4．1 iOS系統(tǒng)中的組成要素及特征 / 10

1．4．2 Android系統(tǒng)中的組成要素及特征 / 11

1．5 認(rèn)識移動終端的分辨率和像素 / 13

1．6 移動UI的創(chuàng)意與靈感收集 / 14

1．6．1 各種經(jīng)驗(yàn)和靈感的記錄 / 14

1．6．2 將對象抽象化 / 15

1．6．3 設(shè)計靈感的轉(zhuǎn)移 / 16

1．7 移動UI的視覺設(shè)計流程 / 18

Part 2 PS在移動UI設(shè)計中的常用功能簡介 / 21

2．1 繪圖工具的介紹 / 22

2．1．1 規(guī)則形狀的繪制 / 22

2．1．2 自定義形狀的繪制 / 23

2．1．3 繪制任意所需的形狀 / 25

2．2 圖層樣式的運(yùn)用 / 26

2．2．1 增強(qiáng)立體感的圖層樣式 / 26

2．2．2 發(fā)光效果的圖層樣式 / 28

2．2．3 更改色彩的圖層樣式 / 29

2．3 蒙版的編輯 / 31

2．3．1 圖層蒙版 / 31

2．3．2 剪貼蒙版 / 32

2．4 文字的添加 / 34

2．4．1 文字的添加與設(shè)置 / 34

2．4．2 文字的高級編輯 / 35

Part 3 移動UI界面中基本元素的制作 / 37

3．1 按鈕 / 38

3．1．1 按鈕設(shè)計的基礎(chǔ)知識 / 38

3．1．2 扁平化按鈕的設(shè)計 / 39

3．2 開關(guān) / 42

3．2．1 開關(guān)設(shè)計的基礎(chǔ)知識 / 42

3．2．2 簡易色塊開關(guān)的設(shè)計 / 44

3．2．3 擬物化開關(guān)的設(shè)計 / 45

3．3 進(jìn)度條 / 47

3．3．1 進(jìn)度條設(shè)計的基礎(chǔ)知識 / 47

3．3．2 扁平化進(jìn)度條的設(shè)計 / 49

3．3．3 層次感強(qiáng)烈的進(jìn)度條設(shè)計 / 50

3．4 搜索欄 / 54

3．4．1 搜索欄設(shè)計的基礎(chǔ)知識 / 54

3．4．2 扁平化搜索欄的設(shè)計 / 56

3．5 列表框 / 61

3．5．1 列表框設(shè)計的基礎(chǔ)知識 / 61

3．5．2 簡易列表框的設(shè)計 / 62

3．5．3 立體化列表框的設(shè)計 / 64

3．6 標(biāo)簽欄 / 68

3．6．1 標(biāo)簽欄設(shè)計的基礎(chǔ)知識 / 68

3．6．2 線性化標(biāo)簽欄設(shè)計 / 69

3．6．3 木紋質(zhì)感的標(biāo)簽欄設(shè)計 / 70

3．7 圖標(biāo)欄 / 73

3．7．1 圖標(biāo)欄設(shè)計的基礎(chǔ)知識 / 73

3．7．2 線性化圖標(biāo)欄設(shè)計 / 74

3．7．3 紙箱紋理的圖標(biāo)欄設(shè)計 / 77

Part 4 iOS系統(tǒng)及其組件的設(shè)計 / 81

4．1 iOS系統(tǒng)設(shè)計特點(diǎn) / 82

4．1．1 充分利用整個屏幕 / 82

4．1．2 使用半透明底板 / 82

4．1．3 信息的清晰呈現(xiàn) / 83

4．2 iOS系統(tǒng)設(shè)計的規(guī)范 / 85

4．2．1 設(shè)計原則 / 85

4．2．2 色彩和字體 / 88

4．2．3 圖標(biāo)的設(shè)計 / 92

4．3 iOS系統(tǒng)界面設(shè)計實(shí)訓(xùn) / 96

4．3．1 扁平化圖標(biāo)的設(shè)計 / 96

4．3．2 半透明效果的界面設(shè)計 / 104

Part 5 Android系統(tǒng)及其組件的設(shè)計 / 111

5．1 Android系統(tǒng)的特點(diǎn) / 112

5．2 Android系統(tǒng)的設(shè)計規(guī)范 / 114

5．2．1 度量單位 / 114

5．2．2 字體的使用標(biāo)準(zhǔn) / 116

5．2．3 色彩的應(yīng)用規(guī)范 / 117

5．2．4 四種類型的圖標(biāo) / 120

5．3 六種標(biāo)準(zhǔn)的Widget規(guī)范 / 122

5．3．1 Widget框架簡介 / 122

5．3．2 Widget框架的標(biāo)準(zhǔn)尺寸 / 124

5．3．3 4×1的Widget框架設(shè)計 / 125

5．3．4 3×3的Widget框架設(shè)計 / 129

5．3．5 2×2的Widget框架設(shè)計 / 133

5．3．6 4×1的加長Widget框架設(shè)計 / 136

5．3．7 3×3的橫向Widget框架設(shè)計 / 140

5．3．8 2×2的橫向Widget框架設(shè)計 / 145

5．4 Android系統(tǒng)界面設(shè)計實(shí)訓(xùn) / 150

5．4．1 立體化的圖標(biāo)設(shè)計 / 150

5．4．2 超強(qiáng)立體感的界面設(shè)計 / 159

Part 6 孕媽幫手App設(shè)計 / 171

界面布局規(guī)劃 / 172

創(chuàng)意思路剖析 / 172

確定配色方案 / 173

定義組件風(fēng)格 / 174

制作步驟詳解 / 174

Part 7 美食網(wǎng)站App設(shè)計 / 185

界面布局規(guī)劃 / 186

創(chuàng)意思路剖析 / 186

確定配色方案 / 187

定義組件風(fēng)格 / 188

制作步驟詳解 / 188

Part 8 籃球運(yùn)動App設(shè)計 / 201

界面布局規(guī)劃 / 202

創(chuàng)意思路剖析 / 202

確定配色方案 / 203

定義組件風(fēng)格 / 203

制作步驟詳解 / 204

Part 9 流量銀行App設(shè)計 / 217

界面布局規(guī)劃 / 218

創(chuàng)意思路剖析 / 218

確定配色方案 / 219

定義組件風(fēng)格 / 219

制作步驟詳解 / 220

Part 10 藏寶游戲App設(shè)計 / 231

界面布局規(guī)劃 / 232

創(chuàng)意思路剖析 / 232

確定配色方案 / 233

定義組件風(fēng)格 / 234

制作步驟詳解 / 234

Part 11 音樂播放App設(shè)計 / 247

界面布局規(guī)劃 / 248

創(chuàng)意思路剖析 / 248

確定配色方案 / 249

定義組件風(fēng)格 / 250

制作步驟詳解 / 250

Part 12 旅游資訊App設(shè)計 / 267

界面布局規(guī)劃 / 268

創(chuàng)意思路剖析 / 268

確定配色方案 / 269

定義組件風(fēng)格 / 270

制作步驟詳解 / 270