在现有的设计流程中，前端UX设计师、UI设计师和动效设计师往往“各自为战”，整合时常遇到挑战。

对此，2024年3月15日，在2024第四届中国汽车人机交互创新大会上，ProtoPie亚太区资深业务发展经理李理提出了ProtoPie解决方案。

他谈到，ProtoPie由四部分组成:Studio用于制作原型，Player用于移动端展示与验证，Connet连接原型与多屏幕及车载硬件，Cloud则负责云端分享与协作。ProtoPie的使用能够极大简化研发流程，减少反复修改和沟通的成本，提高从设计到实现的效率。

“因此，ProtoPie不仅是一款设计工具，更是推动设计研发流程变革的重要力量。”

李理｜ProtoPie亚太区资深业务发展经理

以下为演讲内容整理:

ProtoPie是什么?

ProtoPie是一款高保真交互原型设计工具，它不仅限于设计领域，还能应用于ADAS、方控和语音等多种交互场景，主要目标有三:一是让交互设计师无需编程即可制作高保真交互与动效原型；二是支持设计师在有限开发资源下跨平台验证软硬件交互；三是简化交付流程，实现一键交互开发。

为实现这些目标，ProtoPie内置了丰富的交互元素表，涵盖从触摸到传感、语音等多种触发方式，以及多样化的反应元素，为设计师提供强大的原型制作能力。

图源:演讲嘉宾素材

ProtoPie由四个部分组成:Studio用于制作原型，Player用于移动端展示与验证，Connet连接原型与多屏幕及车载硬件，Cloud则负责云端分享与协作。

目前，众多知名汽车品牌已采用ProtoPie进行交互设计。我们发现，高保真交互原型的价值不仅在于工具使用，更在于推动整个设计研发流程的变革。

ProtoPie引领变革

传统的研发流程包括线框图、低保真原型、高保真UI图、动效开发等环节，最后还需撰写大量文档与开发团队沟通。而ProtoPie的出现，能够简化这一流程，减少反复修改和沟通的成本，提高设计到实现的效率。

因此，ProtoPie不仅是一款设计工具，更是推动设计研发流程变革的重要力量。

在现有的设计流程中，前端UX设计师、UI设计师和动效设计师往往“各自为战”，整合时常遇到挑战。主要问题在于:PPT无法生动展示交互细节，导致认知偏差；开发人员难以准确还原交互细节，需要反复沟通；验证环节靠后，迭代周期长，难以适应快节奏的汽车市场竞争。

图源:演讲嘉宾素材

引入ProtoPie后，流程得以优化。首先，UI工具可制作低保真原型及页面跳转逻辑，随后一键导入ProtoPie添加交互和动效。整合完成后，使用ProtoPie Connet平台实现台架验证、评审展示和快速迭代。由于ProtoPie原型设计师可视化，设计师可快速修改和迭代，提高时间效率和解决方案质量。

图源:演讲嘉宾素材

评审通过后，ProtoPie可一键生成动态交付文档，使开发人员直观了解交互过程并获取所需参数。最终，所有验证确认后的设计方案交付给开发，实现快速准确还原设计。整个流程的效率相较于原先预计提升至少50%。

ProtoPie应用案例

接下来，我将通过具体案例，展示如何利用ProtoPie实现高效的交互设计流程。

首先，我们如何将静态的UI图层转化为可交互的高保真原型？答案是利用“目标+触发+反应”的公式。通过简单添加触发和响应条件，如双指夹捏实现大小变化、旋转等，即可轻松制作出交互原型。

完成页面交互后，我们进一步实现跨屏幕交互。ProtoPie Connect使我们能够零代码实现这一功能，ProtoPie Player在移动端和平板上快速展示和验证。同时，Connect也能连接实车内的各屏幕，实现无缝交互。

图源:演讲嘉宾素材

接下来，我们将原型与硬件相连。借助ProtoPie Connect和G29、Arduino等插件，我们能够轻松连接硬件，实现软硬件交互。在展台上，大家可以看到我们连接的G29设备，仅需五分钟即可搭建完成。

视频中展示了Arduino模拟旋扭与原型交互的场景。这背后的逻辑是，设计师在ProtoPie Studio设计好原型后，通过Connect连接各种显示器，无论是智能终端、安卓车机、IOS平板还是其他系统。对于硬件，除了内置插件的设备，我们还可以通过自定义插件连接各种车载硬件，实现协议转换和互联。此外，ProtoPie现已实现与ChatGPT的连接，实现AI交互。

奔驰是我们的资深用户之一，他们通过Connect搭建桌面台架，连接G29等设备，供设计师快速验证。更进一步，他们还能连接驾驶模拟器，实时接收数据来测试方案。这一案例中，我们展示了如何接收游戏驾驶数据，快速切换仪表设计方案进行比较。

图源:演讲嘉宾素材

某新品牌上市前，所有原型均通过ProtoPie在实车上验证。奔驰通过ProtoPie打通了移动端、设计师端、实车与台架，实现快速验证。此外，我们支持第三方API连接，实现面部识别、手势识别、地图API及ChatGPT等创新功能。

谈及3D素材的结合，设计师无需代码，只需复制链接导入3D车模，即可实现2D与3D的完整交互。更进一步，通过2D操控可控制3D视角，节约开发人员时间。ProtoPie原型还可嵌入3D环境，支持VR设备如Quest，实现快速迭代设计效果。此外，我们还支持电视、手表、游戏机及移动端的交互。

完成原型后，可通过ProtoPie Connet平台与利益相关者分享，并允许他们查看和交互原型。交互文档会完整记录整个交互动态，包括UI参数、动效曲线等，为开发者提供清晰指导。随着车型增加，设计团队有搭建交互组件库的需求，ProtoPie也支持这一功能。

最后，我想用两句话总结:高保真原型能胜过千言万语，节省沟通成本；设计师在制作高保真原型的过程中，不仅是在搭建原型，更是在思考交互逻辑和合理性，实现不断学习和进步！