第1章　UI 交互动画设计基础　1
1.1　移动UI 设计基础知识　1
1.1.1　UI 设计的含义　1
1.1.2　UI 设计的相关术语　2
1.1.3　移动UI 设计的特点　2
1.2　交互设计　4
1.2.1　交互设计的含义　4
1.2.2　交互设计需要考虑的内容　4
1.2.3　交互设计需要遵循的习惯　5
1.2.4　交互设计的基本步骤　5
1.3　交互设计与用户体验　6
1.3.1　什么是用户体验　6
1.3.2　6 种基础体验　6
1.3.3　交互设计的重要性　8
1.4　动态交互设计基础　9
1.4.1　动态交互效果　9
1.4.2　优秀的动态交互效果　10
1.4.3　基础动态交互效果的类型　10
1.4.4　缓动　11
1.4.5　属性变换　11
1.4.6　组合的动态交互效果　12
1.5　UI 中的动态交互效果　12
1.5.1　动态交互效果的表现优势　12
1.5.2　动态交互效果在UI 设计中的作用　14
1.5.3　如何实现简单的动态交互效果　16
1.6　动态交互效果在用户体验中的应用　16
1.6.1　为什么要添加动态交互效果　17
1.6.2　哪些地方适合添加动态交互效果　18
1.6.3　如何表现动态交互效果　20
1.7　本章小结　22
第2章　After Effects CC 软件基础　23
2.1　After Effects 基础知识　23
2.1.1　After Effects 简介　23
2.1.2　After Effects 的应用领域　23
2.2　After Effects 工作界面　26
2.2.1　After Effects 工作界面简介　26
2.2.2　切换工作界面　27
2.2.3　工具栏　27
2.2.4　After Effects 中的工具面板　28
2.3　After Effects 基本操作　31
2.3.1　创建项目文件　31
2.3.2　保存和关闭文件　32
2.3.3　导入素材　32
实战：通过导入PSD 文件创建●
合成　34
2.3.4　管理、操作素材　35
2.3.5　After Effects 基本工作流程　37
2.4　After Effects 图层　37
2.4.1　图层的类型　37
实战：实现图片的过渡切换动画
效果　40
2.4.2　图层的基本属性设置　42
实战：制作移动界面背景轮换动画
效果　45
2.4.3　图层的混合模式　49
2.5　“时间轴”面板　49
2.5.1　“音频/ 视频”选项　50
2.5.2　“图层”选项　50
2.5.3　“图层开关”选项　50
2.5.4　“转换控制”选项　51
2.5.5　“父子链接”选项　51
2.5.6　“时间控制”选项　51
2.6　关键帧与图表编辑器　52
2.6.1　关键帧简介　52
2.6.2　关键帧的基本操作　52
实战：制作三角形交错循环●
动画　54
2.6.3　图表编辑器　58
实战：制作小球弹跳变换动画　59
2.7　图层蒙版与形状路径　65
2.7.1　蒙版原理　65
2.7.2　创建蒙版　65
实战：创建基础的矩形蒙版　66
2.7.3　修改与设置蒙版　67
实战：制作指纹扫描动画效果　71
2.8　渲染输出　75
2.8.1　渲染工作区　76
2.8.2　渲染设置　76
2.8.3　渲染输出　78
实战：将动画输出为MOV 格式●
视频文件　78
2.8.4　配合Photoshop 输出GIF 文件　79
实战：使用Photoshop 输出GIF●
动画　79
2.8.5　将动画嵌入手机模板　81
实战：将动画效果嵌入手机●
模板中　81
2.9　本章小结　84
第3章　UI 元素交互动画设计　85
3.1　动态Logo 设计　85
3.1.1　动态Logo 的含义　85
3.1.2　动态Logo 的适用范围　86
3.1.3　动态Logo 的表现优势　87
3.1.4　设计动态Logo 需要注意的问题　89
实战：制作动感模糊Logo 效果　89
3.2　动态图标设计　93
3.2.1　图标的含义　93
3.2.2　图标设计的作用　94
实战：制作日历图标翻转动画　95
3.2.3　动态图标的表现方法　99
实战：制作图标变形切换动画　102
3.3　动态按钮设计　110
3.3.1　按钮设计注意事项　110
实战：制作提交按钮动画　110
3.3.2　开关按钮设计方法　115
实战：制作开关按钮动画　116
3.4　进度条与工具栏动画设计　119
3.4.1　常见的进度条动画表现形式　119
实战：制作加载进度条动画　120
3.4.2　工具栏动画设计　124
实战：制作旋转展开工具栏动画　125
3.5　文字动画设计　129
3.5.1　文字动画效果的表现优势　130
实战：制作手写文字动画　130
3.5.2　文字动画的常见表现方法　135
实战：制作动感遮罩文字动画　138
3.6　本章小结　143
第4章　移动UI 转场交互动画设计　144
4.1　如何设计出优秀的UI 动态交互效果　144
4.1.1　明确系统状态　144
4.1.2　让按钮和操控拥有触感　145
4.1.3　有意义的转场动画　145
4.1.4　帮助用户开始　146
4.1.5　强调界面的变化　146
4.1.6　需要注意的细节　146
实战：制作界面列表显示动画　147
4.2　导航菜单切换动画　150
4.2.1　导航菜单的重要性　150
4.2.2　导航菜单的设计要点　151
4.2.3　侧边式导航的优势　152
实战：制作侧边滑入菜单●
动画　153
4.3　4 种主流的转场动画效果　156
4.3.1　弹出　156
4.3.2　侧滑　158
4.3.3　渐变放大　158
4.3.4　其他　159
实战：制作图片翻页切换●
动画　160
4.4　转场动画设计规范　166
4.4.1　转场要自然　166
4.4.2　层次要分明　167
4.4.3　转场要相互关联　167
4.4.4　转场要快速过渡　167
4.4.5　动画效果要清晰　168
实战：制作滑动删除动画　169
4.5　本章小结　176
第5章　移动UI 界面交互动画设计　177
5.1　引导界面动画设计　177
5.1.1　引导界面简介　177
5.1.2　引导界面的3 个基本功能　178
5.1.3　引导界面的设计要素　178
实战：制作引导界面动画　180
5.2　加载界面动画设计　185
5.2.1　加载动画简介　185
5.2.2　加载动画的常见表现形式　186
实战：制作火箭加载动画　188
5.3　UI 界面交互动画设计规范　193
5.3.1　UI 界面动画设计要求　193
5.3.2　使用动画提升UI 界面用户体验　195
实战：制作下雪天气界面动画　198
5.4　动画设计的作用与常见效果　203
5.4.1　动画设计的作用　203
5.4.2　常见的UI 界面交互动画效果　206
实战：制作音乐App 界面交互●
动画　210
5.5　本章小结　220