动手制作第一个原型

当你在电脑上已经安装并打开了ProtoPie，也就意味着你已经准备好制作第一个原型了。

 

本文将带你探索如何将先前的设计导入到ProtoPie中、创建第一个交互、测试你的作品、以及将你的第一个原型作品共享给他人。

 

要创建贴近产品的真实原型，必须先理解ProtoPie独一无二的概念模型。这一概念模型是作为ProtoPie的根基和支柱存在的，在ProtoPie中创建的每一个交互都可以归结到这个模型中。

 

 

1. 导入设计

使用相应的ProtoPie插件从Figma、Sketch或Adobe XD中将设计导入到ProtoPie中。

导入Figma、Sketch以及Adobe XD的画板作为ProtoPie中的场景，并维持其中各对象原有的图层层次组织结构、位置和限制约束等。

 

 

2. 创建第一个交互

要创建贴近产品的第一个真实交互，必须先理解ProtoPie独一无二的概念模型。在理解这一模型后，只需要将正确的片段组合起来即可创建出第一个交互。

 

了解概念模型

这一概念模型是作为ProtoPie的根基和支柱存在的。ProtoPie的概念模型是基于现实世界中对象的移动运行方式进行抽象的。

 

要创建一个原型，就需要先创建其交互；而要创建其交互，则应先把涉及的对象、一个触发动作、一个或多个反应动作关联在一起。

对象指的是上述构成要素中会以某种方式受到影响的任意类型的图层。触发动作或反应动作都可以使对象受到影响。触发动作是可以触发一个或多个反应动作的动作行为；而反应动作是受触发动作所触发从而发生变化的动作行为。

受元素周期表的启发，ProtoPie也创造了其自有的“交互周期表”，这个表由两个分组构成：触发动作和反应动作。每个触发动作和反应动作都有其唯一的功能和属性。

 

由此从交互周期表中就可以根据需要选取各类触发动作和反应动作。在ProtoPie中制作原型时，将触发动作和反应动作相互搭配使用，使交互行为可以被贯穿起来，即可创造出你所能想到的任意形式的交互。

 

 

当然，你也可以创建更为复杂的交互。可以制作出类似下方列举的交互：

 

• 在一个交互中具有多个反应动作。
• 在一个交互中将触发动作和反应动作分别赋予不同的两个图层。
• 控制每个反应动作的持续时间和响应延迟。
• 使用表达式动态控制图层。

 

 

3. 测试制作好的原型

在预览窗口中可以实时查看到正在制作的交互动作，以助及时发现问题并测试效果。

 

在默认情况下，预览窗口会随着图层和交互的改变而自动更新。

 

如果想在打开ProtoPie Studio或在切换原型时默认隐藏预览窗，可以在偏好设置菜单中设置预览窗为关闭状态。