了解原型模式

概述

在 MasterGo ,你可以放心使用原型模式快速创建交互效果,交互种类丰富。通过点击、悬停、按下、拖拽、延时等效果在容器与容器、容器与图层、图层与图层间创建交互流程,并进行演示。

界面介绍

为了让大家更快上手使用原型模式创建你的界面交互方式,我们先简单介绍一下 MasterGo 原型模式界面。

img

  1. 点击进入 MasterGo 原型模式,可以看到界面右侧属性栏设有「设置」和「属性」面板。
  2. 「设置」- 针对当前「页面」的交互模式的通用设置。
  3. 「属性」- 针对触发对象设置的交互属性,其中包括触发行为,目标,动作,过渡动效,流程。

了解「设置」面板

img

「设置」是对当前「页面」内所有交互原型和流程的设置。「设置」内的选项会在该「页面」内原型演示时展示。原型模式下,你可以在「设置」面板中进行以下操作:

  1. 选择「演示背景色」,你可以在这里设置演示状态下,界面和设备模型后画布的背景色。
  2. 选择「设备」,你可以在这里设置演示原型时模拟真实设备的模型。
  3. 查看「预览」,这里会展示你已设置的「演示背景色」和「机型」。
  4. 查看「流程」,这里会展示该页面内所有流程的列表,并且你可以对列表中的每一个「流程」进行"演示"、"定位起始页面"、"复制链接" 的操作,也可以右键"重命名"或"删除"该「流程」。

了解「属性」面板

img

原型模式下,你可以在「属性」面板中进行以下操作,

  1. 为一级容器添加「流程起始点」,创建流程。选中一级容器 (画布上的最外层容器) 为其添加一个「流程起始点」。
  2. 添加「交互」,容器以及容器内任何图层都可以添加交互。选中图层后,可在画布中拖拽连接器添加,也可右侧属性栏出现「交互」栏处点击「+」图标设置交互。
  3. 添加「溢出行为」,选中任何容器时,右侧会出现「溢出行为」选项,你可以设置无溢出行为、水平、垂直、水平和垂直方向的滚动效果。

选中一个交互对象后,会自动切换到「属性」栏。当没有任何容器或容器内图层被选中,则停留在「设置」。