使用真实汽车数据进行汽车用户界面原型设计

需要那种让你感觉自己真的在移动的原型

没有什么能比在“真实设备”上进行 UX 测试更好。但如果你在汽车 HMI 设计领域工作过一段时间，就会知道在真实原型车中测试设计是难得的奢侈。

如果你足够幸运，可能会有机会使用样车台架（buck setup），在半真实布局中评估你的 UI 视觉效果和人机工学。

在进行用户测试时，缺乏真实感尤其棘手。作为研究人员，你需要做大量解释，给测试用户足够的上下文，让他们理解自己看到的内容（“现在请想象你正以 120km/h 在高速公路上行驶。”）。

RemotiveLabs 开发了一些可以缓解这种真实感缺失的方案。他们的工具提供真实车辆数据流（遥测、位置等），可帮助汽车软件开发者在模拟器中使用逼真的数据测试应用。

这使仿真有多种驱动方式：

• 从预制的示例录制库中选择，

• 上传你自己的信号数据文件（例如 BLF、ASC 或 MF4）

• 甚至连接真实车辆获取实时数据流，在真实世界条件下测试你的 HMI 设计。

如果我们能用真实车辆数据来测试交互式车载 UI 原型，不是很好吗？

面向设计师的价值

这些工具同样可以帮助设计师：

• 使用逼真数据（可视化）测试仪表盘原型。

• 用车辆数据让信息娱乐系统模型“活”起来。

• 在任何车里临时固定一个触摸屏，并将实时数据输入到原型 UI 中。

出于好奇，想知道像我这样的汽车 UX 设计师将其整合进真实设计原型到底有多容易，我决定尝试把 RemotiveLabs 的工具整合到典型的 UI 设计工作流中。

我们的 UI 实验：Figma、Protopie 和 RemotiveCloud

如今事实上的 UI 设计工具是 Figma。设计团队及其利益相关者用它协作迭代设计方案。

理想情况下，这些设计迭代也应包含测试：

• 设计师需要测试其设计方案，以评估其概念动态层面的“运动中”表现。

• 用户研究人员需要和真实用户进行测试，以检验直观性、可学习性和人机工学因素。

遗憾的是，Figma 的原型功能比较基础，通常不足以满足汽车场景需求。因此在交互原型方面，我更偏好另一个工具：Protopie。

**RemotiveCloud 将车辆数据流传入触摸显示器上的 HMI 原型
**

在汽车领域，Protopie 是一个流行的原型平台，因为它支持多个同时运行的（触控）显示器、传感器以及复杂条件逻辑。

我们需要一个包含 Protopie Connect 的 Protopie 许可证（Protopie Connect 是 Protopie 的附加组件，可让原型与外部设备和数据源通信）。

*下载 ProtoPie Studio 并注册 ProtoPie Connect *

计划如下：

上图是我们在 Figma 中的示例设计

从 Figma 导入 UI

首先，我们将把 Figma 里的汽车仪表盘 UI 导入 Protopie，并添加交互性。

在 Protopie 中完成原型搭建后，我们会与 RemotiveLabs 的工具集建立连接，并用车辆数据流驱动 UI 中的各种对象。

如果我们能弄清楚如何做到这一点，那就大有可为：我们可以使用真实车辆数据作为参数，来控制用户界面的任何方面。

设定场景

上图是一个虚构城市微型汽车的 HMI 设计

我们将为一款虚构的城市微出行车辆制作信息娱乐屏。它有一个基础的中央触摸屏，既充当简易信息娱乐屏，也充当仪表盘。

该车辆为城内短途出行而设计（通常 < 30 分钟），因此在功能上我们会保持系统简单：

• 一个提供驾驶所需基础信息的仪表盘。

• 导航功能。

• 一个音乐模块，提供数字广播和与手机的蓝牙音乐连接。

开始吧：在 Figma 中搭建演示项目

在这个实验中，我们会把真实车辆数据输入到屏幕中仪表盘模块的各个部分。

要实现这一点，我们在 Figma 里不需要做任何特殊操作。像平常一样搭建设计即可。不用说，如果所有图层都有明确命名，会让每个人都更轻松——当然这本来就是良好实践。

从 Figma 到 Protopie

把 Figma 画框导入 Protopie 简直易如反掌。Protopie 团队提供了一个 Figma 插件，让你可以从 Figma 导入画框，并将其转换为可完全编辑的 Protopie“场景”。

将 Figma 设计导出到 Protopie

通常你的 Figma 设计会有 95% 以上被完整保留。我见过在转换中主要容易出问题的是：

• 渐变

• 背景模糊（常见的磨砂玻璃效果）

• 图片比例，这通常可以在 Protopie 中轻松修正

要把渐变（例如用于遮罩）从 Figma 带到 Protopie，我建议在 Figma 中将渐变图层复制为 SVG，然后粘贴到 Protopie。

*在此下载 ProtoPie 的 Figma 导入插件：*https://www.protopie.io/figma

为 ProtoPie 准备实时数据输入

我们首先要做的是，让任何想要操控的图层或对象都准备好接收变化。方法是选择对象，并分别点击“Make editable”按钮。

再次确认每个图层都有清晰命名，因为你稍后需要在下拉列表中找到它们。

当你希望通过实时数据操控的所有图层都可编辑后，就该设置我们要使用的 RemotiveLabs 数据流了。

设置 RemotiveLabs 工具

选择我们希望在原型中使用的车辆数据参数

在我的实验中，我使用的是 RemotiveLabs 的免费试用许可，它可访问一些试用录制数据，提供数十种不同变量和信号供我们注入演示。

在网页环境中，我们可以挑选原型中想用的信号。而且不必一次做完；之后随时可以回来增加或删除所选信号。

如果可选，我更倾向于使用 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 中这是一个 3 步流程：

1. 创建一个全局变量，例如一个名为“speed”的数值变量

2. 创建一个触发器，当它从 Protopie Connect 接收到 VSS 信号时做出响应。它会监听我们在数据流中找到的名称，例如“Vehicle.Speed”

3. 添加响应：我们可以把接收到的值放到为此准备的文本图层中（或改变对象颜色、让某些内容可见/不可见等）。

就是这样。当然你可以利用 Protopie 强大的逻辑功能添加复杂条件功能和丰富可视化，远不止在屏幕上改变一个数字。

告诉 Protopie 如何接收车辆数据并如何处理

让原型首次运行起来

现在我们距离看到原型用真实数据运行只差几步了！

1. Protopie Connect

将你的 Pie（Protopie 文件）保存在本地磁盘上，这样 Protopie Connect 才能访问它。然后运行 Protopie Connect 并定位你的本地原型。

点击已导入 Pie 旁边的小“Display”按钮，打开 Protopie 演示窗口。我们的交互原型将在这个窗口中运行。

2. 在浏览器窗口中打开 RemotiveCloud

转到我们配置数据流的浏览器标签页。点击 Play 开始发送数据。如果在完成前数据流播放结束，你可能需要重启数据流（取决于所选数据流长度）。

3. 在终端窗口执行一些命令行魔法

接着，打开终端窗口并将我们的命令行字符串粘贴进去（假设你已经安装了 RemotiveCLI；如果还没有，现在正是好时机）。RemotiveCLI 将作为 RemotiveCloud 数据流与 Protopie 演示之间的桥梁。

**Protopie Connect，显示传入的数据流
**

当一切设置正确后，它应会自动检测到 Protopie Connect 和我们的 RemotiveCloud 数据流都已就绪：你应该能在 Protopie Connect 窗口里看到所有相关数据点滚动显示。

你的原型 UI 现在应该会响应所有传入信号！

我们的测试配置：用真实车辆数据运行交互式原型

一些调试提示：如果不起作用，检查 Protopie Connect 是否正在接收信号。

• 是：问题出在你的 ProtoPie 原型中。

• 否：检查 RemotiveCloud 是否仍在回放，以及 RemotiveCLI 是否正常运行（查看终端窗口中的报错信息）。

更高阶的原型：地图、位置和视频流

RemotiveLabs 的车辆数据流可以包含车辆位置数据（通常由纬度和经度两个变量表示）。

如果你愿意接受一点挑战，可以将这些数据点用于一些高级原型：

• 动态地图（跟随车辆录制的位置数据）。

• 关联视频流（例如用于模拟泊车辅助）。

• 与硬件外设输入混合，例如方向盘。

要做到这一点，你需要使用 Protopie Connect 的高级功能：“Stage View”（将网页视图或实时视频流叠加到你的原型上）和“Plugins”（用于集成 Arduino/Teensy、IFTTT 和游戏控制器等酷炫功能）。

这些超出了本次实验范围，但知道它可行很有帮助。而且网上有大量相关教程。

*在此进一步了解 ProtoPie Connect：*https://www.protopie.io/connect

既然我们已经知道如何访问 RemotiveLabs 数据，我们就可以把所有这些输入组合进高度复杂的原型中，让其比我们过去使用的 Figma 演示真实得多。

RemotiveCloud 支持位置数据和视频素材，也可以导入到你的原型中**
**

关于作者

Bram Bos 是一位经验丰富的 UX 与产品战略专家，热衷于连接设计与现实落地实施。凭借涵盖 HMI 设计、UX 研究和快速原型的背景，Bram 目前与多家主要汽车品牌合作，并持续推动车载用户体验的边界。

Bram Bos 最初在 Medium 上发布了这篇博文。