小窍门
HMI原型进阶：ProtoPie真实数据驱动实战
如何利用 ProtoPie、RemotiveCloud 和 Figma，通过真实车辆数据驱动汽车 UI 的实战教程。
Bram Bos, 汽车设计&战略顾问
December 19, 2025
对于能够模拟实际动态感知的原型的重要性
没有什么能比在“真实事物”上进行用户体验测试更棒的了。但在汽车HMI设计领域工作过就会知道，在实际原型车中测试您的设计是一种难得的奢望。
如果您足够幸运，您可能会接触到用于在半现实布局中，判断您的 UI 视觉效果和人体工程学的实体模型设置。
在用户测试时，缺乏真实感变得尤为棘手。作为研究人员，将不得不做大量的解释，以便为测试用户理解他们所看到的内容（例如：“现在想象你正以 120 公里/小时的速度在高速公路上行驶”）。
在用户测试时，缺乏真实感变得尤为棘手。作为研究人员，将不得不做大量的解释，以便为测试用户理解他们所看到的内容（例如：“现在想象你正以 120 公里/小时的速度在高速公路上行驶”）。
RemotiveLabs 开发了一种可以缓解这种真实感缺失的工具。他们的工具提供真实的车辆数据流（遥测、位置等），可以帮助汽车软件开发人员在他们的模拟器中，使用真实数据测试应用程序。
它允许多种方式来支持模拟：
它允许多种方式来支持模拟：
- 从预制的样本记录库中选择
- 上传您自己的信号数据文件（例如 BLF、ASC 或 MF4）
- 甚至连接一辆实际车辆进行实时数据流传输，以在真实世界条件下测试 HMI 设计。
如果我们可以用真实的汽车数据来测试我们的交互式汽车 UI 原型，岂不是很好吗？
对设计师的意义
这些工具还可以帮助设计师：
- 使用真实数据（-可视化）测试仪表盘的原型
- 使用车辆数据，使信息娱乐系统的模型栩栩如生
- 将触摸屏“粘”到任何汽车上，并将实时数据输入到原型 UI 中
出于好奇，像我这样的汽车 UX 设计师，将这个应用到真实世界的设计原型中到底有多容易，所以我尝试将 RemotiveLabs 的工具整合到一个典型的 UI 设计工作流程中。
我们的UI实验：Figma、Protopie 和 RemotiveCloud
我们的UI实验：Figma、Protopie 和 RemotiveCloud
当下事实上的主流 UI 设计工具是 Figma，设计团队及其相关人员使用它来协作迭代设计方案。
理想情况下，这些设计迭代也包括测试：
理想情况下，这些设计迭代也包括测试：
- 设计师需要测试他们的设计方案，以评估其概念“运动中”的动态方面
- 用户研究人员需要与实际用户进行用户测试，以测试直观性、可学习性和人体工学因素。
不幸的是，Figma 的原型设计功能有点基础，通常不足以满足汽车用途。因此，对于交互式原型设计，我更喜欢另一种工具：Protopie。
RemotiveCloud 将车辆数据流传输到触摸显示器上的HMI原型中
在汽车领域，Protopie 是一个广受欢迎的原型设计平台，因为它支持同时使用多个（触摸）显示器、传感器和复杂的条件逻辑。
我们将需要一个包含Protopie Connect的Protopie许可证（Protopie Connect 是Protopie的一个附加组件，允许原型与外部设备以及数据源通信）。
我们将需要一个包含Protopie Connect的Protopie许可证（Protopie Connect 是Protopie的一个附加组件，允许原型与外部设备以及数据源通信）。
以下是我们的计划：
以上是我们在 Figma中的示例设计
从Figma导入UI
首先，我们将汽车仪表盘的 UI 从 Figma 导入到 ProtoPie 中，为其添加交互效果。一旦我们在 Protopie 中设置好原型，便可与 RemotiveLabs 的工具集建立连接，并使用车辆数据流驱动我们 UI 中的各种对象。
如果能弄清楚如何做到这一点，我们将拥有无限可能：我们可以使用真实的车辆数据作为参数，来控制用户界面的各个方面。
设置场景
以上是一个虚构的城市微型车的HMI设计
我们将为一辆虚构的城市迷你代步车设计一个信息娱乐屏幕。它配备一个基本的中央触摸屏，既可以作为简单的信息娱乐屏幕，也可以作为仪表盘。该车辆设计用于市内短途出行（通常 < 30 分钟），因此在功能方面，我们将保持系统简单：
- 仪表盘：带有驾驶车辆所需基本信息
- 导航功能
- 音乐区，提供数字广播和连接手机蓝牙音乐
开始吧：在 Figma 中设置演示项目
在这个实验中，我们将把真实的车辆数据输入到屏幕仪表盘部分的各个方面。
为了实现这一点，我们不需要在 Figma 中做任何特殊设置。我们可以像往常一样设置设计。当然，如果所有图层都有有意义的名称，会很大程度简化大家的工作——但这本身就是良好的习惯。
为了实现这一点，我们不需要在 Figma 中做任何特殊设置。我们可以像往常一样设置设计。当然，如果所有图层都有有意义的名称，会很大程度简化大家的工作——但这本身就是良好的习惯。
从 Figma 到 Protopie
将 Figma 框架导入 Protopie 简直易如反掌。Protopie 的开发者们贴心的提供了Figma 插件，可让您从 Figma 导入框架，并将其转换为完全可编辑的 Protopie“场景”。
将 Figma 设计导出到 Protopie
您的Figma设计通常会保留 95% 以上的内容。我见过在转换中发生的主要问题是：
- 渐变
- 背景模糊（实现流行的磨砂玻璃效果）
- 图像比例，通常可以在Protopie中轻松修正
要将渐变（例如: 用于蒙版）从 Figma 导入 Protopie，我建议在 Figma 中将渐变图层复制为 SVG 并粘贴到 Protopie 中。
在此处下载 ProtoPie 的 Figma 导入插件
在此处下载 ProtoPie 的 Figma 导入插件
为 Protopie 准备实时数据输入
首先，我们需要将想要操作的图层或对象设置为可编辑状态。通过选择对象，并单击每个对象上的“可编辑”（Make editable）按钮来完成此操作。
再次确认每个图层是否都有一个确切的名称，因为您需要在下拉列表中找到它们。
一旦所有您想用实时数据操作的图层为可编辑，就该设置我们想要使用的RemotiveLabs数据流了。
一旦所有您想用实时数据操作的图层为可编辑，就该设置我们想要使用的RemotiveLabs数据流了。
设置RemotiveLabs工具
选择您想在原型中使用的车辆数据参数
在我的实验中，我使用了 RemotiveLabs的免费试用许可证，它提供了多个试验录制数据，可为我们的演示提供数十种不同的变量和信号输入。
在 Web 环境中，我们可以挑选想在原型中使用的信号。并且无需一次性全部添加，可随时添加或删除所选信号。
如果可以选择，我倾向于使用VSS 信号，而不是OEM 特定的信号。VSS是“车辆信号规范”（Vehicle Signal Specification）的缩写，是 Covesa公司制定的汽车数据标准化协议。在此阅读更多相关信息VSS 的优点在于所有信号都具有清晰易懂的名称。有时需要花时间搜索正确的信号名称，但由于它们的命名格式，通常很容易识别：
- Vehicle.Speed
- Vehicle.Powertrain.TractionBattery.StateOfCharge.Displayed
- Vehicle.Powertrain.ElectricMotor.Power
- Vehicle.CurrentLocation.Latitude
- 等等。
信号名称很重要！我们将在原型中引用它们。
完成后，我们可以查找运行原型所需的具体配置命令。稍后我们会将此命令粘贴到终端窗口中，因此请确保将其保存在方便每次运行原型时，都能轻松找到的位置。
完成后，我们可以查找运行原型所需的具体配置命令。稍后我们会将此命令粘贴到终端窗口中，因此请确保将其保存在方便每次运行原型时，都能轻松找到的位置。
RemotiveCloud 原生支持 Protopie 通信
将VSS信号输入到Protopie中
在运行原型之前，我们需要在Protopie中做最后一件事：让 Pie 监听并响应我们从 RemotiveCloud 流中选择的VSS信号。
这是 Protopie 中的三步流程：
这是 Protopie 中的三步流程：
- 创建一个全局变量，例如一个名为“speed”的数值变量
- 创建一个触发器，当它接收到来自 Protopie Connect 的 VSS 信号时作出响应。它将监听我们在数据流中找到的名称；例如 “Vehicle.Speed”
- 添加响应：我们可以将接收到的值，放入为此目的准备的文本图层中（或者更改对象的颜色，使某些内容变为[可见]或[不可见]等）。
当然，您还可以使用 Protopie 所有强大的逻辑功能，来添加复杂的条件功能和丰富的可视化效果！远不止于更改屏幕上的数字。
告诉Protopie 如何接收车辆数据以及如何使用这些数据
首次运行原型
我们距离用真实数据运行原型，只差几步之遥了！
1. Protopie Connect
将您的Pie（Protopie 文件）保存在本地驱动器上，以便 Protopie Connect 可以访问它。然后运行 Protopie Connect 并找到您的本地原型。
点击导入的 Pie 旁边的“显示”（Display）按钮，即可打开Protopie 演示窗口。我们的交互式原型将在这个窗口中运行。
点击导入的 Pie 旁边的“显示”（Display）按钮，即可打开Protopie 演示窗口。我们的交互式原型将在这个窗口中运行。
2. 在浏览器窗口中打开 RemotiveCloud
转到我们配置数据流的浏览器标签页。点击‘播放’开始发送数据。如果数据流在完成前耗尽，您可能需要重新启动数据流（具体取决于数据流的长度）。
3. 在终端窗口执行一些命令行操作
接下来,打开终端窗口，并将命令行字符串粘贴到其中（假设您已经安装了 RemotiveCLI。如果没有，现在是安装它的好时机）。RemotiveCLI 将作为 RemotiveCloud 数据流与我们的 Protopie 演示之间的桥梁。
Protopie Connect，显示传入的数据流
当一切设置正确，它会自动检测到 Protopie Connect 和我们的 RemotiveCloud 数据流都已就位：您会看到所有相关数据点在 Protopie Connect 窗口中滚动。现在您的原型界面应该能够响应所有传入的信号了！
我们的测试环境，使用真实车辆数据运行一个交互式原型。
如果无法正常工作，请检查 Protopie Connect 是否正在接收信号。
- 是：问题出在您的 Protopie 原型中。
- 否：检查 RemotiveCloud 是否仍在播放数据，以及RemotiveCLI 是否正常运行（查看终端窗口中是否有错误消息）。
更高阶的原型设计：地图、位置和视频流
RemotiveLabs 的车辆数据流可以包括车辆的位置数据（通常由纬度和经度这两个变量表示）。
如果您愿意挑战一些更进阶的原型玩法，可以使用这些数据来实现更高级进的原型设计：
如果您愿意挑战一些更进阶的原型玩法，可以使用这些数据来实现更高级进的原型设计：
- 动态地图（根据车辆记录的位置信息，实时移动）
- 联动视频流（例如模拟泊车辅助画面）
- 结合硬件外设输入，如方向盘等设备
要做到这一点，您需要使用 Protopie Connect 的高级功能：
- 舞台视图（Stage View）：将网页视图或实时视频流叠加到原型中
- 插件（Plugins）：用于集成 Arduino/Teensy、IFTTT 和游戏控制器等酷炫功能
这些超出了本次实验的范围，但很高兴这些都是可行的。网上也有大量相关的教程可以参考。
在此处阅读有关 ProtoPie Connect 的更多信息
在此处阅读有关 ProtoPie Connect 的更多信息
现在我们知道如何访问 RemotiveLabs 数据，我们可以将所有这些输入整合到高度复杂的原型中，使其体验起来比过去使用的 Figma 演示更加真实。
RemotiveCloud 支持位置数据和视频片段，这些也可以导入到原型中
关于作者
Bram Bos 是一位经验丰富的 UX 和产品战略家，热衷于将设计与真实世界的落地应用连接起来。凭借涵盖 HMI 设计、UX 研究和快速原型的多元背景，Bram 目前正与多家大型汽车品牌合作，持续推动车内用户体验的边界。
Bram Bos 最初在Medium上发布了这篇博客文章