第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