在当今的数字化环境中，应用内消息应用已成为现代通信的重要组成部分，而针对此类体验的高保真原型设计对于创建、测试和完善流畅且引人入胜的用户交互至关重要。
在本教程中，我将向你展示如何通过两台设备创建一个应用内消息体验。我们将以 Snapchat 的应用内消息功能为例。
请查看下面的演示视频，了解我们将在本教程中创建的内容。
完成的 Pie 文件（发送端）完成的 Pie 文件（接收端）
概览
让我们开始做原型吧
步骤 1：准备 Snapchat UI 并将你的设计导出到 ProtoPie
步骤 2：开始制作第一个 Pie 原型
步骤 3：创建消息交互
步骤 4：继续制作第二个 Pie（接收消息）
步骤 5：使用 ProtoPie Connect 实现跨设备通信
使用 ProtoPie 成为原型设计高手
如果你是 ProtoPie 新手，本指南将帮助你借助 ProtoPie 的强大能力进入跨设备体验的世界。
注意：出于本文目的，我们并未完整原型化 Snapchat 应用。相反，我们重点关注的是从一台设备到另一台设备的消息交互原型。在你自己的项目中，你也可以突出某个特定功能。因此，明确时间预期以及你希望向利益相关者展示的具体内容非常关键。
让我们开始做原型吧！🍴
步骤 1：将你的 Snapchat UI 设计导出到 ProtoPie
将你的设计从 Figma 导出到 ProtoPie。
在 ProtoPie Studio 中，创建一个 New Pie。在深入原型制作流程之前，我们已在 Figma Community 的 ProtoPie 页面提供了这些界面。你可以使用自己的账号打开该 Figma 文件以获得编辑权限。之后，你就可以直接从 Figma 将设计导出到 ProtoPie 开始做原型。
如果你还没有下载 ProtoPie 插件，你可以在你常用的设计工具中搜索，或点击下方按钮获取。
接下来，选择这些界面并打开 ProtoPie 插件——点击 Export Screens 将你的设计导入 ProtoPie。更多信息请查看如何导出你的设计，或观看这段视频
在这个体验中，我们将构建两个 Pie——一个用于发送方，另一个用于接收方。两者都可以互相发送消息。
当我们的界面设计完成并准备就绪后，就可以进入 ProtoPie Studio 了。让我们从第一个 Pie（原型）开始——选择两个界面，打开插件，然后点击 Export。
步骤 2：开始制作第一个 Pie 原型
开始制作原型。
我们将从第一个 Pie 开始，它是发送消息的 Pie。体验流程将从个人资料页面开始，用户点击消息图标后，会打开消息界面。
Tap 触发器。
用 ProtoPie 的术语来说，*trigger* 是一个 Tap，而在这个场景中，response 将是一个 **Jump ** 到另一个包含消息 UI 的界面。
Jump 响应。
Jump 响应支持不同类型的过渡；在这个案例中，我们希望遵循与 Snapchat 类似的交互方式，因此我们使用 Slide Out，从左到右。
Slide Out 过渡。
第一个界面完成了！
原型第一个界面完成。
步骤 3：在第二个界面创建消息交互（发送消息）
第二个界面。
接下来是第二个界面。消息交互将在这里进行。
在从上一场景 Jump 过来后，我们添加了一个 Start 触发器——当场景加载时，该触发器会激活你附加在其上的所有响应。
对于这个场景，我们希望在加载后立刻加入一些过渡效果，因此我们同时使用了 Move 和 Focus 响应。
Move 和 Focus 响应。
务必利用全新升级的缓动选项，你甚至可以创建自己的自定义预设！
自定义预设。
完成 Move 过渡动画后，下一个响应将是 Focus。
如果你查看 Snapchat 的消息工作方式，当你在第一个界面点击消息图标并切换到第二个界面时，文本输入框已经准备好发送消息，输入框和手机键盘都会被激活。这就是我们使用 Focus 来实现类似效果的原因：
Focus 响应。
输入层。
注意：要使 Focus 生效，你需要在 Text Field 组内添加一个 Input Layer。进入 Text → Input，并绘制一个与设计尺寸匹配的框。调整设计以匹配 Snapchat 的文本框样式。
Focus 预览。
接下来是什么？现在我们要把消息发送到另一部手机，让它能够接收。首先我们需要知道消息内容，也就是输入框里的内容。为此我会使用一个叫做 Detect 的功能。Detect 会监控你所选择对象属性的变化，当该属性发生变化时，你放在其下的所有响应都会触发。
这里我们的 Detect 触发器将监控 Input 层中的文本。
Detect 触发器。
为此，我们将使用公式来Assign 一个文本变量。为什么？你输入的文本会被变量“存储”起来。这意味着稍后发送消息时，变量中“存储”的文本会被发送出去。
在 ProtoPie Studio 左下角，点击 Variables 旁边的“+”为该场景创建一个变量，并确保选择 Text 类型。在 Detect 触发器下，为你新建的变量添加一个 Assign 响应。使用公式 'Input 1'. text
Assign 响应。
以下是它的工作预览：
消息应用预览。
文本现在已经可以发送了。不过，只有在你输入消息后点击键盘上的“send”时才会发送。这里我们将使用 Return 触发器。
点击键盘上的“send”将触发以下操作：
发送与接收 Pie。
一个 “Send Response” 会将消息发送出去，随后在另一台设备上被接收。
屏幕上会显示你发送的消息文本。（我们将使用 Text 响应来实现。）
文本出现的同时，还有一些 UI 会显示出来。我们将使用简单的 Opacity 触发器来实现与真实应用相同的效果。
再加一个 Focus 触发器，使输入框再次可编辑。
一个 Reset，用于清除输入框中之前输入的文本。
还创建了另一个变量 “Text 2”，用于接收来自第 2 个 Pie 的文本。
文本变量。
为完成这个 Pie 的编辑，我们将添加一个 Text 响应，使从 Pie 2 发送出来的文本在 Pie 1 中可见，并添加一个设置为 100% 的 Opacity 响应。
步骤 4：继续制作第二个 Pie（接收消息）
第二个 Pie 遵循与第一个 Pie 中“Screen 2”相同的原则。
在 ProtoPie Studio 中，创建一个 New Pie。像之前那样从 Figma 导入名为 “Adri” 的界面。
同样，Start 触发器会影响 UI，移动底部面板以适配键盘，并将输入框设为可输入状态。
你还需要再次创建 2 个变量：“Text 1” 和 “Text 2”，以与第一个 Pie 对应。
Detect 触发器会与变量 “Text 2” 配合，因为它会存储来自 Pie 2 并发送到 Pie 1 的信息，而变量 “Text 1” 则相反。如果你按这个 Pie 的其余触发器和响应继续操作，你会发现步骤与上一个基本相同。
重要：使用 Send 和 Receive 时将基于消息工作。这些消息必须与 Pie 1 中的消息保持一致。
Pie 1 发送，Pie 2 接收——消息 “SENT”。频道：ProtoPie Studio
Pie 2 发送，Pie 1 接收——消息 “SENT 2”。频道：ProtoPie Studio。
步骤 5：使用 ProtoPie Connect 进行跨设备通信
现在，是时候测试跨设备体验了。为此，你需要使用 ProtoPie Connect。它看起来如下：
ProtoPie Connect。
你需要将这两个原型保存到 ProtoPie Cloud；如果你使用的不是 ProtoPie Enterprise，还需要将其下载。之后，把本地原型上传到 Connect，以便它们彼此“通信”。
当两个 Pie 上传完成后，你可以使用设备图标打开预览，或者在手机上的 ProtoPie Player App 中扫描二维码。你需要分别用每台设备扫描对应的二维码。
就这样。你已经完成了一个消息应用原型。做得好！
请与我们分享你的作品，别忘了使用标签 #MadeWithProtoPie，就有机会在我们的展示页中展示，并有机会被评为本月 Pie。
使用 ProtoPie 成为原型设计高手
希望你在制作这个体验原型时玩得开心。你在这里学到的交互是非常好的基础模块，值得继续深入探索。你可以前往 ProtoPie school 学习更多内容，或者免费下载 ProtoPie 立即开始。
