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

一款优秀的移动APP产品原型设计工具应该具备:

①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯…以体现我是那么的敬业——长点工资必备)

②.组件库(高效复用,谁用谁知道)

③.可以快速生成全局流程(程序猿看不懂拆解的,给丫的看这个)

④.在线协作(多个PM狗一起用)

⑤.手势操作、转场动画、交互特效…(这些都不需要,留给专业的交互、视觉,搞那么虚的不如多想想产品流程逻辑做做减法、写写xxRD啥的)

这些年,产品狗们折腾过的原型工具:

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团队开发的一个简易快速的实体模型和在线可点击原型创作工具。它基于优秀的用户体验设计原则,在构建原型中,它提供了一个完整的工具包(该工具包具有良好的用户设计模式和元素)来从头构建一个出色的原型。

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 Illustrator 俗称AI

这是adobe的一款矢量图设计软件,推荐给设计师转型过来的PM(没兴趣的跳过),电商圈不推荐再去费力学习其他软件,达到沟通的目的提高效率是王道。上图是设计出来的原型成品,可以结合上面提到的POP去演示,so easy。

写在最后:萝卜白菜各有所爱,没有最好的工具,只有最顺手的,最终的目的只有一个——沟通。

参考:http://www.woshipm.com/rp/64741.html

时间: 05-03

15款优秀移动APP产品原型设计工具的相关文章

几个常用的产品原型设计工具

有人说产品经理是产品的灵魂,有人说产品经理是企业的核心.对于我们未来想要做产品经理,获得较高的收入,实现自己对产品的诠释,原型图是肯定绕不开的.即便刚毕业我们去做产品助理,原型设计也是产品助理的主要工作. 下面跟大家聊聊几款产品经理常用的原型设计工具,产品工作感兴趣的同学可以用来熟练下使用技巧,未来也提高自己做产品助理/经理的录取率不是. 1.Axure 这个老家伙是肯定要有的,圈子里面的公认产品设计工具,很多单位的招聘条件上清清楚楚写着“熟练使用Axure”有木有.这有点像你学摄影的,一定要学

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

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

UI的必修课——产品原型设计

想要做好ui设计,为什么要学习产品原型设计?下面小编就给大家简单分析一下其中的原因,希望对大家后期的学习有所帮助. 为了能够更好地实现自己的职业价值,设计师需要掌握更多其他方面的技能,其中产品原型设计就是比较典型的,具体有哪些呢? 一.快速入行需要 其实很多设计师一开始并不明白自己到哪一个程度,才算是真正的入门.当前市场上比较流行的产品原型设计工具很多,因此ui设计师需要掌握的技能还有很多,如果你想快速入行ui设计,可以考虑专业学习产品原型设计相关技能. 二.提高设计质量 掌握更多的知识,考虑问

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

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

【架构】原型设计工具一览

几款UI原型制作工具 当 开始一个项目时,要将一些未成形的概念草图(Sketch)变成细化的可执行的线框图(Wireframe),这个过程可以使用一些创建线框图的工具,来 帮助设计师高效而准确的进行设计.不论是做GUI,Web UI,Game UI,Mobile UI等等,在开发前期和设计过程中,许多构思都需要用原型来辅助思考,边想边画来梳理逻辑,验证流程.所以易学易用的原型制作工具,很大程度上提高了设计 的准确性,帮助视觉设计师和程序员,更好的理解设计思路,提升产品的整体品质. Balsami

常用的原型设计工具

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

产品原型设计5:移动App原型设计神器 - POP(Prototyping on Paper)

一般来说,苦逼的互联网产品经理们都知道 Axure 这个原型设计工具,一方面是因为它提供了足够简单的拖拽操作,易上手,且有很多模板方便复用:另一方是因为它可直接输出html,直接在浏览器里给团队成员和老板展示原型,方便做可用性测试. 移动 App 越来越多,现在你不做一两款 App 出门简直都不好意思跟人打招呼了.不能直接上手 PS 的产品经理们,又在想怎样低成本地制作移动app原型了.Axure 和 OmniGraffle Pro 当然会被容易被想到,但通过这两个制作出来原型的要在手机上直接展

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

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

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

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