如何制作触摸屏信息亭原型

释放触屏原型设计的力量，更有效地向开发者和管理层传达你的设计想法。

本教程将带你创建一个功能完整的自助服务终端原型，并使用触屏交互来吸引你的受众。查看下方演示，看看完整原型如何运行。

视频

要完整复现此原型并实现多设备间通信，你需要在Pro或Enterprise 计划中使用ProtoPie Connect。

准备好了吗？让我们开始吧！

太长不看版

步骤 1：将设计从 Figma 导出到 ProtoPie

步骤 2：创建触屏交互

步骤 3：原型化支付流程

步骤 4：创建交互录制以便轻松交接

步骤 1：将设计从 Figma 导出到 ProtoPie

将设计从 Figma 导出到 ProtoPie

首先，我们在 Figma 中完成了所有 UI 设计，并使用ProtoPie 的 Figma 插件将其导出到 ProtoPie Studio。这个插件让你可以非常轻松地将 Figma 设计转换为交互式原型。

进一步了解ProtoPie 与 Figma 的区别，以及如何使用这两个工具进行高级原型设计。

如果你想复现这个原型，可以查看下方已完成的 Pie 文件。

触屏终端 Pie 文件 支付 Pie 文件

步骤 2：创建触屏交互

这个原型结合了非常简单的交互，但组合在一起后，效果非常逼真。

ProtoPie 支持多种手势交互，例如下拉、拖拽、捏合等，这些都是触屏交互，可将你的原型提升为高保真作品。

在我们的终端原型中，我们实现了通过轻扫屏幕来切换选项的交互。

为此，我们主要使用了Chain 触发器，并结合Scale和Opacity响应来突出所选配菜和饮品。

💡 冷知识：如果你担心安全性，这个原型是一个自包含方案，可完全离线运行，因此不需要网络连接。

视频

我们使用ProtoPie Connect来实现目标，让这个原型与真实产品几乎无法区分。ProtoPie Connect 可以打通原型与任何硬件、API或应用之间的连接。

正如你在笔记本屏幕上看到的那样，当每个项目被选中时，信息都会共享到 ProtoPie Connect，在那里这些信息可用于多个设备之间

了解如何在这门免费在线课程中使用ProtoPie Connect。

步骤 3：原型化支付流程

视频

微交互和其他动画也很容易实现。正如视频中所示，我们创建了一个简单的小票动画来模拟支付流程，使用了带有 Scale 响应的Start 触发器，以及带有 Move 和 Rotate 响应的Detect 触发器。

在移动设备上，你可以通过长按手势轻松模拟指纹识别效果。

Long Press也是 ProtoPie 支持的手势触发器之一，在现代触屏设计中有广泛应用。

步骤 4：创建交互录制以便轻松交接

如果你与团队协作，可以通过 ProtoPie Cloud 分享你的 Pie，并录制交互，以便顺畅地交接给开发团队，避免任何猜测。

视频

进一步了解交接功能以及如何使用它高效传达你的设计想法。

就是这样！

做得很棒！我们希望你现在已经掌握了使用触屏原型设计创建自己终端原型的方法。

如果你在使用 ProtoPie Connect 时需要更多帮助，别错过这门由我们的 ProtoPie Guru Jeff 主讲的免费 ProtoPie Connect 课程。

【ProtoPie Connect 完整指南】

使用 ProtoPie 创建交互式触屏原型

ProtoPie 是打造交互式触屏原型的理想工具，让你轻松高效地展示设计想法。免费开始并创建你自己的触屏交互。

通过添加 #MadeWithProtoPie 与我们分享你的作品——我们迫不及待想看看你的创作。祝你原型设计愉快！