protopie基础
登录ProtoPie Studio,可以查看近原型(Pie)、创建新原型、打开本地的原型或云端的Pie 文件。
ProtoPie Studio 的用户界面简单直观。本页面提供关键功能信息点。
熟悉该界面了吗?制作第一个原型!
我的主页
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/52f4f07bfd18bd7fedbe3dae1ab8869211b1f0ba-2000x1178.png/dashboard.png)
登录ProtoPie Studio,可以查看近原型(Pie)、创建新原型、打开本地的原型或云端的Pie 文件。
- 近期的Pie:在“近期打开的Pie文件”打开近期访问过的原型,访问正在进行的项目。
- 删除:如果选择此选项,将永久从计算机或云端删除Pie 文件。
- 从近期中删除:如果希望从近期查看列表删除Pie 文件,请选择“从近期中删除”选项。
- 打开Pie:ProtoPie Studio 提供多种打开原型的方式。你可以直接从ProtoPie Cloud 打开原型,或访问保存在计算机上的本地.pie文件。在ProtoPie Studio中了解更多关于在ProtoPie Studio中打开云端Pie的信息。
- 新建Pie文件:要开始创建新的Pie,请选择两个可用的“新建Pie”按钮中的一个。您还可以在制作第一个原型中找到更多信息。
学习资源
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/1db787e8b026820b09573d6048ae3c57e0aae706-2000x1165.png/learn.png)
在ProtoPie Studio “学习资源”中,可以找到有关ProtoPie 的学习材料,帮你开启原型设计之旅,包括:
- 交互范例:直接在ProtoPie中打开交互模板。查看并使用交互原型。
- 交互原型作品集:从其他ProtoPie用户创建的原型中获取灵感。
- 小白快速上手案例(英文):5-7分钟的基本功能教程,成为ProtoPie 专家。
- 制作技巧和教程:更加全面的实用教程。
- 交流活动:ProtoPie的实时活动。从ProtoPie的专家和客户那里学习实践和行业趋势。
其他帮助
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/80b2d7380a4f675b5efb1110649f3e036a4cde35-2000x1162.png/support.png)
原型制作
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/a136fc17471daa56a8fbbc8884766c729b6e1fd9-4350x2400.png/understanding-the--interface.png)
1. 图层面板
在图层面板中可以找到每个场景中被有序按照层次结构组织起来的所有图层。
在图层面板中对图层进行排序、重命名、锁定、解锁、隐藏、显示等操作与在其它设计工具中的操作是一样的。
当从Figma,、Sketch或Adobe XD中导入设计到ProtoPie Studio后,图层面板将会以同样的层次组织结构显示导入后的图层。
2. 场景面板
默认情况下场景面板是不可见的。要访问场景面板,需要点击窗口左侧的场景面板图标。在场景面板中可以查看原型中所有的场景,并可以对场景进行排序,以及从场景面板中打开某个场景。
3. 画布
在画布上,可以查看到整个场景及该场景上的图层。画布每次只显示一个场景的内容。
可以使用多种方式在画布上插入不同的图层。将图层从其他设计工具中导入、直接创建图层、或手动将图层添加到画布上,均可实现这一目的。
要在画布上进行平移操作,可以按住空格键不放然后进行鼠标点击与拖动。
4. 属性面板
在属性面板中可以查看和设置属性。根据当前选择的对象,属性面板会自动切换成场景、图层、触发动作或反应动作的属性信息——这取决于你所选择的对象是什么。如果选择多个对象,则可以立即看到这些对象间共同的属性信息。
5. 交互面板
在交互面板上可以创建交互。通过添加一个触发动作并将其连接到一个或多个反应动作上即可创建交互。
交互面板以列表方式显示一个场景中所有的交互。与图层面板不同,交互面板并不以层次组织结构的方式进行显示。
6. 时间线
为反应动作的持续时间、延迟和重复提供可视化显示。时间线反映了这些与时长有关的属性,这些属性可以在属性面板中进行修改。
7. 预览窗口
可以在预览窗口中运行制作中的原型。在预览窗口中可以实时查看到正在制作的交互动作,以助及时发现问题并测试效果。
默认情况下,预览窗口会随着文件的编辑而自动实时更新。
8. 工具栏
工具栏使得对常用功能的访问更为便捷。
- 添加图层
- 改变画布尺寸
- 打开预览窗口。
- 连接装有ProtoPie Player的移动端设备
- 通过ProtoPie Cloud共享原型。
9. 组件面板
类似于场景面板,组件面板在默认情况下是不显示的。要访问组件面板,需要点击窗口左边的组件面板图标。在组件面板中可以查看本机的组件以及交互组件库。
10. 变量面板
类似于场景和组件面板,变量面板在默认情况下不可见。若要访问变量面板,请单击变量。查看整个原型或已打开场景中使用的变量。
偏好设置
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/4e21b5a95e4cb5e467c40970177936ba0a5db877-2000x1164.png/preferences.png)
通用
可以调整ProtoPie Studio的常规设置,包括语言、外观和画布背景颜色。目前,ProtoPie Studio支持英语、日语和中文。
场景
默认设备为首次创建原型时使用的设备。你可以从预设列表中选择一个默认设备,也可以自定义。在ProtoPie Studio内了解更多关于支持的设备的信息。
网络
ProtoPie Studio中的代理设置起初设置为“无代理”。
实验室
通过在实验室中启用测试版功能。如果有任何反馈,可以在ProtoPie Studio内通过填写“问题反馈”表单来提供反馈。
或者,加入中文社区并分享见解。
在整个生态系统中,首当其冲的核心组件是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)