认识达内从这里开始

原型设计可以说是设计师需要掌握的基本技能之一了，而要想设计原型图我们也需要借助不同的设计工具，今天我们就给大家简单分享了目前常用的两种原型设计工具，一起来了解一下吧。

一、FramerX

Framer已经上线有一段时间了。它的前身——FramerStudio是用来制作高阶且复杂的交互原型，比如可以键入信息、调用设备传感。不过它也有一个缺点，就是需要CoffeeScript编程基础。

FramerX——新上线的版本，功能强大且入门门槛低了很多。现在你仅需点击几下就可以制作和之前一样的高阶交互效果。无需任何编程知识仍可达到编程制作的效果。可自定义页面过渡、轻松创建滚动组件以及可滑动的UI元素，而且元素还可以快速响应。但是如果你需要在原型上添加一些额外的高大上效果，那你就要到一家商店，里面都是用React编写的代码组件：YouTube播放器，UI工具包，货币转换器，可交互式地图组件。如果懂React，你也可以自己建立组件以供自己或他人使用。更棒的是，还可以直接交付代码给开发套用，减少沟通中的摩擦和误解。

实际上，Sketch是静态设计工具中的老大，但它却并不理想。因为设计师产出的是图像，而开发人员需要使用Invision或Zeplin等工具将图像再转换为代码。FramerX旨在让设计师不仅可以绘图，还可以从多个方面考虑设计，从而让产品的各个环节更加紧密地联系在一起。

1.易用性

如果你很熟悉Sketch，就可以顺畅无阻地转换到FrameX。两者的主要不同是在创建布局时，FramerX使用的是框架而不是组。框架就像是一个HTML的容器，可以将素材等放到隐形容器内，这些框架易于操作和调整样式。FramerX还有更多强大的功能，比如Stacks。使用Stacks可以轻松创建具有自动分发和对齐功能的自定义列表，非常方便。但是，如果要创建更高级的组件，则需要一些React基础知识。这可能会吓跑一些设计师，尤其是那些主张「设计师不应写代码」的人。

综上，在易用性方面，FramerX获得五颗星中的三颗星。

2.协作效率

这一点，FramerX做的很不好。除非把源文件发给对方，否则无法将项目转交给客户或开发人员，这真是太不友好了。FramerStudio有个很赞的功能，就是你可以将原型上传到云端，这样就可以在任何地点访问该链接。此外FramerStudio还支持下载后离线使用。而FramerX则没有这些功能。虽然仍可以生成共享链接，但一旦关闭文件或手动停止实时预览，它将自动变为无法访问。我相信Framer团队有能力解决这个问题，但现在我只能给一颗星。我是认真的，Framer团队!

3.保真度

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

4.流程衔接

后一点，但却是很重要的一点：流程衔接。虽然Framer仅适用于Mac，但我们不会因此而责怪它。在Framer的网站上，写着用户可轻松导入Sketch画板，你需要做的就是复制和粘贴。但事实上并不像他们所说的那么容易，而且还无法导入完整的画板。即使可以完整导入，但还存在一个问题：Sketch导入选项设置十分有限，且不支持与除Sketch以外的其他工具衔接。所以在这里不得不将分数降低到两颗星。

二、ProtoPie

ProtoPie是一款比较年轻的产品，不过在这个快速变化的市场中，一年半的上线时间感觉已经不短了。ProtoPie和FramerX有一个相似之处，就是他们都意识到了设计师厌恶写代码，所以都试图缩小设计和代码间的缝隙，而ProtoPie找到了答案。ProtoPie将交互简化成了三个基本的要素：动作对象、触发动作和反应动作。有一个登录按钮(动作对象)，用户点击它(触发动作)后，欢迎界面出现(反应动作)。通过这种方式，您可以使用大量的触发动作库(基本动作，条件和传感器)拼接出保真度非常高的原型。虽然制作过程中点击操作比较多，但产出效果都非常好。

1.易用性

ProtoPie并不复杂，只是头次使用时可能会令人感到困惑。不过他们有大量的教程帮助你熟悉界面、了解功能，并教导如何制作交互。完全不需要学习代码，所有用代码可以制作的动作，在ProtoPie里可以用触发动作和反应动作拼接完成。ProtoPie支持多手指手势，还可以调用手机内部传感器，从而让你的原型和真正的App看起来相差无几。用户使用文档的内容非常丰富，帮助你轻松学习并制作高大上的交互原型，整个过程不涉及任何代码。不过因为一次使用的时候，看起来并不直观，所以我要在这点上减掉一分，易用性得分4分。

2.协作效率

先，你可以使用Wi-Fi或USB连接手机后，在手机上预览原型，甚至可以在本地保存并离线测试。不仅如此，还可以上传作品到云端后分享链接给客户或团队成员，他们可以在电脑或手机上测试交互动作。不过很遗憾，你没有办法添加留言评论并导出开发说明文档。尽管如此ProtoPie的协作功能还是很实用，所以这项至少可以获得三颗星。

3.保真度

ProtoPie提供了诸多强大的功能，不过这并不影响它的易用性。创建精致的交互原型其实并不复杂，任何专业的产品设计师都可以快速地制作出来。从微交互到逼真的全套交互，效果都非常棒。只是与FramerX相比，ProtoPie无法导入代码组件，所以可创建的效果有限。此项分数为4分。

4.流程衔接

ProtoPie适用于Mac和Windows。还可以导入Sketch和AdobeXD(包括Windows平台)，而且导入效果很赞，你有多种导入方式：整个画板或个别图层。ProtoPiePlayer(演示端)支持安卓和iPhone。以上这些可以说几乎涵盖了所有需求。后，我想提一下跨平台交互功能，有了它，你可以创建多个设备之间的通信交互。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。