After Effects CC移动网站UI交互动效设计全程揭秘

 

如今，在许多优秀的移动App应用界面中都能够看到丰富细腻的交互动效设计，通过在App应用界面中合理地加入交互动效，可以为用户提供良好的动态沉浸式体验，动效设计在产品研发过程中也越来越被认可和重视。
《After Effects CC移动网站UI交互动效设计全程揭秘》以After Effects CC为设计工具，对UI交互动效设计的流程和制作技巧进行了全面、细致的剖析。
《After Effects CC移动网站UI交互动效设计全程揭秘》内容简洁、通俗易懂，通过知识点与实例相结合的方式，让读者能够清晰明了地理解UI交互动效设计的相关内容，从而达到学以致用的目的。全书共分6章，分别为理解UI交互设计、初识UI交互动效、After Effects软件基础操作、在After Effects中制作动效并输出、制作UI元素交互动效和UI界面动效设计。
《After Effects CC移动网站UI交互动效设计全程揭秘》结构清晰、实例经典、技术实用，适合作为UI交互动效设计人员的参考手册，也可以作为高等院校相关专业的教材。

第1章 理解UI 交互设计
1.1 UI 设计 1
1.1.1 UI 设计概述 1
1.1.2 了解UI 设计师 2
1.1.3 UI 设计的特点 2
1.1.4 UI 设计的相关术语 4
1.2 交互设计与用户体验 5
1.2.1 交互设计概述 5
1.2.2 交互设计的基本步骤 5
1.2.3 用户体验概述 6
1.2.4 用户体验的5 个层面 6
1.2.5 用户体验的需求层次 9
1.2.6 交互设计与用户体验的关系 12
1.3 移动端用户体验的发展趋势 13
1.4 在UI 交互中加入动效设计 14
1.4.1 UI 动效的发展 14
1.4.2 动效在UI 交互设计中的作用 15
第2章 初识UI 交互动效
2.1 UI 交互动效 17
2.1.1 UI 交互动效概述 17
2.1.2 UI 交互动效的应用领域 18
2.2 交互动效与UI 设计 22
2.2.1 优秀交互动效的特点 22
2.2.2 交互动效的优势 23
2.2.3 动效的分类 25
2.3 交互动效在用户体验中的应用 26
2.3.1 在交互过程中添加动效需要考虑的因素 26
2.3.2 如何表现交互动效 26
2.4 如何设计动效 28
2.4.1 要有一个创意想法 28
2.4.2 根据想法付诸行动 30
2.5 制作UI 交互动效的工具 30
2.6 认识基础UI 交互动效 34
2.6.1 基础动效 34
2.6.2 属性变化 34
2.6.3 运动节奏 35
2.6.4 基础动效组合应用 36
第3章 After Effects 软件基础操作
3.1 认识After Effects 37
3.1.1 After Effects 概述 37
3.1.2 After Effects 的应用领域 37
3.2 After Effects 工作界面 41
第4章 在After Effects 中制作动效并输出
4.1 关键帧与图表编辑器 79
4.1.1 帧与关键帧 79
4.1.2 创建关键帧 80
4.1.3 关键帧的基本操作方法 80
实例06——制作趣味矩形拼图动效钮 82
4.1.4 图表编辑器的操作方法 89
实例07——制作弹跳变形动效 90
4.2 形状的应用 97
4.2.1 关于形状 97
4.2.2 创建路径群组 98
4.2.3 路径形状属性设置 99
实例08——制作简单的Loading动效 102
4.3 调整动画运动路径 106
4.3.1 将直线运动路径调整为曲线运动路径 106
4.3.2 运动自定向 108
实例09——制作魔法飞行动效 108
4.4 创建和使用蒙版图层 112
4.4.1 蒙版动画原理 113
4.4.2 形状工具 113
4.4.3 钢笔工具 114
4.4.4 创建蒙版 114
实例10——为素材图层创建蒙版 114
4.4.5 设置蒙版属性 116
实例11——制作蒙版属性动效 118
4.4.6 蒙版的叠加处理 121
实例12——制作扫描二维码动效 122
4.5 在After Eff ects 中渲染输出动画 127
4.5.1 认识渲染工作区 127
4.5.2 理解渲染设置选项 128
4.5.3 渲染输出 130
实例13——将动效渲染输出为视频文件 130
4.5.4 配合Photoshop 输出GIF 文件 132
实例14——将动效输出为GIF 动画图片 132
4.5.5 将动画嵌入手机模板 133
实例15——将动画效果嵌入手机模板中 133
第5章 制作UI 元素交互动效
5.1 按钮与图标动效设计 137
5.1.1 开关按钮 137
5.1.2 制作开关按钮动效 137
实例16——制作开关按钮动效 138
5.1.3 图标在UI 界面中的作用 143
5.1.4 图标动效的常见表现方法 144
5.1.5 制作图标变换动效 147
实例17——制作图标变换动效 147
5.1.6 制作日历图标动效 153
实例18——制作日历图标动效 153
5.1.7 制作相机图标动效 153
实例19——制作相机图标动效 153
5.2 进度条动效设计 159
5.2.1 常见的进度条表现形式 159
5.2.2 制作矩形进度条动效 161
实例20——制作矩形进度条动效 161
5.2.3 制作圆形进度条动效 165
实例21——制作圆形进度条动效 165
5.3 工具栏动效设计 165
5.3.1 关于工具栏动效设计 165
5.3.2 制作展开工具栏动效 166
实例22——制作展开工具栏动效 166
5.3.3 制作工具图标动感展开动效 175
实例23——制作工具图标动感展开动效 176
5.4 文字动效设计 176
5.4.1 文字动效的表现优势 176
5.4.2 常见的文字动效表现方法 177
5.4.3 制作手写文字动效 180
实例24——制作手写文字动效 180
5.4.4 制作闪光描边文字动效 185
实例25——制作闪光描边文字动效 185
5.5 Logo 动效设计 185
5.5.1 动态Logo 概述 185
5.5.2 动态Logo 表现的优势 187
5.5.3 Logo 动效需要注意的问题 189
5.5.4 制作动感模糊Logo 动效 189
实例26——制作动感模糊Logo动效 189
5.5.5 制作动感切片Logo 动效 189
实例27——制作动感切片Logo动效 189
第6章 UI 界面动效设计
6.1 动效设计的作用与常见效果 195
6.1.1 动效设计的作用 195
6.1.2 常见的UI 界面交互动效 199
6.1.3 制作手机充电动效 203
实例28——制作手机充电动效 203
6.1.4 制作手机垃圾清理完成动效 208
实例29——制作手机垃圾清理完成动效 208
6.2 界面加载等待动效设计 208
6.2.1 了解加载等待动效 208
6.2.2 加载动效的常见表现形式 209
6.2.3 制作简单的圆环加载动效 211
实例30——制作简单的圆环加载动效 211
6.2.4 制作界面下拉刷新加载动效 215
实例31——制作界面下拉刷新加载动效 215
6.3 引导界面动效设计 215
6.3.1 什么是引导界面 215
6.3.2 引导界面的设计要素 216
6.3.3 制作引导界面切换动效 217
实例32——制作引导界面切换动效 218
6.4 导航菜单动效设计 223
6.4.1 交互式动态导航菜单的优势 223
6.4.2 导航菜单的设计要点 224
6.4.3 制作侧边滑入导航菜单动效 225
实例33——制作侧边滑入导航菜单动效 225
6.5 界面切换动效设计 232
6.5.1 4 种常见的界面切换转场动效 232
6.5.2 界面切换动效的设计规则 235
6.5.3 制作登录转场动效 238
实例34——制作登录转场动效 238
6.5.4 制作App 解锁转场动效 239
实例35——制作App 解锁转场动效 239
6.6 UI 界面交互动效设计规范 245
6.6.1 界面动效设计要点 245
6.6.2 通过动效设计提升UI 界面用户体验 248
6.6.3 制作天气界面动效 251
实例36——制作天气界面动效 251
6.6.4 制作界面列表入场动效 257
实例37——制作界面列表入场动效 257
6.7 如何设计出优秀的UI 交互动效 257
6.7.1 明确系统状态 257
6.7.2 让按钮和操控拥有触感 258
6.7.3 有意义的转场动效 258
6.7.4 帮助用户开始 259
6.7.5 强调界面的变化 260
6.7.6 需要注意的细节 260
6.7.7 制作App 界面菜单滑动动效 260
实例38——制作App 界面菜单滑动动效 260