交互-触发和动作

触发

了解触发

MasterGo 原型功能支持在设计稿中添加多种交互行为，帮你更清晰地梳理页面逻辑，模拟用户的交互方式。在这个过程中，我们规定引起这些交互行为的动作，叫做触发。在演示时，用户在指定区域做出设计的触发行为，会播放对应的交互动作。

触发的种类

目前，MasterGo 支持的触发种类有：点击、悬停、按下、拖拽、按下鼠标、抬起鼠标、光标移入、光标移出、延时。

每种触发对应的动作如下：

• 点击-鼠标按下后抬起
• 悬停-鼠标停在「目标容器或图层」
• 按下-持续按鼠标，按鼠标时触发生效，松开即恢复。
• 拖拽-按下并拖拽鼠标
• 按下鼠标-鼠标完成按下的动作
• 抬起鼠标-鼠标完成抬起的动作
• 光标移入-鼠标从「目标容器或图层」外部移入内部
• 光标移出-把光标移出「目标容器或图层」
• 延时-在“延时”选项的右侧有个时间设置，达到预设的时间即触发成功。（只能在一级容器上设置触发）

设置方式

MasterGo 支持两种添加交互的方式：

1. 原型模式下，选中要添加交互的容器或图层，在右侧属性面板中的「交互」栏选择“交互”，点击灰色设置项即可唤起交互设置弹窗；

2. 原型模式下，选中容器或图层，按住其右侧的“+”拖动至目标容器，即可出现连接线和交互设置弹窗。

触发生效的条件

触发生效的条件遵循以下几点：

• 任何容器和图层均可设置除“延时”外的所有触发；
• 只有一级容器才能设置“延时”，图层和容器中的容器均不可以设置“延时”；
• 同一容器或图层可设置不同的触发，当用户做出特定的触发之后，会进入到相应的容器或图层。但当同一容器和图层设置了两个动作有重叠的触发时，只能展示一个触发，另一触发会在交互列表中用“ℹ”做出提醒，表示暂不生效。

如：同时设置“按下鼠标”和“点击”时，“按下鼠标”生效，“点击”用“ℹ”提醒；同时设置“悬停”和“光标移入”时，“光标移入”生效，“悬停”用“ℹ”提醒。

动作

了解动作

我们想让一个容器或图层在设置了触发之后，前往到另一容器、打开链接或返回到上一级的这种用户路径叫做动作。

动作的种类

目前，MasterGo 支持的动作种类有：前往、返回上一级、打开链接、打开浮层、关闭浮层、替换浮层。

以下分别介绍各个动作：

• 前往

  可前往除自身所在的一级容器之外的所有一级容器

• 返回上一级

  可返回上一级

• 打开链接

  选择“打开链接”后，在右侧可输入要打开的网址

• 打开浮层

  浮层通常用于 Dialog、Alert、Toast 或“抽屉”等会悬浮在已有页面的通知或临时页态的设计中。

  任意容器或图层均可设置“打开浮层”，而“浮层”的对象只能是容器，不可以是图层。

  设置“打开浮层”时，还可以对浮层的位置、遮罩等进一步设置。

  a. 浮层的位置可选择：正中心、左上角、底中心和自定义。选择自定义时，会在容器中出现浮层的形态，可以将这个浮层移动到想要设置的位置；

  b. 选择“点击浮层外关闭浮层”，即可在演示时，点击浮层外部关闭浮层；

  c. 选择“在浮层后添加遮罩”，即可在演示时，在底层与浮层之间增添一层蒙版，可设置蒙版的颜色和透明度。

• 关闭浮层

  关闭浮层只生效于已经设置为浮层的容器。

  选择这一浮层，不仅可以在属性面板中的“交互”栏点击“+”，设置“关闭浮层”的动作，还可以选中这个浮层，拖动右侧“+”号即可出现“返回上一级”和“关闭浮层”的快速连接方式。

• 替换浮层

  在原来的浮层上可以设置“替换浮层”，做出相应的触发之后会替换新的浮层。如果是在没有设置成浮层的容器上设置“替换浮层”时，效果和设置“前往”一样。

  和“关闭浮层”一样，选中“替换浮层”，右侧“+”可以出现“返回上一级”和“关闭浮层”的快速连接方式。