欢迎光临散文网 会员登陆 & 注册

【ProtoPie Connect 教程】第1课 - 通过发送与接收功能实现跨屏幕交互

2022-08-18 15:56 作者:ProtoPie  | 我要投稿

引言

ProtoPie采用了“发送”和“接收”的消息传递机制来实现原型间的数据传送。可能此前你已经知道,场景与组件间也采用了发送与接收的方式进行命令或信息的双向传输;但你是否知道,原型之间也可以进行发送与接收?这一独特功能可谓是ProtoPie众多功能中的杀手锏——通过这一功能,打造多屏交互体验变得轻而易举!

Studio已经内置的相关功能

某种程度上来说,多个Pie之间交互的部分功能先前已经内置在ProtoPie Studio中了。在仅使用Studio时,两个相互独立的Pie是可以实现相互通信的,但受到如下限制:

  • Studio必须正在电脑桌面上运行。

  • 通信参与方不能超过两个Pie。

  • 只能在本机实现——即不支持云端Pie参与。

  • 只能在Pie之间通信,只单独使用Studio时不支持与物理设备进行集成。

有了ProtoPie Connect的参与,这一切日臻完美!

当ProtoPie Connect加入进来之后,这些限制不复存在。

  • 希望三个或更多的Pie之间可以相互通信吗?可以实现!

  • 希望同时使用笔记本电脑、手机以及平板电脑吗?可以实现!

  • 希望所有的Pie一次性显示在一个屏幕上吗?可以实现!

  • 希望与物理硬件进行交互吗?可以实现!

如果订阅了企业版,这些功能还可以在云端同时得以实现!

看起来不错吧?那么我们继续了解这些功能如何实现吧。


学习内容

在本教程中,我们会覆盖以下知识点:

  • 复习发送与接收的有关知识

  • 在Studio中完成一个双屏交互体验

  • 使用ProtoPie Connect添加第三块屏显内容

本教程约需30分钟完成。


发送与接收:ProtoPie通信的基石

我会从复习发送与接收开始进行讲解。可能先前你已经了解了发送与接收是如何工作的,但仍请你跟随我的步伐再熟悉一下。充分理解发送与接收功能对于构建多屏体验,以及随后的Connect使用,是十分重要的。

发送和接收是一对非常简单、很容易理解的概念。使用发送反应动作可以发出任意你所期望的消息,发出的消息中还可以有选择地附带上一些信息。然后可以在别处使用接收触发动作来监听这一消息并作出相应的反应。

例如,发送和接收的一个常见用途是将组件重置回初始状态。由于组件是自包含的(即组件内可以含有其它组件,甚至可以含有同一组件的子版),当在主场景中对子版组件使用重置反应动作时,只有外部尺寸、位置、不透明度等处于主场景中的属性值会被重置,而位于图层中的子版组件则未被自动重置。为了解决这一问题,可以将组件设置为监听一个指定命令,当接收到这一命令时,执行若干反应动作,从而将组件重置为其初始状态。

ProtoPie交互原型设计功能

渠道问题

当发送消息时,需要确保消息经由一个指定渠道进行发送,同时接收触发动作必须被配置为对同一个渠道进行监听,否则发出的消息将不会被正确接收。

 ProtoPie交互原型设计功能

下表展示了给定的发送渠道所匹配的相应接收渠道。

 ProtoPie交互原型设计功能

在下文中,我将重点介绍一个新的渠道,这一渠道是多个Pie之间得以相互通信的主要机制,这一渠道被称为“ProtoPie Studio”。

ProtoPie交互原型设计功能

从“ProtoPie Studio”这一渠道发送消息时,另一个Pie就可以“听到”这一消息并做出反应。并且,通过使用ProtoPie Connect,所发出的消息还可被中继传播到物理设备或其它Pie上,从而构建完全沉浸式软硬件交互体验。

那么,我们了解一下如何实操吧!


两个Pie的故事

我们的第一个例子将展示在没有ProtoPie Connect的参与下,两个Pie是如何进行相互通信的。我们来模拟一个智能家居体验的场景——使用一台平板设备作为控制面板来显示室内平面图,然后使用一个手机App来模拟灯光亮度控制行为。

ProtoPie交互原型设计功能

教程资源Pie

在这个教程中要用到以下两个Pie,需要把它们下载下来并在ProtoPie Studio中打开:

  • 平板设备App:https://cloud.protopie.io/p/bb4694a41c

  • 手机App:https://cloud.protopie.io/p/b3f1e991eb

教程

请浏览以下视频教程并跟随视频内容进行操作。


万事俱备,只欠Connect!

到目前为止我们仍然只能在Studio中运行这一交互体验。但如果我们将这两个Pie加入到Connect中,就可以用更丰富的方式来预览这一交互体验,同时还可以将更多的Pie原型添加到这一交互体验中。在下面的视频演示中,我们会继续使用上面已经做好的Pie原型,同时,在视频内容中,我们还会将第三个Pie原型添加进去。第三个Pie原型可以在这里下载到:

  • 桌面App:https://cloud.protopie.io/p/25f850acb1

请浏览以下视频教程并跟随视频内容进行操作。


第1课结束了,但这些仅仅是冰山一角,请继续了解如何使用ProtoPie Connect将Pie原型与各种事物进行集成吧!

【ProtoPie Connect 教程】第1课 - 通过发送与接收功能实现跨屏幕交互的评论 (共 条)

分享到微博请遵守国家法律