創(chuàng)意UI Photoshop玩轉(zhuǎn)移動(dòng)UI設(shè)計(jì)（第2版）

第1章 初入移動(dòng)UI設(shè)計(jì)的世界

1．1 認(rèn)識(shí)移動(dòng)UI 8

1．1．1 什么是移動(dòng)UI設(shè)計(jì) 8

1．1．2 移動(dòng)UI設(shè)計(jì)的特點(diǎn) 9

1．1．3 移動(dòng)UI設(shè)計(jì)的經(jīng)典案例 10

1．2 移動(dòng)設(shè)備的三大主流平臺(tái)和設(shè)計(jì)的基本原則 12

1．2．1 iOS平臺(tái)和設(shè)計(jì)的基本原則 12

1．2．2 Android平臺(tái)和設(shè)計(jì)的基本原則 15

1．3 常用移動(dòng)界面 16

1．3．1 常用手機(jī)界面 16

1．3．2 常用平板電腦界面 18

1．4 移動(dòng)UI的草圖設(shè)計(jì)流程 20

1．5 移動(dòng)設(shè)備界面色彩搭配 21

1．5．1 色彩對(duì)移動(dòng)界面的重要性 21

1．5．2 移動(dòng)設(shè)備界面色彩的搭配方法 21

1．5．3 移動(dòng)設(shè)備中色彩的傳達(dá) 23

1．6 移動(dòng)設(shè)備中各尺寸標(biāo)準(zhǔn) 24

1．6．1 手機(jī)的基本尺寸標(biāo)準(zhǔn) 24

1．6．2 平板的基本尺寸標(biāo)準(zhǔn) 24

1．6．3 手機(jī)的基本分辨率 26

1．6．4 平板的基本分辨率 27

1．7 移動(dòng)UI使用的注意要點(diǎn) 28

1．7．1 移動(dòng)UI設(shè)計(jì)的顏色使用要點(diǎn) 28

1．7．2 移動(dòng)UI設(shè)計(jì)的圖案使用要點(diǎn) 32

1．7．3 移動(dòng)UI設(shè)計(jì)的字體使用要點(diǎn) 33

第2章 你所不知道的移動(dòng)UI特性和界面

導(dǎo)航設(shè)計(jì)

2．1 移動(dòng)設(shè)備的特性 37

2．1．1 高便攜性 37

2．1．2 隱私性 37

2．1．3 應(yīng)用輕便 37

2．1．4 手機(jī)媒體的特性 38

2．1．5 iPad的特性 40

2．2 手摸勢(shì)交互特性 42

2．2．1 重復(fù)與循環(huán)動(dòng)作 42

2．2．2 連貫動(dòng)作法和關(guān)鍵動(dòng)作法 42

2．2．3 夸張的方式制作利于觸碰 43

2．3 移動(dòng)用戶體驗(yàn)設(shè)計(jì)方法 44

2．3．1 有效的人機(jī)交互策略 44

2．3．2 移動(dòng)設(shè)備的可用性 45

2．3．3 以用戶為中心的移動(dòng)UI設(shè)計(jì) 48

2．3．4 訪客至上的設(shè)計(jì)秘籍 48

2．4 導(dǎo)航欄和按鈕的設(shè)計(jì)要點(diǎn) 49

2．4．1 應(yīng)用的導(dǎo)航欄設(shè)計(jì) 49 

2．4．2 導(dǎo)航欄返回按鈕 51

2．5 移動(dòng)應(yīng)用導(dǎo)航的設(shè)計(jì)模式 53

2．5．1 跳板式 56

2．5．2 列表菜單式 58

2．5．3 選項(xiàng)卡式 59

2．5．4 陳列館式 60

2．5．5 儀表式和隱喻式 61

2．5．6 超級(jí)菜單式 62

2．5．7 圖片輪盤式 62

2．5．8 擴(kuò)展列表式 63

2．6 2017年移動(dòng)設(shè)備的發(fā)展趨勢(shì) 66

2．6．1 隱藏菜單 66

2．6．2 Touch ID的完全控制 66

2．6．3 模糊背景圖片 67

2．6．4 代替?zhèn)鹘y(tǒng)設(shè)備的穿戴式終端 67

2．6．5 卡片式設(shè)計(jì)將會(huì)變得更頻繁 67

2．6．6 娛樂(lè)與個(gè)性化 68

2．6．7 紙質(zhì)化設(shè)計(jì) 68

2．6．8 精挑細(xì)選的配色 68

第3章 Photoshop和移動(dòng)UI的那些事兒 

3．1 移動(dòng)UI中基礎(chǔ)圖形的繪制 70

3．1．1 正方形、長(zhǎng)方形 72

3．1．2 圓角矩形 74

3．1．3 橢圓 77

3．1．4 組合圖形 83

3．1．5 其他形狀 85

3．2 常見(jiàn)控件的制作 87

3．2．1 按鈕 87

3．2．2 對(duì)話框 91

3．2．3 選項(xiàng)條 95

3．2．4 切換條 99

3．2．5 滾動(dòng)條 103

3．2．6 播放器 108

3．3 圖標(biāo)的制作 111

3．3．1 時(shí)間圖標(biāo) 111

3．3．2 相機(jī)圖標(biāo) 117

3．3．3 音樂(lè)圖標(biāo) 122

3．3．4 天氣圖標(biāo) 127

第4章 現(xiàn)在就開(kāi)始移動(dòng)手機(jī)之旅

4．1 移動(dòng)手機(jī)設(shè)置界面 136

手機(jī)時(shí)鐘設(shè)置界面 136

手機(jī)聯(lián)系人設(shè)置界面 141

手機(jī)鎖屏設(shè)置界面 146

手機(jī)顯示設(shè)置界面 150

4．2 移動(dòng)手機(jī)主題界面 154

小清新風(fēng)格手機(jī)主題 154

女性風(fēng)格手機(jī)主題界面 162

可愛(ài)風(fēng)格手機(jī)主題界面 166

特效手機(jī)主題界面 170

手繪風(fēng)格手機(jī)主題界面 176

4．3 移動(dòng)手機(jī)應(yīng)用界面 183

手機(jī)照片應(yīng)用界面 183

手機(jī)音樂(lè)應(yīng)用界面 189

手機(jī)游戲應(yīng)用界面 197

第5章 超人氣平板界面是這樣煉成的

5．1平板主題界面設(shè)計(jì) 208

安卓系統(tǒng)主題界面設(shè)計(jì) 208

蘋果系統(tǒng)主題界面設(shè)計(jì) 214

Windows系統(tǒng)主題界面設(shè)計(jì) 220

5．2平板應(yīng)用游戲界面設(shè)計(jì) 225

iPad休閑游戲 225

iPad益智游戲 233

5．3平板常用軟件界面設(shè)計(jì) 240

平板電影高清時(shí)代 240

平板娛樂(lè)應(yīng)用界面 248

平板音樂(lè)應(yīng)用界面 253

5．4平板閱讀界面設(shè)計(jì) 259

iPad電子明信片瀏覽 259

女性網(wǎng)購(gòu)站點(diǎn) 267

兒童學(xué)習(xí)教育 277

附錄

01 設(shè)計(jì)背景 286

觸控目標(biāo)大小的定義 286

僧多粥少 287

可玩性主要在于手控的操作 288

02 不同類型移動(dòng)設(shè)備的可用性各異 289

iOS移動(dòng)設(shè)備的可用性 290

Android移動(dòng)設(shè)備的可用性 291

03 移動(dòng)網(wǎng)站與完整版網(wǎng)站 292

移動(dòng)優(yōu)化的網(wǎng)站 293

為什么完整版網(wǎng)站不適合移動(dòng)使用 296

移動(dòng)端比桌面端要求更嚴(yán)格 297

響應(yīng)式設(shè)計(jì) 299

可用性原則很少非黑即白 301