01移动UI界面设计快速入门 1
1.1 了解移动UI界面APP设计 2
1.1.1 认识UI设计 2
1.1.2 认识移动APP 2
1.1.3 移动APP的主要类别 3
1.1.4 移动UI界面设计规范 4
1.1.5 移动UI界面设计的个性化 5
1.1.6 移动UI界面设计常用布局 6
1.2 移动UI界面设计的视觉效果 8
1.2.1 简约明快型的移动UI界面 8
1.2.2 趣味与独创型的移动UI界面 10
1.2.3 高贵华丽型的移动UI界面 10
1.3 移动系统UI组件界面介绍 11
1.3.1 常规按钮 11
1.3.2 编辑输入框 11
1.3.3 开关按钮 12
1.3.4 网格式浏览 12
1.3.5 文本标签 13
1.3.6 警告框 13
1.3.7 导航栏 14
1.3.8 页面切换 15
02Photoshop移动UI设计入门 16
2.1 Photoshop CC的安装与卸载 17
2.1.1 安装Photoshop CC 17
2.1.2 卸载Photoshop CC 19
2.2 熟悉Photoshop CC工作界面 20
2.2.1 认识菜单栏 20
2.2.2 认识状态栏 21
2.2.3 认识工具属性栏 22
2.2.4 认识工具箱 23
2.2.5 认识图像编辑窗口 24
2.2.6 认识浮动控制面板 24
2.3 移动UI设计常用的基本图像 25
2.3.1 位图与矢量图 25
2.3.2 像素与分辨率 26
2.3.3 常用图像颜色模式 28
2.3.4 图像的文件格式 30
2.4 移动UI设计的图像文件操作 31
2.4.1 新建移动UI图像文件 31
2.4.2 打开移动UI图像文件 32
2.4.3 保存移动UI图像文件 33
2.4.4 关闭移动UI图像文件 34
2.4.5 移动UI图像的撤销操作 35
2.4.6 使用快照还原移动UI图像 35
2.4.7 恢复移动UI图像为初始状态 36
2.5 设置移动UI图像的窗口显示 36
2.5.1 最小化、最大化和还原窗口 37
2.5.2 面板的展开和组合 37
2.5.3 移动和调整面板大小 38
2.5.4 调整图像窗口排列 39
2.5.5 切换图像编辑窗口 40
2.5.6 调整图像编辑窗口大小 41
2.5.7 移动图像编辑窗口 41
2.6 调整移动UI图像的显示 42
2.6.1 放大与缩小显示移动UI图像 42
2.6.2 控制移动UI图像显示模式 43
2.6.3 按区域放大显示移动UI图像 44
2.6.4 按适合屏幕显示移动UI图像 46
2.6.5 移动UI图像窗口显示区域 47
2.7 运用辅助工具设计移动UI图像 48
2.7.1 应用网格 48
2.7.2 应用参考线 50
2.7.3 应用标尺工具 51
2.7.4 应用注释工具 52
2.7.5 运用对齐工具 54
2.7.6 运用计数工具 56
03移动UI图像的基本编辑 59
3.1 控制移动UI图像的画布 60
3.1.1 调整移动UI图像的画布尺寸 60
3.1.2 翻转移动UI图像的画布 61
3.1.3 显示全部的移动UI图像 62
3.1.4 调整移动UI图像的尺寸 63
3.1.5 调整移动UI图像的分辨率 64
3.2 裁剪与管理移动UI图像 65
3.2.1 运用工具裁剪移动UI图像 65
3.2.2 运用命令裁切移动UI图像 67
3.2.3 精确裁剪移动UI图像对象 68
3.2.4 移动UI图像素材 69
3.2.5 删除UI图像素材 71
3.3 变换与编辑移动UI图像 73
3.3.1 缩放/旋转移动UI图像素材 73
3.3.2 水平翻转移动UI图像素材 74
3.3.3 垂直翻转移动UI图像素材 76
3.3.4 斜切移动UI图像素材 76
3.3.5 扭曲移动UI图像素材 77
3.3.6 透视移动UI图像素材 79
3.3.7 变形移动UI图像素材 80
3.4 创建与管理移动UI图像图层 82
3.4.1 认识图层与“图层”面板 83
3.4.2 创建图层和图层组 84
3.4.3 图层的基础操作 89
3.4.4 设置图层不透明度 93
3.4.5 链接和合并图层 95
3.4.6 锁定图层 97
3.4.7 更改调整图层参数 98
3.4.8 常用图像混合模式的设置 99
3.4.9 应用与管理图层样式 102
04移动UI图像抠取与合成 114
4.1 移动UI界面命令抠图技法 115
4.1.1 运用“反向”命令抠图 115
4.1.2 运用“色彩范围”命令抠图 116
4.1.3 运用“扩大选取”命令抠图 117
4.1.4 运用“选取相似”命令抠图 118
4.2 移动UI界面工具抠图技法 120
4.2.1 运用快速选择工具抠图 120
4.2.2 运用魔棒工具抠图 122
4.2.3 运用矩形选框工具抠图 124
4.2.4 运用椭圆选框工具抠图 126
4.2.5 运用套索工具抠图 127
4.2.6 运用多边形套索工具抠图 128
4.2.7 运用磁性套索工具抠图 131
4.2.8 运用魔术橡皮擦工具抠图 133
4.2.9 运用钢笔工具抠图 134
4.2.10 运用自由钢笔工具抠图 136
4.2.11 运用路径工具抠图 139
4.3 移动UI界面图像合成技法 144
4.3.1 运用蒙版合成移动UI图像 144
4.3.2 运用通道合成移动UI图像 148
4.3.3 运用图层模式合成移动UI图像 152
05移动UI界面的色彩设计 153
5.1 了解移动UI图像的颜色属性 154
5.1.1 了解移动UI图像的色相属性 154
5.1.2 了解移动UI图像的亮度属性 154
5.1.3 了解移动UI图像的饱和度属性 155
5.1.4 查看移动UI图像的颜色分布 155
5.1.5 转换移动UI图像的颜色模式 157
5.1.6 识别色域范围外的颜色 161
5.2 自动校正移动UI图像色彩 162
5.2.1 运用“自动色调”命令调整移动UI图像 162
5.2.2 运用“自动对比度”命令调整移动UI图像 163
5.2.3 运用“自动颜色”命令调整移动UI图像 164
5.3 调整移动UI图像的影调 166
5.3.1 运用“色阶”命令调整移动UI图像 166
5.3.2 运用“亮度/对比度”命令调整移动UI图像 168
5.3.3 运用“曲线”命令调整移动UI图像 169
5.3.4 运用“曝光度”命令调整移动UI图像 171
5.4 调整移动UI图像的颜色 172
5.4.1 运用“自然饱和度”命令调整移动UI图像 172
5.4.2 运用“色相/饱和度”命令调整移动UI图像 173
5.4.3 运用“色彩平衡”命令调整移动UI图像 175
5.4.4 运用“替换颜色”命令调整移动UI图像 177
5.4.5 运用“照片滤镜”命令调整移动UI图像 179
5.4.6 运用“通道混合器”命令调整移动UI图像 181
5.4.7 运用“去色”命令调整移动UI图像 183
06移动UI的图形图像设计 185
6.1 移动UI图像设计的绘图基础 186
6.1.1 选择设计移动UI界面的画笔 186
6.1.2 选择设计移动UI界面的颜色 187
6.1.3 认识与管理“画笔”面板 187
6.1.4 运用画笔工具设计移动UI界面 191
6.2 移动UI图像的路径编辑技巧 194
6.2.1 添加和删除锚点 194
6.2.2 平滑和尖突锚点 195
6.2.3 连接和断开路径 197
6.3 移动UI图像的修饰与修复 198
6.3.1 复制移动UI界面图像 199
6.3.2 修复移动UI界面图像 204
6.3.3 恢复移动UI界面图像 208
6.3.4 修饰移动UI界面图像 210
6.3.5 清除移动UI界面图像 214
6.3.6 调色移动UI界面图像 218
07移动UI的文字编排设计 222
7.1 输入移动UI界面中的文字 223
7.1.1 移动UI界面的文字类型 223
7.1.2 了解文字工具属性栏 223
7.1.3 输入横排移动UI图像文字 225
7.1.4 输入直排移动UI图像文字 227
7.1.5 输入段落移动UI图像文字 228
7.1.6 输入选区移动UI图像文字 230
7.2 设置与编辑移动UI文字属性 232
7.2.1 设置移动UI文字属性 233
7.2.2 设置移动UI段落属性 234
7.2.3 选择和移动APP图像文字 235
7.2.4 互换移动UI文字的方向 236
7.2.5 切换点文本和段落文本 237
7.2.6 拼写检查移动UI文字 238
7.2.7 查找与替换移动UI文字 240
7.3 制作移动UI界面路径文字 241
7.3.1 输入沿路径排列的移动UI文字 242
7.3.2 调整移动UI文字排列的位置 243
7.3.3 调整移动UI文字的路径形状 245
7.3.4 调整移动UI文字与路径距离 246
7.4 制作与编辑变形移动UI文字 247
7.4.1 移动UI图像的变形文字样式 248
7.4.2 创建移动UI变形文字效果 248
7.4.3 编辑移动UI变形文字效果 249
7.5 转换移动UI界面的文字效果 250
7.5.1 将移动UI文字转换为路径 251
7.5.2 将移动UI文字转换为形状 251
7.5.3 将移动UI文字转换为图像 253
08常用元素UI界面设计 254
8.1 设计手机系统常用元素 255
8.1.1 设计手机搜索框 255
8.1.2 设计手机解锁滑块 258
8.1.3 设计拨号图标 264
8.2 设计移动APP常用元素 269
8.2.1 设计相册APP图标 269
8.2.2 设计旅游APP菜单栏 276
8.2.3 设计社交APP选项框 282
09手机登录UI界面设计 290
9.1 设计免费WiFi应用登录界面 291
9.1.1 设计界面背景效果 291
9.1.2 设计界面按钮效果 295
9.1.3 设计界面复选框效果 303
9.1.4 设计界面细节效果 306
9.1.5 设计界面文字效果 307
9.2 设计社交通讯应用登录界面 309
9.2.1 设计登录界面背景效果 310
9.2.2 设计登录界面复选框效果 315
9.2.3 设计登录界面按钮效果 317
9.2.4 设计登录界面倒影效果 319
9.2.5 设计登录界面整体效果 321
10程序软件UI界面设计 324
10.1 设计微购APP主界面 325
10.1.1 设计界面背景效果 326
10.1.2 设计界面主体效果 331
10.1.3 设计界面文字效果 334
10.2 设计秀美图APP主界面 337
10.2.1 设计界面背景效果 337
10.2.2 设计界面主体效果 339
10.2.3 设计界面文字效果 349
11播放应用UI界面设计 352
11.1 设计音乐APP播放界面 353
11.1.1 设计APP界面背景效果 353
11.1.2 设计APP界面整体效果 361
11.2 设计视频APP播放界面 367
11.2.1 设计APP界面背景效果 368
11.2.2 设计APP界面整体效果 370
12游戏应用UI界面设计 378
12.1 设计魔法小精灵游戏UI界面 379
12.1.1 设计游戏APP界面主体效果 379
12.1.2 设计游戏APP界面按钮效果 385
12.1.3 设计游戏APP界面文字效果 390
12.2 设计欢乐桌球游戏UI界面 394
12.2.1 设计游戏APP界面背景效果 394
12.2.2 设计游戏APP界面主体效果 399
12.2.3 设计游戏APP界面文字效果 402
13安卓系统UI界面设计 405
13.1 设计安卓系统个性锁屏界面 406
13.1.1 设计个性锁屏界面背景效果 407
13.1.2 设计个性锁屏界面主体效果 411
13.2 设计安卓系统应用程序界面 414
13.2.1 设计安卓应用程序主体效果 414
13.2.2 设计安卓应用程序整体效果 420
14苹果系统UI界面设计 427
14.1 设计苹果系统天气控件界面 428
14.1.1 设计天气控件背景效果 428
14.1.2 设计天气控件主体效果 433
14.2 设计苹果系统日历APP界面 441
14.2.1 设计日历APP背景效果 442
14.2.2 设计日历APP主体效果 445
15微软系统UI界面设计 456
15.1 设计微软手机拨号键盘 457
15.1.1 设计拨号键盘背景效果 457
15.1.2 设计拨号键盘主体效果 463
15.2 设计微软手机用户界面 466
15.2.1 设计用户界面背景效果 467
15.2.2 设计用户界面整体效果 472
16平板电脑UI界面设计 480
16.1 设计安卓平板相机应用界面 481
16.1.1 设计相机应用界面背景效果 481
16.1.2 设计相机应用界面整体效果 488
16.2 设计苹果平板阅读应用界面 493
16.2.1 设计阅读应用界面背景效果 494
16.2.2 设计阅读应用界面整体效果 497