您的位置：
福利！15款优秀移动APP产品原型设计工具
作者：网络
　　1. POP(Prototyping on Paper)
　　算是移动App原型设计神器 ，很多公司在用：quora、sina、豆瓣、36氪、ifanr…
　　操 作轻巧简单：先用手机拍下草图原型(存到POP
app内);然后开始编辑图片的哪个区域(按钮)链接到什么页面，添加跳转链接热区，就可以在iPhone上给小伙伴们演示了，并且POP内嵌的交互动作
如侧滑、展开、消失等，即可满足一般的动态演示需要。不太明白?
　　2、Pencil Project
　　Pencil是一款开源的可以用来制作图表和GUI原型的工具，可以作为一个独立的app，也可以作为Firefox插件。内置模版可以帮你绘制桌面和移动界面中用到的各种各样的用户界面，包括流程图、UI和一般的通用图形。
　　通过它内置的模板，你可以创建可链接的文档，并输出成为HTML文件、PNG、OpenOffice文档、Word文档、PDF。Pencil
Project还包含大量移动app模版。
　　3.Axure
　　大 家都很熟悉了，这里主要说下移动端的演示，这样才充分表达原型意图。按F5生成原型的时候，在“Mobile/Device”选项中可以设置适配移动设备
的特殊原型(Axure 6.5以下版本)，再用移动设备访问你生成的原型链接即可(该页面创建一个桌面快捷方式)。
　　4、Proto.io
　　Proto.io是一个专用的手机原型开发平台——可以构建和部署全交互式的移动程序的原型，并且可以模拟出相似的成品。它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。
　　dashboard
可以用来管理项目。编辑器是构建原型的环境，由一组设计和开发原型的工具组成，另外还可以构建交互。播放器用来观看原型，并与原型进行交互，并提供了相关
工具来标注和保留反馈信息。你可以直接在真实的移动设备上对原型进行测试。并且可以使用iOS或Android上的浏览器以全屏模式运行原型。
　　5、Moqups
　　是一个非常好的、免费的HTML5应用，通过它可以创建可爱朴素的线框图、实体模型和UI概念。该程序使用起来非常简单，并且有内置的模板可以直接使用(模板包括单选按钮、链接、图像占位符、文本框以及滑块等)。
　　它还提供了iPhone和iPad模板，以及iOS相关的按钮、提示框、picker、菜单、开关以及键盘等。你可以设置网格的尺寸，并预览和分享你的线框图。Moqups提供了一个很有用的功能就是对齐网格，可以使对象精准对齐。
　　6、UXPin
　　UXPin是DeSmart团队开发的一个简易快速的实体模型和在线可点击原型创作工具。它基于优秀的用户体验设计原则，在构建原型中，它提供了一个完整的工具包(该工具包具有良好的用户设计模式和元素)来从头构建一个出色的原型。
具有响应式的断点功能，创建的响应式原型和线框图可以运行在不同的设备和分辨率上。另外该软件还提供了版本控制和迭代功能，可以轻松的共享预览，直观的注
解和实时的协同编辑和聊天。该软件拥有大量具有吸引力的用户界面元素风格(包括web，iOS，Android等)，并且具有快速、灵敏的响应拖放接口。
　　7、Omnigraffle
　　OmniGraffle是由The Omni
Group制作的一款带有大量模版可以用来快速绘制线框图、图表、流程图、组织结构图以及插图等类型图的app，也可以用来组织头脑中思考的信息，曾获得2002年的苹果设计奖。
　　它采用拖放的所见即所得界面，你可以用钢笔工具绘制自定义的模版或者图形，此外还自带Graffletopia提供的多个iPhone、iPad以及Android模版。
　　8、JustinMind
　　JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。与目前主流的交互设计工具axure，Balsamiq
Mockups等相比，Justinmind Prototyper更为专属于设计移动终端上app应用。
　　JustinMind 可以帮助开发者设计更丰富、更具交互新的移动产品线框图，包含了iPhone、Android
以及iPad常用手势，滑动、缩放、旋转，甚至捕捉设备方向等，从而创造出更具交互性的原型。另外，它可以导出原型信息到Microsoft
Word，生成规范的文档。
　　此外，你还可以自定义小组件，创建自定义组件库，并进行分类，不管对象是iPhone、iPad、黑莓、Android还是其他。
　　9、FluidUI
　　Fluid UI是一款用于移动开发的Web原型设计工具，可以帮助设计师高效地完成产品原型设计。Fluid UI
内置超过1700款的线框图和手机UI控件，并且还会经常进行更新。
UI无设备限制，无平台限制(Windows、Mac以及Linux系统)，支持Chrome和Safari浏览器(Chrome浏览器上的app也可离
线使用)。你可以使用Fluid Player来预览你的设计，收集意见和反馈。还可以以PNG、PDF方式输出。
　　Fluid UI使用方法简单，采取拖拽的操作方式，不需要程序员来写代码。另外，Fluid
UI资源库非常丰富，有针对iOS、Android以及Windows 8的资源。如果你觉得库存资源不能满足你的需求，你也可以自行添加。
　　10、Protoshare
　　ProtoShare：在线网站开发协同制作工具是一个十分便捷的在线原型制作工具，侧重于团队协作。团队成员可以通过这个工具对工作进行审查，并及时提供反馈，对线框图或内容进行建议。
　　作 为一个强大的线框图和原型平台，Protoshare提供了大量移动工具集(有来自中心资源库的大量移动模版和大量2D、3D动画过渡)。通过“拖放”界
面，你可以快速创建交互式的线框图和移动原型，然后发送至iPhone、iPad或者Android设备进行测试，体验app的功能实现情况。
　　另外，Protoshare还支持分享和反馈功能，项目成员可以标记和跟踪的反馈信息来做出决定。而大量的资源库意味着你可以使用模版和获得的反馈创建移动产品线框图，进而演变为高保真的原型。
　　11、 Wireframe
　　Wireframe是一款具有“点击-拖-放”界面且超简单的线框图创作工具。双击实现编辑功能，有限的界面意味着你会把精力集中于你的想法上。还给每个线框图分配了特有的URL，便于标记和分享。
　　Wireframe有浏览器窗口和移动手机两个模版选项，移动版有纵向和横向两个选择。线框图的每个元素都可以编辑和转换。
　　12、InVision
　　InVision是一个便捷的产品原型生成工具，用户制作一个在线原型只需要四部：创建一个工程、上传视觉设计稿、添加链接以及生成在线原型。
　　确 切说，InVision提供的不是准确的线框图，而是一个快速原型的环境，可以把你的UX/UI草图快速连接起来。数字型的线框图和高保真的设计可以帮你
测试app的工作情况，同时该工具还支持协作和分享功能，生成的在线原型可以支持任何人在产品原型的任何地方评论，便于准确的交流。
　　针对iOS 开发，InVision还增添了其他功能，比如自定义主屏幕icon和自定义加载页面。
　　13、Mokk.me
　　Mokk.me
是一个简单快速的原型工具，通过界面上简单的拖放操作，不用了解单线编程就能创作一个可以分享、测试以及多平台的app。目前，Mokk.me正在测试
中，但它是一个简单的基本的工具，任何人可以用它来创建app的布局。你可拖、放或者编辑小工具，可以搭建和连接页面，还可以选择过渡动画。它的特点还在
于页面和按钮、图片小工具、文本输入以及复选框形式。
　　另外，你可以借助HTML、CSS以及JavaScript完成app其他一些功能，一旦你创建了原型，你还可以进行分享，在iOS
和Android上进行测试。
　　14、iPlotz
　　iPlotz
是一款可以用来创建可点击、可导航的原型和线框图工具，适合网站开发者和移动app开发者。你可以在一个可调整的页面拖放元件，然后连接起来，增加其他屏
幕或者页面的热点链接。你可以选择使用iPhone/iPad模版或者Android模版，任何模版都有独一无二的元件设置。
　　iPlotz界面明白易懂，支持协同工作、可分享的编辑权限、任务管理以及评价系统。另外，项目可以以IPML、JPG、PNG、PDF以及HTML形式输出。
　　15.Adobe Illustrator 俗称AI
　　这是adobe的一款矢量图设计软件，推荐给设计师转型过来的PM(没兴趣的跳过)，电商圈不推荐再去费力学习其他软件，达到沟通的目的提高效率是王道。上图是设计出来的原型成品，可以结合上面提到的POP去演示，so
　　写在最后：萝卜白菜各有所爱，没有最好的工具，只有最顺手的，最终的目的只有一个——沟通。
(转载请保留)
置顶推荐热门话题
您刚刚看过
互联网的一些事，已超50万小伙伴关注！当前位置：
用户客户端APP界面设计原型图图片
原创非商业授权(独家)
编号：上传时间：大小：1.87 M
尺寸：0×0像素 格式：AI (cc)颜色：RGB
关&键&词：门门 APP 界面设计 UI设计 UI 交互界面 购物app 逻辑思维图 APP关系图 原型图 用户端 App模版 APP界面模版 设计 框架 线图 矢量 结构 前期 手机界面 设计
移动界面设计 手机界面
作品描述：原型图-用户端
&昵图网所有作品均是用户自行上传分享并拥有版权或使用权，仅供网友学习交流，未经上传用户书面授权，请勿作他用。若您的权利被侵害，请联系 。
商用正版图片新手都头疼尺寸问题，其实并不复杂，关键是设计本身比较难把握。下面这篇设计规范是虎哥精选出来的主要内容，基本上都介绍清楚了。
更详细的规范可以访问设计规范专辑：
先来看看各种iPhone的尺寸和分辨率，这张图写的很清楚。
竖屏点（point）
竖屏分辨率（px）
1125 x 2436
iPhone 8+, 7+, 6s+, 6+
1242 x 2208
iPhone 8, 7, 6s, 6
750 x 1334
iPhone SE, 5, 5S, 5C
640 x 1136
iPhone 4, 4S
iPhone 1, 3G, 3GS
iPad Pro 12.9
1024 x 1366
2048 x 2732
iPad Pro 10.5
834 x 1112
1668 x 2224
iPad Pro, iPad Air 2, Retina iPad
768 x 1024
1536 x 2048
iPad Mini 4, iPad Mini 2
768 x 1024
1536 x 2048
768 x 1024
768 x 1024
最新设计指南推荐：
虽然现在出来了Iphone X ，但是我们在工作中还是会按照750*1334来设计，虎哥总结一个精简版的设计流程方法，按这个做法就可以展开工作。
现在做设计稿主要是用到PS、SKetch（mac电脑）、这3个都可以，鉴于大部分人没有mac电脑，目前很多设计师还是用的PS在工作，的出现预计要爆发一波，win10系统可以用上啦。
这里以PS工具设计IOS界面
画布尺寸：
新建750×1334
分辨率72，像素/英寸。
常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。
app所用的字体大礼包下载（虎哥整理的）
ios开发里单位是pt
750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
界面上的间距和元素尺寸：
以偶数为单位，不清楚的可以截图量大公司的APP界面作为参考。
750 x 1334 设计稿尺寸：
状态栏高度：40 px
导航栏高度：88 px
标签栏高度：98 px
设计稿实时预览：
安装一个可以在iphone上实时观看效果。
主流标注工具：
其他标注工具：
界面的图标切图：
用选中@2x @3x导出。
启动图标：
做24尺寸，一般做方形无圆角。然后用
自动切图一套图标资源丢给程序员就ok了。
交接给程序：
最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。
值得注意的是引导页切图需要单独设计多套（640××××2208）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。
适配方法3个原则：（不清楚的在网站搜索适配2字）
图片等比缩放
测试界面：
程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。
干货资料：
可以看看下面这几篇文章：
以PS工具设计安卓界面。
画布尺寸：
如果想一稿适配ios，那就新建720×1280
分辨率72，像素/英寸。
如果单独设计安卓MD新规范的，那就新建20
分辨率72，像素/英寸。
720×1280常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
中文用Noto/思源黑体（是一个字体，叫法不同而已），英文用Roboto。
app所用的字体大礼包下载（虎哥整理的）
距离单位是DP
文字单位是SP
720×1280尺寸的换算关系 1dp=2px，文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿，自己除以2就是dp和sp了。
20尺寸就是1dp=3px，文字1sp=3px
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
界面上的间距和元素尺寸：
最新规范MD的做法：
栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。
常见一般常用做法：
直接把ios的设计稿照搬过来，只不过状态栏，导航栏，标签栏按照安卓的来。
720 x 1280 设计稿尺寸：
状态栏高度：50 px
导航栏高度：96 px
标签栏高度：96 px
设计稿实时预览：
安装一个可以在安卓手机上实时观看效果。
标注工具：
PxCook 像素大厨
标注的时候，如果是720×1280尺寸设计的，就选对应的xhdpi，如果是20尺寸设计的，就选对应的xxhdpi。
界面的图标切图：
用选中下面所示，根据需要选择不同分辨率的导出。
界面中重复利用的资源切图需要做成点9图片：
主要是一些按钮，单色或半透明的背景块。图标不用做点9。
启动图标：
做24尺寸，安卓对图标的样式没有要求，你可以做各种形状都行，一般做方形无圆角的，各家手机厂商的定制系统会自己加圆角。
自动切图一套图标资源丢给程序员就ok了。
交接给程序：
最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。
值得注意的是引导页切图需要单独设计多套（480×800、720××1920）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。
适配方法3个原则：（不清楚的在网站搜索适配2字）
图片等比缩放
测试界面：
程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。
干货资料：
可以看看下面这几篇文章：
最后说句：“对界面上的字号，间距不清楚的，多动手去截图，量一量优秀APP界面，多分析找规律。”
虎哥整理。
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
” 海量APP截图，让你灵感爆发！国内最好的APP截图站。
“” 每一个作业题都尽量配有教程，交作业就有大神免费帮你点评作业，爽歪歪！
“” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
你可能喜欢的：移动APP开发使用什么样的原型设计工具比较合适_百度知道
移动APP开发使用什么样的原型设计工具比较合适
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
广州启汇营销策划有限公司
专业app开发、互联网营销策划
广州启汇营销策划有限公司
广州启汇营销策划有限公司是国内领先的移动互联网技术解决方案服务商。拥有子品牌：启汇网络和启汇营销。提供APP、移动商城、Web等开发服务。专注品牌建设、全媒介投放、内容运营、活动策划等市场服务。
移动端的开发变的越来越丰富，最好的开发模式应该是快速原型模型。快速原型设计是设计师与移动app软件需求方沟通的最好工具，在软件开发初期，先对所要开发的软件有一个大致的整体设计，毕竟现在的移动端多种多样，如果没有一个好的设计，很难做出一个比较优秀的软件，快速原型更有利于客户与开发人员的交互，使设计细致入微。使用原型的优点：用现在的原型开发工具很容易就可以进行创建。而且如果客户的需求发生了变化，那么快速原型可以降低卡发成本时间，可以在短时间内进行修改。便于开发人员进行协商讨论，当团队对开发的软件进行讨论的时候，原型可以提供讨论的内容。有利于开发团队之间的沟通，原型可以使得多个开发团队之间展开构想，帮助他们通过原型弄清app软件相关的概念，使得将要开发的软件具体化。对可用性测试很有用，有些交互性的原型可以让你在写代码之前进行可用性测试。在移动端app开发的早期阶段，原型的重要性也是也体现在降低开发成本的作用，此阶段应该充分被利用，以避免后期因为不符合需求而改写大量代码。
wo纤手破新橙
来自电脑网络类芝麻团
wo纤手破新橙
采纳数：2018
获赞数：2622
擅长：暂未定制
参与团队：
只要是原型设计工具都可以，你百度一下墨刀
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。五款app原型设计工具对比
Proto.io, Pixate, Origami, Framer & Form
本文由&翻译，原文作者&
我用五款&高保真&原型设计工具重新创建了 user onboarding应用，目的是了解这些工具的不同之处，它们是Proto.io, Pixate, Framer, Facebook的 Origami 和 RelativeWave的Form。
看看跟原装的对比，这些再造的产物表现如何：视频地址：
基于页面还是层
为什么我会选择这五款？我发现用多数原型设计工具再造这种重度动画效果的应用（图标以不同的速度向不同的方向移动）几乎不可能。大多数工具仅仅是让你连接静态&页面&，只有那些更复杂的才能让你在给定的页面里不同的对象或&层&添加动效。
我接下来会进一步解释。
基于页面的工具
基于页面的工具里，你布置好不同的屏，然后建立热点或者按钮将它们连接在一起。你轻触一个屏上某个按钮来进入另一个屏。基于页面的工具一般支持屏之间的多
种过渡效果，比如淡入、从右滑入，从下滑入等等。虽然有点笨拙，但是当你还在设法搞清楚一个app的流程，比如说需要多少屏、它们如何呈现出来、按钮如何
布置等等，用这种工具快速作出&实体模型&还算是个不错的方法。
基于页面的工具有： ,&,&,&,&,,&,&,&,&,& 和 .
的确，这里面有些工具可以让你在一个页面里带有动效或者滚动区域，但是你无法用它们来模拟真实的原生app所有的交互效果。
基于层的工具
每个元件、界面元素，或者说层，都可以设置为可触摸、可滑动、可拖拽，还能带动效。然而，用这类工具制作一个完整的app原型会让人发疯的，会有太多的工作量，基本上就等于创建一个真正的app。但是，它们用来测试新的交互效果，或者微调一下动效的时间参数还是很棒的。
我测试的是Proto.io, Pixate, Framer, Facebook的Origami 和 RelativeWave的Form。坦率的说，还有几个其他的 &
&不过它们好像更加企业级（就是挺贵的），我有可能以后尝试一下。
好吧，我们就继续看看这些获选的工具。
基于Web界面，带有IOS和安卓下的调试器
Proto.io这个web应用强大得令人吃惊，它有很多很多的功能。不过，因为所有工作都是依靠拖放、点击按钮和选择列表的值，有时候想找到需要的设定会让人有点儿不知所措。
于IF原型的本质特点&&不同的对象以不同的速度移动&&我不得不增加一些自定义的JavaScript计算脚本。Proto.io提供的单行文本框对于
冗长的计算脚本来说太小了。为了能够概览脚本，我得把它们保存在我电脑上的文本文件里。特别需要注意是，这些JavaScript运算式可能会失败，却没
有任何警告信息。如果有些东西不工作，一定要检查浏览器的控制台。（我遇到一个错误，是一个包含负值的变量造成的。）
创建原型的同时预览
这个相当让人恼火：你必须每次都点击 [ Save Project ] 然后点 [ Preview ] 才能看到你作出修改后的效果。
把原型发给客户
在网页上：简单&&你可以生成一个公网链接，就像。（这些连接也可以用移动浏览器打开，然后作为一个&app&添加到IOS主屏上。）你可以在& 向公众用户展示你的作品。
在移动设备上：你可以给用户建立免费的评估帐号，允许他们访问一个项目。他们可以在IOS或安卓app里运行你的原型。
原型跟app的区别
不多。不过动效不够流畅，因为我不得不在滚动视图里添加很多包含自定义JavaScript计算脚本的交互功能。在web上跑得蛮好的，但是在设备上实在太慢了。似乎更简单的原型回放速度能正常些。
易于制作快速的实体模型，因为有大量的标准UI元素库，而且很多是可以定制的。
Proto.io在这五种工具中是唯一一个同时也是基于页面的。你可以在一个项目中包含多个屏，屏之间可以创建过渡效果。
支持元件跟Dropbox同步。
没有即时预览。
如果加了很多交互，像本文的例子一样，动效会变慢。
你的所有原型都保存在Proto.io的web平台上，这意味着如果你要取消你的帐号，你连运行它们都不再能了。（有个可能是你把帐号&寄存&：当你重新激活帐号，你的项目还会在那儿。寄存帐号是免费的。）
3D动效不可能。
在&上查看（注册一个帐号，把项目导入到你的帐号就能看了。）
Android app:
29美元/月,或者288美元/年,可以有5个活跃项目。还有10、15、30个活跃项目的套餐，以及一个15日免费试用期。
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画布只有这么宽（最多五个页面）。
依旧有些问题，有时可能需要。
Mac或PC应用：
移动应用：&|&
Pixate Studio
免费！（曾经149美元，直到谷歌于2015年7月收购Pixate。）
Pixate Cloud
5美元/用户/月 或者 50美元/用户/年，有30天免费试用期。
Facebook Origami
运行在苹果公司的Mac版Quartz Composer中，iPhone或iPad上有个查看器用来测试。
你很可能已经知道，Origami是Facebook&的设计团队开发的。Origami不是个独立程序，它相当于的一个插件。而Quartz Composer是一个可视化程序设计环境，苹果公司开发工具集的一部分。
Composer里，你通过把多个&patch&相互连接来进行编程。不同的patch有不同的功能。Origami主要是一套额外的patch，用来设
UI。与必须写代码相比，很多人更喜欢这种方式（不包括我）。但是，当你必须描述诸如&如果这样，那么就用这段计算的值那样做，但如果不是这
样....&，你还是不得不&编程&，只不过这个编程是通过连接几个patch，而不是写几行代码。
另外提一下：IDEO也基于Quartz Composer创建了一个原型设计框架，叫。它有的一些功能，在某些项目里可能会很方便：蓝牙集成、一个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框架的替换工具来做可视化交互设计。
Mac 应用：
IOS查看器：
免费！你还需要一个苹果开发者帐号，那也是免费的，就像啤酒、或者随便苹果公司的开发人员喝的什么。（译者注：苹果公司每隔数周都会举行&啤酒狂欢&奖励员工，为他们提供免费啤酒和开胃菜。）
Framer Studio是Mac上的原型设计应用，但Framer.js仅需要Safari或Chrome.
里没有拖放、按钮或连接点，用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。
Android app:
Framer.js，JavaScript框架，是开源免费的。
Framer Studio 需要99美元。（有14天免费试用期。）
Form by RelativeWave
Mac应用，带有一个iPhone或iPad上的查看器
还很年轻（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组合起来能够获得更好的概览效果。
免费！Mac应用曾经是79.99美元，谷歌去年11月（那时Form发布了仅仅数月）收购了RelativeWave之后就免费提供了。
如何挑选？
如果你从未用过上述的任何一个，而且想快速的做出原型：
or&Proto.io
但是如果你愿意投入时间学习一个强大的工具：
Form, 如果你喜欢可视化编程
Framer, 如果你更愿意写代码
这五款工具我已经全都了解了（至少一点点吧），所以我可能会在不同的场景使用不同的工具：
当我还处在研究app流程的阶段，我用一款基于页面的工具，在这个阶段不需要高保真的原型设计。
Proto.io也可以用作低保真原型设计： 它包含IOS、安卓、Windows Phone的标准界面元素，而且你可以链接不同的屏。它还有个进一步的优势，就是后期可以用Sketch或Photoshop设计的元件，来让原型&漂亮点儿&。
当已经有现成的UI设计和元件了，用Pixate，只要动效别太复杂。
如果原型里需要使用设备的传感器或相机，那就用Form。
其他的情况都用Framer。
（原译文首发：http://get.jobdeer.com/7827.get ）
阅读(...) 评论()