动效设计在UI中的应用（观点+教程）

（动图比较多，可能需要时间加载。以下所列案例，均为本人所做。文中若有不妥之处，欢迎各位交流指正。）

引言

互联网行业的发展十分迅速，各板块的同类竞品也越来越多，对于我们的工作来说，如何能在众多相似的产品中打造品牌差异化，动效是其中一个能带来点睛之笔的选择方式。动效既能吸引用户的注意并提高留存率，同时也能通过流畅的交互来优化用户体验。

我们知道，智能手机出现后，物理键盘被慢慢取消，用户能直接在手机屏幕上操作来实现人机互动。为了让用户第一时间明白哪里可以点击，哪里是什么功能的入口，手机界面内的元素会尽量做得和现实生活中对应的物体一样。同样的，动效能让虚拟界面的交互与现实中的物理运动规则相符，对应现实生活中的操作习惯，符合用户对运动效果的心理预期，不会显得不自然或突兀，让用户能快速认知和理解。

Part 1  

动效的意义

一、吸引注意

在一个界面中，运动的对象比静止的对象更能吸引人的注意力，给用户一种可交互的认知。

例如下方活动页面中的分享按钮，加上放大缩小的循环动效，会比静止的按钮更有一种“点我”的感觉，从而吸引用户去点击。

二、表示关联

点击按钮或切换页面后，下级页面合理的出现方式，能让用户感知当前所处层级，减少操作成本和理解成本。大多数产品的切入页面是从右往左进入，覆盖在原页面之上，返回上级页面是从左往右退出，页面之间的层级感清晰。

例如下方的页面，当我们点击按钮进入详情页时，用动效来展开详情页，让用户能比较直观地知道当前展开的详情页是从哪一个入口进来的。

三、展示更多信息

寸土寸金的手机界面中，通过动效的切换可以在同一位置展示更多内容。过多的文字信息会让界面冗余，引起用户反感。一些有时效性的活动信息，可以通过动效来展示。

例如在QQ音乐里，通过翻转专辑封面的唱片来展示更多的广告信息。下方二维码左侧的品牌信息也是通过这种方式来展示的。

四、传递情绪

例如下拉刷新，点赞等动效，加强了用户与产品之间的互动性，一方面能够减轻用户等待的焦虑，同时也能让用户感觉到产品是有性格的。

五、差异化

好的动效和交互甚至能让用户在其他地方看到类似的效果时会第一时间想起用过的产品，强化用户对产品品牌的感知。

例如在交友软件上很经典的右滑表喜欢左滑表不喜欢的交互动效，都是模仿国外的一个叫Tinder的交友软件。

Part 2

UI动效的分类

UI方面的动效，大体上可以分为以下三类。

一、情感化动效

在一些小的细节方面，如下拉加载，点赞等交互中，加入动效可以带来如彩蛋般的惊喜效果。

二、交互动效

页面的合理转场能展示出产品结构和空间关系，告知用户当前所处层级，暗示潜在的交互行为或执行后果；组件交互反馈能降低操作成本和理解成本。

三、综合动效

在二维码、运营活动图、H5等内容中加入动效，会有很好的视觉效果，给用户新颖的感觉，但同时也相对复杂，落地难度较大。（比较复杂的动效，开发要还原到一模一样，需要有效的沟通，涉及到现有的可用软件及插件，也取决于开发人员的技术水平。）

以上的三种类别，我都会拿自己工作中或练习中做过的实际案例来逐一讲解。

首先是情感化动效，这是实习僧APP的一个真实需求。在引导用户注册填写基本信息时，因为内容比较多，担心用户在这个过程中会产生焦虑而放弃填写，希望通过一些趣味性的小东西来减缓用户的焦虑，吸引用户继续填写。因此在第一步性别的选择上，我做了一个动效。

点击选中其中一个小人，被选中的小人会有一个被点亮的效果，另一个小人则会扭过头去看着他。点亮会有一种被选中的强调感，而扭头这个小细节，是我从QQ移动端底部标签栏里面得到的灵感。越是小的细节，越能体现出一个产品的用心程度。

然后是交互动效，这是我之前参加一个比赛做的界面。把交互过程用动效演示出来，能比单纯的文字描述更直观地表达每一次点击的交互结果，在设计交流平台上发布自己的作品的时，也会让自己的作品更精致，更加有吸引力。

这里为了吸引眼球做了一些弹性效果，实际的界面动效需要尽可能简洁，且不能持续时间太长。这其中有一部分是前面提到的页面转场，点击进入后，新页面的展开效果会很直观地表明新开页面是属于哪一个入口；点击报名按钮，也就是刚刚提到的另一点，组件交互反馈，点击后在当前位置就能得到报名结果，降低了操作成本和理解成本。

另一个交互动效的案例，是给客户做的一个真实的H5需求。通过播放动效，让用户在整个H5里面参与进来，根据提示做出相应的动作来主导整个H5的向前推进。

最后是综合动效，包含的动效形式比较多。

插画动效，在插画中加上一些循环的动效，可用于工作中的运营图，如开屏，活动图文等，也可以赋予自己的练习作品新的生命力。

动效二维码，曾经流行过一段时间，会比一般的静态二维码更有特色。这两个是我在工作中给客户定制的二维码。可以在二维码周围加上一些循环的小动效，或者通过处理后直接在二维码上加入循环动效。

动态表情包，可以用逐帧动画，也能用时间轴来实现。实际工作中的话可以用到IP的延展上，做一套产品IP形象的表情包，也是一种加强品牌化的方式。

Part 3

案例演示

接下来通过逐步演示一个之前有提到过的选择小人动效，来对动效的制作进行详细分解。（主要涉及到的是AE非常基础的操作知识，经验丰富的大佬们可以直接略过以下内容了~）

在PSD中，先把所有图层复制备份，并记得永远要保留一个备份

选中后定格的画面是静止的，将所有图层合并成一个图层，作为选中后的画面，图层命名为「选中」

然后考虑选中之前包含哪些形式的动效

选中之前，画面是灰色的，先给所有图层去色；考虑一下有哪些部分是会涉及到动效的，将它们单独分层，分别命名，并尽量保持为形状图层；将不动的部分合并成一个图层，命名为「bg」

打开AE，右键项目面板，选择导入-文件（或者直接双击项目面板）

选中需要导入的PSD文件，导入为一栏中选择“合成-保持图层大小”

点击确认后，会出来一个弹框，在导入种类一栏中选择“合成-保持图层大小”

点击确认后，项目面板里会出现一个合成，以及一个包含合成里面所有元素的文件夹

双击合成就能进入合成里面，下方会出现合成里的所有图层

准备工作完成后，就可以开始着手动效部分了。首先考虑如何做出嘴巴从微笑到张开嘴大笑的效果

点击图层「嘴巴」，然后选择钢笔工具，沿着「嘴巴_闭」的形状给「嘴巴」图层画一个蒙版，蒙版模式选择“相加”，这样嘴巴就会在蒙版的范围内显示了

然后给嘴巴的两种状态的不透明度打关键帧，让嘴巴从闭上的样子切换到张开的样子

选中图层「嘴巴_闭」和「嘴巴」，按快捷T打开不透明度时间轴。第一帧，「嘴巴_闭」不透明度100%，「嘴巴」不透明度0%；第二帧，「嘴巴_闭」不透明度0%，「嘴巴」不透明度100%

接下来需要给「嘴巴」的蒙版路径打关键帧，做出嘴巴慢慢张开的效果

选中嘴巴图层，然后拖动蒙版路径的锚点，把蒙版路径拖动成嘴巴完全张开的形状，需要尽量均匀分布锚点。播放时ae会自动将蒙版路径的形状从闭嘴过渡到张嘴

现实情况中，嘴巴张开，下巴也会跟着往下动，所以也需要给图层「下巴」做一个移动的效果

选中图层「下巴」，按快捷键P打开位置时间轴。先给下巴的初始位置打一个关键帧，下巴与嘴巴下方的距离是不变的，可以此为基准来细调下巴移动的距离，移动下巴的位置AE会自动记录关键帧。移动的时间和嘴巴张开的时间一致，将下巴位置的关键帧与嘴巴蒙版路径的关键帧对齐即可

嘴巴张开时脸也应该跟着动，所以需要给图层「脸」的蒙版路径打关键帧（在PS里的形状图层，导入AE后会自动生成形状蒙版）

先在嘴巴张开的时间点给「脸」的蒙版路径打一个关键帧，然后往前选到嘴巴闭上的时间点，选中图层「脸」，拖动蒙版路径最下面的锚点，让脸的形状稍微变小一些，拖动锚点AE会自动记录关键帧

只是张开嘴巴，显得有点死板，可以再加一个眨眼睛的效果

在这之前需要选中图层「眼睛左」，点击向后平移工具并勾选对齐，把图层的锚点移动到眼睛中心的位置，然后对图层「眼睛右」进行同样的操作

选中两个眼睛图层，按快捷键S打开缩放时间轴，将缩放的链接取消，在嘴巴闭上的时间点给缩放打一个关键帧；往前选一个时间点，将两个眼睛图层的上下缩放比例变成0%（同时选中两个图层时，变化其中一个图层的属性数值，另一个图层也会跟着变）；最后在嘴巴张开的时间点，将两个眼睛图层的上下缩放比例变成100%

眨眼时眉毛也应该跟着动，虽然只需要移动一两个像素，但就是这种很小的细节可以让整个动效更自然和精致

眉毛移动的关键帧位置，和眼睛缩放的关键帧位置是对齐的。选中两个眉毛图层，在嘴巴闭上的时间点给眉毛的初始位置打上关键帧，眨眼时眉毛会往下动，所以在眼睛闭上的时间点将眉毛的位置向下移动，最后再往后到睁开眼睛的时间点，将眉毛移动回原位

在张开嘴巴的时间点，给图层「选中」打上不透明度从0%到100%的关键帧，就有点亮的效果了

下一步要做一个小人回到未选中状态并扭过头去的效果

首先将时间线往后移到适当位置，给图层「选中」打上不透明度从100%到0%的关键帧

然后在「选中」不透明度为0%的时间点，再给「嘴巴」的蒙版路径、「下巴」的位置、「脸」的蒙版路径打上关键帧

然后将时间线往后移到适当位置，把「嘴巴」的蒙版路径、「下巴」的位置、「脸」的蒙版路径的初始关键帧复制粘贴到当前时间点，并给「嘴巴_闭」打上不透明度从0%到100%的关键帧，给「嘴巴」打上不透明度从100%到0%的关键帧

接着来做扭头的效果

扭头时，脸上的所有元素都要动。将时间线移到「选中」不透明度为0%的时间点，选中眉毛、眼睛、鼻子、腮红、嘴巴、下巴、耳朵的所有图层，给这些图层的当前位置打上关键帧，再往后到闭上嘴巴的时间点，将这些图层统一往左移动到适当的位置，就有扭头的效果了

扭头时头发也应该跟着动，和之前眨眼睛眉毛动一样，加上一点小细节会让整个动效更自然和精致

先在「选中」不透明度为0%的时间点给图层「头发」的蒙版路径打一个关键帧，再往后到扭过头的时间点，适当调整「头发」的蒙版路径的锚点

最后，为了做出循环运动的效果，需要将所有的图层都回到第一帧的位置和状态

先给所有图层的当前状态再打一次关键帧，将时间线往后移到适当位置，把所有图层的第一帧复制粘贴到时间线末尾

整个动效就完成了，播放一下看看效果，有不满意的地方还可以再调整一下细节

其实动效在一开始不是UI设计师的必要技能，AE最初也是用来做影视特效的。在设计领域中，有专门的动效设计师，相对于专业做动效的设计师，本文中的内容只是很皮毛很基础的东西。

随着互联网行业的快速发展，要求我们必须拥有多方面的技能，才能更好完成自己的工作。有时候换个角度看问题，从其他领域获得灵感，也许会发现新的解决问题的方法。不要局限自己的思维，如果你能很从容解决目前工作中提出的需求或遇到的问题，要警惕自己陷入了舒适区。

希望大家都能学会T型发展自己的知识领域，用更多的技能来包装自己的作品，提升自己的竞争力。毕竟，不断学习是永远没有错的~

感谢你的阅读，欢迎交流指正~