Part 1 移動UI設(shè)計(jì)基礎(chǔ) / 1
1.1 UI設(shè)計(jì)存在的意義 / 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 Photoshop在移動UI設(shè)計(jì)中的常用功能 / 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)中的組成要素及特征 / 12
1.5 認(rèn)識移動終端的分辨率和像素 / 14
1.6 移動UI的創(chuàng)意與靈感收集 / 16
1.6.1 各種經(jīng)驗(yàn)和靈感的記錄 / 16
1.6.2 將對象抽象化 / 17
1.6.3 設(shè)計(jì)靈感的轉(zhuǎn)移 / 18
1.7 移動UI的視覺設(shè)計(jì)流程 / 20

Part 2 PS在移動UI設(shè)計(jì)中的常用功能簡介 / 23
2.1 繪圖工具的介紹 / 24
2.1.1 規(guī)則形狀的繪制 / 24
2.1.2 自定義形狀的繪制 / 25
2.1.3 繪制任意所需的形狀 / 27
2.2 圖層樣式的運(yùn)用 / 28
2.2.1 增強(qiáng)立體感的圖層樣式 / 28
2.2.2 發(fā)光效果的圖層樣式 / 30
2.2.3 更改色彩的圖層樣式 / 31
2.3 蒙版的編輯 / 33
2.3.1 圖層蒙版 / 33
2.3.2 剪貼蒙版 / 34
2.4 文字的添加 / 36
2.4.1 文字的添加與設(shè)置 / 36
2.4.2 文字的高級編輯 / 37

Part 3 移動UI界面中基本元素的制作 / 39
3.1 按鈕 / 40
3.1.1 按鈕設(shè)計(jì)的基礎(chǔ)知識 / 40
3.1.2 扁平化按鈕的設(shè)計(jì) / 41
3.2 開關(guān) / 45
3.2.1 開關(guān)設(shè)計(jì)的基礎(chǔ)知識 / 45
3.2.2 簡易色塊開關(guān)的設(shè)計(jì) / 47
3.3 進(jìn)度條 / 49
3.3.1 進(jìn)度條設(shè)計(jì)的基礎(chǔ)知識 / 49
3.3.2 扁平化進(jìn)度條的設(shè)計(jì) / 49
3.3.3 層次感強(qiáng)烈的進(jìn)度條設(shè)計(jì) / 52
3.4 搜索欄 / 56
3.4.1 搜索欄設(shè)計(jì)的基礎(chǔ)知識 / 56
3.4.2 扁平化搜索欄的設(shè)計(jì) / 58
3.5 列表框 / 63
3.5.1 列表框設(shè)計(jì)的基礎(chǔ)知識 / 63
3.5.2 簡易列表框的設(shè)計(jì) / 64
3.5.3 立體化列表框的設(shè)計(jì) / 68
3.6 標(biāo)簽欄 / 70
3.6.1 標(biāo)簽欄設(shè)計(jì)的基礎(chǔ)知識 / 70
3.6.2 線性化標(biāo)簽欄設(shè)計(jì) / 71
3.6.3 木紋質(zhì)感的標(biāo)簽欄設(shè)計(jì) / 72
3.7 圖標(biāo)欄 / 75
3.7.1 圖標(biāo)欄設(shè)計(jì)的基礎(chǔ)知識 / 75
3.7.2 線性化圖標(biāo)欄設(shè)計(jì) / 76
3.7.3 紙箱紋理的圖標(biāo)欄設(shè)計(jì) / 79

Part 4 iOS系統(tǒng)及其組件的設(shè)計(jì) / 83
4.1 iOS系統(tǒng)的發(fā)展及其特點(diǎn) / 84
4.1.1 iOS系統(tǒng)的發(fā)展 / 84
4.1.2 iOS 10 系統(tǒng)的設(shè)計(jì)特點(diǎn) / 86
4.2 iOS系統(tǒng)設(shè)計(jì)的規(guī)范 / 89
4.2.1 設(shè)計(jì)原則 / 89
4.2.2 色彩和字體 / 92
4.2.3 圖標(biāo)的設(shè)計(jì) / 96
4.3 iOS系統(tǒng)界面設(shè)計(jì)實(shí)訓(xùn) / 100
4.3.1 扁平化圖標(biāo)的設(shè)計(jì) / 100
4.3.2 半透明效果的界面設(shè)計(jì) / 108

Part 5 Android系統(tǒng)及其組件的設(shè)計(jì) / 113
5.1 Android系統(tǒng)的特點(diǎn) / 114
5.2 Android系統(tǒng)的設(shè)計(jì)規(guī)范 / 116
5.2.1 度量單位 / 116
5.2.2 字體的使用標(biāo)準(zhǔn) / 116
5.2.3 色彩的應(yīng)用規(guī)范 / 119
5.2.4 四種類型的圖標(biāo) / 122
5.3 六種標(biāo)準(zhǔn)的Widget規(guī)范 / 124
5.3.1 Widget框架簡介 / 124
5.3.2 Widget框架的標(biāo)準(zhǔn)尺寸 / 126
5.3.3 4×1的Widget框架設(shè)計(jì) / 127
5.3.4 3×3的Widget框架設(shè)計(jì) / 131
5.3.5 2×2的Widget框架設(shè)計(jì) / 135
5.3.6 4×1的加長Widget框架設(shè)計(jì) / 138
5.3.7 3×3的橫向Widget框架設(shè)計(jì) / 142
5.3.8 2×2的橫向Widget框架設(shè)計(jì) / 147
5.4 Android系統(tǒng)界面設(shè)計(jì)實(shí)訓(xùn) / 152
5.4.1 立體化的圖標(biāo)設(shè)計(jì) / 152
5.4.2 超強(qiáng)立體感的界面設(shè)計(jì) / 161

Part 6 孕媽幫手App設(shè)計(jì) / 173
界面布局規(guī)劃 / 174
創(chuàng)意思路剖析 / 174
確定配色方案 / 175
定義組件風(fēng)格 / 176
制作步驟詳解 / 176

Part 7 美食網(wǎng)站App設(shè)計(jì) / 187
界面布局規(guī)劃 / 188
創(chuàng)意思路剖析 / 188
確定配色方案 / 189
定義組件風(fēng)格 / 190
制作步驟詳解 / 190

Part 8 籃球運(yùn)動App設(shè)計(jì) / 203
界面布局規(guī)劃 / 204
創(chuàng)意思路剖析 / 204
確定配色方案 / 205
定義組件風(fēng)格 / 205
制作步驟詳解 / 206

Part 9 流量銀行App設(shè)計(jì) / 219
界面布局規(guī)劃 / 220
創(chuàng)意思路剖析 / 220
確定配色方案 / 221
定義組件風(fēng)格 / 221
制作步驟詳解 / 222

Part 10 藏寶游戲App設(shè)計(jì) / 233
界面布局規(guī)劃 / 234
創(chuàng)意思路剖析 / 234
確定配色方案 / 235
定義組件風(fēng)格 / 236
制作步驟詳解 / 236

Part 11 音樂播放App設(shè)計(jì) / 249
界面布局規(guī)劃 / 250
創(chuàng)意思路剖析 / 250
確定配色方案 / 251
定義組件風(fēng)格 / 252
制作步驟詳解 / 252

Part 12 旅游資訊App設(shè)計(jì) / 269
界面布局規(guī)劃 / 270
創(chuàng)意思路剖析 / 270
確定配色方案 / 271
定義組件風(fēng)格 / 272
制作步驟詳解 / 272