Meta,最为人熟知的是其旗下的 Facebook 和 Instagram,早在 2014 年就进入了 AR/VR 市场,作为其品牌重塑工作的一部分,旨在融合物理世界与数字世界。
高保真原型对于设计顶级数字体验至关重要,尤其是对像 Meta 这样的公司而言。然而,Meta 的产品设计师一直受困于现有原型工具的可访问性鸿沟,直到他们发现了 ProtoPie。
在题为“How Design Teams Use ProtoPie in Their Workflow”的网络研讨会中,我们见到了 Jon Bernbach,他是 Meta 内部设计工具团队的一名产品设计师。他的团队负责设计和构建工具,以大规模支持产品设计师和内容设计师的工作。
你可以观看下方录播,了解原型设计在 Meta 设计工作流中的位置,以及为什么他们的设计团队选择 ProtoPie 作为团队首选原型工具。
概览
为什么原型设计在 Meta 的产品开发周期中很重要
Meta 如何采用 ProtoPie
Meta 设计师使用 ProtoPie 的五个原因
ProtoPie 如何成为 Meta 的首选原型工具
为什么原型设计在 Meta 的产品开发周期中很重要
Meta 通过将测试和质量保证前移到开发流程的早期阶段来维持产品的高标准,这一过程被称为 左移(shifting left)。
Jon 解释道:“在实现阶段之后,或者产品公开发布之后,‘右侧’的所有事情在开发时间和工程成本上都可能非常昂贵。核心理念是把质量控制放在左侧,在到达那个阶段之前尽量定位问题和错误。”

原型设计是 Meta 产品开发周期的重要组成部分。
左移是 Jon 团队一直在推动各团队更多去做的事情,这意味着诸如:
遵循现有设计系统和组件。
使用正确的颜色。
遵循可访问性启发式原则。
在实践中,这意味着团队被鼓励开展广泛的原型设计和用户研究。为了有效实现这一点,他们需要合适的工具。Jon 强调了三个关键领域,说明原型设计在打造卓越产品中的重要作用。
1. 原型设计能够传达设计体验
原型设计,尤其是用于创新数字体验时,通过减少仅展示静态稿时可能发生的沟通误差,能够提升团队效率。
评审原型还可以帮助团队做出更有依据、更具策略性的决策,与实际情况保持一致,从而避免猜测和主观假设。
2. 原型设计打通设计研究堵点
使用原型进行用户测试,可在每一轮测试中显著提升可用性收益。
有了原型,团队就不必在实现后依赖 A/B 实验。这在科技行业非常常见,尤其是在大型科技公司中,通常会先实现几个选项,再通过 A/B 测试判断哪个产品更合适。
但遗憾的是,有时 A 或 B 都不是问题的正确解法。这也是为什么“左移”如此重要,因为它有助于减少把开发时间浪费在注定失败的产品上的情况。
3. 原型设计提升产品质量
将交互设计和决策从工程师转移给设计师,能够提升产品质量。
问题在于:既然我们知道原型设计有助于提升质量,为什么设计师过去在设计流程中并没有大量使用原型?
Meta 如何采用 ProtoPie
Meta 在使用 ProtoPie 之前的原型流程
Meta 的内部研究显示,公司中仅有极少比例的设计师会在工作流中使用原型工具。
原因是那些需要创建中等复杂度原型的 Meta 设计师,长期受到显著工具断层的困扰。

Meta 设计师在选择 ProtoPie 之前评估了 13 款不同的设计工具。
虽然 Meta 也在使用 Figma、Origami 和 Framer 等原型工具,但他们的设计师发现:
Figma 非常适合低复杂度原型,但能力有限。在招募测试参与者、在 Meta 外部使用原型,以及其他入门流程方面也存在安全风险和障碍。
Framer 和 Origami Studio(Meta 内部开发)等工具在高复杂度原型方面非常强大。难点在于学习门槛较高,导致许多设计师受挫并放弃原型设计。
在 Meta,他们从经验中知道,不把迭代式原型和研究纳入产品周期的团队,往往会产出质量更低的体验。
Jon 意识到这个工具断层是他们必须解决的重大问题。他设定了两个主要目标:
填补 Figma 与 Origami 之间的中等复杂度原型空白。
找到可行的原型工具,帮助 Meta 安全地加速迭代式设计研究。
在评估了 13 款工具及其功能后,ProtoPie 脱颖而出,成为最符合最常见产品设计师和 UX 研究员未来需求的工具。
让 Meta 设计师上手 ProtoPie
在 Meta 这样的大公司,让员工上手新软件需要大量工作,包括 SSO 实施、制作推广演示、通过教学材料帮助设计师提升,以及全过程排障。
只有少数 Meta 设计师此前就有 ProtoPie 经验。不过,Jon 发现,在上手过程中有些人学得非常快,并主动帮助他人赶上进度。
他们还单独与研究员合作,因为这是一个完全不同的用户群体。流程包括告诉他们如何
导航云端账户;
设置原型以确保其安全;
确保测试参与者在研究会话结束后无法继续操作原型。
Meta 设计师使用 ProtoPie 的五个原因
Jon 认为 ProtoPie 对任何想要制作逼真动画交互和转场的人来说都是很棒的工具,尤其适用于那些超出 Figma 能力范围、且在 Origami Studio 或 Framer 中较难理解的场景。
他还表示,它非常适合制作移动应用体验原型。另一个很棒的未来功能是 ProtoPie Connect,他们一直在 Reality Labs 中用它与 Oculus 头显、智能手表及其他 IoT 设备等外部硬件进行原型制作。

使用 ProtoPie 开发 Facebook 应用。
1. ProtoPie 的学习曲线低到中等
ProtoPie 的心智模型易于理解,而且有许多免费和付费教育资源帮助你快速上手。这是 Jon 选择 ProtoPie 的关键因素。
他的团队在寻找一款设计师可以较快学会并愿意积极使用的设计工具。如果他们选择了一款功能无所不包却对设计师不友好的工具,最终只会导致采用率低,工具断层问题也无法解决。
2. ProtoPie 是一款无代码、无变体的原型工具
根据 Meta 的研究,在设计师眼中,代码往往是决定工具成败的关键因素。例如,Framer 等工具在处理非常复杂或中等复杂任务时编码强度很高,因此采用率较低。
ProtoPie 与 Figma 的集成也是必备项。Jon 表示,他们想要的是一种非变体原型工具,设计师不必事事从零开始。按他的说法,他们无需设计大量界面也能完成更多工作。
Jon 告诉我们:“这有点像以巧妙方式快速搭出原型。”
3. ProtoPie 具备安全且不断增强的远程研究能力
能够通过 Web 浏览器在 Meta 外部安全地向测试参与者分享原型也是另一个重要因素。
虽然原生 Android 和 iOS 预览应用也很好,但在当前远程研究环境下,Web 浏览器是刚需。因为测试参与者通常不愿下载太多应用。
相反,他们希望打开一个网站就能开始查看原型,因此 Meta 的 UX 研究员在测试会话中使用 ProtoPie 要简单得多。
4. ProtoPie 灵活、宽容且高度易用
Jon 说:“ProtoPie 找到了一个甜蜜点:它是一个强大的交互设计工具,同时又相对容易采用。”
借助变量、条件和自定义组件等功能,设计师可以真实地原型化几乎所有超出 Figma 能力范围的交互。
虽然 ProtoPie 几乎与 Origami Studio 和 Framer 一样强大,但其现代化界面遵循许多熟悉的设计模式,让设计师的使用体验更直观。
除了以上四点外,Meta 团队选择 ProtoPie 时的其他必备项还有:
5. ProtoPie 适配 VR 团队工作流
此外,ProtoPie 与负责 Oculus 头显和手柄的 VR 团队工作流也很契合。

ProtoPie 与负责 Oculus 头显和手柄的 VR 团队工作流相契合。
VR 团队的设计师正在探索如何制作可在头显中测试的 2D 体验原型。他们目前也在与 ProtoPie 合作开发功能,让头显体验更具沉浸感。
在展示于
的原型中,设计师使用了变量、公式以及其他复杂交互来实现全部效果。
这位设计师仅用几天就学会了 ProtoPie,到周末时已能制作相当高级的原型。Jon 表示,这证明了 ProtoPie 的易学性,也凸显了让 ProtoPie 成为团队首选工具的巨大机会。
Jon 说:“通过使用 ProtoPie,团队的产出速度提高了,因为原型制作无需工程师参与。当前市场下 ProtoPie 前景光明,因为当 Figma 不够用时,它恰好找到了作为设计师原型工具的最佳平衡点。”
ProtoPie 如何成为 Meta 的首选原型工具
学习新工具对大多数人来说始终是挑战,尤其是在 Meta 这样快节奏的开发环境中。
但据 Jon 所说,早期参与信号非常积极,他们看到了此前从未设想过的成果:
原型已被用于评审和研究,Jon 对这么快发生这件事感到惊讶。设计师也在学习新工具,因此看到他们迅速实际使用、提升熟练度,并用于新想法评审和研究会话,是一件非常重要的事,给了团队很大的正向验证。
设计师正在各自团队中主动倡导和推广这款工具。就连 Jon 之前并不知晓参与试点的设计师,也在使用 ProtoPie,并发现它确实契合团队需求。由于 Meta 规模很大,你并不总能知道每个团队在做什么,因此看到 ProtoPie 在最初试点之外也能自然扩散,令人非常满意。
加入 Meta 和其他 15,000 家使用 ProtoPie 进行高保真原型设计的公司。 立即免费试用 ProtoPie 。




