新手扫盲文！交互/原型/动效/特效的本质区别是什么？

UI 设计中除了静态的界面设计外，还包含交互和动效部分的设计和输出。但对新人来说，尤其是最近社群里的讨论可以确定一点，就是无法分辨什么是交互与动效。

所以今天的分享就是聚焦这个主题，解释下面这几个要点：

1. 交互设计
2. 可交互原型
3. 动效设计
4. 特效设计

相关文章：

全文速览图

一、交互设计与可交互原型

从专业角度上讲，交互设计和界面设计虽然有交叉，但不是同一件事。界面设计指的是对我们可见元素的设计和排版，而交互设计指的是对软件使用功能操作方式的制定。

比如下面这个交互流程，界面使用什么色彩、图标、图片对它的操作方式来说并不重要。

同时，这几个页面也只是表现一个大概，真实的操作步骤中只有这种页面跳转关系是远远不够的，因为每个页面内部还有很多组件、控件包含不同的状态，且会被交互影响。

不同状态的组件形式

所以，对于完整的交互设计方案来说，光做页面之间的交互逻辑是远远不够的，还要在这个基础上增加对细节的说明和描述，它们才是交互设计中工作量占比最大的部分。

比如我们之前做的一个简单的示例：

交互设计的线框图和说明、备注的方式没有行业标准，不同公司会有自己内部形成的规范，但更多情况下是自由发挥，确保能让团队看懂即可。

而这就形成一个新的问题，那就是使用软件来制作可交互的原型是不是交互设计的一部分。我只能给出一个模棱两可的回答：即是，也不是。

比如使用 Figma 来制作可交互原型，那么是的部分，就是它可以“大致”表现项目的跳转关系，在一些特定的会议或评审中进行演示。

而不是的部分，就是 Figma 制作的可交互原型也就仅限于演示，和实际方案的交付没有任何联系。程序员在进入开发阶段是不会去看它的，因为它表现的跳转太基础，最关键的那些信息它又没有。

有的同学可能会想 Figma 毕竟是设计为主的软件，交互功能不全面，用 Axure 做可交互原型总可以了吧。答案还是否定的，因为 Axure 看着复杂，实际能实现的交互也并没有多多少，而不管是 Figma 还是 Axure 最复杂的这些交互功能也只能实现项目中最简单也最不需要做出来的交互效果。

比如下拉菜单、窗口切换、开关、输入框、筛选、排序……这些东西在实际项目中几个字标注就能解决无关紧要的部分，用软件实现可能要花几倍的时间。

相关总结：

1. 交互设计是使用图文结合的形式来解释项目或功能的操作流程和状态明细
2. 可交互原型主要用于评审阶段的演示不能作为最终交付方案
3. 软件都只能表现残缺的交互信息，制作可交互原型不是交互设计

二、交互设计与动效设计的认识

动效是 UI 界面中用于强化交互反馈和提升视觉个性的动画效果，和交互设计关系紧密但是两个不同的设计类型。很多新人可能不会把使用 Figma 制作可交互原型作为交互设计，但会把使用 Figma “做交互” 等同于做动效。

在 UI 中的动画效果我们可以分为两个大类，交互动效和视觉特效。

交互动效用于表现用户在和 UI 元素进行交互时产生的反馈效果，比如页面的跳转、元素的缩放、开关的切换等等。

视觉特效则主要用于强化视觉氛围而使用的效果，比如配合红包弹窗的特效、直播间里的刷屏礼物等等。

动效从应用场景可以分成两类，而实现的方式也可以分为两类，一类是属性补间动画，另一种是特效动画，两种类型应用的软件不同，交付和开发的方式也不同。

第一种属性补间动画，就是创建开始帧和结束帧，然后它们基于属性差异和时间轴设置来建立补间的动画效果。比如点击图片放大的动画，包含了图片尺寸属性开始和结束的值，以及遮罩层透明度属性开始和结束的值，时间轴设置了开始到结束的过度时长。

其中最重要的两个要素就是属性和时间轴，属性即属性面板里可以设置的东西不同软件有差异），决定了动画可以实现的效果，比如尺寸、色彩、角度、比例、投影等等，90% 以上的动效都是通过这种模式实现的。

Figma、即时等软件也提供了属性补间动画的功能，通常叫智能动画 Smart Animation。

但这些软件只实现了属性补间动画的一半，而另一半时间轴，就是分开控制不同元素与属性动画时长的功能。一个专业的交互动画效果，往往里面使用的元素动画时长是不一致的，这就需要通过时间轴来进行控制。

Figma 等设计软件是做不到这一点的，所以我们才需要去使用 Protopie、Principle 等软件来完成更真实、细腻的动画效果。

而特效动画，就是引入基础属性外的其它效果类型，比如扭曲、扩散、形变、路径等等，这就不是设计和动效软件能实现的效果。能实现这些效果的工具就只有一个，那就是 —— AE。

AE 是个动画工具，能实现任何复杂的动画。但它并不是纯粹的动效工具，它做出来的效果就只能看不能上手操作，且制作动画的效率极低。

不同动效类型，我们会使用不同的工具去实现。而更重要的一点，动效的交付和落地方式，也和动效的实现方式有关。

如果是基础属性补间动画类型，通常是提交参数文档，开发要一比一去还原动画的相关参数。再复杂一点的可以借助 Lottie 这种工具做配合进行导出。要注意的是，常规动效基本不存在一键导出动效开发直接使用的途径，一定是基于对应工作流来完成的。

如果是特效动画类型，就看具体做了什么动画，实现的方式也多种多样，除了前面的 Lottie 以外，也可能调用特殊的动画库实现，或是用最简单粗暴的  PNG/WEBP 序列帧，极端点甚至还有启用虚幻来实现的。不同动画类型和使用场景决定实现途径不同，不存在固定的方式来实现复杂的动画特效。

动效往深了做可以很复杂，但这种行为即吃力又不讨好，一般团队不会热衷于高频开发动效，所以设计师最该关注的是属性补间动画的应用与实现途径，而不是动画特效。

相关总结：

1. 动效和交互不是一种设计，要独立开展
2. 动效包含“交互动效”和“特效动画”两种应用类型
3. 动效得实现方式包含“属性补间”和“特效动画”两种方式
4. 需要根据动效类型选择不同的软件来制作，Figma 不是动效软件
5. 不同动效交付开发的方式不同，没有一键导出的统一途径

结尾

从职业角度来说，交互和动效得优先级都远不如先把 UI 视觉做清楚重要。昨天发的练习强烈建议你们自己做做看，甚至建议你们用 AI 生成看看，如果这种界面都做不好，就证明离市场现在的要求还差太远了。靠交互还是动效也补不回来。

有问题可以发社群里，我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」