Proto.io,Pixate,Origami,Framer&Form
为什么我会选择这五款?我发现用多数原型设计工具再造这种重度动画效果的应用(图标以不同的速度向不同的方向移动)几乎不可能。大多数工具仅仅是让你连接静态“页面”,只有那些更复杂的才能让你在给定的页面里不同的对象或“层”添加动效。
我接下来会进一步解释。
在基于页面的工具里,你布置好不同的屏,然后建立热点或者按钮将它们连接在一起。你轻触一个屏上某个按钮来进入另一个屏。基于页面的工具一般支持屏之间的多种过渡效果,比如淡入、从右滑入,从下滑入等等。虽然有点笨拙,但是当你还在设法搞清楚一个app的流程,比如说需要多少屏、它们如何呈现出来、按钮如何布置等等,用这种工具快速作出“实体模型”还算是个不错的方法。
的确,这里面有些工具可以让你在一个页面里带有动效或者滚动区域,但是你无法用它们来模拟真实的原生app所有的交互效果。
好吧,我们就继续看看这些获选的工具。
基于Web界面,带有IOS和安卓下的调试器
Proto.io这个web应用强大得令人吃惊,它有很多很多的功能。不过,因为所有工作都是依靠拖放、点击按钮和选择列表的值,有时候想找到需要的设定会让人有点儿不知所措。
鉴于IF原型的本质特点——不同的对象以不同的速度移动——我不得不增加一些自定义的JavaScript计算脚本。Proto.io提供的单行文本框对于冗长的计算脚本来说太小了。为了能够概览脚本,我得把它们保存在我电脑上的文本文件里。特别需要注意是,这些JavaScript运算式可能会失败,却没有任何警告信息。如果有些东西不工作,一定要检查浏览器的控制台。(我遇到一个错误,是一个包含负值的变量造成的。)
这个相当让人恼火:你必须每次都点击[SaveProject]然后点[Preview]才能看到你作出修改后的效果。
不多。不过动效不够流畅,因为我不得不在滚动视图里添加很多包含自定义JavaScript计算脚本的交互功能。在web上跑得蛮好的,但是在设备上实在太慢了。似乎更简单的原型回放速度能正常些。
价格:
29美元/月,或者288美元/年,可以有5个活跃项目。还有10、15、30个活跃项目的套餐,以及一个15日免费试用期。
OSX和Windows桌面应用,IOS和安卓调试器
PixateStudio可以使用Xcode的IOSSimulator(Mac版)来运行原型,也可以通过本地WiFi用IOS或安卓app来访问原型。这个功能很棒,特别是Simulator和app都是即时更新的。
第六个页面会消失,因为Pixate的canvas画布只有这么宽(最多五个页面)。
PixateStudio
免费!(曾经149美元,直到谷歌于2015年7月收购Pixate。)
PixateCloud
5美元/用户/月或者50美元/用户/年,有30天免费试用期。
运行在苹果公司的Mac版QuartzComposer中,iPhone或iPad上有个查看器用来测试。
在QuartzComposer里,你通过把多个“patch”相互连接来进行编程。不同的patch有不同的功能。Origami主要是一套额外的patch,用来设计appUI。与必须写代码相比,很多人更喜欢这种方式(不包括我)。但是,当你必须描述诸如“如果这样,那么就用这段计算的值那样做,但如果不是这样....”,你还是不得不“编程”,只不过这个编程是通过连接几个patch,而不是写几行代码。
这个就难了。你当然可以给你的原型做一个屏幕录像,但是这样就达不到做一个交互式原型的目的了,还不如用AfterEffects做点什么呢。唯一一个在其它电脑上测试原型的现实办法是准备相同的配置。如果你的客户用Mac,她可以安装QuartzComposer+Origami来运行你的原型——当然,还得首先注册苹果开发者帐号。
可能会比真家伙慢一点儿,这取决于你的电脑。QuartzComposer绝对是个电老虎,会让你的散热风扇狂转的,尤其是当你的Mac没有强大的显卡(比如我的MacMini),或者连接了多个显示器(罪过!)。我只用一台显示器,最多才能跑到20fps。
免费!你还需要一个苹果开发者帐号,那也是免费的,就像啤酒、或者随便苹果公司的开发人员喝的什么。(译者注:苹果公司每隔数周都会举行“啤酒狂欢”奖励员工,为他们提供免费啤酒和开胃菜。)
FramerStudio是Mac上的原型设计应用,但Framer.js仅需要Safari或Chrome.
这里没有拖放、按钮或连接点,用Framer你必须“写代码”。程序员会觉得这跟在家一样自在,而设计师就未必了。不过它并不很难————FramerStudio使用了一款精简版的JavaScript,叫CoffeeScript。实际的引擎(Framer.js)使用JavaScripts,这就造就了大量的可能性:只要浏览器可以做的你都能做,比如使用即时数据连接服务器,或者创建一个Twitter客户端显示实时推文。
Framer.js,JavaScript框架,是开源免费的。
FramerStudio需要99美元。(有14天免费试用期。)
Mac应用,带有一个iPhone或iPad上的查看器
Form还很年轻(2014年9月发布),而且很明显,它是从Facebook和IDEO在QuartzComposer上所做的得到了启发。RelativeWave的那些家伙很可能想:“如果没有QuartzComposer这个包袱,Origami会是什么样呢?”Origami用户会觉得Form用起来很舒服,很多patch是相同的,而且Form只包含你需要的那些patch。
免费的IOS查看器能够打开.form文件,你只需要把文件用邮件发给客户,让他们用自己的IOS设备运行即可。
跟app的区别
我觉得不多。如果你发现了就告诉我。
价格
免费!Mac应用曾经是79.99美元,谷歌去年11月(那时Form发布了仅仅数月)收购了RelativeWave之后就免费提供了。
如果你从未用过上述的任何一个,而且想快速的做出原型:
这五款工具我已经全都了解了(至少一点点吧),所以我可能会在不同的场景使用不同的工具: