logo
帮助文档/原型功能/原型演示

原型演示

原型模拟了用户与设计交互的过程,使你可以在进行开发前对设计进行查看和测试。Motiff 妙多支持「演示原型」功能以查看交互的实际效果。

原型演示准备

画布中的容器及其交互连线的设置影响着原型的演示效果。

  • 原型演示内容需要在容器内。
  • 如果存在原型交互连线,Motiff 妙多在演示原型时只会显示有交互连线的容器。
  • 你可以通过设置流程起点来确定演示的起始点。Motiff 妙多支持同时设置多个流程起点。
  • 在演示模式中你可以在原型设置中选择原型的设备类型、起点和背景颜色。

原型演示

进入演示模式

你可以通过以下两种方式进入演示模式:

  • 在顶部工具栏右侧点击演示按钮 '24_Toolbar_Present.svg'
  • 使用快捷键:
    • macOS: ⌘ Command + ⌥ Option + Return
    • Windows:Ctrl + Alt + Enter

'进入演示模式.png'

在演示模式中,你可以:

  • 点击 '24_Toolbar_SidebarOn.svg' 显示或隐藏左边栏。
  • 点击 '24_Toolbar_Comment (2).svg' 进入评论模式并对原型添加评论。
  • 具有「可编辑」权限的用户可以点击文件名右侧的 '16_Common_ArrowDown.svg' ,进入编辑器并选中对应的容器图层。
  • 点击「分享原型」,对原型进行分享。
  • 点击「选项」,设置演示模式选项。
  • 点击 '16_Panel_Scale.svg' ,进入或退出全屏模式。
  • 点击左边栏的流程,查看并选择流程。右键点击流程所在行,在弹出的上下文菜单中选择「复制流程链接」,对原型链接进行复制。
  • 点击底部工具栏的<>切换容器。
  • 点击 '16_Panel_Reset.svg' 或按下快捷键 R 返回到当前流程的起点。如果没有流程,将返回到画布上的上一个容器。

演示模式选项

在选项菜单中,你可以进行以下设置:

'演示模式选项.png'

缩放方式

你可以选择:

  • 真实尺寸(100%):根据容器的真实尺寸显示原型,这可能会导致原型的部分区域被裁剪。
  • 适应屏幕:缩放原型至适合查看者的屏幕尺寸。
  • 适应宽度:缩放原型至宽度适合查看者的屏幕尺寸。该项仅对未设置原型设备的用户显示。
  • 充满屏幕:缩放原型,使其在任何屏幕尺寸或分辨率下都填充整个显示屏。

开启键盘快捷键

勾选该选项后,用户可以使用以下快捷键:

  • C:打开评论面板。
  • F:进入全屏。
  • R:重启原型。

勾选该选项后,用户可以使用键盘上的 <> 在浏览原型时切换容器。

取消勾选该选项后,用户只能通过点击热区或点击屏幕底部的 <> 切换容器。

显示热区提示

勾选该选项后,当点击非热区区域时(画布区或原型内的非交互区域),视图中会出现一个蓝色的指示框指示当前最外层容器的可交互子图层区域(最外层容器不指示),出现 1s 后消失。

显示左边栏

当前页有至少一个流程时,你可以点击该选项显示或隐藏左边栏。

当显示左边栏时,原型的共享链接将会用 &showProtoSidebar=1 标记。

显示操作界面

你可以选择在演示视图中显示或隐藏操作界面。隐藏操作界面可以帮助你在测试原型时避免视觉干扰。

当勾选该选项隐藏操作界面后,Motiff 妙多将:

  • 隐藏当前视图上的顶部工具栏、底部工具栏和左边栏。
  • 画布区底部中间出现「按下 ⌘ \ 再次显示操作界面」的提示。
  • 原型的共享链接将更新为 &hideUI=1

切换容器顺序

演示原型时,你可以按下 Space,或 N 导航至下一个容器,或按下 导航至上一个容器。默认情况下启用此设置。

有流程起点的原型

  • 按下 切换到上一个容器(流程起点禁用)。
  • 按下 切换到下一个容器(流程终点禁用)。
  • 当一个容器与多个最外层容器存在有效的交互连线时,Motiff 妙多将按照先横向再纵向的顺序切换容器,直到切换到流程终点为止。如果同一个位置符合条件的容器有多个,Motiff 妙多将按照 Z 轴的层级顺序由上至下切换容器。

无流程起点的原型

如果进入演示模式前没有选中任何最外层容器作为流程起点,Motiff 妙多将以第一个流程的流程起点作为起点进行演示。

Motiff 妙多会根据画布中的坐标对容器进行排序,按照 x 轴从左到右、y 轴从上到下的顺序进行切换。