动效设计学习心得

新学期开始了，我们正式步入大二，开始了更为专业的学习，这门课程是动效设计，第一次接触充满好奇与兴奋，主要运用的工具是Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。属于层类型后期软件。Adobe After Effects软件可以帮助您高效且精确地创建无数种引人注目的动态图形和震撼人心的视觉效果。利用与其他Adobe软件无与伦比的紧密集成和高度灵活的2D和3D合成，以及数百种预设的效果和动画，为您的电影、视频、DVD和Macromedia Flash作品增添令人耳目一新的效果。这门课程就是如何利用AE软件去剪出想要的动态效果，有助于之后在设计界面更有动感效果，更能让页面交互。

动效设计，顾名思义即动态效果的设计，用户界面上所有运动的效果，也可以视其为界面设计与动态设计的结合。而在Material design 设计规范中，将动效设计这一章命名为「Animation」，意思是动画，活泼的意思。好的动效设计可以帮助引导、取悦用户，减少等待焦虑，是拉近用户与产品之间距离的有效手段。动效的分类并没有明确的界限，根据其作用大致可以分为3类：

1. 功能型动效

此类动效一般用于产品设计，通过动态图形向用户传递信息，其中加载/刷新和进度条应该是我们平时接触最多也是最早的动效了，此类动效最开始只是为了告知用户产品的页面状态。随着社会上产品数量的快速增长以及竞争日益激烈，产品的有趣和差异化显得愈发重要，于是便看到越来越多的产品将自己的品牌因素融入动效当中，设计也越来越生动有趣。

除了加载、刷新和进度外，功能型动效还被广泛的运用在产品的其他各种状态当中，如信息报错、二维码扫描等。虽然具体表现不同，但都是通过动态形式帮助用户理解和使用产品。

2. 交互型动效

顾名思义，该类动效的核心是“交互”，其主要的作用是帮助用户理解界面的层级逻辑关系，让产品的使用更加符合现实生活中的认知习惯，从而降低使用成本，提升产品体验。

要注意的是此类动效不能脱离用户的认知模型，只是单纯的炫酷对于整个产品来说是有害的。

其实交互型动效是用户在产品使用中接触最多的一种动效，因为产品的使用是通过不同产品元素串联而完成的，而负责元素串联的就是交互型动效。

一般可分为「单页面交互动效」和「多页面交互动效」。

「单页面交互动效」：就是在当前页面发生的交互动画，比如tab切换、左滑删除、二级菜单展开、返回顶部等等。

「多页面交互动效」：就是不同页面之间的交互动画，其实就是页面的跳转，根据不同的场景会使用到不同的跳转样式，好的跳转动画能够帮助用户理解前后页面的逻辑关系。

3. 展示型动效

此类动效的最大作用就是尽可能的为用户制造视觉上的愉悦，营造活动氛围，让用户觉得有趣生动，使用的场景也十分广泛，常见的如「品牌展示」、「运营活动」、「H5营销」等。

动效在UI设计中具有重要的作用和价值。它可以帮助用户更好地理解界面的功能和交互方式，提高用户体验和满意度。

首先，动效可以使用户更好地理解界面的功能。通过动效，用户可以直观地了解某个元素的作用和效果，比如按钮的点击效果、菜单的展开效果等。这种直观的理解可以使用户更快速地掌握界面的使用方式，提高界面的易用性。

其次，动效可以提高用户的体验和满意度。通过动效的应用，可以让用户感受到界面的流畅性、舒适度和生动性。比如，在页面切换时添加动画效果，可以使用户感觉到过渡更自然流畅；在表单输入时添加反馈动画，可以让用户更加清晰地了解输入的结果。这些细节的处理可以提高用户对界面的好感度和满意度。

总之，动效在UI设计中扮演着重要的角色，它可以帮助用户更好地理解界面的功能和交互方式，提高用户体验和满意度。因此，在设计UI界面时，需要注重动效的应用，从而提高用户的使用体验。

在移动端的动效设计中最常用的曲线有四种，分别是缓入、缓出以及缓入缓出和匀速曲线。

缓入即加速曲线，物体开始移动时速度较慢，随着时间的推移逐渐加速。加速曲线一般被用在一些离开就不会回来的对象上，譬如我们手机系统清除掉后台应用时的动画效果。

缓出即减速曲线，开始时运动速度较快，随时间推移速度逐渐减慢。物体在移动结束时速度逐渐减慢，形成减速的效果。减速曲线一般用在对象进入画面时，比如常见的弹窗入场效果。

缓入缓出曲线。二者的结合，先加速后减速一般用在对象在画面内的运动。譬如抽屉式菜单的出入场动画。

除了这三种曲线，还有一种没有速度变化的运动方式，以匀速运动。一般用在比较机械的动画上，通常会用于一些加载或者透明度以及颜色的变化上。

在视觉动效中比如一些 H5 动画、 KV 动画或者动态壁纸。如果只是常见的元素，进场和出场也依然可以遵循上面的法则。进入用减速曲线，离开用加速曲线。

在进行产品设计时，动效设计应遵循5大法则：

1.State

告诉用户对象和窗口的状态是如何变化的

当界面中对象状态需要发生变化时，可以用动效展示变化的过程，让用户更清楚的感知到该变化。相应的，当窗口发生变化时，可以用动效更清楚展示窗口是如何从一个状态转变到另一个状态的。

2. Attention

吸引用户注意力，告诉用户做什么

当你想让用户关注某一个区域，或执行某一个操作时，可以通过动效吸引他们的注意力。当用户需要执行操作时，注意 UI 和动效的结合要能告知用户需要进行的操作。

3. Feedback

告诉用户操作和对象间的关系

当用户执行了某一操作后，动效是一个非常好用的反馈机制。通过动效的适当运用，用户可以清晰感知到自己操作的反馈，让用户知道自己做了什么。

4. Relief

缓解用户对应用处理速度的感知

当应用执行一个长时间操作时，可以用动效缓解用户对时间的感知，甚至创建一个假的动效效果（其实应用并不用处理这么长时间）。当下许多 APP 下拉时的加载动效运用的便是该原理。对于用户，他们关注的是感受到的速度，而不是应用实际消耗的速度。

5. Individuation

让产品更有趣和个性

为了让产品更有趣味性，可以在某些场合适当运用动效创造一些让人愉悦的动画效果。两点是笔者觉得需要注意的，一是动效时间要足够短，二是动效要足够流畅。

动效能够有效描述物体之间的逻辑关系，同时通过视觉效果，可视化的描述用户操作时候当前的状态，用户可以很清晰的感受到物体与物体之间的位置或者层级关系。

在常见的动效设计案例中，有12种经典动效设计：

1.滑动

信息列表会跟随着用户的交互手势而动，然后卡片到相应的位置上，保持整齐感，它属于指向型动画，物体的滑动取决于用户是用那种手势滑动的。它的作用就是通过指向型转场，有效帮助用户清理页面层级的排列情况。

2.扩大

页面中的卡片会从缩略图转化为全屏视图（一般这个卡片的中心点也会跟随移动到屏幕的中央）。反向动效就是卡片从全屏视图转换为缩略图。它的优点是能清楚的告诉用户点击的地方被放大了。

3.最小化

页面元素点击之后缩小，然后移动到屏幕上相应的位置，相反的动效就是扩大，从缩略图重新变为全屏。这样做的好处是能够清楚的告诉用户，最小化的元素可以在哪里被找到，如果没有动效引导，可能用户需要花时间去寻找。

4.切换对象

当前页面移动到后面，新的页面移动到前面，这样能够清楚解释页面之间是进行切换的，不会显得转换的太突兀和莫名其妙。

5.展开推叠

堆叠在一起的元素被展开。能够清楚的告诉用户每个元素的排列情况，从哪里来到哪里去，也显得更加有趣。

6.翻页

当用户实施滑动手势的时候，出现像现实生活中翻页一般的效果。真正动效转场也能够清晰的展现列表层级的信息架构，并且模仿现实生活中的动效更加富有情感。

7.添加到列表

新的元素加入到原有的列表中，旧的元素被推开而不是替换，从而有现实中腾出位置的感觉，这种转场效果能够清楚的展现列表重新排列的过程，让用户知道新旧信息的位置，不会产生迷惑。

8.导航标签转换

根据内容的转换，按钮相应的在视觉上做出改变，而标题是随着内容移动而改变的，这样能够清晰的展示标签和内容之间的从属关系，让用户能够清晰理解页面之间的架构。

9.融合

元素会根据用户的点击交互而分离或者是结合，用户可以感受到元素与元素之间的关联，比起直接切换，显然用融合动画更加有趣。

10.滚动

根据用户的手势进行滚动操作，非常使用与列表信息的查看。这个交互方式是我们用的最频繁的，我们也可以加入一些动效使这个交互更加的有趣和丰富。

11.平移

当一张图片在我们有限的屏幕里没有办法看完的时候，会使用这样的效果。除了放大效果，这样的平移还可以加上动效配合一些功能使用。

12.保存指示器

用户一旦进行保存、下载某个物体，物体会复制一份，同时缩小、移动到保存指示器中。这样可以提示用户下载或者是收藏的内容在哪里可以找到，能够告诉用户对象已经被添加。

动效具备描述空间关系，功能，富有美感和流动性的目标。动效显示了 APP 是如何组织的，动效时刻在提示、引导用户：

1、引导窗口切换

2、提示用户接下来发生的事

3、对象间的层级感和空间感

4、减缓用户对等待事件的认知

5、美感和个性化

场景UI 的4项作用：

1、支持微交互

2、显示运动过程

3、解释

4、装饰

动效存在的6个目的：

1、吸引用户注意力在指定区域

2、表现对象和用户操作间的关系

3、维持多窗口或多状态的上下文关系

4、提供持续性事件的认知感

5、创造虚拟空间引导用户在状态和功能间转化

6、创造沉浸感和趣味性

保持UI设计中动画效果的一致性，可以通过遵循以下步骤来实现：

1. 确定动画的类型：要确定动画的类型，是什么形式，以及它们是如何运行的。
2. 定义动画的参数：确定动画的参数，比如他们的时长，速度，弹性和位置。
3. 编写动画的脚本：编写动画的脚本，比如编写动画的函数表达式等，确定动画的过程，比如动画的延迟，以及动画的参数。
4. 测试动画：测试动画，确保动画的一致性，以及可以做出正确的结果。

以下是本学期的一些作品：

本学期在动效设计这门课程中收获颇多，熟练掌握了AE软件，也能够自己剪出合适的动效视频，觉得很开心，今后也会慢慢打磨自己的技术，脚踏实地，一步一个脚印走下去。