交互-触发和动作

触发

了解触发

MasterGo 原型支持多种交互行为，可模拟用户实际使用的交互方式，清晰梳理页面逻辑。

引发这些交互的操作被定义为“触发”，在演示过程中，当执行触发操作时，系统会自动播放相应的交互效果，展现原型交互的逻辑。

触发的种类

原型交互支持的触发种类有：单击、双击、右键、悬停时、按下时、拖拽、按下鼠标、抬起鼠标、光标移入、光标移出、延迟。

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

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

设置方式

在设计文件的原型模式中，或者原型文件可添加交互。

1、选择需要添加交互的容器或图层，点击右侧面板中 “交互” 栏后方的 “+” 按钮，然后单击灰色的设置项，唤起交互设置弹窗。

2、选中需要添加交互的容器或图层，按住其右侧的“+”拖动至目标容器，即可出现连接线和交互设置弹窗。

触发生效的条件

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

• 任何容器和图层均可设置除“延迟”外的所有触发；

• 仅一级容器可设置“延迟”，嵌套的容器或图层无法设置“延时”。

• 同一容器或图层可设置多个触发。当用户执行特定触发操作时，系统会进入相应的容器或图层。如果设置了两个触发操作且发生重叠，则只有一个触发会生效，另一个触发会在交互列表中显示“ℹ”标识，表示该触发暂时无效。

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

动作

了解动作

动作是指在触发后系统会执行的具体行为或反应，通常表现为界面元素的变化或动画效果。

动作的种类

原型交互支持的动作种类有：前往、返回上一级、显示/隐藏、容器内滚动、打开链接、切换组件状态、切换动态面板状态、打开浮层、关闭浮层、替换浮层。

以下分别介绍各个动作：

前往

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

返回上一级

可返回上一级

显示/隐藏

可改变目标图层的显示/隐藏状态，触发图层和目标图层需位于同个一级容器内。

容器内滚动

当容器区域超出原型演示区域时，容器内滚动功能允许在同一容器内从触发图层滚动到目标图层位置。

操作步骤

• 为容器选择一个演示设备，需保证容器长度大于演示页面。

• 选中触发图层，设置触发动作为「容器内滚动」后，选择需要滚动到的目标图层。

• 设置对应的缩进数值，调整滚动到目标图层的位置。

• 将动画设置为“即时”/“位移”，并在设置动画效果和时间后，即可点击播放查看滚动效果。

相关说明

• “容器内滚动”是原型中的一个触发动作，当触发图层和目标图层在同一容器内时，可使用该交互效果。

• “目标”指经由期望发生位移后到达的图层，使用容器内滚动效果，需要触发图层与目标图层在同一容器内。

• “缩进”作用于目标图层，当滚动到目标图层时，缩进可用来调整目标图层在演示区域中的相对位置，主要应用于一些比较大的容器，要求目标物有自由度比较高的位移，如横向和纵向移动。

  • “Y轴缩进”可以调整目标图层与演示区域页面上下两边的距离。
  • “X轴缩进”可以调整目标图层与演示区域页面左右两边的距离。

• “动画”由于“容器内滚动”动作的特殊性，除了“即时”以外，仅可设置“位移”，用以呈现滚动发生时的位移效果。

打开链接

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

切换组件状态

可以在既有的“组件状态”之间设置跳转关系

操作步骤：

• “动作”选择“切换组件状态”。

注意：“显示组件状态”仅能在“组件状态”内设置，其他普通容器之间无法设置这个动作。

• 在下级菜单展示出的“属性”选项中，选择动作触发后想要显示的“可变组件”即可。

切换动态面板状态

在原型文件中，当触发图层和目标动态面板位于同一级容器内时，可以设置切换动态面板状态，以调整面板的可见性。

打开浮层

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

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

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

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

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

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

关闭浮层

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

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

替换浮层

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

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

评价此篇文章：👍🏻 有帮助 👎🏻 无帮助

👉本篇文章对你是否有帮助？👍🏻 有帮助 👎🏻 无帮助，我们期待着你的反馈。