MasterGo 零基础入门教程！NO. 08 原型模式

教程讲师：刘昱

个人永久免费使用 MasterGo，请点击右侧链接👉 MasterGo 官网

资源广场拥有海量设计资源，为你的创意工作注入活力👉 MasterGo 资源社区

MasterGo 介绍

MasterGo 是一款面向团队的专业 UI/UX 设计工具，它支持多人同时编辑、随时在线评审、设计一键交付，让你和团队的想法都能更快实现！专业、智能的界面设计，能够满足你所有创意需求。自动布局、素材填充等智能功能，让设计师有更多时间捕捉灵感。

与其他同类型软件相比，MasterGo 是一款 Web 端的设计工具，不需要下载和安装，更加轻量化，当然如果你不喜欢使用 Web 端，MasterGo 也为你提供了客户端的下载。它可以无障碍的让团队中的小伙伴打破次元，工作效率显著提升。那么接下来我们一起开启我们的MasterGo之旅吧！

本集教程内容概要

本集视频是 MasterGo 系列教程的第 8 集，由老师刘昱带领大家了解 MasterGo 的原型模式。学会这一招，惊艳一下你的开发同事吧 ~

编者按：图文内容简概为视频内容的提炼总结，想要了解详细教程内容，请观看文章顶部完整的视频教程。

第1部分：了解原型模式

在 MasterGo 中，我们可以放心地使用原型模式快速创建交互效果，例如 点击、悬停、按下、拖拽、延时 等触发方式，在 容器与容器、容器与图层、图层与图层 间创建交互流程，并进行演示。

点击界面顶部（ 快捷键 Option + 9 ）进入 MasterGo 原型模式。

1. 当画布中无任何对象被选中时，右侧边栏展示的为之前的 设置面板，即针对当前页面交互模式的通用设置
2. 选中对象后，右侧边栏展示的为之前的 属性面板，即针对选中对象相关的交互属性

设置 是对当前页面内所有交互原型和流程的设置，我们可以在 设置面板 中进行以下操作：

1. 选择「演示背景色」，设置界面和设备模型后画布的背景色
2. 选择「设备」，设置模拟真实设备的模型
3. 查看「预览」，展示已设置的「演示背景色」和「机型」
4. 查看「流程」，展示该页面所有流程的列表，并且可以对列表中的每一个「流程」进行具体操作

此外，我们可以在 属性面板 中进行以下操作：

1. 为一级容器添加「流程起始点」，创建流程。
2. 添加「交互」，容器以及容器内任何图层都可以添加
3. 添加「溢出行为」，可以设置无溢出行为、水平、垂直、水平和垂直方向的滚动效果
4. 选中一个交互对象后，右侧边栏会自动切换到相对应的交互属性。当没有任何容器或容器内图层被选中时，则停留在「设置」

第2部分：如何制作原型

流程 指在一个页面内，针对 容器 / 图层 的连接。一个动画从开始到结束就是一个流程。

每个页面可以创建多个流程，每个容器可以在多个流程内，但是 每个流程只能有一个起始页。

• 创建流程：在原型模式下，选中目标页面，点击 属性面板 流程栏 中的「+」图标，即可创建流程，双击可以重命名
• 删除流程：在原型模式下，点击 属性面板 流程栏 中的「-」图标，可以删除流程

流程备注：在原型模式下，点击右侧边栏，选中 流程起始页，点击流程栏中的 备注 图标，可以给该流程添加 文本备注，并在演示时直接展示，相当于撰写交互说明。

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

特别提示：

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

添加交互：在原型模式下，触发对象与目标图层连接成功后，可以在界面右侧 属性面板 旁边的 交互设置窗口 中设置 触发、动作、目标、动画、效果。

删除交互：选中 触发标识 或 连接器，点击 删除 即可。

以上就是本集视频中关于 原型模式 的介绍，在下节课中，我们将为大家讲解 MasterGo 中如何 演示原型，我们下集教程见～