Android--五款国外APP原型设计工具的优缺点对比

1、Proto.io

基于Web界面,带有IOS和安卓下的调试器

Proto.io这个web应用强大得令人吃惊,它有很多很多的功能。不过,因为所有工作都是依靠拖放、点击按钮和选择列表的值,有时候想找到需要的设定会让人有点儿不知所措。

鉴于IF原型的本质特点——不同的对象以不同的速度移动——我不得不增加一些自定义的JavaScript计算脚本。Proto.io提供的单行文本框对于冗长的计算脚本来说太小了。为了能够概览脚本,我得把它们保存在我电脑上的文本文件里。特别需要注意是,这些JavaScript运算式可能会失败,却没有任何警告信息。如果有些东西不工作,一定要检查浏览器的控制台。(我遇到一个错误,是一个包含负值的变量造成的。)

创建原型的同时预览

这个相当让人恼火:你必须每次都点击 [ Save Project ] 然后点 [ Preview ] 才能看到你作出修改后的效果。

把原型发给客户

在网页上:简单——你可以生成一个公网链接,就像这个。(这些连接也可以用移动浏览器打开,然后作为一个“app”添加到IOS主屏上。)你可以在 Proto.io Spaces 向公众用户展示你的作品。

在移动设备上:你可以给用户建立免费的评估帐号,允许他们访问一个项目。他们可以在IOS或安卓app里运行你的原型。

原型跟app的区别

不多。不过动效不够流畅,因为我不得不在滚动视图里添加很多包含自定义JavaScript计算脚本的交互功能。在web上跑得蛮好的,但是在设备上实在太慢了。似乎更简单的原型回放速度能正常些。

优点

易于制作快速的实体模型,因为有大量的标准UI元素库,而且很多是可以定制的。

Proto.io在这五种工具中是唯一一个同时也是基于页面的。你可以在一个项目中包含多个屏,屏之间可以创建过渡效果。

支持元件跟Dropbox同步。

缺点

没有即时预览。

如果加了很多交互,像本文的例子一样,动效会变慢。

你的所有原型都保存在Proto.io的web平台上,这意味着如果你要取消你的帐号,你连运行它们都不再能了。(有个可能是你把帐号“寄存”:当你重新激活帐号,你的项目还会在那儿。寄存帐号是免费的。)

3D动效不可能。

原型范例

在 Proto.io Spaces上查看(注册一个帐号,把项目导入到你的帐号就能看了。)

价格:

Pixate Studio

免费!(曾经149美元,直到谷歌于2015年7月收购Pixate。)

Pixate Cloud

5美元/用户/月 或者 50美元/用户/年,有30天免费试用期。

2、Pixate

OS X和Windows桌面应用,IOS和安卓调试器

Pixate似乎恰到好处的平衡了易用性和功能性:它比简单的基于页面的工具功能更多,但学习曲线并不很陡。仔细看过用户指南和视频教程后你就能上手了。还有几个演示供你解构,看看它们是怎么做出来的。

预览

Pixate Studio可以使用Xcode的IOS Simulator(Mac版)来运行原型,也可以通过本地WiFi用IOS或安卓app来访问原型。这个功能很棒,特别是Simulator和app都是即时更新的。

发给客户

如果你有云套餐(5美元/月),你可以发布一个项目,人们可以用IOS或安卓调试器扫描这个网页上的二维码来运行原型。

你可以在你的云帐号里增加无限量的”协作者”,允许他们访问原型,他们必须在调试器app中登录自己的帐号才能访问。

或者,你可以仅仅把.pixate文件用邮件发给别人,他们可以在Pixate Studio中打开并运行(但同时客户也能看到原型是怎么做的,还能做出修改)。

跟app的区别

第六个页面会消失,因为Pixate的canvas画布只有这么宽(最多五个页面)。

优点

易于学习

缺点

依旧有些问题,有时可能需要绕开bug。

原型范例

www.pixate.com

价格:

Pixate Studio

免费!(曾经149美元,直到谷歌于2015年7月收购Pixate。)

Pixate Cloud

5美元/用户/月 或者 50美元/用户/年,有30天免费试用期。

3、Facebook Origami

运行在苹果公司的Mac版Quartz Composer中,iPhone或iPad上有个查看器用来测试。

你很可能已经知道,Origami是Facebook Paper的设计团队开发的。Origami不是个独立程序,它相当于Quartz Composer的一个插件。而Quartz Composer是一个可视化程序设计环境,苹果公司开发工具集的一部分。

在Quartz Composer里,你通过把多个“patch”相互连接来进行编程。不同的patch有不同的功能。Origami主要是一套额外的patch,用来设计app UI。与必须写代码相比,很多人更喜欢这种方式(不包括我)。但是,当你必须描述诸如“如果这样,那么就用这段计算的值那样做,但如果不是这样….”,你还是不得不“编程”,只不过这个编程是通过连接几个patch,而不是写几行代码。

另外提一下:IDEO也基于Quartz Composer创建了一个原型设计框架,叫Avocado。它有的一些功能,在某些项目里可能会很方便:蓝牙集成、一个IOS交互式键盘、一个像滚轮那样交互的拨号盘patch、和一个可翻转的卡片patch,而且层也可以做成可拖拽的。

预览

在桌面:Quartz Composer有一个查看器,你在编辑器里的任何修改会在查看器里即时得到反映。

在设备上:用Origami Live app,你可以在IOS设备上测试,IOS设备需要插在Mac上。app对所有手势(触摸、滑动等)都会作出反应,但实际上只是Quartz Composer里运行的程序的观察窗而已。如果你的Mac难以以60fps运行原型,那么它在Origami Live里面也跑不了多快。

发给客户

这个就难了。你当然可以给你的原型做一个屏幕录像,但是这样就达不到做一个交互式原型的目的了,还不如用After Effects做点什么呢。唯一一个在其它电脑上测试原型的现实办法是准备相同的配置。如果你的客户用Mac,她可以安装Quartz Composer + Origami来运行你的原型——当然,还得首先注册苹果开发者帐号。

跟app的区别

可能会比真家伙慢一点儿,这取决于你的电脑。Quartz Composer绝对是个电老虎,会让你的散热风扇狂转的,尤其是当你的Mac没有强大的显卡(比如我的Mac Mini),或者连接了多个显示器(罪过!)。我只用一台显示器,最多才能跑到20fps。

优点

文档虽然有些不全,但是有个非常活跃的用户社区。此外,你还可以找到不少的视频、教程和博文。

缺点

不容易知道活儿该怎么做,有那么多patch,不知道该用哪个。

Quartz Composer否保持活跃开发现在还不清楚,最近的版本是2011年11月份发布的。但另一方面,苹果公司很可能会在搁置这个工具之前,发行一个使用Quartz框架的替换工具来做可视化交互设计。

原型范例

facebook.github.io/origami

价格:

免费!你还需要一个苹果开发者帐号,那也是免费的,就像啤酒、或者随便苹果公司的开发人员喝的什么。(译者注:苹果公司每隔数周都会举行“啤酒狂欢”奖励员工,为他们提供免费啤酒和开胃菜。)

4、Framer

Framer Studio是Mac上的原型设计应用,但Framer.js仅需要Safari或Chrome.

交互原型设计框架 Framer.js 官网:http://framerjs.com/

这里没有拖放、按钮或连接点,用Framer你必须“写代码”。程序员会觉得这跟在家一样自在,而设计师就未必了。不过它并不很难————Framer Studio使用了一款精简版的JavaScript,叫CoffeeScript。实际的引擎(Framer.js)使用JavaScripts,这就造就了大量的可能性:只要浏览器可以做的你都能做,比如使用即时数据连接服务器,或者创建一个Twitter客户端显示实时推文。

预览

在桌面:Framer Studio在右侧有个即时可交互的预览,你做的修改可以马上更新。

在设备上:有安卓和IOS下的app,在同一个WiFi网络里它们都可以连接到Framer Studio,每次在Framer Studio保存修改后会自动刷新原型。

发给客户

只需点一下鼠标就能生成一个公开页面(比如这个),可以用Chrome或Safari查看,移动浏览器也行(链接可以作为“应用”加入到IOS主屏)。同样的链接也能用IOS和安卓查看器(其实就是无边框的浏览器)打开。像IF这样较大的原型在查看器里加载需要花几秒钟,但加载后动效就平滑了。

跟app的区别

这个原型比其它四个更能干一些:你可以在最近的一页切换登录、注册和重置密码模式。(你并不能真正的登录或注册,但这些操作在Framer里也能再现。)

优点

与 Sketch 或 Photoshop的集成是再好不过了:设计的时候可以用你给的命名来引用层或对象。(Framer.js包含一个Mac应用Framer Generator,也能做到这一点。)

任何JavaScript能做到的——比如从web service获得即时数据,使用加速度传感器——用Framer都是可以实现的。

缺点

你必须为所有东西写代码,包括动效或交互。你需要熟悉或者了解CoffeeScript,或许再加上JavaScript。

原型范例

framerjs.com

价格:

Framer.js,JavaScript框架,是开源免费的。

Framer Studio 需要99美元。(有14天免费试用期。)

5、Form by RelativeWave

Mac应用,带有一个iPhone或iPad上的查看器

Form还很年轻(2014年9月发布),而且很明显,它是从Facebook和IDEO在Quartz Composer上所做的得到了启发。RelativeWave的那些家伙很可能想:“如果没有Quartz Composer这个包袱,Origami会是什么样呢?” Origami用户会觉得Form用起来很舒服,很多patch是相同的,而且Form只包含你需要的那些patch。

预览

原型是在通过WiFi或USB连接的IOS设备上运行的。如果没有设备连上,你会发现双击两个patch之间的连接时不会有读数显示出来。如果像Quartz Composer那样,Mac应用里带个查看器的话肯定是很方便的,这个功能似乎已经在计划中了。

发给客户

免费的IOS查看器能够打开.form文件,你只需要把文件用邮件发给客户,让他们用自己的IOS设备运行即可。

跟app的区别

我觉得不多。如果你发现了就告诉我。

优点

与Origami相比:原型在设备上是以原生方式运行的,所以比Origami Live反应灵敏得多。

你可以使用设备上的相机、加速度传感器、陀螺仪和定位功能。(Origami可以使用Mac上的摄像头)

缺点

跟Origami一样,如果搞了一个复杂的原型,跑起来就像面汤一样粘呼呼的。把patch组合起来能够获得更好的概览效果。

原型范例

www.relativewave.com

价格

免费!Mac应用曾经是79.99美元,谷歌去年11月(那时Form发布了仅仅数月)收购了RelativeWave之后就免费提供了。

时间: 2024-10-10 08:38:02

Android--五款国外APP原型设计工具的优缺点对比的相关文章

几种常用App原型设计工具详解

摘要:用于App开发的原型设计工具已有很多,鱼龙混杂,这对有潜在选择恐惧症者来说可不是一件好事,今天大家就和小编一起深入认识一下几种常用的App原型设计工具. 大家都在用的Axure Axure RP,即Axure Rapid Prototyping是最常用的快速原型设计工具之一,帮助负责定义需求和规格.设计功能和界面的用户快速创建线框图.流程图.原型和规格说明文档,可用于应用软件和Web网站设计,支持多人协作设计和版本控制管理. Axure RP的用户群体非常宽泛,包括商业分析师.信息架构师.

知乎和Quora高分APP原型设计工具推荐

据数据显示,中国手机App市场应用已经超过402万款,远远高出我们的想象.数据背后的支撑,除了庞大的设计开发团队,还有各式各样的原型设计工具的应用.为了找到一款得心应手的原型工具,设计师们和产品经理们通常热衷于求助知乎和Quora.最近留意到一个全世界都在问的问题:哪款App原型设计工具最好用? 可能大多数产品经理或者设计师在看到这个问题的时候,脑子里一片空白,那么多原型工具,我怎么知道哪一款最好用呢? 本着乐于助人的思想,我这里给大家整理了几款在知乎和Quora上排名都比较靠前的移动应用原型设

APP原型设计工具,哪家强?转自知乎

著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:李志超 链接:http://www.zhihu.com/question/20403141/answer/25329730 来源:知乎 首先如果你小团队或者个人开发,当然可以用Xcode,如果大公司跨部门审核调整各种,还是有个快速的原型. 如你要求,可交互.包括常用的Axrue,我试用过下面提到的所有软件,分别完整产出过不同的原型,还有一些市面上的你一看它介绍图还在用ios6的就知道不必了,说明很久没更新了. 下面这些

【转】2016你一定要试试这8款原型设计工具

以前,Photoshop在交互设计领域扮演着主要角色.最近一份调查显示, Photoshop的地位有所下降.一共有来自200个国家4000人参与了这次调查, 结果显示,设计师更加倾向于一些新型的工具, 因为这些工具简化了原型设计,设计数字产品的过程. 我们可以轻易的从网上获得各种各样的原型设计工具,例如众人皆知的Axure和新发布的Mockplus.下面为大家推荐8款原型设计工具. 1. Axure PR 价格 l 标准版-$289一个注册码 l 专业版-$589一个注册码 Axure RP是美

15款优秀移动APP产品原型设计工具

一款优秀的移动APP产品原型设计工具应该具备: ①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯-以体现我是那么的敬业--长点工资必备) ②.组件库(高效复用,谁用谁知道) ③.可以快速生成全局流程(程序猿看不懂拆解的,给丫的看这个) ④.在线协作(多个PM狗一起用) ⑤.手势操作.转场动画.交互特效-(这些都不需要,留给专业的交互.视觉,搞那么虚的不如多想想产品流程逻辑做做减法.写写xxRD啥的) 这些年,产品狗们折腾过的原型工具: 1. POP(Prototyping on

Mockplus: 一款简单而又强大的原型设计工具

在网络技术蓬勃发展的当今社会,各类线框图和原型设计工具也随之而大量涌现.但是,作为一款简单又不失强大的新型工具,Mockplus借着它的独特之处在市场中也占有着它的一席之地. 作为一款简单,易学,易用,无代码的原型设计工具,Mockplus让用户更注重于设计本身而不需要花费大量的时间在软件的学习上.页面之间的链接只需一个"拖拽"选项就能搞定. 对于中小企业和团队来说,敏捷开发.快速迭代是他们最有效的快速融合并适应市场和消费者的方式.灵活,高效,低成本的原型设计对于现在的中小企业是至关重

移动APP开发使用什么样的原型设计工具比较合适?

总结过几个模型后,我就趁热打铁看了第二个题目:移动APP开发使用什么样的原型设计工具比较合适? 这个要分情况啦! 有时候,客户的需求很明显,就是实现几个功能的app(看来是个小型的工程啦)所以瀑布模型就可以胜任了. 有时候,客户的需求不很清晰,这就需要开发人员快速开发一个原型,再和客户详细计划自己需求的功能.如果是一个很大型的app,像淘宝,qq等这样的,需要不断的更新新的功能模块,这就需要开发阶段就要开放式的体系结构,这就需要增量模型, 有时候,类似于针对用户体验的APP就需要快速原型模型,根

干货!所有常用的原型设计工具都在这里了

本文列举了20余款当前国内外比较火爆的原型设计工具.我把它们分为以下五类: 1. 交互原型设计工具(仅限页面交互) 2. 手机原型工具 3. 网页原型工具 4. 静态原型工具 5. 动态原型工具(组件和页面交互) 交互原型设计工具(仅限页面交互) 这一类工具主要是建立页面之间的交互.其本身不能进行组件的制作和设计,需要从其它地方(例如:PS,本地)导入设计图,对已有的设计图创建热点,进行交互设计. Invision - 一款很好的制作原型交互演示的工具.你可以从本地.Dropbox.Google

10款 Mac 经典原型设计开发软件推荐

在Mac上有大量强大的开发和设计工具,今天和大家推荐10款Mac上的经典原型设计开发工具,原型设计工具是开发者必备的一款工具,无论是网站开发还是移动APP开发,都需要在前期进行严格细致的原型设计,才能在后期开发中节省时间. 本文图片和内容均来自[风云社区 SCOEE],如想了解更多mac软件可上[风云社区 SCOEE]. 有需要其他类型的软件,可在评论区留言或私信于我[磨人的小妖精],以后也会不断更新更多专题资源. 有想要的软件资源,需要下载的也可以找我[磨人的小妖精]私信留言. 往期专题 ma