5个原型工具比较:Proto.io,Pixate,Origami,Framer& Form
本文对5个prototyping工具进行了比较，从IF引导页案例出发，依次详细介绍了5种工具的特点以及优劣势，并对工具的选择提出了建议。这里你可以深入了解到每个工具的特性，合理选择原型工具来制作prototype或者是高保真模型。
我也在自己的博客上发布了这篇译文，欢迎大家浏览：http://juliebug.xfym.info/post/5ge-app-prototyping-gong-ju-bi-jiao-proto.io-pixate-origami-framer-form
原文来源：https://medium.com/sketch-app-sources/five-app-prototyping-tools-compared-form-framer-origami-pixate-proto-io-c2acc9062c61
作者是Tes Mat
以下是正文：
我用5种不同的方法重新设计了IF by IFTTT引导页的高保真prototyping，以此来了解它们之间的不同：Proto.io, Pixate,Framer，Facebook 的Origami和RelativeWave的Form。
先看一下这5种重设模型和真实效果的对比。
（PS: 这里是一个短视频，并不能加载出来。所以我直接给出视频链接了：http://7xipcz.com1.z0.glb.clouddn.com/video/395873123-1.mp4
或者你可以去我的博客里面看：http://juliebug.xfym.info/post/5ge-app-prototyping-gong-ju-bi-jiao-proto.io-pixate-origami-framer-form 都挺流畅的。）
页面 VS 图层
我为什么要选这5种方式呢？因为我发现做像这样一些动画效果多（icons以不同的速度向不同的方向移动）的prototype，很多软件都还不能实现。绝大多数的工具只能让你用固定的页面，而只有更复杂的工具才能让你在一个给定的页面中制作不同对象或者图层的动画。
基于页面的工具
在一个基于页面的工具中，你调出不同的屏幕，然后你做热点或者是按钮将他们连接在一起。你点击屏幕的一个按钮进入另一屏。基于页面的原型工具通常有一些不同屏之间过渡的选择，比如淡出，右滑，从下往上滑等等。这些稍显笨拙，但是当你在搞一个app的流程的时候（还不确定需要做什么，做几屏，它们怎么出现，按钮指向哪里），这是一个快速制作mockup的方法。
一些基于页面的工具有：Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP,Marvel, Balsamiq, Red Pen and Keynotopia. 当然，这里有些工具可以在一个页面内有动画或滚动区域，但你不能用它们来模拟本地实体app的每一次交互。
基于图层的工具
每一个asset，界面元素，或者换句话说，图层可以点击，滑动，拖拽；而且可以有动效。在这样一些工具中制作一个完整的app原型可能很疯狂，工作量很繁重。但是它们对于尝试新的交互和微调动画是很棒的。
我尝试了Proto.io, Pixate, Framer, Facebook的Origami and RelativeWave的Form。说实话，这里还有其他一些 —— Axure and Indigo Studio —— 但是它们似乎太企业级了（太贵了！）。也许我之后有时间会去试试。
所以，现在开始讲我所选择的5种工具。
----------
1. Proto.io
Web-based, with players for iOS and Android.
Proto.io是一款非常强大的网页app；它有很多功能。但是由于每一步设定都是通过拖拽，点击按钮还有在选项中调整数值，有时候有点难以找到一些你需要的设置。
因为IF prototype的实质 —— 不同的对象以不同的速度移动 —— 我必须去添加一些自定义的Javas cript计算。所提供的单行文本区域对于冗长的计算来说太小了，所以我将它们放在我电脑里的一个文本文档里面。值得注意的时，这些Javas cript表达式可能失败，而且没有警告。当它不运行的时候，一定要检查你的浏览器控制台。（我曾有个由负值误差引起的错误。）
创建prototype预览
这让人有点恼火：你每次想去看你所做的结果的时候，都必须去点击[Save Project]和[Preview]。
把prototype发给客户
1. 在网页上：很简单 —— 你可以生成一个公开的链接，像这一个。（这些链接也可以在手机浏览器中打开，并且会作为一个“app”加入到iOS主屏幕中。）你也可以在 Proto.io Spaces把你的作品推送出去。
2. 在设备上：你可以给客户免费的审阅账户让他们看到项目。他们可以在iOS或者Android app上去运行prototype。
和实际app的不同
也没有很多。动画没有那么流畅，蛮严重，因为我必须在滚动视图中添加很多含有自定义Javas cript计算的交互。在网页上就没这么糟糕了，但是就是在设备上很慢。简单的prototype的播放速度就比较正常。
优势
1. 快速建立mockup很方便，因为它有丰富的标准UI元素，而且很多是可以自定义的。
2. Proto.io在这5个之中是唯一一个同时是基于页面的：你可以在一个项目中有很多屏，可以在这些屏之间制作过渡。
3. Dropbox可以同步assets。
劣势
1. 没有实时预览。
2. 你加了很多交互动效之后，动画会变得很慢，就比如我们的这个例子。
3. 你所有的prototype将会被保存在他们的网络平台中，这就意味着当你注销账户之后就不能再运行它们了。（你可以暂停你的账户：当你重新激活账户后你的项目仍然在那里。暂停账户是免费的。）
4. 没有3D的动画。
Prototype下载和工具信息
Proto.io Spaces (注册之后把它导入你的账户)
iOS app: Proto.io
Android app: Proto.io Player
Price:
There are also plans for 10, 15 or 30 active projects, and a free 15-day trial.
----------
2. Pixate
Desktop application for OS X and Windows.
Players for iOS and Android.
Pixate似乎在努力寻找易用性和功能性之间的平衡：它与一些简单的基于页面的工具相比能做的更多，而且学习曲线也不是很陡：在学习了用户手册和视频教程之后你就可以上手了。这儿也有一些demo你可以那去分析看看它们是怎么被做出来的。
预览
Pixate Studio可以用Xcode’s iOS Simulator (on Mac)去运行prototype。你也可以用本地WiFi去链接 iOS或者 Android app。这非常棒，因为它们(Simulator + app) 都是实时更新的。
发给客户
1. 如果你有云计划（$5/month）的话，你可以发布一个项目。其他人可以通过iOS或者Android 扫描页面中的二维码来运行prototype。
2. 你也可以在云账户上添加合作者来让他们看到prototype。他们都需要在app中登陆自己的账户。
3. 或者你可以简单的把工程文件发给他们。他们可以在Pixate Studio中运行（同时也可以看到制作过程）。
与实际app的不同
第六页不见了，因为Pixate的画布只有那么宽。
优势
学起来很容易。
劣势
还是有bug；有时候你需要去解决一个错误。
Prototype下载和Pixate信息
view in app | download .pixate file
Mac or PC application: Pixate Studio
Price:
Pixate Studio
Free! (It used to be
----------
3. Facebook Origami
Runs in Apple’s Quartz Composer for Mac.
There’s a viewer for testing on iPhone or iPad
正如你可能知道的，Origami是Facebook 的 Paper设计组开发的。Origami不是独立的项目，它可能更像是Quartz Composer的一个插件，而Quartz Composer是可视化编程环境，是苹果部分开发者的工具。
你在QC中做一些项目就是连接各种模块。不同的模块有不同的功能，而Origami就主要是为app UI设计设置的额外模块。许多人（但我不是）相比写代码要更喜欢这种方式，但是你必须去描述一些类似if语句，真值判定的逻辑，你还是要去编程，但是仅仅就是用连接一些模块代替了一行行的代码。
从一个侧面说明：IDEO也是基于QC来制作prototype framework的，叫Avocado。它有一些能让开发者得心应手的功能：蓝牙，iOS键盘交互，一个滚轮状动效的表盘模块和一个翻转卡片模块。图层也可以拖拽。
预览
1. 在台式机上：QC有浏览窗口，可以实时预览你所有的改变。
2. 在设备上：你可以将iOS设备插到 Mac上，然后通过Origami Live app进行预览。这个app会对所有的手势进行反馈（点击，滑动等），但是其实只是一个针对于QC内部运行的视口。所以如果你的Mac在 60fps时运行prototype有问题的话，它在Origami Live上也不会很快。
发送给客户
这个还有点难。你当然可以对你的prototype做屏幕刻录，但是这又不符合我们当初做交互原型的初衷；你当然也可以在AE中做啊。让prototype在另一个机器上运行的唯一的方法是在那台机器上建立一样的环境。所以，如果你的客户也用Mac，他可以安装QC和Origami，然后运行prototype—— 当然之前还得以Apple开发者的身份注册。
与实际app的不同
它会比真实的app运行的慢一些，不过这取决于你的电脑。QC太耗电了，它会让你的电脑发烫，特别是当你的电脑没有强大的显卡（像我的Mac mini一样）或者同时连着几台显示器（太罪恶）。我的才能达到20 fps，甚至是只有一个显示器的时候。
优势
文档可能有点欠缺，但是有很活跃的用户社区。而且你可以找到一些视频，教程和博客文章。
劣势
1. 很难去了解怎么去做东西，或者去用哪个模块。
2. QC是不是还在积极地开发还不清楚。它最新的版本还是2011年11月的。但是，Apple很可能在放弃它之前开发出一款替代工具（使用Quartz的视觉交互设计工具）。
Prototype下载和工具信息
Mac application: install instructions
iOS viewer: Origami Live
Price:
Free! You do need an Apple Developer account, but that’s also free, as in beer, or whatever Apple developers might drink.
----------
4. Framer
Framer Studio is a prototyping application for Mac, but Framer.js only needs Safari or Chrome.
这里没有拖拽或者点击按钮，连接点之类的 —— 在Framer中你必须要写代码了。程序员们肯定感觉手到擒来，设计师恐怕就呵呵了。但是它也不是太难 —— Framer Studio用的是Javas cript的简化版本：Coffees cript。但是事实上实际的engine(Framer.js)用Javas cript创造了许多可能：你可以做所有那些可以在网页浏览器上做的事情，所以你可以连接服务器去使用实时数据，或者创建一个Twitter客户端来显示真实的转发。
预览
1. 在台式机上：Framer Studio在右边有个实时的交互预览；如果你又了进行了什么改变，它会实时更新。
2. 在设备上：它有Android版和iOS版的app。当处于同一个WiFi中的时候，会连接上Framer Studio，你每次在Framer Studio中的保存都会自动更新。
发送给客户
只需轻轻一点你就可以建立一个公共页面（像这个），可以在Chrome或者Safari浏览器中浏览，或者 iOS和 Android手机浏览器也可以。（这个链接作为一个“app”添加到iOS主界面中。）一个像这么大的prototype可能会要好几秒去加载，但是它的动画很流畅。
与实际app的不同
这个prototype做的比其他四个要多：你可以在最后一页对登陆，注册和重设密码进行切换。（你不会真正地登陆或者注册，但是即便是这些都可以在Framer中实现。）
优势
1. 与Sketch或者Photoshop合作会很好：你可以通过设计时候的命名来指定图层或者对象。（Framer.js有一个Framer Generator的Mac应用也可以实现这项功能。）
2. Javas cript能做到的一切 —— 比如从服务器上调用实际数据或者使用加速计 —— 在Framer中都可以实现。
劣势
你需要用代码来解决一切，每一帧动画或者交互动效都是。你需要掌握Coffees cript，可能还需要会写Javas cript。
prototype下载及工具信息
view online | download .framer project
Mac application: Framer Studio
iOS app: Frameless
Android app: Framer
Price:
Framer.js, the Javas cript framework, is open-source and free.
Framer Studio is $99. (There is a free 14-day trial)
----------
5. Form by RelativeWave
Mac application with a viewer for iPhone or iPad.
Form也很年轻（首次发布是在2014年9月）而且很显然它的灵感来自于Facebook和IDEO开发的QC。RelativeWave的人大概在想，“Origami离开了QC那个包袱将会变成什么样？”Origami 的用户会觉得很熟悉；许多模块都是一样的，而且只有你需要的模块。
预览
事实上prototype是在连接的iOS app中运行的（WiFi or USB连接）。你将会注意到，如果没有接入设备的话，你双击两个模块之间的连接点时是没有数值显示的。Mac app中的浏览窗口，像QC一样，肯定是得心应手的，而且似乎是计划好的。
发送给客户
免费的 iOS浏览器可以打开 .form文件，所有你可以直接发送文件给客户，他们可以在iOS设备上运行。
和实际app的不同
我觉得不是很多。如果你找到了请告诉我。
优势
1. 与Origami相比：prototype在设备上本地运行，所以和Origami Live相比更灵敏。
2. 你可以使用设备的相机，加速器，重力感应和位置。（Origami可以使用Mac的网络摄像头。）
劣势
和Origami 一样，当你有复杂的prototype时：显示的结果真是纵横交错。不过模块组会帮助保证一个整体的概览。
prototype下载和工具信息
Mac application: Form
iOS app: Form Viewer
Price:
Free! The Mac application used to be $79.99, but when Google bought RelativeWave last November (only months after launch) they made it free.
----------
到底用哪一个
如果你还没用过这些工具，而且想要快速建立prototype：
1. Pixate
2. 或者 Proto.io
但是如果你想要投资一些精力去学习一款强大的工具：
1. Form， 当你想要可视化的编程
2. Framer，如果你更想写代码
我尝试了以上5种（至少都涉猎了一些），所以我会针对不同的情况来选择不同的工具。
1. 当我还在构思一款app的流程的时候，我选择基于页面的工具。早期没有必要去用高保真模型。
2. 但是Proto.io也可以用于低保真模型：它有iOS, Android和Windows手机的标准界面元素，而且屏幕之间可以链接。它还有附加的优点，就是用Sketch或者Photoshop中设计的asset可以在后面做出更漂亮的prototype。
3. Pixate 当已经有了UI设计和asset，只要是动画不那么复杂就可以用。
4. Form 当prototype中需要用到设备的传感器或者相机是可以用。
5. Framer 可以用于所有情况。
还有一件事
这些工具都很年轻，我们还在探索究竟哪种才是最好的交互设计工具，但是我很看好Framer。我喜欢它的多功能性和他的功能，而且我发现了一个绝妙的去使用它的借口：我将要写一本关于Framer的书！
这本Framer的书将会成为那些没有编程经验的人开始学习Coffees cript基础的手册。它也会有很多教程，你可以用来改造一些很流行的app。这本书将会告诉你如何用 Parse或者FireBase后台来调入真实的数据到你的prototype里面，或者从服务器中接入实时数据，比如Twitter, Flickr, Dribbble等等。
在 framerbook.com 注册就可以得到一个提前的打折。
Originally published at cptv8.com.
