模块1 UI动效设计基础
1.1 认识UI动效 2
1.1.1 什么是UI动效 2
1.1.2 动效设计的重要性 2
1.1.3 动效设计的常用技巧 4
1.2 UI动效的属性 5
1.2.1 时间 6
1.2.2 缓动与速度 6
1.2.3 视觉 7
1.2.4 交互 9
1.2.5 过渡效果 10
1.3 UI动效的类型 12
1.3.1 按功能分类 12
1.3.2 按运动方式分类 13
1.3.3 按触发方式分类 15
1.3.4 按持续时间分类 15
1.4 UI动效的设计流程 17
1.4.1 需求分析 18
1.4.2 设计策划 18
1.4.3 动效制作 18
1.4.4 评审与优化 18
1.4.5 实施与上线 19
1.4.6 后期评估与迭代 19
1.5 常用的动效设计软件 19
课后练习:动效类型的认知与实践 22
模块2 移动UI的色彩搭配
2.1 色彩的基础理论 24
2.1.1 色彩的属性 24
2.1.2 色彩的类别 25
2.2 色彩搭配的原则 26
2.2.1 单色搭配 26
2.2.2 互补色搭配 27
2.2.3 对比色搭配 28
2.2.4 相邻色搭配 28
2.2.5 类似色搭配 29
2.2.6 分裂互补色搭配 29
2.2.7 三角形搭配 30
2.2.8 正方形搭配 30
2.3 UI动效中的色彩变化 31
2.3.1 状态反馈 31
2.3.2 过渡效果 32
2.3.3 强调重点 32
2.3.4 数据可视化 33
2.3.5 加载指示 34
2.3.6 交互反馈 34
2.4 常用的色彩搭配工具 35
课后练习:APP界面色彩分析 38
模块3 Photoshop艺术创作详解
3.1 认识Photoshop 40
3.1.1 Photoshop工作界面 40
3.1.2 辅助工具的使用 42
3.1.3 文档的管理和编辑 45
3.2 基础工具的应用 47
3.2.1 选择工具组 47
3.2.2 裁剪工具组和切片工具 51
3.2.3 绘图工具组 54
3.2.4 修饰工具组 59
3.2.5 形状工具组 64
3.3 路径的创建与应用 66
3.3.1 创建路径 67
3.3.2 路径运算 68
3.4 文字的处理与应用 69
3.4.1 创建文本 69
3.4.2 设置文本属性 71
3.4.3 栅格化文字 71
3.4.4 文字变形 72
3.5 图层的应用 72
3.5.1 认识图层 72
3.5.2 管理图层 73
3.5.3 图层样式 75
3.6 通道和蒙版 77
3.6.1 通道的类型 77
3.6.2 通道的基础操作 78
3.6.3 蒙版的类型 79
3.7 图像色彩的调整 81
3.7.1 曲线 82
3.7.2 色阶 82
3.7.3 色相/饱和度 83
3.7.4 色彩平衡 84
3.7.5 去色 84
3.8 滤镜 85
3.8.1 智能滤镜 85
3.8.2 独立滤镜组 86
3.8.3 特效滤镜组 88
案例实操:制作缓冲中动画效果 92
课后练习:“红色记忆・初心传承”动态UI图标设计 97
模块4 Illustrator矢量绘图详解
4.1 认识Illustrator 99
4.1.1 Illustrator工作界面 99
4.1.2 文档的基本操作 101
4.1.3 对象显示状态的调整 104
4.2 路径的绘制与编辑 106
4.2.1 绘制线段和网格 106
4.2.2 绘制路径 107
4.2.3 绘制几何形状 109
4.2.4 编辑路径与形状 111
4.3 图形的填充与描边 112
4.3.1 吸管工具 112
4.3.2 图形填充 113
4.3.3 图形描边 117
4.4 文本的创建与编辑 118
4.4.1 创建文本 118
4.4.2 编辑文本 118
4.5 特效与样式 121
4.5.1 特效详解 121
4.5.2 外观属性 122
4.5.3 图形样式 124
4.6 高级应用技巧 125
4.6.1 混合对象 125
4.6.2 剪贴蒙版 126
4.6.3 图像描摹 126
4.6.4 封套扭曲 127
案例实操:制作空状态插画 129
课后练习:“活字生光”动态UI图标设计 135
模块5 After Effects基础知识详解
5.1 认识After Effects 137
5.1.1 After Effects工作界面 137
5.1.2 After Effects基本操作 138
5.2 素材的导入与管理 142
5.2.1 导入素材 142
5.2.2 管理素材 144
5.3 常用视频效果 147
5.3.1 视频效果的应用 147
5.3.2 扭曲效果 148
5.3.3 模拟效果 149
5.3.4 模糊和锐化效果 150
5.3.5 生成效果 151
5.3.6 透视效果 152
5.3.7 风格化效果 153
5.3.8 颜色校正效果 154
案例实操:清理加速界面动效 157
课后练习:“星火燎原”加载动效制作 177
模块6 图层与关键帧动效
6.1 图层的基本操作 179
6.1.1 认识图层 179
6.1.2 创建图层 180
6.1.3 图层的基本属性 181
6.2 图层的编辑与管理 183
6.2.1 图层的编辑 184
6.2.2 图层样式 188
6.2.3 图层的混合模式 189
6.3 关键帧动画 199
6.3.1 激活关键帧 199
6.3.2 编辑关键帧 199
6.3.3 关键帧插值 201
6.3.4 图表编辑器 201
案例实操:家居美学APP界面切换动效 202
课后练习:“彩旗飞扬颂华章”音乐动效制作 218
模块7 文本动效
7.1 文本的创建与编辑 220
7.1.1 创建文本 220
7.1.2 编辑文本 221
7.2 文本动效的制作 224
7.2.1 文本图层属性 224
7.2.2 动画制作器 226
7.2.3 文本选择器 228
7.2.4 文本动画预设 230
案例实操:信息回复动效 232
课后练习:“知行学堂”APP引导页文本动效制作 246
模块8 蒙版与图形动效
8.1 蒙版的创建 248
8.1.1 认识蒙版 248
8.1.2 蒙版动效原理 248
8.1.3 创建常规形状蒙版 249
8.1.4 创建自由形状蒙版 253
8.1.5 从文本创建形状和蒙版 255
8.2 蒙版动效 256
8.2.1 蒙版路径动效 256
8.2.2 蒙版羽化动效 258
8.2.3 蒙版不透明度动效 260
8.2.4 蒙版扩展动效 261
8.3 蒙版混合模式 261
案例实操:登录界面动效 264
课后练习:国家博物馆APP启动页图形动效制作 277
参考文献 278