如何制作原型

了解 MasterGo 原型模式的操作界面后,我们再来讲解一下如何制作交互原型。

关于流程和起始页

  • 流程指在一个页面内,针对容器/图层的连接。一个动画从开始到结束就是一个流程。
  • 流程起始点」是指标注在每一个流程的起始页上的点,只有画布中的一级容器可以被标注「流程起始点」。
  • 每个页面可以创建多个流程。每个容器可以在多个流程内。每个流程只能有一个起始页。

创建与删除流程

创建流程:原型模式下,选中目标页面,点击「属性」面板「流程」栏中的「+」图标,创建你的流程。双击流程名重命名。

删除流程:原型模式下,点击「属性」面板「流程」栏中的「-」图标,删除流程。

img

设置起始页面

创建起始页面

原型模式下,选中一级容器,点击「属性」面板「流程」栏中的「+」图标,即可将该容器设置为流程的起始页面。

重新标记起始页面

  • 添加「流程起始点」后,流程起始页容器的左上角会被标注定位点。其中包含演示 icon 按钮和流程名称。

img

  • 定位点可被拖拽挪动,重新标记该流程的起始页面。

img

img

设置流程名称

设置流程名称有以下两种方式:

  1. 原型模式下,选中已设置的「流程」页面,并在「属性」面板「流程」栏处双击编辑流程名称。

img

  1. 原型模式下,可在「设置」面板中打开「流程」栏,查看当前页面的所有流程列表。选中某个「流程」右键选择重命名,或双击该「流程」文本区域编辑名称。

img

设置流程备注

原型模式下,点击「属性」面板「流程」栏中的「备注」图标,给你的「流程」添加文本备注。「流程」相关文本备注会在演示时展示。

img

连接图层

原型模式下,选中图层后右边框的中心会出现「触发点」。鼠标点击并拖拽「触发点」至「目标」图层,即可完成连接图层。

img

Tips:

  1. 如果触发对象为一级容器,可连接自己及其他一级容器。
  2. 如果触发对象为容器内图层(包含容器),可连接自己、所在一级容器其他任意图层、所在一级容器外的其他一级容器。
  3. 如果触发对象为容器外画布上的图层,则无法连接该图层并添加交互。

添加交互

原型模式下,触发对象与目标图层连接成功后,可在界面右侧「属性」面板旁「交互设置窗口」设置 "触发","动作","目标","动画" "效果" 。

操作指南

在「属性栏」中添加:选中图层后,右侧边栏出现「交互」栏,点击「+」按钮就可为选中对象添加交互条目。此时默认「触发」为"点击",默认「动作」为 "返回上一级",右侧交互栏中展示相应的交互项。

img

在画布中拖动连接器添加:鼠标点击选中的图层右边框中心的「触发点」,并拖拽至「目标」图层,弹窗会增加设置选项 "目标"、"动画",你可以设置其效果变化。

img

Tips:

  1. 如果想要删除该条交互,你可以选中「触发标识」或「连接器」,按”删除“键,可以删除该条交互
  2. 暂不支持批量设置或多选连接器

原型演示设置

MasterGo 提供原型交互演示效果设置功能,完成交互效果设置后,你可以在右侧属性栏「设置」面板中为你的交互原型设置演示「演示背景色」、「设备模型」、以及查看所有「流程」的列表。

演示背景色

用户可以设置演示状态下的界面和设备模型的画布背景色。右侧栏「设置」面板点击「演示背景色」即可设置界面和设备模型后画布背景颜色。

img

设备机型

在 MasterGo 预览原型时你可以选择模拟真实设备的模型,在演示的时候,会使用真机机型和尺寸,还原最真实的场景。

预览

「预览」处查会展示你设置的「演示背景色」及「设备模型」的效果。

img

流程

这里会展示该页面内创建的所有流程列表,你可以"演示"、"定位起始页面"、"复制链接" 或右键 "重命名"、"删除" 操作你创建的「流程」条目。

img

设置溢出行为

预览原型时,如果你想要构建更复杂或更高保真度的原型,那么「溢出行为」应该可以帮到你。

MasterGo 支持对原型设置「滚动溢出」,从而模拟向下滚动内容页面、横滑导航、照片墙或互动地图等更高级的用户交互;

以下是使用滚动溢出的几种方法:

  • 长页面,可以使用「垂直滚动」。

  • 横滑页面,可选择「水平滚动」。

  • 还可同时设置「水平 & 垂直滚动」,让交互方式更多样。

img

只有容器里的内容超出容器范围,才可以进行滚动。

触发行为

MasterGo 原型功能支持在设计稿中添加多种交互行为,帮你更清晰地梳理页面逻辑,模拟用户交互方式。这里我们先来了解一下 MasterGo 中的第一类交互属性「触发」。

「触发」是指用户进一步了解页面信息所发出的动作,这里为交互的触发行为。

当前你可以选择 "点击"、"悬停"、"拖拽"、"按下鼠标"、"抬起鼠标"、"光标移入"、"光标移出"、"延时" 触发行为。除 "延时" 外的触发行为对任何图层有效。

img

"延时" 效果的触发对象仅为一级容器。

默认值为:800 ms

最大值为:20000 ms

触发的动作

在确定「对象」及「行为」后,可以设置触发后的交互动作,当前你可以选择 "前往"、"返回上一级"、"打开链接" 动作效果。

img

Tips :
  • 选择 "前往" 动作,目标对象须为除自身所在的一级容器外的所有一级容器。
  • 选择 "滑动至" 动作,目标对象须为本容器内且和触发对象同层级的图层。
  • 选择 "返回上一级" 动作,目标对象任意。
  • 选择 "打开链接" 动作,目标对象需要为外链,
    • 新标签页-浏览器离开跳转提示
    • 离开跳转提示后刷新至新链接

过渡动画

「过渡动画」是指在从一个页面跳转至另一页面的动态效果。MasterGo 提供多种动态过渡效果,满足更加灵活、多变的交互需求。

这里你可以选择 "即时"、"溶解"、"滑入"、"滑出"、"移入"、"移出"、"推入"、"智能动画" 等多种过渡动画。

过渡效果

MasterGo 支持 "线性渐变"、"缓入"、"缓出"、"缓入缓出"、"后撤缓入"、"停滞缓出"、"弹性渐变" 的过渡效果,给你的交互更多样视觉变化。

img