protopie基础
在整个生态系统中,首当其冲的核心组件是ProtoPie Studio——在MacOS和Windows中进行实际原型创作的工具。
要想充分用好ProtoPie,就需要了解构成ProtoPie生态系统的各个部分。
在整个生态系统中,首当其冲的核心组件是ProtoPie Studio——在MacOS和Windows中进行实际原型创作的工具。其次ProtoPie Player可以在iOS、iPadOS以及安卓系统上运行,用以测试原型在移动设备在智能手机或平板上的表现。原型还可以通过ProtoPie Cloud分享给各个干系人。
ProtoPie Studio
用来制作真实的交互原型。ProtoPie Studio是一个桌面端应用程序,可在MacOS和Windows上使用。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/9b60a974e391b705fe8af84e85699187ec2a621f-3980x2422.jpg/studio.jpg)
ProtoPie Player
用来在智能设备(智能手机和平板)中测试原型。ProtoPie Player可在iOS、iPadOS以及安卓设备上使用。
ProtoPie Cloud
用来通过URL将原型和交互组件共享给其他项目干系人。查看交互效果的同时他们还可以下载各个历史版本。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/67651409e4c21cf67fed99e46c1ed2895dcd4c11-1466x914.png/cloud.png)
团队协作
团队协作功能仅在团队协作版和企业版中提供。可以共享原型、创建团队组件库以及生成交互录制片段,使得团队和项目干系人之间均可高效协作。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/b835a6ea187b2ce417d14ace682c86a4dd549431-1474x916.png/projects.png)
ProtoPie企业版
ProtoPie企业版提供了一个安全且可扩展的环境,以便于进行贯穿整个组织的商务领域协作。
ProtoPie Connect
ProtoPie Connect作为行业解决方案中的一部分,是ProtoPie Studio的一个扩展应用程序。当原型需要跨多个设备、显示器、硬件同时运行时,ProtoPie Connect充当桥梁一样的角色使其它设备之间得以相互连接并维持运行。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/777fa1ca7431f356b620f7824409a7796687fa00-1475x918.png/connect.png)
ProtoPie是将交互设计创意转变为高保真原型的简单的工具。ProtoPie可以创造全新的数字体验,并在智能手机和电脑,以及电视和汽车控制屏幕等真实的屏幕里进行测试。它使交互设计成为工作流程的中心。
ProtoPie是将交互设计创意转变为高保真原型的简单的工具。ProtoPie可以创造全新的数字体验,并在智能手机和电脑,以及电视和汽车控制屏幕等真实的屏幕里进行测试。它使交互设计成为工作流程的中心。
ProtoPie Studio是制作交互原型的程序,支持MacOS和Windows。ProtoPie Player用于在iOS和安卓的手机或平板电脑上测试原型。ProtoPie云端使原型共享变得更简单跨界。如果想要实现软硬件交互等更丰富的交互体验,请将原型添加到ProtoPie Connect!
为什么选择ProtoPie?
使用ProtoPie可以产出任何从微交互到复杂的多屏幕交互。因此,ProtoPie是设计流程中必不可少的一部分。
对每一位团队成员而言
- 身临其境沉浸真实体验。真正的体验、感受和互动,才能使创意会产生更大的影响力。
- 在真实的屏幕上测试原型。不仅是智能手机、平板电脑和电脑,还有电视屏幕、自助终端机触摸屏、智能手表等。了解更多关于ProtoPie Player、ProtoPie云端和ProtoPie Connect的信息。
- 统一思想消除理解分歧。有了近乎实际产品的交互原型,可以防止设计交付中的沟通失误。
- 兵马未动即获真知灼见。从原型阶段即可进行用户调查以便发掘用户见解,为用户创造更好的产品。
- 快速验证提升产出效能。提前介入用户使用评价后,产品迭代可以更为高频,从而产品的产出效能得以提高,为迅速面市提供了可能。
对设计团队主导者而言
- 释放无限创意。让设计创意自由伸展,从而延伸更多好创意。利用ProtoPie强大的功能,实现你所想的一切。
- 零代码,高保真的交互原型设计。直观地创建真实的交互动效。
- 快速验证创意。快速验证假设和想法。
- 更快地说服他人。相比静态的模型,使用近似真实产品的可交互的原型更容易获得他人的认同。
- 与你所惯用的设计工具一起协同。ProtoPie可以无缝衔接设计工具,例如Figma, Sketch, 和 Adobe XD。
- 延伸原型的使用范畴。优秀的原型将作为一个出发点,为设计师、研究人员和工程师提供工作的基石。
对其他设计师而言
- 避免从头开始。组件和团队组件库帮助团队成员进行高效协作。
- 更好地协作。在原型存储在同一个团队空间,即时获得反馈,并建立可重复使用的组件库。
对于研究人员
- 在用户测试期间获得更有意义的见解。原型越逼真,反馈就越有价值。
对于工程师和开发人员
- 便于设计交付。可以在交互开发文档中获取所需的交互数值。
如同说话一样的表达方式
制作原型时,对原型的表达能不能跟说话一样自然呢?ProtoPie就可以做到这一点。无需学习和适应新的思维模式,仅需使用你每天都在用到的思维方式:自然语言,即可在ProtoPie中以遣词造句解释事物的方式来创建交互。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/96599597c8bd459b14ed949791956ec22e9781ee-1450x859.png/prototype-the-way-you-speak.png)
易于上手
无论是第一次还是第一千次面对交互制作,无论是制作简单的交互抑或复杂的交互,其制作方式都是一样的。如同在自然语言中进行遣词造句一般,在ProtoPie中亦是如此完成整个过程。你可以通过逻辑判断等高级功能创建出你所想象的任何形式的交互。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/bb0da22eaee7c5984938b0f68cfdf91537bc15e6-1450x726.png/easy-to-start.png)
要创建贴近产品的真实原型,必须先理解ProtoPie独一无二的概念模型。这一概念模型是作为ProtoPie的根基和支柱存在的,在ProtoPie中创建的每一个交互都可以归结到这个模型中。
当你在电脑上已经安装并打开了ProtoPie,也就意味着你已经准备好制作第一个原型了。
本文将带你探索如何将先前的设计导入到ProtoPie中、创建第一个交互、测试你的作品、以及将你的第一个原型作品共享给他人。
要创建贴近产品的真实原型,必须先理解ProtoPie独一无二的概念模型。这一概念模型是作为ProtoPie的根基和支柱存在的,在ProtoPie中创建的每一个交互都可以归结到这个模型中。
1. 导入设计
使用相应的ProtoPie插件从Figma、Sketch或Adobe XD中将设计导入到ProtoPie中。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/fb810beecd7f9004de31e9b5c5dfdbc142ee06f5-1270x802.png/Import.png)
导入Figma、Sketch以及Adobe XD的画板作为ProtoPie中的场景,并维持其中各对象原有的图层层次组织结构、位置和限制约束等。
2. 创建第一个交互
要创建贴近产品的第一个真实交互,必须先理解ProtoPie独一无二的概念模型。在理解这一模型后,只需要将正确的片段组合起来即可创建出第一个交互。
了解概念模型
这一概念模型是作为ProtoPie的根基和支柱存在的。ProtoPie的概念模型是基于现实世界中对象的移动运行方式进行抽象的。
要创建一个原型,就需要先创建其交互;而要创建其交互,则应先把涉及的对象、一个触发动作、一个或多个反应动作关联在一起。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/2aa10b48c53b62efd8f719339d13c18e6249b4bd-1450x700.gif/cloud_light_interaction_conceptual_model.gif)
对象指的是上述构成要素中会以某种方式受到影响的任意类型的图层。触发动作或反应动作都可以使对象受到影响。触发动作是可以触发一个或多个反应动作的动作行为;而反应动作是受触发动作所触发从而发生变化的动作行为。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/7669d93ba9eea496a2e7f2c82903519b5b08269a-1920x1080.png/interaction_table_protopie_triggers_responses.png)
受元素周期表的启发,ProtoPie也创造了其自有的“交互周期表”,这个表由两个分组构成:触发动作和反应动作。每个触发动作和反应动作都有其唯一的功能和属性。
由此从交互周期表中就可以根据需要选取各类触发动作和反应动作。在ProtoPie中制作原型时,将触发动作和反应动作相互搭配使用,使交互行为可以被贯穿起来,即可创造出你所能想到的任意形式的交互。
了解更多关于触发动作和反应动作的知识。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/1ddd8ba841cef96a8665a6c218d869267d379596-1076x500.gif/trigger_tap.gif)

观察这个示例,一旦点击绿色方块,这个方块就会移动到右侧。这个行为可以归结为一个包含了点击触发动作和移动反应动作的交互,这两个动作都被赋给这个绿色方块图层。
当然,你也可以创建更为复杂的交互。可以制作出类似下方列举的交互:
- 在一个交互中具有多个反应动作。
- 在一个交互中将触发动作和反应动作分别赋予不同的两个图层。
- 控制每个反应动作的持续时间和响应延迟。
- 使用表达式动态控制图层。
3. 测试制作好的原型
在预览窗口中可以实时查看到正在制作的交互动作,以助及时发现问题并测试效果。
在默认情况下,预览窗口会随着图层和交互的改变而自动更新。
如果想在打开ProtoPie Studio或在切换原型时默认隐藏预览窗,可以在偏好设置菜单中设置预览窗为关闭状态。
另一种查看方式是使用ProtoPie Player,这是一个免费的、辅助ProtoPie Studio进行协同工作的应用程序。使用ProtoPie Player可以在iOS、iPadOS以及安卓设备上方便地查看、体验、测试原型。
4. 共享第一个原型
将原型上传到云端,然后将原型的分享链接发送给项目干系人。根据原型尺寸,项目干系人可有选择的在桌面端浏览器、移动端浏览器或ProtoPie Player中运行该原型。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/7afa6b7f5c0e399a3295dba9ddb755785aabcb7c-1450x826.gif/uploading-prototypes.gif)
项目干系人可在云端使用原型进行可用性测试,并可将原型共享给其他项目干系人。如果所处理的工作内容涉及敏感信息,还可以为原型启用密码保护。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/8591f2c16006077f5ebfd6c5e0aa66226d3ebc46-725x427.png/protopie_cloud_pie_page.png)