在 ProtoPie,我们非常喜欢与客户保持沟通。这样做不仅能让我们获得宝贵反馈、帮助我们改进自身解决方案,还能让我们直接听到来自全球最具创新精神、最具前瞻思维的 UX 设计师(或机构)的一手声音。
比如 Centigrade,这是一家总部位于萨尔布吕肯、德国领先的 UX 设计机构之一。
Centigrade 拥有非常出色的客户阵容——其中有一位尤其引人注目。最近,Centigrade 与创新汽车初创公司 ELEXIR 合作,对先进的汽车软件栈和展示车进行了原型设计与工程开发。
我们采访了 Centigrade 的高级视觉设计师 Marius Hubertus,进一步了解他如何使用 ProtoPie 及其实时数据功能来实现 ELEXIR 的创新愿景。
Centigrade 简介
就我个人而言,我有相当多学科的背景,曾从事视觉设计、3D 和动效设计。目前我在 Centigrade 担任高级视觉设计师。Centigrade 是一家德国 UX 机构,服务对象涵盖初创公司、成熟的中型企业以及全球大型企业,业务领域十分广泛。

在 Centigrade,我们拥有一支高度多学科的团队,包括计算机科学家、设计师、游戏开发者、用户研究员和心理学家。这使我们能够结合最新技术创新、设计最佳实践和心理学洞察,打造独特的用户体验。我们努力融合这些领域中的最佳方法。直白地说,我们的使命是在整个数字产品生命周期中创造令人惊叹的用户体验。
ELEXIR 的需求

今年早些时候,ELEXIR——一家自称“汽车极客”的初创公司——带着一个愿景找到了我们。他们希望打造一款可持续汽车,并且能够完全个性化,让每位用户都可以根据自己的精确需求或偏好进行配置。
他们已经搭建了底层软件架构和实时操作系统,使用户能够实现这一点。有意思的是,他们采用了开源方式,这意味着任何人都可以为其系统做出贡献。客户甚至可以自己添加、修改或替换硬件组件,同时还能自动受益于 ELEXIR 团队后续带来的软件改进。
我一听到他们的想法就被吸引住了。他们已经建立好软件架构,并且对汽车所有硬件层面拥有完全控制权。不过,他们需要从零开始打造一个新的人机界面(HMI)。他们只有通过对其创新软件与硬件进行可视化呈现,才能让利益相关者相信他们确实构建了有价值的东西。
为什么 Centigrade 选择使用 ProtoPie

鉴于该项目强调硬件集成与个性化,我们知道需要一款先进的设计软件——一种远远超越静态屏幕局限的工具。我们的目标基本上是创建一个高度复杂、动态性极强的原型:既能让用户对我们的想法形成良好印象,又能让我们快速迭代,并在极短时间内拿出解决方案。
由于此前使用过 ProtoPie,我们知道它毫无疑问是最适合这项工作的工具。
我们需要在多个硬件设备和屏幕之间实现实时数据连接,因为我们希望 HMI 面板上的用户交互能够在展示车内部产生真实的物理效果——而这正是 ProtoPie 所提供的。此外,我们的截止时间也极其紧迫。我们希望个人层面推进得足够快,同时仍能无缝协作。借助 ProtoPie,我和团队成员可以先各自独立开展工作(例如创建组件),再在最后阶段将所有内容整合起来。
这是一种完美的组合。它让我们 Centigrade 的 UX 设计师各自专注于完成明确交付物,同时确信最后一切都能顺利拼合在一起。
Centigrade 的设计方法
我们不想重复造轮子(抱歉这个有点老套的双关!),也不想让用户不堪重负。因此,我们采用了熟悉的交互机制,并且针对每个使用场景只展示必要信息,这让我们的原型呈现出精简、极简的感受。不过,这并不意味着它在感官体验上简单或基础——例如,我们使用了 3D 可视化来引导用户并提升使用愉悦感。
我们也非常兴奋于使用现实物体的可视化表达来帮助用户控制广泛的功能。比如,用户如果想调整座椅位置,可以在屏幕上操作,同时会真实感受到座椅在身下移动。是不是很酷?
开始落地执行
这里有一点平衡需要把握。提到现代汽车公司,人们会自然联想到规模化和大规模生产。尽管如此,我们在设计过程中仍尽量保持精益。
在向组件库引入新组件时,我们采用了持续、渐进的方法。通过让组件具备可扩展性和可复用性,我们知道它们可以适配广泛的使用场景。因此我们采用原子化方法,先构建小组件,再逐步将其嵌套进更大的组织结构中,同时不产生任何视觉设计上的裂痕。

为了保证可维护性,我们为软件的不同部分和输出设备分别使用了多个文件。每个文件都连接到一个包含所有组件的全局总库。我们没有把时间花在数天制作静态界面设计上,而是与 ELEXIR 一起定义了一套视觉设计系统语言,搭建了几个基础组件进行验证,然后直接进入 ProtoPie 开发。
从这一点开始,我们的工作流被划分为三个主要开发阶段:
视觉设计
通过 OBD 端口连接实时数据
在真实产品上进行集成、测试和迭代

ProtoPie 如何帮助 Centigrade 实现 ELEXIR 的愿景
原型设计一直是我工作流中至关重要的一部分。它帮助我快速可视化、测试并迭代想法,而不会浪费太多时间。它就像一张安全网,让我在进入实现阶段之前先验证想法是否真正可行。
这些年来,我测试并使用过很多工具,常常因为技术限制或功能不足而感到挫败。但 ProtoPie 不一样。它高级的组件功能让我不止于在静态屏幕之间做过渡。几乎任何内容都可以做动画。
ProtoPie 给了我一种在其他工具中尚未体验过的灵活性。我可以在隔离环境中构建 UI 组件,再把它们存入专用组件库——一个单一事实来源(single source of truth)——从而让我不同组件之间可以互相通信。
最后但同样重要的是,能够直接在最终产品上测试所有内容(使用真实展示车硬件)对我们来说是彻底改变游戏规则的能力。
Marius 给出充分发挥 ProtoPie 价值的实用建议
我们希望在导航系统和设置中展示汽车及其组件的 3D 表现。使用视频或静态图像远远不够——我们需要更高的灵活性来实现目标。
虽然目前还没有办法将 3D 数据直接集成到 ProtoPie 中,但我做了一些研究,找到了利用该工具现有变量和函数来实现的方法(感谢 Khonok Lee!)。ProtoPie 拥有非常强大的优秀设计师社区,如果你遇到问题,几乎总能在网上某处找到解决方案。
还值得指出的是,当你在 ProtoPie 中有大量不同的链路、if 条件、发送/响应函数、Lottie 集成等内容时,事情很快就会变得相当混乱。我强烈建议设计师为所有图层命名,并将结构设计拆分为组件。在这样的大型项目中,你很容易在细节中迷失——因此保持有序、把所有内容整齐归档会带来巨大回报。
最后,我有两条与性能相关的小建议(不过别担心,ProtoPie 的性能通常都很棒!):
不要集成分辨率大于实际显示尺寸的图片。
尽可能使用可缩放矢量图形(SVG)和 Lottie 文件来替代视频。
除了这两点之外,你没有其他需要担心的。我们在 Centigrade 很喜欢使用 ProtoPie——并且强烈推荐给所有其他设计师/机构。此外,我们也非常自豪我们的 UX 设计获得了专业评审团认可,这也是我们获得 German UX Design Award 2022 提名的原因。
探索适合您组织的解决方案
超过 15,000 家公司信赖 ProtoPie 来实现其原型设计目标。预约演示,了解 ProtoPie 如何通过我们的 Industry Solutions 帮助您的团队取得成功。




