PART 01 设计基础篇 12
01移动UI设计快速入门 12
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设计的布局原则 28
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视觉交互设计法则 39
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中的基本元素 52
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 软件功能篇 69
05 Photoshop移动UI设计入门 69
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设计的文件操作 96
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图像 110
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图像的编辑与修复 124
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的色彩设计 170
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的图形图像设计 199
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的文字编排设计 245
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的特效质感设计 263
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图像添加动感模糊效果 281
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图像抠取与合成 290
370使用“全部”命令合成移动UI图像 290
371使用“色彩范围”命令抠图 291
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通过矩形选框抠图 301
389通过椭圆选框抠图 301
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 实战应用篇 323
13移动UI图标图形设计 323
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按钮控件设计 335
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功能界面设计 346
443搜索框设计1——制作主体效果 346
444搜索框设计2——制作搜索图标 347
445搜索框设计3——制作二维码搜索 348
446标签栏设计1——制作标签栏背景 349
447标签栏设计2——制作分割线 350
448标签栏设计3——制作标签文本 351
449选项框设计1——制作选项框主体 352
450选项框设计2——制作细节效果 353
451选项框设计3——制作文本效果 354
16手机登录UI设计 357
452免费WiFi应用登录界面设计1——制作背景效果 357
453免费WiFi应用登录界面设计2——制作表单按钮 359
454免费WiFi应用登录界面设计3——制作文本细节 364
455云服务APP登录界面设计1——制作界面背景 366
456云服务APP登录界面设计2——制作登录框 366
457云服务APP登录界面设计3——制作文本效果 367
458社交APP登录界面设计1——制作主体效果 369
459社交APP登录界面设计2——制作表单控件 370
460社交APP登录界面设计3——制作倒影效果 371
17安卓系统UI设计 374
461时钟界面设计1——制作背景效果 374
462时钟界面设计2——制作分割线 375
463时钟界面设计3——制作主体效果 377
464锁屏界面设计1——制作背景效果 377
465锁屏界面设计2——制作圆环效果 380
466锁屏界面设计3——完善细节效果 382
467系统磁盘清理界面设计1——制作背景效果 382
468系统磁盘清理界面设计2——制作主体效果 384
469系统磁盘清理界面设计3——制作细节效果 386
18 iOS系统UI设计 389
470天气控件界面设计1——制作背景效果 389
471天气控件界面设计2——制作主体效果 391
472天气控件界面设计3——制作文本效果 395
473手机来电界面设计1——添加参考线 396
474手机来电界面设计2——制作主体效果 398
475手机来电界面设计3——制作文本效果 400
476日历应用界面设计1——制作背景效果 401
477日历应用界面设计2——制作主体效果 403
478日历应用界面设计3——制作细节效果 406
19微软系统UI设计 411
479拨号键盘设计1——制作背景效果 411
480拨号键盘设计2——制作电话图标 412
481拨号键盘设计3——制作主体效果 414
482待机界面设计1——调整背景色彩 415
483待机界面设计2——添加暗角效果 417
484待机界面设计3——制作立体效果 419
485照片应用界面设计1——制作背景效果 419
486照片应用界面设计2——制作相册效果 421
487照片应用界面设计3——制作细节与文本效果 422
20程序软件UI设计 425
488购物APP界面设计1——制作背景效果 425
489购物APP界面设计2——制作主体效果 427
490购物APP界面设计3——制作文本效果 428
491视频APP界面设计1——制作主体效果 430
492视频APP界面设计2——制作播放进度条 431
493视频APP界面设计3——制作控制按钮 432
494相机APP界面设计1——制作背景效果 433
495相机APP界面设计2——制作地址标签 435
496相机APP界面设计3——制作整体效果 437
21游戏应用UI设计 441
497桌球游戏UI设计1——制作背景效果 441
498桌球游戏UI设计2——制作主体效果 445
499桌球游戏UI设计3——制作文本效果 448
500休闲游戏UI设计1——制作背景效果 449
501休闲游戏UI设计2——制作主体效果 451
502休闲游戏UI设计3——制作文本效果 453
503塔防游戏UI设计1——制作背景效果 456
504塔防游戏UI设计2——制作主体效果 457
505塔防游戏UI设计3——制作文本效果 460