logo
帮助文档/原型功能/原型功能指南

原型功能指南

Motiff 妙多支持使用原型功能创建交互流程,从而模拟用户与产品的真实交互过程。

在以下场景中,原型功能发挥了重要的作用:

  • 预览用户的交互流程。
  • 向其他人分享你的设计创意,在原型验证后快速迭代你的想法。
  • 通过原型演示从协作方获得直接的反馈。
  • 使用高保真的交互原型进行用户测试。

Tip:你可以使用快捷键 ⇧ Shift + E 快速切换「设计面板」和「原型面板」。

原型交互流程

原型既可以模拟用户在 app 或网页中的整个交互流程 ,也可以模拟特定部分的交互体验。

创建流程

一个流程由流程起点、交互连线和流程终点构成。你可以在同一个页面创建多个流程。例如,一个音乐 app 原型中可能包括了注册登录、播放音乐、搜索歌曲等不同的流程。

流程起点

当你在两个容器之间添加交互连线时,Motiff 妙多会创建一个流程起点。

你还可以通过以下两种的方式添加流程起点:

  • 选中起点容器,在右边栏切换至原型面板 ,点击「流程起点」模块中的 '16_Common_Add.svg'
  • 右键点击起点容器,选择「添加起点」。

'流程起点.png'

一个容器可以被添加到多个流程中,但是每个最外层容器只有一个流程起点。 最外层容器的子容器可以和其他多个流程相连接。例如,同一个最外层容器内的「登录」和「注册」按钮可以连接到不同最外层容器以各自模拟对应流程。

当首次在两个容器之间添加交互连线时,Motiff 妙多将默认为第一个容器添加流程起点。

交互连线

交互连线是交互流程的载体,是起点与终点之间的蓝色连接线。

'交互连线.png'

你可以通过以下方式在图层之间创建交互连线:

  1. 1.

    在右边栏切换至原型面板。

  2. 2.

    选中一个图层作为交互热区。

  3. 3.

    你可以通过下列方式创建交互:

    a. 光标悬浮在图层上,点击并拖动 '16_Common_Add.svg' 连接到目标图层。

    b. 在原型面板的交互模块,点击 '16_Common_Add.svg' 添加交互。

在原型设计中,你可以为多个图层添加指向同一个目标容器的交互连线。你只需要在画布上多选图层后,点击并拖动 '16_Common_Add.svg' 将连线连接到目标图层。

设置交互

当你创建了一个交互后,可以在交互设置面板中设置下列交互属性。

'设置交互.png'

  1. 1.触发:决定了启动该交互的动作类型,比如鼠标点击或触摸手势。
  2. 2.动作:定义了用户和热区交互时发生的事件类型,包括前往另一个容器,打开一个浮层,滚动和溢出等。
  3. 3.目标:定义了交互最终指向的图层。「目标」可以是原型中的另一个屏幕,也可以是当前屏幕中的浮层。当动作类型为「返回」时,交互没有目标图层,而是在触发后自动返回至上一个容器。
  4. 4.动画设置:定义了原型从一个容器切换到另一个的视觉效果。你可以通过控制动画的类型、速度和方向以实现个性化调节。
  5. 5.缓动动画:缓动决定了动画从起始帧过渡到结束帧时的切换加速度。通过添加预设或自定义的缓动动画,你可以为原型设计营造出流畅的动态效果、让原型更加贴近真实体验。

查看流程

当完成原型设计后,你可以通过以下步骤查看当前页面的所有流程。

  1. 1.点击画布区空白区域取消选中所有图层。
  2. 2.在右边栏点击并切换至原型面板。
  3. 3.在流程模块查看所有的流程起点列表。
  4. 4.光标悬浮至目标流程名称,点击 '16_Panel_Target.svg' 快速定位至流程起点所在的最外层容器。

分享流程

当需要验证你的设计时,你可以分享整个原型或者复制指定流程的链接。

复制流程链接

你可以通过以下步骤在文件中复制流程链接:

  1. 1.选中有流程起点的容器。
  2. 2.在右边栏切换至原型面板。
  3. 3.将光标悬停至「流程起点」模块。
  4. 4.点击 '24_Toolbar_Link.svg' 复制链接。

你可以通过以下步骤在演示视图下复制流程链接:

  1. 1.从左边栏选择你想共享的流程。
  2. 2.点击工具栏中的「分享原型」。
  3. 3.点击 '24_Toolbar_Link.svg'复制链接。

调整原型设置

你可以在右边栏的原型面板中设置原型设备和背景,查看和管理当前页面上的原型流程。

'调整原型设置.png'

  1. 1.设备:你可以自定义预览视图中使用的设备类型、方向和型号。
  2. 2.预览:你可以预览你的原型,从而使原型的呈现更加真实。
  3. 3.背景:你可以设置在预览视图中播放原型时的背景颜色。
  4. 4.流程:你可以查看和管理当前页面上的原型流程。

原型演示

原型模拟了用户与设计交互的过程。你可以通过「演示模式」在进行开发前对设计进行查看和测试,查看其交互的实际效果。

点击了解「原型演示」相关功能。