常见交互
如何在两台设备上制作一个可交流的应用原型
是的！ProtoPie可以做到。学习如何让两个不同设备上的原型相互通信。
Joana Marques Pereira, Designer
January 2, 2024
在当今数字化的环境中，应用内消息应用已成为现代通信的重要组成部分，而对于这类体验的高保真原型对于创建、测试和完善无缝且引人入胜的用户交互至关重要。
在本教程中，我将向你展示如何在两个设备上创建应用内消息体验。我们将以 Snapchat 中的消息应用为例。
观看下面的演示视频，了解我们将在本教程中创建的内容。
如果你是 ProtoPie 的新手，本指南将帮助你利用 ProtoPie 的强大功能，深入探索跨设备体验的世界。
注意：出于本文的目的，我们并没有完全制作 Snapchat 应用的原型。相反，我们的重点是在两个设备之间原型制作消息互动。在你自己的项目中，你可能也想突出显示某个特定功能。因此，关于时间和你想向利益相关者展示的内容，管理期望是至关重要的。
让我们开始制作原型吧！ 🍴
1.将你的 Snapchat UI 设计导出到 ProtoPie 中
将设计从 Figma 导出到 ProtoPie
在 ProtoPie Studio 中，创建一个新的 Pie。在深入原型制作过程之前，我们已经在 Figma 社区 的 ProtoPie 页面上提供了这些屏幕。你可以使用自己的账户打开 Figma 文件以获取编辑权限。之后，你就可以直接将设计从 Figma 导出到 ProtoPie 开始制作原型。
如果你还没有下载 ProtoPie 插件，你可以在你喜欢的设计工具中搜索，或点击下面的按钮找到它。
接下来，选择屏幕并打开 ProtoPie 插件，点击“Export Screens”将你的设计移动到 ProtoPie。了解有关如何导出设计的更多信息 ，或查看此视频以了解如何将设计从 Figma 导出到 ProtoPie 。
对于这个体验，我们将建立两个 Pie - 一个用于发送者，另一个用于接收者。两者都将能够互发消息。
屏幕设计好了，现在我们可以转到 ProtoPie Studio。让我们从第一个 Pie（原型）开始 - 选择两个屏幕，打开插件，然后点击导出。
2. 开始创建第一个原型文件
开始原型制作
我们将从第一个 Pie 开始，这将是发送消息的 Pie。体验流程将从个人资料页面开始，用户将点击消息图标，这将打开消息屏幕。
单击触发动作
在 ProtoPie 中，触发动作是一个 单击，反应在这种情况下将是跳转到另一个屏幕，即我们具有消息 UI 的屏幕。
跳转反应
跳转反应允许不同类型的过渡；在这种情况下，我们想要遵循 Snapchat 中发生的类似交互，因此我们选择了从左到右的滑动。
滑出切换
你已经完成了第一屏！
第一页的原型
3.在第二个屏幕上创建消息互动（发送消息）
第二屏幕
第二个屏幕。这是消息互动将发生的地方。
在前一个场景的跳转之后，我们添加了一个启动触发器 - 一旦场景加载，此触发器将激活你附加到它的任何响应。
对于这个场景，我们想在场景加载后添加一些过渡效果，因此我们使用了移动和光标反应 。
移动与光标反应
确保充分利用新设计的缓动选项，甚至可以创建自己的自定义预设！
定制预先设置
在移动反应动画设置完成后，下一个反应就将是光标
如果你查看 Snapchat 消息的工作方式，一旦你在第一个屏幕上点击消息图标并转到第二个屏幕，文本字段就已准备好发送消息，输入和手机键盘也已激活。这就是我们使用 Focus 来实现类似结果的原因：
光标反应
输入图层
注意：为了使光标生效，你需要在文本字段组内添加一个输入层。转到 文本→ 输入并绘制一个与设计大小相匹配的框。调整设计以匹配 Snapchat 文本字段设计。
光标预览效果
接下来呢？现在我们要发送一条消息到另一部手机，以便它可以接收到。首先，我们应该知道消息是什么，换句话说，输入框里有什么，为此我将使用一个名为“监听”的功能。监听将监视你选择的对象属性的更改，任何你放在其下的反应都将在该属性更改时触发。
这里我们的 监听触发动作将监视输入层中的文本。
监听触发动作
为此，我们将使用一个表达式来赋值一个文本变量。为什么要这样做？你键入的文本将由变量“存储”。这意味着以后，当你发送消息时，将发送由变量“存储”的文本。
在 ProtoPie Studio 的左下角，通过点击“+”符号旁边的“变量”，确保选择“文本”类型，为此场景创建一个变量。在监听触发动作下，添加一个“赋值”响应到你新创建的变量。使用公式
'Input 1'. text。
赋值反应
这里可以预览它将如何工作
消息应用预览
文本现在准备好发送了。但是，只有在你写完消息后点击键盘上的“发送”按钮后，它才会被发送。让我们为此使用“回车”触发动作。
在键盘上点击“发送”将触发以下操作：
发送与接收的pie文件
“发送反应”将稍后发送消息，以便在另一设备上接收。
- 屏幕上将显示一条消息的文本（我们将使用“默认文本”响应）。
- 与文本一起，还会显示一些 UI。我们将使用简单的“透明度”触发动作来实现与真实应用程序相同的效果。
- 另一个“光标”触发动作使输入字段再次可编辑。
- 一个“重置”触发动作用于删除先前在输入字段中编写的文本。
还创建了另一个变量“Text 2”以接收来自第二个 Pie 的文本。
默认文本反应
为了完成对此 Pie 的编辑，我们将添加一个“默认文本”响应，使来自 Pie 2 的将要发送的文本在 Pie 1 中可见，并设置为 100% 的“透明度”响应。
第 4 步：转到第二个 Pie（接收消息） 第二个 Pie 遵循与第一个 Pie 的先前“屏幕 2”相同的原理。
在 ProtoPie Studio 中，创建一个新的 Pie。像之前的 Pie 一样，从 Figma 中导入名为“Adri”的屏幕。
同样，“开始”触发器将影响 UI，将底部工作表移动以适应键盘并设置输入以准备好输入文本。
你需要再次创建 2 个变量：“文本 1”和“文本 2”以匹配第一个 Pie。
“监听”触发器将使用变量“文本 2”工作，因为它将存储来自 Pie 2 发送到 Pie 1 的信息，而变量“文本 1”则执行相反的操作。如果你按照此 Pie 的其余触发器和响应，你会注意到我们执行了与上一个相同的步骤。
重要提示：使用“发送”和“接收”将使用消息。这些消息必须与 Pie 1 中的消息匹配。
Pie 1 发送，Pie 2 接收- 消息“SENT”。频道：ProtoPie Studio
Pie 2 发送，Pie 1 接收 - 消息“SENT 2”。频道：ProtoPie Studio
4.使用 ProtoPie Connect 进行跨设备通信
现在，是时候测试跨设备体验了。为此，你需要使用 ProtoPie Connect 。它的外观如下：
ProtoPie Connect
需要将这两个原型保存在 ProtoPie Cloud 中，并在不使用 ProtoPie Enterprise 的情况下进行下载。然后，上传本地原型以使它们能够相互“通信”。
当两个 Pie 都上传后，可以使用设备图标打开预览，或者在手机上使用 ProtoPie Player 应用中的 QR 二维码进行扫描。在每台设备上都需要扫描 QR二维码。
就是这样。已经成功原型化了一个即时通讯应用。做得好！
请与我们分享你的创作，并不要忘记使用标签 #MadeWithProtoPie，在我们的 Gallery Page 上亮相，并有机会成为月度之星。
通过 ProtoPie 成为原型制作专家
希望你在原型制作这一体验中玩得开心。这里学到的交互是进一步探索的良好基础。