交互-触发和动作
触发
了解触发
MasterGo 原型功能支持在设计稿中添加多种交互行为,帮你更清晰地梳理页面逻辑,模拟用户的交互方式。在这个过程中,我们规定引起这些交互行为的动作,叫做触发。在演示时,用户在指定区域做出设计的触发行为,会播放对应的交互动作。
触发的种类
目前,MasterGo 支持的触发种类有:点击、悬停、按下、拖拽、按下鼠标、抬起鼠标、光标移入、光标移出、延时。
每种触发对应的动作如下:
- 点击-鼠标按下后抬起
- 悬停-鼠标停在「目标容器或图层」
- 按下-持续按鼠标,按鼠标时触发生效,松开即恢复。
- 拖拽-按下并拖拽鼠标
- 按下鼠标-鼠标完成按下的动作
- 抬起鼠标-鼠标完成抬起的动作
- 光标移入-鼠标从「目标容器或图层」外部移入内部
- 光标移出-把光标移出「目标容器或图层」
- 延时-在“延时”选项的右侧有个时间设置,达到预设的时间即触发成功。(只能在一级容器上设置触发)
设置方式
MasterGo 支持两种添加交互的方式:
-
原型模式下,选中要添加交互的容器或图层,在右侧属性面板中的「交互」栏选择“交互”,点击灰色设置项即可唤起交互设置弹窗;
-
原型模式下,选中容器或图层,按住其右侧的“+”拖动至目标容器,即可出现连接线和交互设置弹窗。
触发生效的条件
触发生效的条件遵循以下几点:
- 任何容器和图层均可设置除“延时”外的所有触发;
- 只有一级容器才能设置“延时”,图层和容器中的容器均不可以设置“延时”;
- 同一容器或图层可设置不同的触发,当用户做出特定的触发之后,会进入到相应的容器或图层。但当同一容器和图层设置了两个动作有重叠的触发时,只能展示一个触发,另一触发会在交互列表中用“ℹ”做出提醒,表示暂不生效。
如:同时设置“按下鼠标”和“点击”时,“按下鼠标”生效,“点击”用“ℹ”提醒;同时设置“悬停”和“光标移入”时,“光标移入”生效,“悬停”用“ℹ”提醒。
动作
了解动作
我们想让一个容器或图层在设置了触发之后,前往到另一容器、打开链接或返回到上一级的这种用户路径叫做动作。
动作的种类
目前,MasterGo 支持的动作种类有:前往、返回上一级、容器内滚动、打开链接、显示组件状态、打开浮层、关闭浮层、替换浮层。
以下分别介绍各个动作:
-
前往
可前往除自身所在的一级容器之外的所有一级容器
-
返回上一级
可返回上一级
-
容器内滚动
当容器区域大于原型演示区域时,「容器内滚动」可实现同一容器内,演示界面区域从触发图层位置滚动到目标图层位置。
操作步骤
- 原型模式下,为容器选择一个演示设备,需保证容器长度大于演示页面。
- 选中触发图层,设置触发动作为「容器内滚动」后,选择需要滚动到的目标图层。
- 设置对应的缩进数值,调整滚动到目标图层的位置
- 将动画设置为“即时”/“位移”,并在设置动画效果和时间后,即可点击播放查看滚动效果。
相关说明
- “容器内滚动”是原型中的一个触发动作,当触发图层和目标图层在同一容器内时,可使用该交互效果。
- “目标”指经由期望发生位移后到达的图层,使用容器内滚动效果,需要触发图层与目标图层在同一容器内。
- “缩进”作用于目标图层,当滚动到目标图层时,缩进可用来调整目标图层在演示区域中的相对位置,主要应用于一些比较大的容器,要求目标物有自由度比较高的位移,如横向和纵向移动。
- “Y轴缩进”可以调整目标图层与演示区域页面上下两边的距离。
- “X轴缩进”可以调整目标图层与演示区域页面左右两边的距离。
- “动画”处,由于“容器内滚动”动作的特殊性,除了“即时”以外,仅可设置“位移”,用以呈现滚动发生时的位移效果。
-
打开链接
选择“打开链接”后,在右侧可输入要打开的网址
-
显示组件状态
可以在既有的“组件状态”之间设置跳转关系
具体来说可以这样设置:
-
“动作”选择“显示组件状态”。
注意:“显示组件状态”仅能在“组件状态”内设置,其他普通容器之间无法设置这个动作。
-
在下级菜单展示出的“属性”选项中,选择动作触发后想要显示的“可变组件”即可。
-
-
打开浮层
浮层通常用于 Dialog、Alert、Toast 或“抽屉”等会悬浮在已有页面的通知或临时页态的设计中。
任意容器或图层均可设置“打开浮层”,而“浮层”的对象只能是容器,不可以是图层。
设置“打开浮层”时,还可以对浮层的位置、遮罩等进一步设置。
a. 浮层的位置可选择:正中心、左上角、底中心和自定义。选择自定义时,会在容器中出现浮层的形态,可以将这个浮层移动到想要设置的位置;
b. 选择“点击浮层外关闭浮层”,即可在演示时,点击浮层外部关闭浮层;
c. 选择“在浮层后添加遮罩”,即可在演示时,在底层与浮层之间增添一层蒙版,可设置蒙版的颜色和透明度。
-
关闭浮层
关闭浮层只生效于已经设置为浮层的容器。
选择这一浮层,不仅可以在属性面板中的“交互”栏点击“+”,设置“关闭浮层”的动作,还可以选中这个浮层,拖动右侧“+”号即可出现“返回上一级”和“关闭浮层”的快速连接方式。
-
替换浮层
在原来的浮层上可以设置“替换浮层”,做出相应的触发之后会替换新的浮层。如果是在没有设置成浮层的容器上设置“替换浮层”时,效果和设置“前往”一样。
和“关闭浮层”一样,选中“替换浮层”,右侧“+”可以出现“返回上一级”和“关闭浮层”的快速连接方式。
评价此篇文章:👍🏻 有帮助 👎🏻 无帮助
👉本篇文章对你是否有帮助?👍🏻 有帮助 👎🏻 无帮助,我们期待着你的反馈。