干货！全部经常使用的原型设计工具都在这里了

本文列举了20余款当前国内外比较火爆的原型设计工具。我把它们分为如下五类：

1. 交互原型设计工具（仅限页面交互）

2. 手机原型工具

3. 网页原型工具

4. 静态原型工具

5. 动态原型工具（组件和页面交互）

交互原型设计工具（仅限页面交互）

这一类工具主要是创建页面之间的交互。其自己不能进行组件的制做和设计，须要从其它地方（例如：PS，本地）导入设计图，对已有的设计图建立热点，进行交互设计。

Invision - 一款很好的制做原型交互演示的工具。你能够从本地、Dropbox、Google Drive和Box上传图片。使用拖拽快速建立热点。它的分享、协做、评论功能也很方便。

Chianco- 一款轻量级的交互原型设计工具。拖一拖鼠标， 快速建立交互；内置多种转场和触发效果，点一点就能够使用；扫一扫，直接在手机上预览效果，也能够导出HTML，分享给同事。

Marvel - 一款简单易用的原型工具。只需几回简单的点击，就能将静态的设计图连接起来，变成可点击的原型图。

Flinto for Mac - 一款Mac端的交互原型设计工具。支持一键将 Sketch设计稿导入， 添加热点配合相应的交互动做生成原型经过网页或者手机端展现给客户观看。

Atomic - 能够用来快速设计交互和动画的原型工具，不管是手机原型仍是桌面端原型，都是不错的选择。

手机原型工具

这类工具内置了制做手机原型的组件，能够建立和编辑组件。设计时，能够选择不一样的手机模型。在手机预览很方便。

Proto.io - 用Proto.io作手机原型是一个比较好的选择。有默认手机的组件库，拖出来进行简单的属性设置就能够用了。也支持交互设计，支持的触发和动做比较丰富。

Mockplus - Mockplus提供了大量的手机组件和图标，可以快速上手进行设计。设计前能够选择不一样尺寸的手机模型，能够经过多种方式在手机上进行预览：发布项目，而后在手机浏览器中查看、手机端输入原型码、扫描二维码。设计手机原型十分快捷。

Fluid - Fluid 是一款在线原型设计工具，比较适合移动App原型的制做，包括iOS，Android以及穿戴设备。

Pixate - 用Pixate能够实现复杂的交互和动画，它也只能用于手机端原型的制做。

Justinmind - 能够自制高保真手机原型。支持复杂的交互、动画和手势。同时也是须要投入较高学习成本的工具。

网页原型工具

这类工具比较适合网页原型的制做。

Axure - 功能全面的原型设计工具，能够实现复杂的交互，须要投入较多的学习时间。

Webflow - 一款能够生成代码的原型设计工具，适合网页原型的制做，中等学校难度。

Webydo - 能够自制高保真网页原型的工具，不过学习难度也很高。

Indigo Studio - 这款工具便可以让你导入设计图进行交互设计，也提供了组件设计的功能。

Protoshare - 中等学习难度的在线原型设计工具，可用于设计具备交互效果的网页原型。

静态原型

这些工具总体来讲操做比较简单，功能也比较简单，只能用于设计静态原型。

Fluid - Fluid是一款简单的在线原型设计工具，不能设计交互，可用于静态原型的设计。

Balsamiq Mockups - 手绘风格的原型设计软件，操做简单，初学者能够尝试用来设计静态网页原型。

Mockflow - 一款比较简单的静态原型制做工具。

动态原型工具（组件和页面交互）

这些工具功能比较全面，能够实现或简单或复杂的交互。学习难易程度也因工具而不一样。

Axure - 老牌原型工具，可以实现复杂的交互。

Mockplus - 新兴的原型设计工具，Mockplus封装了经常使用的交互组件，实现了交互的可视化。不管是页面交互仍是组件的交互均可以经过拖拽的方式完成。

UXPin - UXpin是一款在线原型设计工具，可用于制做网页和手机原型。自带了组件库，拖出来就能够进行基本的编辑，可实现简单的交互效果。

Proto.io - 一款在线原型设计工具，支持组件的交互。

Framer - Framer是一款基于代码的原型设计工具。若是你懂编程，那么Framer能够帮你实现复杂的动画和交互。

HotGloo - 在线原型设计工具，可以实现经常使用的交互设计。

Origami - Facebook旗下的一款原型设计工具，能够实现复杂的交互和动画。

Principle - 一款只能用于Mac上的交互设计软件。

Justinmind - 能够自制高保真手机原型。支持复杂的交互、动画和手势。

这么多原型设计工具， 总有一款是你的菜。若有遗漏，欢迎补充。