当前，HMI 设计领域正面临软硬件融合的挑战，设计师们需要一种工具来打破设计与工程之间的壁垒。2025 年 3 月 19 日，在第五届中国汽车人机交互与体验设计创新大会上，Studio XID Korea, Inc. 亚太区业务发展经理李理介绍到，ProtoPie 致力于零代码制作跨屏幕的高保真交互和动效原型，让设计师也能在拟真环境下进行软硬件结合的设计验证。

李理指出，利用 ProtoPie 的 API 插件和 bridge app 机制可以在 HMI 原型中灵活调用第三方 AI 服务。利用内置的插件和 bridge app，则可以让设计团队快速实现软硬件交互。

李理还分享了 ProtoPie 在实际应用中的案例，展示了其在零代码跨屏交互、软硬件交互、搭建桌面台架以及整合 3D 和网页等方面的强大功能。

李理 | Studio XID Korea, Inc. 亚太区业务发展经理

以下为演讲内容整理：

ProtoPie能做什么？

ProtoPie 是一款专为智能设备设计的零代码交互原型制作工具，应用范围涵盖手机、车载显示屏等多种智能平台。作为一款创新的工具，ProtoPie 致力于消除设计与工程之间的隔阂。在车载及智能设备领域，不断涌现出新的硬件技术和 AI 应用，设计师面临如何将这些前沿技术与交互设计融合的挑战，而 ProtoPie 正是为解决这一问题而生。

ProtoPie 的核心功能体现在以下几个方面：首先，允许设计师在无需编写代码的情况下，制作跨屏幕的高保真交互和动态效果原型；其次，ProtoPie 提供了一个模拟真实环境的平台，使设计师能够在该环境中验证软硬件结合的交互设计，极大地减少了对开发资源的依赖；第三，通过 ProtoPie，设计方案可以一键交付给开发团队，避免了繁琐的文档编写和解释过程，从而提高了工作效率。

ProtoPie 不仅支持硬件与 HMI 设计的零代码融合，还能将前沿的 AI 技术，诸如备受瞩目的 DeepSeek、ChatGPT 等，无缝整合至 HMI 设计中。这一功能赋予了设计师在无需复杂编程的情况下，探索并实施 AI 驱动的交互创新的可能性。

实现上述功能的核心在于 ProtoPie 构建的生态系统，该系统主要由四个关键组件构成。首先是 ProtoPie Studio，这是专为设计师打造的制作交互原型的核心客户端，设计师在此平台上可以自由地创作和编辑交互原型。其次是 ProtoPie Player，这是一款应用于移动端，特别是安卓设备及安卓车机屏幕上的快速演示与测试原型的应用软件，用户能够便捷地安装此应用，以便即时查看和测试原型效果。第三个组件是 ProtoPie Connect，它充当了原型与外部硬件、多块屏幕及 API 之间通信的桥梁，通过 Connect，设计师可以轻松实现原型与外部设备的实时数据交换与互动。最后是 ProtoPie Cloud，这一云端平台主要用于原型的分享以及团队协作，设计师可以在此平台上共享自己的设计成果，并与团队成员进行高效的协作与交流。这四个组件共同构成了 ProtoPie 的完整生态系统，为实现设计与工程的无缝对接提供了坚实的基础。

图源：演讲嘉宾素材

ProtoPie Studio 内置了多样化的交互元素，为设计师提供了极大的便利，使他们能够无需编写任何代码，即可设计出各种类型的高保真交互和动效原型。从基础的交互操作，如单击、双击、旋转、放大、缩放、颜色变化等，到更为复杂的多模态交互，如语音控制、感应器响应等，ProtoPie Studio 均能提供全面支持。

特别值得一提的是 ProtoPie Studio 中的 Send/Receive 功能，在跨屏交互和软硬件交互中得到了广泛应用。通过这一对元素，设计师可以轻松实现屏幕与屏幕之间，或屏幕与外部硬件之间的信号收发，从而构建出丰富多样的交互体验，且全程无需编写代码。

在团队协作的场景中，ProtoPie 允许创建可复用的交互组件库。设计师可以在 ProtoPie 内构建包含交互功能的组件库，例如车控按钮、空间栏等，这些组件在库中预先设计好，便于设计师在不同项目中快速复用，且保持原有的交互特性。

此外，借助 ProtoPie Cloud 平台，原型的分享变得异常便捷。设计师只需将 ProtoPie 原型的链接分享给开发团队或同事，接收者即可在浏览器中直接打开并体验可交互、动态的原型。这不仅提升了协作效率，还确保了设计的一致性和实时性。

更进一步，ProtoPie Cloud 还支持将设计好的原型录制为交付页面。这种交互页面不仅能够完整展示整个高保真交互过程，还会详细记录原型的所有参数，包括位置、距离、大小、颜色以及动效的曲线参数等。这样的交付方式极大地简化了开发团队对设计理解的难度，减少了不必要的沟通和解释，确保了设计与开发之间的无缝对接。

前置验证的必要性

此前，有一家主机厂在设计 HMI 软件时，创新性地采用了大小不一的泡泡形式来呈现功能卡片，这一设计在当时看来颇为新颖且美观。然而，产品上市后，用户的反馈却远未达到预期。通过后台数据分析，他们发现用户的点击次数远低于预期，并收到了大量负面反馈，用户普遍认为该设计难以使用。这一问题的根源在于，他们未能尽早进行前置化的设计方案验证。意识到问题后，尽管他们迅速通过 OTA 进行了更新改进，但为时已晚。

车企在车型研发上投入了大量的资源和时间，然而，在当前竞争激烈的市场环境中，市场对产品的容错率极低。如果未能在前期进行充分的前置验证，一旦问题在后期暴露，所需付出的代价将是巨大的。

在采用 ProtoPie 之前，众多车企的 HMI 研发流程往往遵循以下模式：首先，产品经理负责编制产品文档，并绘制低保真的线框图以明确产品框架。随后，UI 设计师会基于这些框架进行独立的 UI 设计。与此同时，动效设计师与 3D 工程师则负责动效的开发与制作。完成这些步骤后，设计方案通常会被整合到 PPT 或文档中，以供设计评审会议使用，旨在评估其可用性与用户体验。

经过评审并获得通过后，团队会进一步生成详细的设计方案说明文档，并将其交付给软件开发团队进行实现。软件开发完成后，该方案才会被部署到测试台架、硬件系统或实车上，以验证其实际使用效果与潜在问题。然而，如果在这一验证阶段发现问题，再回溯至设计端进行修改，不仅会大幅延误项目进度，还会造成资源的极大浪费。

此前流程存在的挑战主要在于，第一，PPT 无法交互，难以生动展示设计方案，导致设计师与决策者存在认知偏差；第二，设计过程中难以运用最新的硬件和服务（如 AI）进行原型展示和验证；第三，台架或实车验证环节靠后，发现问题的迭代成本高周期长，难以满足当下市场竞争节奏；第四，开发人员难以准确还原交互细节，需要设计师手动撰写大量文档并反复沟通。

使用 ProtoPie 后，设计流程得以显著优化。首先，高保真图层与素材仍可在 Figma、Sketch 等专业设计软件中产出，ProtoPie 并不替代这些工具，而是与其形成互补。随后，利用 ProtoPie 的插件功能，可直接将静态高保真图层导入 ProtoPie 中。在 ProtoPie 平台上，设计师可轻松添加交互与动效，同时可根据需要插入粒子动效（如使用 AE 制作）或 3D 模型（如使用 Unity 等 3D 引擎制作）。这些元素均可无缝集成至 ProtoPie 中，形成一个完整的、跨屏幕的、可交互的 HMI 设计方案。通过 ProtoPie Connect 功能，设计师可轻松连接外部硬件、台架及 AI 技术，在设计环节即完成整套设计的展示与验证。

当设计团队发现问题时，可以立即在 ProtoPie Studio 中进行修改，这一过程通常只需几分钟即可完成，相较于以往需要等待开发团队介入的效率有了显著提升。修改完成后，设计师可以在 ProtoPie 中一键生成交付文档，该文档清晰明了，直接提供给开发团队，从而确保开发出的产品更加成熟可靠。

利用 ProtoPie Studio 完成原型设计后，设计师可以将其上传至 ProtoPie Connect 平台。通过 ProtoPie Connect，原型可以轻松推送至多种屏幕设备，包括但不限于安卓车机系统以及其他任何支持浏览器或安卓系统的屏幕。这种广泛的兼容性使得原型展示更加灵活多样。

此外，ProtoPie 还支持与硬件设备的连接。除了内置插件支持的硬件，如 Arduino、G29 等，设计师只需通过 USB 接口即可实现连接。同时，已有众多硬件厂商与 ProtoPie 建立了合作关系，提供了与 ProtoPie 兼容的硬件台架，进一步拓展了原型的测试与应用场景。

高保真原型应用案例

零代码的跨屏交互功能通过 ProtoPie Connect 实现信号的顺畅传输，使得 ProtoPie Player 能够在多种移动端设备上，如 iPad、手机以及安卓车机等，迅速且准确地展示高保真原型。这一过程无需编写任何代码，极大地提升了设计效率。下图屏幕上的原型，均是由 ProtoPie 独立完成的，其背后并未涉及任何代码编写。设计师无需具备编程能力，即可轻松实现如此出色的效果。

我们可以将 ProtoPie 原型与台架进行连接，这一功能在用户体验研究团队、创新团队以及设计团队中得到了广泛应用。通过这一连接，我们可以实时读取驾驶模拟环境中的各类数据，并将其反馈至 ProtoPie 原型中。在此场景下，中控仪表等界面元素均由 ProtoPie 原型呈现，同时所有信号均通过 ProtoPie Connect 实现与原型的连接。此外，当前常用的多种驾驶模拟环境均可轻松接入，便于我们快速切换并比较不同的设计方案。

ProtoPie 还支持与实车的连接。除了能够读取实车的 OBD 数据并在原型中进行展示外，我们还可以通过连接车载域控制器来反向控制车载硬件。当然，这一功能属于较为进阶的应用，需要设计师在熟练掌握 ProtoPie 后，方能实现如此高效的交互与控制效果。

在连接外部 API 进行交互方面，ProtoPie 能够整合利用第三方的面部识别、头部追踪等 API 服务，可以通过网络摄像头等设备实现创新功能的补充。这些服务能够实时地将警示信号等数据传输至 ProtoPie 平台，确保所有信号间的互通互联。

此外，ProtoPie 作为一个强大的 2D 渲染平台，还具备整合 3D 内容及网页的能力。设计师可以将 3D 工程项目导入 ProtoPie 中，使得在 3D 引擎中仅需专注于动画制作、视角切换及渲染工作。而所有的交互逻辑、车辆控制等部分，均可通过 ProtoPie 实现，且无需编写任何代码。这一特性使得设计师能够轻松地在 2D 原型与 3D 模型之间建立交互关系，实现用 2D 原型来控制 3D 模型的创新应用。

（以上内容来自 Studio XID Korea, Inc. 亚太区业务发展经理李理于 2025 年 3 月 19 日在第五届中国汽车人机交互与体验设计创新大会发表的《将 AI 与智能硬件融入 HMI 交互设计》主题演讲。）