当前位置：平面设计学院 > UI动效设计实战教程
《UI动效设计实战教程》适合对UI动效感兴趣的学员，以及未来想要从事UI设计的学员。
近些年来UI动效是设计行业中特别火的一个分支，那到底什么是UI动效？UI动效到底能做什么呢？其实UI动效设计可以简单的理解为，把静态的界面，按一定的规则、逻辑通过相关软件动态的展示出来，让其他接口人员更直观理解UI设计师的成果和理念。
本套课程前期通过小动效让学员初步了解AE，并能灵活运用AE中各种图层及各类图层属性，通过AE实现简单的UI动效；中期会通过稍复杂的案例，让学员能灵活运用AE各类工具，了解相关插件效果；课程后期会结合一些创意高级案例，让学员学会各类动效中的常见效果制作，及如何使用插件和表达式制作有趣的UI动效。
本套课程内容丰富，讲解细致，适合各阶段学员，希望大家能通过本套的学习开启自己的UI动效设计之门，学到更多的知识。
《滚动的石头》
本小节主要介绍AE常用工具与基本操作，重点讲解形状图层的使用及其属性动画使用，通过该案例的学习与操作，了解如何使用形状工具与纯色图层的结合使用，并使用形状工具及形状图层绘制复杂形状。
《爱心》
本节课主要详细介绍时间轴的使用，了解如何使用形状工具与纯色图层的结合使用，并使用形状工具及形状图层绘制复杂形状。通过该案例的学习，掌握蒙板的基本知识以及如何通过纯色图层与形状工具结合使用。
《小开关》
该案例主要讲解合成窗口中各个功能的介绍，重点介绍轨道遮罩的使用，教会大家使用常用的AE效果模拟融合效果，并巧妙利用轨道遮罩设置颜色。
《融合的小球》
本节课主要通过一个案例的演示，重点介绍AE预合成的使用。同时掌握形状图层添加动画中的中继器的使用，及使用简单遮罩效果，了解锚点对于图层的意义及如何快速控制锚点。
《流畅的菜单栏》
该案例主要介绍时间轴和调节图层的各个功能，通过该案例的学习，了解曲线编辑器，熟练使用调节图层控制动效元素的属性。
《小鼠标》
该案例主要介绍时间轴和调节图层的各个功能，通过该案例的学习，了解曲线编辑器，熟练使用调节图层控制动效元素的属性。
《小喇叭》
本节课主要讲解图层运动模糊以及运动模糊的参数调整，了解旋转动画与路径动画K帧的使用，通过K帧实现变形动画。
《神奇的按钮》
本案例主要详细介绍AE形状图层的使用，重点分析形状工具的使用与动效的实现。通过各种小动效的制作及后期汇总设计来加深学员对动效的理解及制作思路的培养。
《多变的搜索》
本节课主要介绍文字打字机效果的使用，以及输入光标的制作和简单表达式的使用。通过本案例让学员掌握路径演变动画基础。
《邮件通知》
本节课主要通过路径动画及多元素图标演变，让学员接触简单的图标动效设计。
《炫酷的加载登录》
本节课主要介绍路径动画形状变化，讲解抖动表达式以及光标和文字加载动画的具体操作。通过登录界面的演变，让学员接触高级、有创造力的动效设计、制作，提高学员的创造力。
《趣味小跑车》
本节课主要介绍AI与AE软件的结合使用，以及如何把AI文件导入到AE中并分层，利用AE软件功能实现动效的各种循环动画。通过本节课的学习，可以让大家提高设计、制作效率，并掌握初级部分表达式。
《登录界面》
该案例主要介绍使用拍摄风景图，并结合AE绘制元素制作登录页面，本案例重点介绍手机样机的处理，以及动效素材的制作和页面动效的具体制作，并简单介绍图层三维功能和运动模糊相关参数设置。
《APP菜单栏演示动效》
本节课主要介绍PSD文件导入AE的知识讲解，以及手机APP菜单栏图标绘制具体操作,包括图层三维功能与图层父子级的关联，以及图层排序切换动画设计。通过图层三维功能的制作，实现界面及菜单栏的切换。
《选择功能演示动效》
本案例主要介绍各类素材的分类排序，以及预合成中素材的替换及关键帧的拷贝，包括抖动的效果调整及添加等。通过画面切换及补充抖动效果制作，让学员接触并掌握抖动效果的制作及如何快速的使用预合成功能。
《电影APP操作演示》
本案例主要介绍APP菜单栏触发动画与收缩动画、以及翻转页面效果的制作，通过页面翻转切换效果，让学员更深刻的理解AE中的三维图层的概念及使用。
《音乐播放器演示》
本案例主要介绍图片元素的整理与排版，为音乐缩略图添加唯一动画，并设置统一父级对象，着重介绍空对象功能的使用。通过演示该动效的具体操作，重点介绍“time”表达式的使用，以及触发音乐动画界面和音乐界面动效的制作。通过在位移动画设置时间差表达式，让音乐缩略图加载依次排列出现，让学员掌握“time”表达式在AE中的应用。
《拨动加载》
通过该案例的讲解，重点介绍缓动表达式、弹性表达式与图层的关联使用，以及AE摄像机图层的使用及界面展示效果制作。利用外部表达式程序，模拟弹性效果，让学员掌握并理解外表表达式的使用，并能熟练应用到各类动效设计、制作中。
《奶茶与信息提醒》
本案例主要讲解运用AI绘制动效中的各元素，以及如何保存AI中的各元素和分层处理。详细分析制作奶茶及珍珠逐渐减少动效的思路，并使用AE中的偏移效果模拟数字变化的效果，结合轨道遮罩制作信息框的数字变动。
《屏幕解锁功能演示》
本案例主要教大家完成播放器界面绘制和动效制作，以及播放条与音乐缩略图时间、旋转的关联制作。通过实操UI演示动效，结合基础所学知识制作一个完整APP演示动画。
|
第一章 初识软件
|
|
本节课主要讲解AE常用工具的介绍与基本操作，并重点讲解形状图层的使用及其属性动画使用。 |
|
本节课主要详细介绍时间轴的使用，了解如何使用形状工具与纯色图层的结合使用，并使用形状工具及形状图层绘制复杂形状。 |
|
本节课主要演示“爱心”变换动效的具体制作，通过该案例的学习，掌握蒙板的基本知识以及如何通过纯色图层与形状工具结合使用。 |
|
本节课主要讲解合成窗口中各个功能的介绍，重点介绍轨道遮罩的使用，教会大家使用常用的AE效果模拟融合效果，并巧妙利用轨道遮罩设置颜色。 |
|
本节课主要通过一个案例的演示，重点介绍AE预合成的使用。 |
|
本节课主要介绍时间轴和调节图层的各个功能，通过本节课的学习，了解曲线编辑器，熟练使用调节图层控制动效元素的属性。 |
|
第二章 牛刀小试
|
|
本节课继续形状图层功能的深入讲解，通过本节课的学习，了解修剪路径的操作，学会通过合理的设置实现循环动画。 |
|
本节课主要讲解图层运动模糊以及运动模糊的参数调整，了解旋转动画与路径动画K帧的使用，通过K帧实现变形动画。 |
|
本节课主要详细介绍AE形状图层的使用，重点分析形状工具的使用与动效的实现。 |
|
本节课主要介绍文字打字机效果的使用，以及输入光标的制作及简单表达式的使用。通过本案例让学员掌握路径演变动画基础。 |
|
本节课主要通过路径动画及多元素图标演变，让学员接触简单的图标动效设计。 |
|
第三章 进阶之旅
|
|
本节课主要介绍路径动画形状变化，讲解抖动表达式以及光标和文字加载动画的具体操作。通过登录界面的演变，让学员接触高级、有创造力的动效设计、制作，提高学员的创造力。 |
|
本节课主要介绍图标滑动交换动画的制作，以及轨道遮罩结合抖动表达式的应用。 |
|
本节课主要介绍AI与AE软件的结合使用，通过本节课的学习，可以让大家提高设计、制作效率，并掌握初级部分表达式。 |
|
通过AI软件初步讲解，本节课教大家如何把AI文件导入到AE中并分层，利用AE软件功能实现动效的各种循环动画。 |
|
该案例主要讲解使用拍摄风景图，并结合AE绘制元素制作登录页面。本节课重点介绍手机样机的处理，以及动效素材的制作和导入。 |
|
本节课主要演示登录页面动效的具体制作，简单介绍图层三维功能，以及如何设置运动模糊相关参数。 |
|
本节课主要介绍PSD文件导入AE的知识讲解，以及手机APP菜单栏图标绘制具体操作。 |
|
本节课主要讲解图层三维功能与图层父子级的关联，以及图层排序切换动画设计。通过图层三维功能的制作，实现界面及菜单栏的切换。 |
|
本节课主要演示界面底部及上部图标的绘制，讲解使用的各类素材分类排序，以及预合成中素材的替换及关键帧的拷贝。 |
|
本节课完成该案例的动效实现，主要讲解抖动的效果调整及添加，通过画面切换及补充抖动效果制作，让学员接触并掌握抖动效果的制作及如何快速的使用预合成功能。 |
|
第四章 大神之路
|
|
本节课主要演示该案例各页面的编辑与排版，以及左侧菜单栏的绘制。 |
|
本节课主要完成左侧菜单栏触发动画与收缩动画、以及翻转页面效果的制作，通过页面翻转切换效果，让学员更深刻的理解AE中的三维图层的概念及使用。 |
|
本节课主要介绍图片元素的整理与排版，为音乐缩略图添加唯一动画，并设置统一父级对象，重点讲解空对象功能的使用。 |
|
本节课主要演示该动效的具体操作与实现，重点介绍“time”表达式的使用，以及触发音乐动画界面和音乐界面动效的制作。通过在位移动画设置时间差表达式，让音乐缩略图加载依次排列出现。让学员掌握“time”表达式在AE中的应用。 |
|
本节课主要介绍该案例用户作品界面图标和元素的排版与制作。 |
|
本节课主要完成该案例的动效实现，重点介绍缓动表达式、弹性表达式与图层的关联使用，以及AE摄像机图层的使用及界面展示效果制作。利用外部表达式程序，模拟弹性效果，让学员掌握并理解外表表达式的使用，并能熟练应用到各类动效设计、制作中。 |
|
本节课主要讲解运用AI绘制动效中的各元素，以及如何保存AI中的各元素和分层处理。 |
|
本节课主要制作奶茶及珍珠降少的效果，并使用AE中的偏移效果模拟数字变化的效果，结合轨道遮罩制作信息框的数字变动。 |
|
本节课主要介绍进入界面的元素绘制及实物图添加，以及播放器界面绘制及动效制作。 |
|
本节课主要完成音乐缩略图的制作，以及播放条与音乐缩略图时间、旋转的关联制作。通过实操UI演示动效，结合基础所学知识制作一个完整APP演示动画。 |
1-1滚动的小石头
1-2-1爱心
1-2-2爱心
1-3小开关
1-4融合的小球
1-5流畅的菜单栏
2-1小鼠标
2-2小喇叭
2-3神奇的按钮
2-4多变的搜索
2-5邮件提醒
3-1-1炫酷的加载登录
3-1-2炫酷的加载登录
3-2-1趣味小跑车
3-2-2趣味小跑车
3-3-1登陆界面
3-3-2登陆界面
3-4-1App菜单栏演示动效
3-4-2App菜单栏演示动效
3-4-3App菜单栏演示动效
3-5-1选择演示动效
3-5-2选择演示动效
3-5-3选择演示动效
4-1-1电影APP操作演示
4-1-2电影APP操作演示
4-1-3电影APP操作演示
4-2-1音乐播放器演示
4-2-2音乐播放器演示
4-2-3音乐播放器演示
4-3-1拨动加载
4-3-2拨动加载
4-3-3拨动加载
4-4-1奶茶与信息
4-4-2奶茶与信息
4-5-1屏幕解锁动效
4-5-2屏幕解锁动效
WBE
jlc8181
YXC贸易
桃汁
王雪
一寒
情酙鸡尾酒
liuying247
1131560568
Rain
carnation
夏個
小宇宙plus
1751871819
郭海江
罗福刚
栾文（平淡视界）
百练成仙
Photoshop
illustrator
CorelDraw
Auto Cad
3D MAX
SketchUp
After Effects
Cinema 4D
Maya
Lumion
UG
Solidworks
Pro/E
