ProtoPie：将AI与智能硬件融入HMI交互设计

当前，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交互设计》主题演讲。）