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

Posted 2021-01-01 lsongyang

本文列举了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 - 可以自制高保真手机原型。支持复杂的交互、动画和手势。

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