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

一新来小盆友问：“移动产品原型设计都用啥工具？ ” 答：“# ￥&%*” 又问：“能详细说下各个工具吗？我比较一下 ” “” 好吧，谁让我那么的爱分享而你又是小美女呢 正文开始 首先，一款优秀的移动 APP 产品原型设计工具应该具备： .支持移动端演示（随时随地演示给 BOSS，厕所&食堂& 电梯以体现我是那么的敬业长点工资必备） .组件库（高效复用，谁用谁知道） .可以快速生成全局流程（程序猿看不懂拆解的，给丫的看这个） .在线协作（多个 PM 狗一起用） .手势操作、转场动画、交互特效 (这些都不需要，留给专业的交互、视觉，搞那么虚的不如多想想产品流程逻 辑做做减法、写写 xxRD 啥的) 这些年，产品狗们折腾过的原型工具： 1. POP（Prototyping on Paper） 算是移动 App 原型设计神器 ，很多公司在用：quora、sina、豆瓣、36 氪、ifanr 操作轻巧简单：先用手机拍下草图原型(存到 POP app 内)；然后开始编辑图片的哪个区域（按钮）链接到什么页 面，添加跳转链接热区，就可以在 iPhone 上给小伙伴们演示了，并且 POP 内嵌的交互动作如侧滑、展开、消失 等，即可满足一般的动态演示需要。不太明白？戳这里 移动 App 原型设计神器 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 以下版本），再用移动设备访问你生成的原 型链接即可（该页面创建一个桌面快捷方式）。具体操作方法请戳腾讯 CDC 交互童鞋写的 iOS 设备上高效演 示 APP 原型的方法总结 4、Proto.io Proto.io 是一个专用的手机原型开发平台可以构建和部署全交互式的移动程序的原型，并且可以模拟出相似的 成品。它可以运行在大多数的浏览器中，并提供了 3 个重要的接口：dashboard、编辑器以及播放器。 dashboard 可以用来管理项目。编辑器是构建原型的环境，由一组设计和开发原型的工具组成，另外还可以构建 交互。播放器用来观看原型，并与原型进行交互，并提供了相关工具来标注和保留反馈信息。你可以直接在真实 的移动设备上对原型进行测试。并且可以使用 iOS 或 Android 上的浏览器以全屏模式运行原型。 5、Moqups 是一个非常好的、免费的 HTML5 应用，通过它可以创建可爱朴素的线框图、实体模型和 UI 概念。该程序使用起 来非常简单，并且有内置的模板可以直接使用（模板包括单选按钮、链接、图像占位符、文本框以及滑块等）。 它还提供了 iPhone 和 iPad 模板，以及 iOS 相关的按钮、提示框、picker 、菜单、开关以及键盘等。你可以设置 网格的尺寸，并预览和分享你的线框图。Moqups 提供了一个很有用的功能就是对齐网格，可以使对象精准对齐。 6、UXPin UXPin 是 DeSmart 团队开发的一个简易快速的实体模型和在线可点击原型创作工具。它基于优秀的用户体验设计 原则，在构建原型中，它提供了一个完整的工具包（该工具包具有良好的用户设计模式和元素）来从头构建一个 出色的原型。 UXPin 具有响应式的断点功能，创建的响应式原型和线框图可以运行在不同的设备和分辨率上。另外该软件还提 供了版本控制和迭代功能，可以轻松的共享预览，直观的注解和实时的协同编辑和聊天。该软件拥有大量具有吸 引力的用户界面元素风格（包括 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 控件，并且还会经常进行更新。 Fluid 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 Illustr