本書是一本講解如何使用Photoshop軟體進行移動UI設計的實例操作型自學教程，可以幫助成千上萬的UI設計師，特別是手機APP設計人員提高UI製作能力，拓展他們關於移動APP UI視覺設計的創作思路。
本書共21章，具體內容包括：移動UI設計快速入門、移動UI設計的布局原則、移動UI視覺互動設計法則、移動UI中的基本元素、Photoshop移動UI設計入門、移動UI設計的檔案操作、移動UI圖像的編輯與修復、移動UI的色彩設計、移動UI的圖形圖像設計、移動UI的文字編排設計、移動UI的特效質感設計、移動UI圖像摳取與合成、移動UI圖示圖形設計、移動UI按鈕控制項設計、移動UI功能界面設計、手機登錄UI設計、安卓系統UI設計、iOS系統UI設計、微軟系統UI設計、程式軟體UI設計和遊戲套用UI設計。
PART 01 設計基礎篇
01 移動UI設計快速入門
001 新手入門：了解UI名詞的由來 12
002 多點本事：精通APP套用設計 12
003 分門別類：了解APP主要類別 13
004 移動UI：連線用戶和手機的界面 13
005 設計規範：統一的尺寸和色彩 14
006 設計特點：小巧輕便，通信便捷 14
007 移動特性：個性化的界面特色 15
008 設計基礎：熟悉手機界面特色 16
009 APP平台：了解手機作業系統 16
010 安卓系統：品類繁多，界面各異 17
011 iOS系統：操作便捷，結構清晰 18
012 微軟系統：整潔乾淨的Metro UI 20
013 平板界面：操作方便，性能優越 21
014 階段分析：移動UI設計的流程 21
015 隨身攜帶：移動設備的高便攜性 22
016 收集信息：用戶的反饋非常重要 22
017 提升互動：加強移動UI定製性 23
018 直擊需求：UI就是為用戶服務 23
019 登錄分享：彰顯移動社交特性 24
020 黏住用戶：增加離線瀏覽功能 25
021 加入遊戲：提升APP的樂趣 26
022 獨具一格：擁有自己的UI特色 26
02 移動UI設計的布局原則
023 豎排列表布局 28
024 橫排方塊布局 28
025 九宮格布局 28
026 彈出框布局 29
027 熱門標籤布局 29
028 抽屜式布局 29
029 陳列館式布局 30
030 分段選單式布局 31
031 點聚式布局 31
032 走馬燈式布局 32
033 底部導航欄式布局 32
034 磁貼設計式布局 32
035 超級選單式布局 32
036 選項卡式布局 33
037 圖示式布局 34
038 幻燈片式布局 34
039 圖表信息布局 35
040 完善細節設計 35
041 移動UI的布局原則 36
03 移動UI視覺互動設計法則
042 簡約明快的視覺特色 39
043 趣味型的視覺特色 39
044 華麗型的視覺特色 40
045 色彩的使用要點 40
046 圖案的使用要點 40
047 文字要易於識別 40
048 文字的層次感要強 41
049 清晰地表達文字信息 42
050 把握文字的間距 43
051 適當設定文字的色彩 44
052 更具美觀性和觀賞性 45
053 具備較好的實用性 46
054 注重圖片的品質美感 46
055 不要隨意拉伸圖片 47
056 讓圖片更好地美化界面 48
057 了解手勢互動動作特性 48
058 用循環動作增加真實感 49
059 重複運用透析事物關係 49
060 關鍵動作展現複雜效果 50
061 連續動作展現簡單動畫 50
062 用誇張實現“天馬行空” 50
04 移動UI中的基本元素
063 常規按鈕組件 52
064 編輯輸入框組件 52
065 開關按鈕組件 52
066 格線式瀏覽模式 53
067 文本標籤組件 53
068 警告框組件 53
069 導航欄組件 54
070 頁面切換組件 54
071 進度條組件 55
072 重視ico圖示設計 55
073 隱藏與刪除多餘元素 56
074 對元素進行分區和分組 56
075 幫用戶做決策 57
076 添加視覺反饋 57
077 在UI中加入感情 57
078 內容也需要做“裝修” 60
079 登錄界面的設計要點 61
080 基本元素的設計技巧 63
PART 02 軟體功能篇
05 Photoshop移動UI設計入門
081 安裝Photoshop CC軟體 69
082 卸載Photoshop CC軟體 69
083 啟動Photoshop CC軟體 70
084 退出Photoshop CC軟體 71
085 最大化/最小化移動UI圖像視窗 72
086 還原移動UI圖像視窗 72
087 移動與調整移動UI圖像視窗大小 73
088 調整移動UI圖像視窗排列 73
089 切換當前移動UI圖像視窗 74
090 管理Photoshop CC工具箱 75
091 使用複合工具 76
092 設定預設工具 76
093 如何展開面板 77
094 移動面板 78
095 組合面板 78
096 隱藏面板 79
097 調整面板大小 79
098 創建自定義工作區 79
099 設定自定義快捷鍵 79
100 設定彩色選單命令 81
101 最佳化界面選項 81
102 最佳化檔案處理選項 81
103 最佳化暫存檔選項 82
104 最佳化記憶體與圖像高速快取選項 82
105 顯示/隱藏移動UI圖像中的格線 83
106 對移動UI圖像進行自動對齊格線操作 83
107 調整格線屬性 84
108 顯示/隱藏移動UI圖像中的標尺 85
109 更改移動UI圖像中的標尺原點位置 85
110 還原移動UI圖像中的標尺原點位置 86
111 更改移動UI圖像中的標尺單位 86
112 測量移動UI圖像的長度 87
113 拉直移動UI圖像的圖層 87
114 拖曳創建移動UI圖像參考線 87
115 精確創建移動UI圖像參考線 88
116 顯示/隱藏移動UI圖像中的參考線 89
117 更改移動UI圖像中的參考線顏色 89
118 更改移動UI圖像中的參考線樣式 90
119 調整移動UI圖像中的參考線位置 91
120 清除移動UI圖像中的參考線 91
121 為移動UI圖像創建注釋 92
122 更改移動UI圖像中的注釋顏色 93
123 運用對齊工具對齊移動UI圖像 93
124 為移動UI圖像添加計數 94
06 移動UI設計的檔案操作
125 新建移動UI圖像檔案 96
126 打開移動UI圖像檔案 96
127 保存移動UI圖像檔案 97
128 關閉移動UI圖像檔案 98
129 置入移動UI圖像檔案 99
130 導出移動UI圖像檔案 100
131 通過選單撤銷移動UI圖像操作 101
132 通過面板撤銷移動UI圖像操作 101
133 編輯移動UI圖像時創建歷史記錄 102
134 快照還原移動UI圖像的編輯操作 103
135 恢復移動UI圖像初始狀態 103
136 調整移動UI圖像的畫布大小 104
137 調整移動UI圖像的尺寸 104
138 調整移動UI圖像的解析度 105
139 放大/縮小顯示移動UI圖像 105
140 按適合螢幕顯示移動UI圖像 106
141 按區域放大顯示移動UI圖像 106
142 切換移動UI圖像的顯示模式 107
143 移動圖像編輯視窗顯示區域 107
144 使用導航器移動圖像顯示區域 108
145 運用工具裁剪移動UI圖像 109
146 運用命令裁切移動UI圖像 111
147 精確裁剪移動UI圖像素材 110
148 旋轉移動UI圖像的畫布 111
149 水平翻轉移動UI圖像畫布 112
150 垂直翻轉移動UI圖像畫布 112
151 調整UI圖像的元素位置 112
152 刪除移動UI圖像中的元素 113
153 縮放/旋轉移動UI圖像 114
154 水平翻轉移動UI圖像 115
155 垂直翻轉移動UI圖像 116
156 斜切移動UI圖像素材 116
157 扭曲移動UI圖像素材 117
158 透視移動UI圖像素材 118
159 變形移動UI圖像素材 119
160 在移動UI圖像中重複變換 120
161 操控變形移動UI圖像素材 121
07 移動UI圖像的編輯與修復
162 選擇移動UI圖像中的圖層 124
163 在移動UI圖像中創建普通圖層 125
164 在移動UI圖像中創建調整圖層 127
165 在移動UI圖像中創建填充圖層 127
166 在移動UI圖像中創建圖層組 128
167 移動UI圖像的圖層基本操作 129
168 合併移動UI圖像中的圖層 132
169 使用混合模式編輯移動UI圖像 133
170 為移動UI圖像套用圖層樣式 134
171 隱藏移動UI圖像的圖層樣式 135
172 複製移動UI圖像的圖層樣式 136
173 編輯移動UI圖像的圖層樣式 137
174 清除移動UI圖像的圖層樣式 138
175 將圖層樣式轉換為圖層 138
176 使用矩形選框工具創建矩形選區 138
177 使用橢圓選框工具創建橢圓選區 140
178 運用套索工具創建不規則選區 142
179 運用多邊形套索工具創建選區 143
180 運用磁性套索工具創建選區 144
181 運用魔棒工具創建顏色相近選區 145
182 運用快速選擇工具創建選區 146
183 運用“色彩範圍”命令自定選區 147
184 運用“擴大選取”命令擴大選區 148
185 運用“選取相似”命令創建選區 149
186 運用按鈕創建移動UI圖像選區 149
187 調整移動UI圖像中的選區位置 151
188 存儲移動UI圖像中的選區 151
189 變換移動UI圖像中的選區 152
190 剪下移動UI圖像中的選區內容 153
191 複製和貼上移動UI選區圖像 153
192 在移動UI圖像選區內貼入圖像 154
193 為移動UI圖像選區添加邊界 155
194 平滑移動UI圖像中的選區 155
195 擴展與收縮移動UI圖像中的選區 155
196 羽化移動UI中的選區圖像 156
197 調整移動UI圖像中的選區邊緣 156
198 填充移動UI圖像中的選區 157
199 使用選區定義移動UI圖案 157
200 描邊移動UI圖像中的選區 158
201 清除移動UI圖像選區內容 158
202 運用污點修復畫筆工具修復移動UI圖像 159
203 運用修復畫筆工具修復移動UI圖像 159
204 運用修補工具修復移動UI圖像 160
205 使用顏色替換工具替換移動UI圖像顏色 161
206 運用橡皮擦工具清除移動UI圖像內容 161
207 運用背景橡皮擦工具清除移動UI圖像內容 162
208 運用魔術橡皮擦工具清除移動UI圖像內容 163
209 運用加深工具調整移動UI圖像色調 164
210 運用海綿工具加深移動UI圖像色彩濃度 165
211 運用仿製圖章工具複製移動UI元素 165
212 運用圖案圖章工具繪製移動UI元素 166
213 運用模糊工具模糊移動UI圖像 167
214 運用銳化工具銳化移動UI圖像 167
215 運用歷史記錄畫筆工具恢復移動UI圖像 168
08 移動UI的色彩設計
216 設定移動UI圖像的前景色與背景色 170
217 使用吸管工具設定移動UI圖像顏色 170
218 使用“顏色”面板設定移動UI圖像顏色 171
219 使用“色板”面板設定移動UI圖像顏色 171
220 使用“填充”命令填充移動UI圖像顏色 172
221 快捷選單選項填充移動UI圖像顏色 173
222 使用油漆桶工具填充移動UI圖像顏色 174
223 使用漸變工具為移動UI圖像填充雙色 174
224 使用漸變工具為移動UI圖像填充多色 175
225 使用“填充”命令為移動UI圖像填充圖案 176
226 運用“填充”命令修復移動UI圖像 178
227 使用油漆桶工具填充移動UI圖像顏色 179
228 使用“自動色調”命令調整移動UI色調 179
229 使用“自動對比度”命令調整移動UI對比度 180
230 使用“自動顏色”命令調整移動UI顏色 180
231 查看移動UI圖像的顏色分布 181
232 轉換移動UI圖像的顏色模式 182
233 識別移動UI圖像色域範圍外的顏色 184
234 使用“色階”命令調整移動UI圖像亮度範圍 185
235 使用“亮度/對比度”命令調整移動UI圖像色彩 186
236 使用“曲線”命令調整移動UI圖像整體色調 187
237 使用“曝光度”命令調整移動UI圖像曝光 187
238 使用“自然飽和度”命令調整移動UI飽和度 188
239 使用“色相/飽和度”命令調整移動UI色相 189
240 使用“色彩平衡”命令調整移動UI圖像偏色 190
241 使用“匹配顏色”命令匹配移動UI圖像色調 190
242 使用“替換顏色”命令替換移動UI圖像色調 191
243 使用“陰影/高光”命令調整移動UI圖像明暗 192
244 使用“照片濾鏡”命令過濾移動UI圖像色調 192
245 使用“可選顏色”命令校正移動UI圖像色彩 193
246 使用“通道混合器”命令調整移動UI圖像色彩 193
247 使用“黑白”命令製作單色移動UI圖像效果 194
248 使用“去色”命令製作灰度移動UI圖像效果 194
249 使用“閾值”命令製作黑白移動UI圖像效果 195
250 使用“變化”命令製作彩色移動UI圖像效果 195
251 使用“HDR色調”命令調整移動UI圖像色調 196
252 使用“漸變映射”命令製作漸變移動UI圖像效果 197
09 移動UI的圖形圖像設計
253 選擇設計移動UI的紙張 199
254 選擇設計移動UI的畫筆 199
255 選擇設計移動UI的顏色 200
256 使用“畫筆”面板 200
257 使用“畫筆預設”面板 201
258 設定畫筆筆尖形狀 201
259 設定隨機變化的畫筆效果 202
260 創建自定義的畫筆筆刷 204
261 設定畫筆筆觸的散射效果 205
262 在移動UI圖像中創建圖案紋理效果 206
263 使用雙重畫筆繪製移動UI圖像 207
264 恢復到系統默認的畫筆設定 208
265 存儲當前使用的畫筆設定 208
266 對多餘的畫筆進行刪除操作 209
267 新建移動UI圖像路徑 209
268 選擇移動UI圖像中的路徑 212
269 重命名移動UI圖像中的路徑 212
270 保存移動UI圖像中的工作路徑 212
271 複製移動UI圖像中的路徑 213
272 調整移動UI圖像中的路徑位置 213
273 刪除移動UI圖像中的路徑 214
274 運用鋼筆工具繪製閉合移動UI路徑 214
275 運用鋼筆工具繪製開放移動UI路徑 216
276 運用自由鋼筆工具繪製移動UI路徑 216
277 運用選區創建移動UI圖像路徑 218
278 在移動UI圖像中繪製矩形路徑形狀 219
279 在移動UI圖像中繪製圓角矩形路徑形狀 220
280 在移動UI圖像中繪製多邊形路徑形狀 220
281 在移動UI圖像中繪製橢圓路徑形狀 221
282 在移動UI圖像中繪製直線路徑形狀 222
283 在移動UI圖像中繪製自定路徑形狀 223
284 在移動UI路徑中添加或刪除錨點 224
285 平滑移動UI圖像中的路徑錨點 224
286 將圓滑型錨點轉換為直線型錨點 225
287 斷開移動UI圖像中的路徑 225
288 連線移動UI圖像中的路徑 225
289 填充移動UI圖像中的路徑 226
290 描邊移動UI圖像中的路徑 227
291 創建通道輔助移動UI製圖 228
292 在移動UI圖像中創建複合通道 230
293 在移動UI圖像中創建單色通道 231
294 在移動UI圖像中創建專色通道 231
295 複製與刪除移動UI圖像中的通道 232
296 在移動UI圖像中創建剪貼蒙版 232
297 設定移動UI剪貼蒙版的混合模式 234
298 設定移動UI剪貼蒙版的不透明度 235
299 在移動UI圖像中創建快速蒙版 235
300 在移動UI圖像中創建矢量蒙版 236
301 刪除移動UI圖像中的矢量蒙版 237
302 通過選區創建移動UI圖層蒙版 237
303 在移動UI圖像中直接創建圖層蒙版 238
304 編輯移動UI圖像中的圖層蒙版 239
305 管理移動UI圖像中的圖層蒙版 240
306 移動UI圖像中的蒙版連結操作 241
307 圖層蒙版與選區的相互轉換操作 241
308 將矢量蒙版轉換為圖層蒙版 242
10 移動UI的文字編排設計
309 移動UI的文字類型 245
310 了解文字工具屬性欄 245
311 輸入橫排移動UI圖像文字 246
312 輸入直排移動UI圖像文字 247
313 輸入段落移動UI圖像文字 249
314 輸入選區移動UI圖像文字 250
315 設定移動UI文字屬性 251
316 設定移動UI段落屬性 252
317 選擇和移動APP圖像文字 252
318 互換移動UI文字的方向 253
319 切換點文本和段落文本 253
320 拼寫檢查移動UI文字 254
321 查找與替換移動UI文字 255
322 輸入沿路徑排列的移動UI文字 256
323 調整移動UI文字排列的位置 257
324 調整移動UI文字的路徑形狀 257
325 調整移動UI文字與路徑距離 258
326 移動UI圖像的變形文字樣式 258
327 創建移動UI變形文字效果 259
328 編輯移動UI變形文字效果 260
329 將移動UI文字轉換為路徑 260
330 將移動UI文字轉換為形狀 260
331 將移動UI文字轉換為圖像 261
11 移動UI的特效質感設計
332 在移動UI圖像中創建智慧型濾鏡 263
333 編輯移動UI圖像中的智慧型濾鏡 264
334 停用/啟用移動UI圖像中的智慧型濾鏡 264
335 刪除移動UI圖像中的智慧型濾鏡 264
336 為移動UI圖像添加液化效果 265
337 為移動UI圖像添加消失點效果 266
338 使用濾鏡庫編輯移動UI圖像 267
339 使用鏡頭校正濾鏡修復移動UI圖像 268
340 為移動UI圖像添加切變效果 269
341 為移動UI圖像添加波浪效果 269
342 為移動UI圖像添加波紋效果 270
343 為移動UI圖像添加玻璃效果 270
344 為移動UI圖像添加水波效果 271
345 為移動UI圖像添加海洋波紋效果 271
346 為移動UI圖像添加擴散亮光效果 272
347 為移動UI圖像添加旋轉扭曲效果 273
348 為移動UI圖像添加馬賽克效果 273
349 為移動UI圖像添加點狀化效果 274
350 為移動UI圖像添加彩塊化效果 275
351 為移動UI圖像添加彩色半調效果 275
352 為移動UI圖像添加晶格化效果 276
353 為移動UI圖像添加銅版雕刻效果 276
354 為移動UI圖像添加碎片效果 277
355 為移動UI圖像添加雜色效果 277
356 為移動UI圖像添加減少雜色效果 278
357 為移動UI圖像添加蒙塵與劃痕效果 278
358 為移動UI圖像添加中間值效果 279
359 為移動UI圖像添加徑向模糊效果 279
360 為移動UI圖像添加表面模糊效果 280
361 為移動UI圖像添加動感模糊效果 28
362 為移動UI圖像添加高斯模糊效果 282
363 為移動UI圖像添加強化的邊緣效果 283
364 為移動UI圖像添加噴濺效果 284
365 為移動UI圖像添加成角的線條效果 284
366 為移動UI圖像添加陰影線效果 285
367 為移動UI圖像添加水彩畫紙效果 285
368 為移動UI圖像添加壁畫效果 287
369 為移動UI圖像添加水彩效果 287
12 移動UI圖像摳取與合成
370 使用“全部”命令合成移動UI圖像 290
371 使用“色彩範圍”命令摳圖 29
372 使用“選取相似”命令摳圖 292
373 使用快速選擇工具摳圖 292
374 使用對所有圖層取樣摳圖 293
375 通過單一選取功能摳圖 294
376 通過添加選區功能摳圖 294
377 通過減選選區摳圖 295
378 通過交叉選取功能摳圖 296
379 通過透明圖層功能摳圖 296
380 通過取樣背景色板功能摳圖 296
381 通過取樣一次功能摳圖 297
382 通過連續取樣功能摳圖 298
383 通過“查找邊緣”功能摳圖 298
384 通過單一功能摳圖 299
385 通過連續功能摳圖 299
386 通過設定容差摳圖 300
387 通過透明效果摳圖 300
388 通過矩形選框摳圖 3 01
389 通過橢圓選框摳圖 3 01
390 通過套索工具摳圖 302
391 通過多邊形套索工具摳圖 302
392 通過磁性套索工具摳圖 303
393 運用繪製直線路徑摳圖 304
394 運用繪製曲線路徑摳圖 304
395 運用自由鋼筆工具摳圖 305
396 運用建立選區功能摳圖 305
397 運用繪製矩形路徑摳圖 306
398 運用繪製圓角矩形路徑摳圖 307
399 運用繪製橢圓路徑摳圖 309
400 運用繪製多邊形路徑摳圖 310
401 運用繪製自定形狀路徑摳圖 310
402 通過“變亮”模式合成移動UI圖像 311
403 通過“濾色”模式合成移動UI圖像 311
404 通過“正片疊底”模式合成移動UI圖像 312
405 通過“顏色加深”模式合成移動UI圖像 312
406 通過矢量蒙版摳圖 313
407 通過圖層蒙版合成移動UI圖像 313
408 通過快速蒙版摳圖 314
409 通過編輯圖層蒙版摳圖 315
410 通過路徑和蒙版合成移動UI圖像 315
411 套用自定蒙版合成移動UI圖像 316
412 套用剪貼蒙版合成移動UI圖像 316
413 通過合併通道功能合成移動UI圖像 316
414 通過調整通道摳圖 317
415 通過利用通道差異性摳圖 317
416 通過鋼筆工具配合通道摳圖 317
417 色階調整配合通道摳圖 317
418 曲線調整配合通道摳圖 318
419 用通道對透明物體摳圖 318
420 將通道作為選區載入摳圖 319
421 通過“計算”命令摳圖 319
422 通過“套用圖像”命令摳圖 320
423 通過“調整邊緣”命令摳圖 321
424 運用外部動作摳圖 321
PART 03 實戰套用篇
13 移動UI圖示圖形設計
425 音樂APP圖示設計1——圖示背景效果 323
426 音樂APP圖示設計2——圖示主體效果 324
427 音樂APP圖示設計3——圖示細節效果 325
428 信箱APP圖示設計1——圖示背景效果 327
429 信箱APP圖示設計2——圖示主體效果 328
430 信箱APP圖示設計3——調整圖像形狀 329
431 滑鼠指針形狀設計1——製作主體效果 329
432 滑鼠指針形狀設計2——完善主體效果 330
433 滑鼠指針形狀設計3——製作細節效果 332
14 移動UI按鈕控制項設計
434 按鈕設計1——製作主體效果 335
435 按鈕設計2——添加立體效果 335
436 按鈕設計3——製作文本效果 337
437 解鎖滑塊設計1——製作主體效果 338
438 解鎖滑塊設計2——製作按鈕效果 339
439 解鎖滑塊設計3——製作文本效果 340
440 切換條設計1——製作背景效果 342
441 切換條設計2——製作主體效果 343
442 切換條設計3——製作細節效果 344
15 移動UI功能界面設計
443 搜尋框設計1——製作主體效果 346
444 搜尋框設計2——製作搜尋圖示 347
445 搜尋框設計3——製作二維碼搜尋 348
446 標籤欄設計1——製作標籤欄背景 349
447 標籤欄設計2——製作分割線 350
