超详细评测！2019年值得关注的四个原型制作工具

Cezary Ołowski ：如今各大公司在品功能竞争上，比起前口若悬河宣传，现在更多是将功能接展示出来。相信你也有过这经历，有时用言词解释某些 idea，倒不如在白板或者纸上写下来更省时、易懂。而这张纸上说明是原型。

再来想象另一种情况。你对陶器很着迷，打算打一种的喷水壶。此时明智的方法是和友快速制作一个简易模。因为你想一上来就开始建立庞大的生产线，而只是希望先检验你的想法是否有漏洞。而这个模正是原。

无论你是要开发一个新的 App 还是要制作个喷水壶，原型设计作为设计流程中的一步，可帮助你验证自己的想法、向他人说明自己的设计、还在研中帮助检验户体验。如果把设计看作是一种沟通手，那么经过原打磨过的设计可户每次和你的产沟通时，都会有一愉快的对话。户会么样的「话题」，可通过原先测试一，把那些人知措的冷笑话除掉。这个打磨沟通的过程，就是原设计。

那，应该使用什的工制作型？这大程度上取决于你想要实现的效果以及制作型的目的。选择适的工对于开发和户的沟通至关重要。同，选择符呈现效果复杂度的工也重要，如果只是想制作按钮的简悬停状，则无需构建整个屏幕。切忌不要用大炮麻雀。

挑选具，我们需制一挑选标准。我关注的几因素：

1. 易用性

学习一款具多难？可以不费劲的速自学还需专门费力研究？

2. 协作效率

这点原型设的核价。原型否易分享并留言论？如何与的团队以及客户沟通？留言理、链接分享、云端文件理，否可以速下载并离线预览，不同的使用景需不同的功能支持。

3. 保真度

原型看起否够逼真？还一线框图致展一下思？高保真原型合用户测试，这样用户可以加关注产品的流程或者功能，不会因原型的低劣保真度分。低保真原型合设的初法，此时不需意具体细节。

4. 流程衔接

该具否合的作流程？它否可以很自然同的作方式衔接？这一点非常重，什么比穿不合脚的子糟了。

一、Framer X

官网链接：https://framer.com/

Framer 已线一段时间了。它的身——Framer Studio 用制作高阶且复杂的交互原型，比如可以键入息、调用备传。不过它也有一个缺点，就是需要 CoffeeScript编程基础。

Framer X——新线的版本，功能强且入门门槛低了很多。仅需点击几下就可以制作之一样的高阶交互效果。无需任何编程知识仍可达到编程制作的效果。可自义页面过渡、轻松创建滚动组件以及可滑动的 UI元素，且元素还可以速响应。但如果需原型添加一些额外的高效果，那就到一家商店，里面都用 React编写的码组件：YouTube播器，UI具包，币转换器，可交互式图组件。如果懂 React，也可以自己建立组件以供自己或他人使用。棒的，还可以直接交付码给发套用，减少沟通中的摩擦误解。

际上，Sketch 是静态设计工具中的老大，但它却并不理想。因为设计师产出的是图像，而开人需要使用 Invision 或 Zeplin等工具将图像转换为代码。Framer X 旨在让设计师不仅以绘图，还以从个方面考虑设计，从而让产品的各个节更加紧密地联系在一。

1. 易用

果你很熟悉 Sketch，就以顺畅无阻地转换到 Frame X。两者的主要不同是在创建局时，Framer X 使用的是框架而不是组。框架就像是一个 HTML 的容器，以将素材等放到隐形容器内，框架易操和整样式。Framer X 还有更强大的功能，比 Stacks。使用 Stacks 以轻松创建具有自动分和对齐功能的自定义列表，非常方便。但是，果要创建更高级的组件，则需要一 React 基础识。能吓跑一设计师，尤其是主「设计师不应写代码」的人。

综上，在易用性，Framer X 获五颗三颗。

2. 协作效率

这，Framer X 做很不好。除把文件发，否则法将项目转交客户或开发员，这真是太不友好了。Framer Studio 有个很赞功能，是你可以将原型上传到云端，这样可以在任何地访问该链接。此 Framer Studio 支持下载后离线使用。而 Framer X 则没有这些功能。虽然仍可以生成共享链接，旦关闭文件或手动止实时预览，它将自动变为法访问。我相信 Framer 团队有能力解决这个问题，现在我能颗。我是认真，Framer团队！

3. 保真度

这可以弥补刚刚 Framer 失去分数。制作高保真原型从来不是件容易事情，而 Framer 绝妙地在工具内添加了组件商店。这个功能将让 Framer 在近段时内脱颖而出。使用 Framer X 进原型设计，可以让设计员更加接近品设计高峰——UI设计体系。像 Airbnb、Shopify团队已经在使用 UI体系为各个平台品提供统设计服务。所以在这里我将出5分满分。

4. 流程衔接

最后，却是很要：流程衔接。虽然 Framer 仅适用于 Mac，我们不会此而责怪它。在 Framer 网站上，写着用户可轻松导入 Sketch画板，你需要做是复制和粘贴。事实上并不像他们所说那么容易，而法导入完画板。即使可以完导入，存在个问题：Sketch 导入选项设十分有限，不支持与除 Sketch 以其他工具衔接。所以在这里不不将分数降低到两颗。

最终分数11分（满分20）。总体看来 Framer 还是错的，但有些方面需要。它是一个值得信赖的软件，并为他工具供了可遵循的方向。

更全面的评测 → 《大概是半球最详尽的 Framer X 深度评测》

二、ProtoPie

官网链：http://www.protopie.cn/

ProtoPie 是一款比较年轻的产品，不过在这个快速变化的市中，一年半的上线间觉已经不短了。ProtoPie 和 Framer X有一个相似之，就是都识了计厌恶写代码，所以都图缩计和代码间的缝隙，而最终 ProtoPie 找了答案。ProtoPie 将交互简化成了三个基本的要素：动作对象、触发动作和反应动作。有一个登录按钮（动作对象），用户点击它（触发动作）后，欢迎界面出现（反应动作）。通过这种方式，您可以使用大量的触发动作库（基本动作，条件和传器）拼出保真度非常高的型。虽然制作过程中点击操作比较多，但产出效果都非常好。

1. 易用性

ProtoPie 并不复杂，只是头次使用可能会令人困惑。不过有大量的教程帮助你熟悉界面、了解功能，并教导如何制作交互。完全不需要学习代码，所有用代码可以制作的动作，在 ProtoPie 可以用触发动作和反应动作拼完成。ProtoPie 支持多指势，还可以调用机内部传器，从而让你的型和真正的 App 起来相差无。用户使用文档的内容非常丰，帮助你轻学习并制作高大上的交互型，整个过程不涉及任何代码。不过因为第一次使用的候，起来并不直观，所以要在这点上减掉一，最终易用性得4。

2. 协作效率

首先，你可以使用 Wi-Fi 或 USB机后，在机上预览型，甚至可以在本地保存并离线测。不仅如此，还可以上传作品云端后享链给户或队成员，可以在脑或机上测交互动作。不过遗憾，你没有法添加留言评论并导出开发说文档。尽管如此 ProtoPie 的协作功能还是实用，所以这项至少可以获得三颗星。

3. 保真度

ProtoPie 提供了诸多大的功能，不过这并不响它的易用性。创建致的交互型其实并不复杂，任何专业的产品计都可以快速地制作出来。从交互逼真的全套交互，最终效果都非常棒。只是 Framer X 相比，ProtoPie 无法导入代码组件，所以可创建的效果有限。最终此项数为4。

4. 流程衔

ProtoPie 适用于 Mac和 Windows。还可以导入 Sketch 和 Adobe XD（包括Windows），而且导入效果赞，你有多种导入方式：整个画板或个别图层。ProtoPie Player（演示端）支持安卓和 iPhone。以上这些可以说乎涵盖了所有需求。最后，想提一下跨交互功能，有了它，你可以创建多个备之间的通交互，例如聊或款交易。这真是前卫了，当之无愧的。

终 ProtoPie 获得了16分（满分20）的高分。如果需速创建高保真原型，并分享给客户用户测试，那么 ProtoPie 就的不二选择。

更面的评测和独家 → 《谁说互原型制作难？那还用过这神器！》

三、Flinto

官网链接：https://www.flinto.com/

这一款很的软件。但肯也很清楚，其他竞争对手比，Flinto 还存一些问题的。Flinto 提供了基础的功能，对初学者非常直观。可以创建复杂的页面流程，也可以创建简单小巧的交互。Flinto 不支持任何编码，也时间线，如果刚好就需这些基本功能，那么这具绝对合。

1. 易用性

Flinto 任何学习本，需的就知道的效果什么，以及 Flinto 能否实。创建交互很易——选择对象或画板并添加链接或手势。此外还可以添加页面切换效果、添加音效、调整时间，就这些，一原型就搞了。网很多教程，Flinto 官网还明文档帮创建原型。无需码，满分。

2. 协作效率

Flinto 允许手机预览您的原型，但只支持 iOS。将 Mac iPhone连接到同一网络后就可以直接设备测试原型。不过很可惜，Flinto 共享功能十分限，链接分享，也任何与发及客户协作的功能。虽然可以录制预览窗口分享视频文件，或直接将其传到 Dribbble，但这分享方式很不方便，这也该具的一很缺点。很遗憾，一颗星。

3. 保真度

Flinto 基本交互的制作虽然还不错的，但如果制作中高阶交互，如：文本输入、视频，很遗憾 Flinto 并这些功能。不过它支持 Sketch导入，速让静态素动起，这点还很赞的。因 Flinto 会限制的技能象力，所以保真度这项两颗星。

4. 流程衔接

Flinto 的局限性于它仅支持 Mac，预览端 App 也仅用于 iOS设备。且只能导入 Sketch文件，不就 Flinto 里面自己设，显然这可不一好主意。一颗星。

最终得分9分（满分20）。Flinto 做到所见即所得，虽没有什么高级功能，但果你只是想串联个页面，加一简单的互，展现给你的团或者分享到 Dribbble，Flinto 以满你的需要。当 Sketch插件也能达到要求。

四、Atomic

官网链接：https://atomic.io/

和之前提到的工具不同，Atomic 是在网页端操的软件。个人其更喜欢安装型应用，但是我还是要感谢 Atomic 提供强大协功能，比团以远程协同一个项目。不 Atomic团宣他们正将把注意力转移到其他项目上。果你有 Atomic 的账户，你以一直使用到2019年6月30，在此之你将无法使用 Atomic。是个坏消息！不你还有一时间试试款工具。

1. 易用

Atomic 有着非常不错的新手引导：无需阅读任何说明文档，引导带领你完成几个任务，对工具的学习非常有帮助。基原理，你就几乎以所有的效果。Atomic 具有直观的界面，高阶动效库以及嵌套的组件。此项得分4分。

2. 协效率

在协项上，Atomic 无疑是最的。你以邀请团成同时编辑同一个项目（就像Figma），完成，以简单快速地分享链接并添加留言评论。还以创建类似 Sketch 的共享库，样整个团以共用同一个设计资源。该功能对需要为不同平台设计响应式产品的团至关重要。Atomic 此项得分5颗星。

3. 度

Atomic 在种手势动、表互、转场效果、键盘互（方向键等）等效果的使用上非常简单，效果也很逼。你也以将互与微动效相结合，以现更的效果。基上编辑的工具里，果将 Atomic 与其他之相比，你也和我一样认定 Atomic 的表现更为突出。四颗星。

4. 流程衔接

你以在浏览器上使用 Atomic，所以电脑系统变得无关紧要。不在我撰写篇文章的时，Atomic 只支持 Sketch导，所以除非你选择在 Atomic 上自己绘图，否则绘图阶段受到 Mac系统的，3颗星。

最终分16分（满分20）。如你不介意在网页端制作原型，那么于个团队来说，Atomic 疑是最强大工具，尤其是在大公司或者远程工作团队，协作功能常有用。

总结

当选择哪个工具要看你自己，你的需求是什么，最适合自己工流程的工具是哪种，有没有电脑系统的要求等等。希望篇简短的总结能帮助你缩小选择范围。

四款工具的官网地址：

• Framer：https://framer.com/
• ProtoPie：http://www.protopie.cn/
• Flinto：https://www.flinto.com/
• Atomic：https://atomic.io/

原文链接：https://blog.prototypr.io/4-prototyping-tools-worth-considering-at-the-end-of-2018-3bfee0211569