AfterEffects移动UI交互动效设计与制作（全彩慕课版）（第2版） 教案全套

《AfterEffects移动UI交互动效设计与制作》配套教学教案课时内容UI动效设计基础授课时间180分钟课时4教学目标了解什么是UI动效设计了解UI动效的发展和在UI中的作用理解提升产品转化率的方式了解动效设计的方法理解UI动效设计的要点与作用理解UI动效的类型认识并理解基础变化类型教学重点UI动效设计的要点与作用基础变化类型教学难点理解基础变化类型教学设计教学思路：通过对静态UI设计与UI动效设计的介绍，了解两者的核心差异及动效在UI设计中的价值，从而引入UI动效设计的概念、作用、类型与基础制作方法等核心知识。教学手段：通过理论知识讲解与移动端App动效案例分析相结合，拆解UI动效设计的要点、类型及基础变化规律。教学资料及要求：根据本章内容整理UI动效图片案例、移动端交互动效案例、动效设计软件操作示例，案例需覆盖转场过渡、操作反馈、层级展示等主流动效类型。教学内容讨论问题：1、UI动效设计的核心目的是什么？2、不同动效类型在手机App中的典型应用场景？内容大纲：具体可结合本项目的PPT课件进行配合讲解。1.1了解UI动效1.1.1什么是UI动效1.1.2UI动效的发展1.1.3动效在UI中的作用1.2UI交互设计1.2.1用户青睐的交互设计模式1.2.2提升产品转化率1.3UI动效设计的要点与作用1.3.1增强用户体验1.3.2提升产品气质1.3.3体现设计师优势1.4如何设计动效1.4.1首先需要有一个想法1.4.2实现想法1.5动效的类型有哪些1.5.1转场过渡1.5.2层级展示1.5.3空间扩展1.5.4聚焦重点1.5.5内容呈现1.5.6操作反馈1.6基础变化类型1.6.1移动、旋转和缩放1.6.2属性变化1.6.3变化节奏1.6.4基础变化的组合应用1.7模块小结1.8素养拓展1.9课后测试小结了解什么是UI动效设计了解UI动效的发展和在UI中的作用理解提升产品转化率的方式了解动效设计的方法理解UI动效设计的要点与作用理解UI动效的类型认识并理解基础变化类型作业根据从本模块所学习的知识，打开自己手机中的各种App，仔细观察在这些App中哪些地方使用了动效，表现形式是什么样的。App中应用的动效列举App中哪些地方使用了动效。表现形式简单描述App中动效的表现形式，以及动效中使用了哪些基础变化。

课时内容授课时间180分钟课时4教学目标了解AfterEffects并认识AfterEffects工作界面认识AfterEffects的常用工具和面板认识“时间轴”面板各组成部分了解AfterEffects中不同类型的图层掌握导入不同类型素材的方法能够在AfterEffects中对素材进行管理操作能够制作图片切换动效教学重点认识AfterEffects工作界面认识“时间轴”面板各组成部分教学难点制作图片切换动效教学设计教学思路：（1）通过理论知识讲解与软件实操演示相结合，系统学习AfterEffects基础操作、界面组成与图层知识；（2）通过素材导入、图片切换动效等基础案例制作，掌握AE核心操作流程与图层应用方法。教学手段：（1）通过知识点讲解使读者理解AE工作界面、素材管理、时间轴面板及图层类型的相关知识；（2）通过课堂案例实操掌握素材导入、分层文件处理、简单动效制作的基础操作；（3）通过课后习题与实操练习提升学生AE软件的实际应用与动效制作能力。教学资料及要求：收集AE工作界面、素材导入、时间轴操作、各类图层应用的操作截图与基础UI动效案例，帮助学员理解知识点，强化软件实操能力。教学内容讨论问题：1、AfterEffects中的“合成”窗口与“时间轴”面板在UI动效制作中分别起到什么作用？2、导入PSD分层素材时，“合成”和“合成-保持图层大小”两种导入方式在实际制作中该如何选用？内容大纲：具体可结合本项目的PPT课件进行配合讲解。2.1AfterEffects概述2.2AfterEffects工作界面2.2.1认识AfterEffects工作界面2.2.2工具栏2.2.3“项目”面板2.2.4“合成”窗口2.2.5“时间轴”面板2.2.6其他面板2.3AfterEffects的基本操作2.3.1创建项目文件2.3.2在项目文件中创建合成文件2.3.3保存和关闭项目文件2.3.4AfterEffects中的基本工作流程2.4素材的导入与管理操作2.4.1导入素材的基本方法2.4.2导入PSD格式素材任务1：通过导入PSD格式文件创建合成2.4.3导入AI格式素材任务2：通过导入AI格式文件创建合成2.4.4素材的管理操作2.4.5嵌套合成文件2.5认识“时间轴”面板2.5.1“音频/视频”选项2.5.2“图层基础”选项2.5.3“图层开关”选项2.5.4“转换控制”选项2.5.5“父级和链接”选项2.5.6“时间控制”选项2.6AfterEffects中的图层2.6.1认识不同类型的图层2.6.2图层的混合模式任务3：快速制作图片切换动效2.7模块小结2.8素养拓展2.9课后测试小结1、了解AfterEffects并认识AfterEffects工作界面2、认识AfterEffects的常用工具和面板3、认识“时间轴”面板各组成部分4、了解AfterEffects中不同类型的图层5、掌握导入不同类型素材的方法6、能够在AfterEffects中对素材进行管理操作7、能够制作图片切换动效作业根据从本模块所学习和了解到的知识，在AfterEffects中导入PSD格式的分层文件，具体要求和规范如下。内容/题材/形式PSD格式的素材文件，文件中需要包含多个图层。设计要求在AfterEffects中导入PSD格式的素材文件，对相关的导入选项进行设置，将PSD格式的素材文件导入为合成文件。课时内容基础关键帧动效制作授课时间360分钟课时8教学目标了解关键帧动画的原理掌握关键帧的创建方法和操作技巧掌握关键帧的编辑操作方法和技巧理解5个基础“变换”属性的作用掌握运动路径的调整和运动自定向能够制作背景图片滑动切换动效能够制作火箭飞行加载动效能够制作飞机飞行动效能够制作圆球弹跳变形动效教学重点关键帧的创建方法和操作技巧关键帧的编辑操作方法和技巧基础“变换”属性教学难点理解5个基础“变换”属性的作用教学设计教学思路：（1）通过案例分析与理论知识讲解相结合，拆解关键帧原理、图层变换属性、运动路径及图表编辑器核心知识；（2）通过案例的制作练习掌握背景滑动、加载、飞行、弹跳等不同UI关键帧动效的制作。教学手段：（1）通过知识点讲解使读者理解关键帧动画、编辑操作、基础变换属性、运动路径与图表编辑器的相关知识；（2）通过课堂案例的制作掌握滑动切换、火箭加载、飞机飞行、圆球弹跳等关键帧动效设计；（3）通过课后习题提高学生基础关键帧动效的独立制作与创新应用能力。教学资料及要求：收集关键帧操作、图层变换、运动路径、图表编辑器及各类UI关键帧动效案例图片，来加深学员对知识点的理解，拓展动效制作实际应用能力。教学内容讨论问题：1、说一说5个基础变换属性在UI关键帧动效中分别能实现哪些常用效果？2、制作UI动效时，为什么要通过图表编辑器调整关键帧的缓动与速度曲线？内容大纲：具体可结合本项目的PPT课件进行配合讲解。3.1了解关键帧3.1.1理解关键帧与关键帧动画3.1.2关键帧的创建方法3.2关键帧的编辑操作3.2.1选择关键帧3.2.2移动关键帧3.2.3复制关键帧3.2.4删除关键帧任务1：制作背景图片滑动切换动效3.3基础“变换”属性3.3.1“锚点”属性3.3.2“位置”属性3.3.3“缩放”属性3.3.4“旋转”属性3.3.5“不透明度”属性任务2：制作火箭飞行加载动效3.4运动路径3.4.1将直线运动路径调整为曲线运动路径3.4.2运动自定向任务3：制作飞机飞行动效3.5图表编辑器3.5.1认识图表编辑器3.5.2设置对象的缓动效果任务4：制作圆球弹跳变形动效3.6模块小结3.7素养拓展3.8课后测试小结了解关键帧动画的原理掌握关键帧的创建方法和操作技巧掌握关键帧的编辑操作方法和技巧理解5个基础“变换”属性的作用掌握运动路径的调整和运动自定向能够制作背景图片滑动切换动效能够制作火箭飞行加载动效能够制作飞机飞行动效能够制作圆球弹跳变形动效作业根据从本模块所学习和了解到的知识，设计制作一个图片淡入淡出切换动效，具体要求和规范如下。内容/题材/形式App界面背景图片的淡入淡出切换动效。设计要求为背景图片素材添加“不透明度”属性关键帧，制作关键帧动画来实现图片淡入淡出动效。注意控制动效的时间，并且动效要求流畅。

课时内容蒙版动效制作与输出授课时间360分钟课时8教学目标掌握形状路径的创建和属性设置方法理解蒙版动效原理与蒙版属性设置了解轨道遮罩理解AfterEffects中的渲染输出选项能够制作圆环Loading动效掌握使用形状工具和钢笔工具创建蒙版的方法能够制作二维码扫描动效能够制作遮罩标题文字动效能够将动效输出为视频和图片教学重点蒙版动效原理与蒙版属性设置轨道遮罩将动效输出为视频和图片教学难点轨道遮罩教学设计教学思路：（1）通过案例分析与理论知识讲解相结合，拆解形状路径、蒙版动效、轨道遮罩及渲染输出的核心知识；（2）通过案例的制作练习掌握圆环Loading、二维码扫描、遮罩标题等蒙版动效制作与动效输出的方法。教学手段：（1）通过知识点讲解使读者理解形状路径、蒙版创建与属性、轨道遮罩、渲染输出的相关知识；（2）通过课堂案例的制作掌握圆环Loading、二维码扫描、遮罩标题动效制作及视频与GIF格式输出；（3）通过课后习题提高学生蒙版动效制作与动效输出的实际应用能力。教学资料及要求：收集形状路径、蒙版动效、轨道遮罩、UI蒙版动效（加载、扫描、文字遮罩）及动效输出的案例图片，来加深学员对知识点的理解，拓展实际应用能力。教学内容讨论问题：1、说一说蒙版属性与轨道遮罩在UI蒙版动效制作中分别能实现哪些效果？2、结合本章内容说说完整的导出流程是怎样的？内容大纲：具体可结合本项目的PPT课件进行配合讲解。4.1形状的应用4.1.1形状路径4.1.2创建路径群组4.1.3设置形状路径属性任务1：制作圆环Loading动效4.2创建蒙版动效4.2.1蒙版动效原理4.2.2形状工具4.2.3钢笔工具4.2.4创建蒙版4.2.5设置蒙版属性4.2.6蒙版的叠加处理任务2：制作二维码扫描动效4.2.7轨道遮罩任务3：制遮罩标题文字动效4.3在AfterEffects中渲染输出动效4.3.1认识渲染工作区4.3.2理解渲染输出选项4.3.3渲染输出任务4：将动效输出为视频和图片4.4模块小结4.5素养拓展4.6课后测试小结1、掌握形状路径的创建和属性设置方法2、理解蒙版动效原理与蒙版属性设置3、了解轨道遮罩4、理解AfterEffects中的渲染输出选项5、能够制作圆环Loading动效6、掌握使用形状工具和钢笔工具创建蒙版的方法7、能够制作二维码扫描动效8、能够制作遮罩标题文字动效9、能够将动效输出为视频和图片作业根据从本模块所学习和了解到的知识，设计制作一个指纹扫描动效，具体要求和规范如下。内容/题材/形式根据本模块所制作的二维码扫描动效制作一个指纹扫描动效。设计要求通过蒙版与基础动画属性相结合，完成指纹扫描动效的制作。课时内容UI元素动效授课时间360分钟课时8教学目标了解图标在UI中的作用以及图标动效的常见表现方法能够制作简约线框图标变换动效与美食图标动效了解常见的加载进度条表现形式能够制作矩形进度条动效了解开关按钮的功能特点能够制作开关按钮动效理解文字动效的优势以及文字动效的常见表现形式能够制作手写文字动效理解Logo动效的表现优势以及需要注意的问题能够制作动感切片Logo动效了解工具栏动效能够制作液态标签栏图标动效教学重点制作简约线框图标变换动效与美食图标动效制作开关按钮动效制作手写文字动效制作动感切片Logo动效制作液态标签栏图标动效教学难点制作液态标签栏图标动效教学设计教学思路：（1）通过案例分析与理论知识讲解相结合，系统讲解图标、加载进度条、开关按钮、文字、Logo、工具栏等UI元素动效的原理、表现方法与设计要点；（2）通过简约线框图标、矩形进度条、手写文字、动感切片Logo、液态标签栏等案例的制作练习，掌握不同UI元素动效的设计与AE制作方法。教学手段：（1）通过知识点讲解使读者理解图标动效六大方法、加载进度条形式、文字动效优势、Logo动效规范等UI元素动效的相关知识；（2）通过课堂案例的制作掌握图标、进度条、开关、文字、Logo、工具栏等不同UI元素动效的AE实操设计；（3）通过课后习题与创新创作提高学生UI元素动效的独立制作与创新应用能力。教学资料及要求：收集图标、加载进度条、开关按钮、文字、Logo、工具栏等不同UI元素的交互动效图片与AE制作案例，来加深学员对知识点的理解，拓展UI元素动效设计的实际应用能力。教学内容讨论问题：1、说说图标动效的六种常见表现方法分别适用于哪些UI交互场景？2、制作UI文字动效和Logo动效时，如何平衡视觉效果与品牌信息的清晰传递？内容大纲：具体可结合本项目的PPT课件进行配合讲解。5.1图标动效5.1.1图标在UI中的作用5.1.2图标动效的常见表现方法5.1.3制作简约线框图标变换动效任务1：制作简约线框图标变换动效5.1.4制作美食图标动效任务2：制作美食图标变换动效5.2加载进度条与开关按钮动效5.2.1常见的加载进度条表现形式5.2.2制作矩形进度条动效任务3：制作矩形进度条动效5.2.3开关按钮的功能特点5.2.4制作开关按钮动效任务4：制作开关按钮动效5.3文字动效5.3.1文字动效的优势5.3.2文字动效的常见表现形式5.3.3制作手写文字动效任务5：制作手写文字动效5.4Logo动效5.4.1Logo动效概述5.4.2Logo动效的优势5.4.3设计Logo动效时需要注意的问题 5.4.4制作动感切片Logo动效任务6：制作动感切片Logo动效5.5工具栏动效5.5.1工具栏动效设计5.5.2制作液态标签栏图标动效任务7：制作液态标签栏图标动效5.6模块小结5.7素养拓展5.8课后测试小结1、标在UI中的作用以及图标动效的常见表现方法2、能够制作简约线框图标变换动效与美食图标动效3、了解常见的加载进度条表现形式4、能够制作矩形进度条动效5、了解开关按钮的功能特点6、能够制作开关按钮动效7、理解文字动效的优势以及文字动效的常见表现形式8、能够制作手写文字动效9、理解Logo动效的表现优势以及需要注意的问题10、能够制作动感切片Logo动效11、了解工具栏动效12、能够制作液态标签栏图标动效作业根据从本模块所学习和了解到的知识，设计制作一个相机图标动效，具体要求和规范如下。内容/题材/形式天气图标动效。设计要求在Photoshop中设计一系列相同风格的天气图标并保存为分层文件，再导入AfterEffects，通过各种基础属性动效的组合，制作出天气图标动效，动效需要流畅、自然。课时内容界面转场与菜单动效授课时间270分钟课时6教学目标理解界面切换转场动效的规则能够制作登录转场动效了解常见的界面切换转场动效能够制作图片翻页切换动效了解交互导航菜单的优势理解导航菜单的设计要点能够制作侧滑导航菜单动效教学重点制作登录转场动效制作图片翻页切换动效制作侧滑导航菜单动效教学难点制作登录转场动效教学设计教学思路：（1）通过案例分析与理论知识讲解相结合，系统讲解界面转场动效核心规则、常见类型、导航菜单优势与设计要点；（2）通过登录转场、图片翻页切换、侧滑导航菜单等案例的制作练习，掌握界面转场与菜单动效的设计及AE制作方法。教学手段：（1）通过知识点讲解使读者理解界面转场动效规则、常见转场类型、导航菜单设计规范的相关知识；（2）通过课堂案例的制作掌握登录转场、图片翻页、侧滑导航菜单等界面转场与菜单动效设计；（3）通过课后习题提高学生界面转场与菜单动效的实际应用能力。教学资料及要求：收集界面转场动效、导航菜单动效的交互动效图片与AE实操案例，来加深学员对知识点的理解，拓展实际应用能力。教学内容讨论问题：1、说说如何在移动端UI中设计出自然流畅、层次分明的界面转场动效？2、制作侧滑导航菜单动效时，怎样平衡交互实用性与视觉流畅度并符合用户操作习惯？内容大纲：具体可结合本项目的PPT课件进行配合讲解。6.1界面切换转场动效的核心规则6.1.1转场动效自然流畅6.1.2动效层次分明6.1.3关联是过渡动效的重要功能6.1.4界面切换过渡要快速6.1.5动效要清晰6.1.6制作登录转场动效任务1：制作登录转场动效6.2常见的界面切换转场动效6.2.1弹出6.2.2侧滑6.2.3渐变放大6.2.4其他6.2.5制作图片翻页切换动效任务2：制作图片翻页切换动效6.3导航菜单切换动效6.3.1交互式动态导航菜单的优势6.3.2导航菜单动效的设计要点6.3.3制作侧滑导航菜单动效任务3：制作侧滑导航菜单动效6.4模块小结6.5素养拓展6.6课后测试小结1、界面切换转场动效的规则2、能够制作登录转场动效3、了解常见的界面切换转场动效4、能够制作图片翻页切换动效5、了解交互导航菜单的优势6、理解导航菜单的设计要点7、能够制作侧滑导航菜单动效作业根据从本模块所学习和了解到的知识，设计制作一个侧滑导航菜单动效，具体要求和规范如下。●内容/题材/形式UI侧滑导航菜单动效。●设计要求仔细观察移动App中常见的侧滑导航菜单动效的表现方式，制作出侧滑导航菜单动效，动效需要流畅、自然。课时内容综合案例授课时间360分钟课时8教学目标理解移动UI动效设计的相关知识理解并掌握AfterEffects软件的操作方法