想用游戏化设计提高转化率？先学会核心框架！

在 Figma 的学习社群中，有很多新人会问做动效是用 Figma 还是用 AE 好？

这是个没办法直接回答的问题，因为它们适用的范围不同，而且各自都有局限性，所以做一篇分享来做完整的回复。

一、Figma 和 AE 的区别

理解 Figma 和 AE 首先就要理解交互动效和特效动画之间的区别。

交互动效是用于反馈交互操作的动画，是由页面 UI 元素的位移、缩放、旋转、透明度变更等效果实现，它的目标是用于提高交互操作的可理解性和顺滑度。

特效动画则是用非 UI 元素和特殊效果（如粒子、3D、扭曲）组成的视觉动画，虽然在应用内也需要通过交互操作触发，但它的目标是为了提升视觉的丰富性，在原有的交互效果基础上增加"额外"的效果，来吸引用户的注意。

对于 Figma 来说，它不是一个动效软件（比如 Protopie）而是一个 UI 设计软件，只能实现一些基础的交互动效，一种是预设的基础页面操作、跳转效果，另一种是"阉割版"关键帧动画 Smart Animate。

虽然完整的关键帧动画可以实现很多复杂、有趣的效果，但 Figma 的关键帧动画限制很多（很多属性缺失且不能生效），且没有时间轴控制（一次动画内的所有元素运动时长、缓动一致），不像 Protopie 或 AE 可以单独控制动画中每个元素的时间线和缓动，这就导致它只能实现一些简单的、残缺的动效。

而 Adobe AE 被开发出来的目标，是实现复杂专业的影视动画特效，想做复杂的 UI 特效动画自然也不在话下。

但是，实现一些偏基础、简单的 UI 动效（Figma 做不了的那种），AE 就显得非常不适用。它存在下面这些问题：

1. AE 只能制作视频，制作交互动效还需要先设计整个动画的顺序、分镜。
2. AE 做出来的动画只能"看"，不能"用"，看动画演示和真实操作的反馈感受差异巨大。
3. AE 导出的动画因为不能交互，必须单独设计手势图形和制作手势操作动画。
4. AE 只能做非常规的动效，实现基础的页面跳转功能如翻页、返回等很麻烦。
5. AE 是位图软件，需要额外的考虑 UI 元素的导入和导出，确保可用性。

这里面最严重的问题，就是 AE 做出来的动效只能"看"不能"用"，基本等于是飞机稿，存在巨大的不确定性。所以在专业团队中，不会轻易拿 AE 来做交互动效，而是集中在一些特殊的微动效或如直播的礼物特效等。

并且 AE 的制作效率很低，如果要做的交互动效是 Figma 或者 Protopie 能实现出来的效果，那么 AE 制作出相同效果的所需的时间会比它们多几倍，其中有很多时间要用于处理交互的顺序和手势的操作表现。

AE 对于 Figma 的交互，就像 PS 对于 Figma 的设计，效果都能实现，但功能冗余、操作复杂。它们有各自适用的场景，要选择哪个根据具体要做的效果和目标决定。

二、动效软件的选择

那么更重要的问题，就是当我们要做动效的时候，应该选哪个软件？这就要根据动效的类型和使用场景来决定。

1. Figma 的动效应用：

用于制作简单的页面交互和跳转的演示，比如包含十几个页面的项目，可以对它们进行连线和页内滚动设置，用于发给其它团队成员查看或评审中的演示。

Figma 还可以用 Smart Animate 制作一些非常规的关键帧动画跳转，但这种跳转因为缺陷很多，只适合做基础的动画 DEMO，用于对复杂动画的交互做前期方案评审。

至于 Figma 相对进阶的一些交互效果，比如色彩模式切换，文本变量应用，条件判断等，纯粹是鸡肋，没有任何去操作实现的必要。

2. Protopie/Principle 的动效应用：

Protopie 和 Principle 是专业的动效软件，就是用来实现动效的工具。当我们制作复杂动效的最终可交付（提供参数）版本，那么就应该用它们来实现。

它们实现动效的方式都是对元素属性的变更，比 Figma 更完整全面，实现逻辑也更清晰，都是开发可以通过前端代码还原出来的效果。

但它们并不适合做十几或几十个页面的跳转演示，因为产品设计的逻辑就不兼容这个目标。尤其是 Principle 只聚焦再单次交互动画上，不提供基本的页面跳转选项（只能做关键帧动画）。

同时，再强调一个观点，就是 UI 工具和交互工具是两种东西，它们无法合并。因为复杂交互动效的实现对图层的要求和设计阶段是冲突的，它们"尿不到一壶"里。所以只要是设计需要项目落地的复杂交互动效，直接使用动效软件即可。

3. Adobe AE 的动效应用：

AE 做动效包含两种场景，一种就是为了当飞机稿做的。比如很多新手的伪需求，要做个动效传到网上还是放在作品集里面。

或者这个效果就是做出来给领导、客户看看，落不落地根本不考虑。比如常见的大屏项目，大量看起来酷炫的动画效果都是飞机稿，只是为了过稿而做，只是一个延时宣传片（约等于肯德基广告，和实物是两码事）。

另一种场景，就是实现一些需要用特殊效果制作出来的小动画，比如微动效中的矢量变形、或者 IP 动画中的骨骼控制、3D 图标的运动效果等。

这些动效是需要落地的，但 UI 和动效软件完全实现不了，只能用 AE 来做。至于实现是要使用 Lottie，还是导出视频、GIF、关键帧，就是别的话题了。

对于专业设计师来说，会根据动效的需求选择合适的工具来制作，不会只学习一种，也不会纠结哪个工具更厉害。

结尾

UI 动效的设计可以说技法就那点东西，对动效的理解比软件使用、技法掌握更重要。而且这技能对一般应聘而言几乎没有太大的影响（比较鸡肋），所以很多新手把大量时间投入到这里面收益率是很低的。

想要提升学习效率，获得真实有效的知识和理解，还是建议大家参与我们的正式课程。在别人投入大量时间却原地踏步的时候，能真正抓住重点和建立系统的专业知识体系，具体课程看这里 ? https://pro.uisdc.com

作者：超人的电话亭