摘要
ProtoPie 是一款完全无代码的原型工具。设计师易于上手，提供丰富的功能与集成能力，并具备高级协作能力。
Framer 非常适合会编程并将生产代码视为唯一事实来源的设计团队。
不过，与其他原型工具相比，Framer 的学习曲线更陡峭，而且不太适合缺乏技术背景的设计师。
并非所有原型工具都生而平等。它们各自都有自己的优势、劣势和特定使用场景。因此，在你推进并实施某个方案之前，需要先了解哪款原型工具最适合你和你的团队。
本文将比较当前市场上两款最强、最知名的原型工具：Framer 和 ProtoPie。两者都能为设计师提供很多价值——所以你可能正在纠结该选哪一款原型工具。如果你正是如此，那你来对地方了。
让我们深入了解 Framer 和 ProtoPie。具体来说，我们将探讨：
读完这篇文章后，你可能还想比较 ProtoPie 与 Figma（另一款优秀的原型工具）。如果是这样，点击这里。
Framer 界面。
什么是 Framer？
Framer 允许设计师同时使用设计和代码来创建移动端与 Web 界面的高保真原型。它最初是一款纯代码工具，但后来扩展为可为用户提供丰富功能与优势的平台。例如，设计师在开始新项目时可以从 Photoshop 生成素材；借助弹簧物理和贝塞尔曲线在 3D 空间中为图层制作动画；并基于 CSS 变换利用硬件加速来实现高帧率。
目前，Framer 可在浏览器中使用，也提供桌面应用（支持 Windows 和 Mac）。
什么是 ProtoPie？
ProtoPie 可帮助设计师轻松将交互设计想法转化为高质量、超逼真的原型。它非常适合广泛的数字原型需求：移动端、桌面端、Web 和 IoT。团队可以使用变量和公式原型进行原型设计，创建语音原型等。ProtoPie 甚至具备先进的软硬件集成能力，这意味着原型可以与 Arduino 串口通信和 Arduino 无线通信等工具交互。
这就是为什么全球一些领先设计师（就职于 Microsoft、BMW、Headspace、Snap 和 Electronic Art 等公司）每天都依赖 ProtoPie 来满足其原型设计需求。
ProtoPie 与 Framer：相同点与不同点
好，我们来看看细节。ProtoPie 和 Framer 相互比较如何？它们有哪些相似点、差异点，以及为用户提供的关键优势是什么？
功能
优秀的功能造就优秀的工具，而优秀的工具造就优秀的原型。因此，如果你正在 Framer 和 ProtoPie 之间做选择，就需要挑选功能最强的原型工具。
语音原型设计
Framer 没有专门的语音原型功能。虽然你可以使用其他工具（例如 Web Audio API）在 Framer 中构建语音原型功能，但你必须手动完成——这会造成不必要的时间与精力浪费。
另一方面，ProtoPie 提供高级语音原型功能，具备语音转文本（STT）和文本转语音（TTS）能力。你可以构建能响应语音命令的原型，或识别用户所说内容并生成可朗读文本。
轻松为语音搜索、语音助手和语音输入创建逼真的原型。从一开始就将无障碍能力融入你的产品，打造超越“仅触摸屏幕”的体验。
在这里了解更多关于如何将 ProtoPie 用作语音原型工具的信息。
公式与变量
Framer 的变体和变量允许设计师使用变量进行原型设计——但它们有几个关键限制。例如，Framer 目前还不允许设计师将所有文本图层属性自定义为变量、发布组件或在状态之间为组件制作动画。
ProtoPie 将公式和变量置于交互设计与软件原型流程的核心。设计师可以在公式输入字段中创建公式原型，将所需的所有图层属性、函数和变量纳入公式。
在 ProtoPie 中使用公式创建可移动的标签栏。
ProtoPie 丰富的公式与变量功能使其区别于 Framer（以及目前市场上任何其他原型工具）。设计师可以使用公式即时让原型动态化，为原型增添仅通过连接画板无法获得的真实感和动态性。例如，用于验证电子邮件地址、创建最小密码长度、统计购物车商品数量或确定账户总余额。
通过查看 ProtoPie 的一系列公式原型使用案例，学习如何使用正确语法、图层属性和函数。或者，如果你想了解如何使用预定义变量，可以在这里查看。
软件与硬件集成
虽然 Framer 提供一系列软件集成，但遗憾的是，它无法与外部硬件集成——而 ProtoPie 可以。更准确地说，是ProtoPie Connect。
ProtoPie 包含 3 个核心元素（Studio、Player 和 Cloud）以及 1 个扩展（Connect）。ProtoPie Studio 是设计师创建高级交互的无代码界面。它提供摄像头、语音和加速度计访问权限，使原型能够在多种设备间交互。ProtoPie Player 允许团队在智能设备上运行原型，而 ProtoPie Cloud 用于在线存储和基于云的协作。
最后但同样重要的是，ProtoPie Connect 具备多种软硬件集成功能。因此，它允许原型在多个设备、显示器和硬件上同时运行。借助 ProtoPie Connect，设计师可以向 Arduino 发送信号（并接收来自 Arduino 的信号），包括 Arduino 串口通信和 Arduino 无线通信。观看下方视频，了解其实际运行方式。
如果你想进一步了解软硬件一体化原型设计，请查看这份分步指南。
可用性
原型工具必须易于使用，并能无缝融入你现有的设计流程。这将帮助设计团队节省时间、提升效率并提高工作质量。因此，在选择要实施的原型工具时，可用性是第一优先级。
易用性
Framer 是一款强大的工具，这意味着学习曲线较陡。设计师可以使用 Framer 创建无代码原型，但若要为原型添加扩展能力，则需要借助代码。这意味着团队需要熟悉代码组件、代码覆盖以及 HTML、CSS、JavaScript 和 React 等编程语言，才能充分发挥该工具的价值。
与此同时，ProtoPie 是完全无代码的。它同样存在学习曲线——但比 Framer 简单得多（也短得多）。ProtoPie 基于一个简单的概念模型运行：对象 - 触发器 - 响应。该模型统管所有交互——无论设计师是在创建第一个简单交互，还是在创建第一千个、最复杂的交互。
查看这些资源，帮助你快速上手。
但别只听我们的一面之词。正如一位用户所说：“我认为这个工具 [ProtoPie] 在易用性和强大功能之间找到了最佳平衡点。”
*ProtoPie 的概念模型：对象 - 触发器 - 响应。*
共享与协作
团队协作让梦想成真。设计师必须能够与团队中的每个人协作，在保持步调一致的同时分享各自观点与想法。
Framer Library 有助于弥合设计与工程之间的鸿沟，提供基于 React 的 JavaScript 库，帮助设计师轻松创建（并共享）优雅的交互与动画。设计师创建原型后，会切换到 Framer Motion 的交付模式，从而实现设计师与工程师之间的无缝交接。设计师和工程师将在原型与生产中使用同一动画库，确保整个设计流程的一致性。
ProtoPie 也提供高级共享与协作功能。通过将原型与交互录制配对，将协作提升到新层级，为工程师提供你创建原型时使用的精确交互。你还可以轻松管理谁能访问原型，并在与团队共享时准确选择原型展示方式。
借助交互录制，工程师可以轻松查看每个交互的规格。
编码与代码生成
设计师可以将代码导入 Framer 并生成 UI 界面，或亲自使用真实代码创建和自定义特定组件。若有需要，Framer 允许用户在项目中利用代码。因此，如果你的团队已经能使用 JavaScript、HTML 和 CSS 编码，就有大量自定义选项可用。
Framer 允许你通过两种主要方式使用代码：Code Components 和/或 Code Overrides。
但如果你的团队不会编码，或者更倾向于把这部分交给工程师呢？在这种情况下，ProtoPie 是你的最佳选择，因为它完全无代码——即使在创建高级交互和添加复杂逻辑时也是如此。
那么，你应该选择 Framer 还是 ProtoPie？
好，现在到了给出 ProtoPie vs Framer 正式结论的时候。遗憾的是，这并不能简单地说某一款就是适合所有设计团队的最佳原型工具。
对于会编码并希望在用户研究或测试阶段进行高质量产品验证的团队来说，Framer 是更好的选择。如果你的组织将原型的生产代码视为绝对唯一的事实来源，就选择 Framer（因为你可以轻松将生产代码导入组件）。
另一方面，对于不会（或不想）编码的设计师而言，ProtoPie 是更直观且功能更丰富的选择。它提供大量软硬件原型集成，允许团队设计包含拖放等微交互的公式原型，并可在原型中加入音频和视频。团队甚至可以创建利用智能手机传感器能力（如倾斜、声音和指南针）的逼真原型。
今天就开始构建你自己的超高保真原型，无需编写一行代码——免费试用 ProtoPie。 你还可以查看Canny，了解路线图内容、分享反馈并提出功能请求。
