动态交互效果是原型项目的灵魂，也是原型与设计产出物的关键区别。一个好的交互设置不仅能准确地传达静态界面难以表达的逻辑、流程和细节体验，还能呈现出丰富精彩的视觉效果，提高项目的质量。对于产品经理来说，学会交互设计是必不可少的技能。

在原型设计工具中，交互功能的重要性不言而喻。如果你正在寻找一款功能强大、操作高效且简单易用的原型设计工具，那么摹客RP是不可或缺的选择。

那么，摹客RP究竟提供了哪些交互功能？它能够实现怎样的效果？又该如何使用呢？

接下来我们一起走近摹客RP的强大交互功能吧！

交互设置的五大要素

摹客RP的交互设置由5大要素构成，分别是：

• 触发源：用户主动施加操作事件的对象。如，点击按钮以显示弹窗的交互效果中，按钮就是触发源。

• 交互目标：执行给定交互命令（动作）的元素。如，点击按钮以显示弹窗的交互效果中，弹窗就是交互目标。在一些情况下，触发源和交互目标可以是相同元素。

• 触发方式：使交互设置开始工作的要素。软件中常见的触发方式有点击、右键、滑动等。

• 命令：交互目标执行的具体动作。常见的交互命令有显示/隐藏、移动、旋转、缩放等。

• 效果：交互设置所呈现的细节动态效果，主要受缓动、时长、延时影响。

通过这5大要素的组合，可以呈现出丰富多样的交互效果。而了解了这5大要素，我们就能更好地理解接下来的内容。

丰富的交互类型

摹客RP的强大交互能力，是由各种交互类型组合而成的，一共有四种交互类型：

页面交互

页面交互是原型设计中最常用也最简单的交互类型，主要是用于制作页面跳转、切换的效果。在摹客RP中，制作页面交互非常简单，简单三步，数秒就能完成：

1. 选中交互触发源，拖动交互链接点；

2. 链接到页面树的目标页面上；

3. 在设置弹窗中，按需设置交互参数。

命令交互

命令交互是摹客RP交互功能的基础与核心，你可以将命令交互理解为元素与元素之间的交互，它可以让我们选定的交互目标去执行给定的交互命令。

命令交互的设置方式同样很简单：

1. 选中交互触发源，并将交互链接点拖到交互目标上即可。

2. 在交互设置弹窗中，我们可以根据需要选择不同的交互命令，通过让交互目标执行显示/隐藏、缩放、旋转等动作，并组合搭配起来，可以实现产品界面中非常多的动态效果。

状态交互

状态交互是给同一个元素设置不同的状态，在演示的时候通过让元素切换状态，从而实现动态效果的交互类型。

想要设置状态交互，只需要选中图层，从顶部工具栏中打开状态面板。在状态面板中，可以启用并修改元素的预设状态，也可以添加自定义状态。

这里我们一起做一个悬停使元素变色的效果：

1. 创建一个矩形组件；

2. 选中矩形并打开状态面板，开启悬停状态；

3. 在属性面板中直接修改填充色，就设置好啦！

画板交互

画板交互是基于多画板模式的交互类型，也就是画板与画板之间的交互。

使用辅助画板可以很方便地制作弹窗效果。只需要选中触发源，拖动交互链接点并选中辅助画板，就能使辅助画板在演示时叠加在主画板上，从而实现弹窗效果了。

摹客RP所有的交互功能都逃不出以上四种交互类型。当然，越为复杂的效果，通常需要综合运用多种交互类型设置来实现。

交互效果与设置

灵活地调整交互效果，能够让你的项目呈现更细腻、更真实的动态视觉效果。我们一起来看看摹客RP必须要掌握的3种交互效果设置吧。

• 缓动：你可以理解为动作执行的速率。你可以控制交互目标线性（匀速）、减速或是变速运动。

• 时长：用于控制交互动作执行的时间。通过设置时长参数，你可以控制元素从A点移动到B点时，是瞬间移动，还是在给定时间内完成移动。

• 延时：用于设置停顿、间隔的效果。如果你想制作浮窗显示3s后自动隐藏的效果，只需要给浮窗先后添加显示和隐藏的命令，再给隐藏命令设置3000ms的延时效果就可以啦。

在交互面板的命令列表右上角，还有两个不得不提的交互设置，在一些情况能让你事半功倍。它们就是自动还原和同时工作。

• 自动还原：能够让你交互设置在第二次被触发时，将所有的交互动作倒转回去。例：设置点击显示弹窗后，只需要开启“自动还原”，那么点击1次可以显示弹窗，再点击1次就可以使弹窗隐藏回去。

• 同时工作：能够让所有的交互命令同时开始运行。默认情况下，所有的交互命令是依次执行的，而如果开启此设置，所有的命令就会同时开始工作了。

如果觉得这些效果和设置还不太好理解，那么就接着看看下面的实操范例吧。

如何使用摹客RP自制开关组件?

接下来我们用命令交互+状态交互，为大家分步骤演示如何使用摹客RP自制开关组件。

1.准备好开关的构成元素：圆角矩形和圆形，并将它们编组；

2.修改圆角矩形“选中”状态下的填充色为蓝色；

3.为圆形添加一个自定义状态“状态1”（自定义状态下可以单独为元素设置不同的位置），并修改此状态下圆形的位置至右侧。

4.点击编组，拖动链接点，先将矩形作为目标，并设置切换至“选中”状态交互。

5.再拖动编组的链接点，将圆形作为目标，并设置切换至“状态1”的交互。

6.在右侧交互面板中，开启“自动还原”和“同时工作”，就完成所有的设置了。

想要看看实际的演示效果？那还不赶紧自己动手试试。