ProtoPie：原型驱动的HMI交互设计创新及验证

2025年5月8日，在第三届吉利汽车技术论坛暨技术展上，Studio XID Korea,Inc.亚太区业务发展负责人李理指出，ProtoPie通过其Connect平台，将设计、验证与开发流程紧密结合，支持在拟真环境下进行软硬件结合的设计验证，实现设计方案一键交付开发，无需额外解释说明。这一工具不仅提高了开发效率，还打破了设计与工程之间的壁垒，使得设计师能够零代码制作跨屏幕的车载操作系统原型，并在设计阶段就进行多模态需求的验证。

ProtoPie拥有完整的生态系统，包括Player、Connect、Cloud等平台，以及丰富的交互元素表和可交互的组件库，支持跨屏交互、软硬件交互以及与第三方API的连接。其强大的功能使得设计师能够快速迭代设计方案，并通过链接形式便捷分享给团队成员，同时录制的交付页面能完整记录交互和动效过程，极大提升了工作效率。

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

以下为演讲内容整理：

ProtoPie是一款零代码的高保真交互原型设计工具，主要应用于智能设备及智能产品的交互设计领域，目前在全球高级原型工具中排名第一。众多全球顶尖的科技与智能硬件公司，如谷歌、微软，以及智能硬件行业的苹果、华为、小米等都在使用ProtoPie工具。

当汽车从单纯的交通工具转变为移动智能终端时，我们需要思考研发流程如何适应这一变化。我们认为，首先，研发思维需发生转变，从围绕用户价值需求，转变为围绕移动场景中的多模态需求；其次，从硬件导向转变为软件导向或软硬件结合导向；第三，当前车型迭代已经从传统的三年小改、五年大改转变为一年一迭代，这种一年一迭代并非为迭代而迭代，而是当汽车转变为移动智能终端后，软件具备了一年一迭代的能力，以此提升产品竞争力。

通过对各大主机厂研发流程的研究发现，在使用ProtoPie之前，他们的研发流程大致为，产品经理使用Axure等工具绘制交互逻辑与低保真原型；UI设计师用Figma等工具制作UI素材；动效开发则借助AE等工具。在设计方案评审环节，各个环节相对独立，多采用PPT或视频等不可交互的偏静态模式进行评审。评审结束后，形成详细的设计方案说明文档，交付给软件开发团队进行开发。开发完成后，才在台架或实车上进行测试与验证。

在此过程中，有许多问题。一是在评审过程中，PPT和视频无法实现交互，难以生动展示跨屏幕设计方案，导致设计师与决策者在认知上易产生偏差。二是在设计过程中，难以运用最新的硬件和服务，如AI进行高保真设计创新与验证。三是台架和实测验证环节相对滞后，若在此环节发现设计问题并进行迭代，周期长且成本高。四是设计人员在交付开发时，为准确还原交互设计细节，需手工撰写大量文档并反复沟通，才能确保设计方案得以准确还原。

在使用ProtoPie之后，一些公司将其嵌入研发流程后，研发流程逐渐转变。首先是高保真静态素材仍由当下流行的Figma生成。之后，将这些静态素材导入ProtoPie，可在其中添加所有交互和动态效果，包括3D动效模型、原本需用AE制作的粒子动效等，进而形成完整的HMI交互设计方案。

图源：演讲嘉宾素材

方案完成后，通过ProtoPie的Connect平台，可将屏幕上的交互设计与第三方软件如AI服务、硬件如车载硬件、车载台架甚至实车，在设计环节进行展示、验证与快速迭代，无需占用大量研发资源另行开展测试。之后，在ProtoPie中可将设计方案生成动态交付页面，该页面不仅完整记录交互和动效过程，还记录所有参数。将此交付页面交付开发时，开发人员对所有交互细节一目了然，无需大量文字和语言沟通，从而极大提高开发效率。

ProtoPie希望打破设计与工程之间的壁垒。一是设计师可以零代码制作跨屏幕的车载操作系统原型；二是能够在拟真环境下进行软硬件结合的设计验证，涵盖落地设计、前瞻设计、用户研究及测评等环节；三是实现设计方案一键交付开发，无需额外解释说明。

ProtoPie有着完整的生态系统。ProtoPie Player是一款应用程序，可在移动端快速演示展示原型。ProtoPie Connect是一个能够实现屏幕上的原型与不同屏幕、硬件以及外部API进行通讯的平台。ProtoPie Cloud是一个用于在云端进行分享、协作和交付的平台。此外，ProtoPie Studio内置了丰富的交互元素表，从最常用的点击、单击、双击触发，到透明度变化、旋转、移动等动效效果均已内置其中。设计师可通过零代码组合这些元素，实现丰富的动效交互效果。

图源：演讲嘉宾素材

我们还能够创建可交互的组件和组件库，例如常用的车控按钮、卡片等都可实现组件化。这些组件与静态的UI组件不同，它们带有交互功能，并且能够快速迭代。

在此原型中，空调面板与上方的控制条实际上是三个不同的界面，即三个不同的原型，它们分别显示在车内不同的屏幕或位置。在这一过程中，我们可通过变量和表达式，实现多个模块控制的同步。在进行全局迭代时，只需修改一个组件，便可实现全局交互方式、交互形式及动态形式的变化。如此一来，迭代效率将大幅提高，无需逐个对每个组件、卡片或车控按钮进行迭代，可一次性完成全部迭代，且不影响它们之间的交互。同时，我们还能便捷地通过链接形式，将原型分享给领导、同事以及其他协作团队的同事。

图源：演讲嘉宾素材

所录制的交付页面还会完整记录交互和动效过程，同时记录所有动效的时间轴、时间点，以及动效和静态素材的参数，如位置、距离、大小、颜色及动效曲线等，这对于开发工作而言十分清晰明了。

ProtoPie实现跨屏交互以及软硬件交互，主要基于以下逻辑。首先，在ProtoPie Studio中将原型制作完成后，上传至ProtoPie Connect，之后通过ProtoPie Connect将原型推送至不同屏幕，包括安卓车机、车内娱乐屏等。无论车内有6个、8个还是10个屏幕，都能实现它们之间的交互。

另一方面，通过内置插件或自定义插件Bridge App，可将外部硬件信号转化为ProtoPie Connect能够识别的格式信号，从而实现信号的相互识别。这对设计师而言极为友好，设计师只需知晓信号名称即可。例如，将按钮信号“01-001”定义为“方向盘按钮一”，设计师在进行交互设计时，仅需在收发信息环节使用该信号名称，便可实现信号的收发。

此外，我们还能够连接第三方的新科技，如面部识别技术，以实现多模态或辅助驾驶等功能的展示与验证。例如，实时接收到面部识别信号，识别到面部偏转后，向原型发送信号，使原型发挥警示作用。

我们还能整合3D以及网页内容，包括3D模型，并将其融入ProtoPie的原型中。这样做的优势在于，所有交互均可通过ProtoPie完成。在3D引擎中，我们只需开发动画，通过2D原型发送信号与3D模型进行交互，实现对其控制。并且，可将整个HMI方案置于ProtoPie平台上，以便后续与硬件交互、硬件连接以及与第三方API连接。

目前，一些具有前瞻性的团队可能正在开展XR测试项目，同样可将原型置于XR环境中进行快速测试。在3D环境中，中控仪表由ProtoPie制作，其数据实时接收环境中的数据。当需要进行迭代时，只需在ProtoPie Studio中快速切换交互方式，便能立即在VR环境中看到变化。相较于以往需要开发人员进行调整，最快的团队也可能需要隔天才能实现改变，而现在设计师仅需约三分钟即可完成改变，并快速看到效果。

我们还能连接外部的各类智能设备，如智能电视、穿戴设备、智能家居等，将其与汽车这一移动智能终端全面打通，构建生态场景，并实现测试和验证场景。

最后，用两句话结束分享。IDEO合伙人Tom Kelley曾说：“如果一张图片价值一千个字，那么一个原型可以价值一千场会议。”此外，宝马设计师Teo Babic曾说：“原型的价值不仅仅在于搭建一个原型，更重要的是在搭建的过程中思考和学习。”

（以上内容来自Studio XID Korea,Inc.亚太区业务发展负责人李理于2025年5月8日在第三届吉利汽车技术论坛暨技术展发表的《原型驱动的HMI交互设计创新及验证》主题演讲。）