10 款原型设计工具推荐

2016-10-21 11:15:00

最近看到网上很多的文章在推荐一些与UI/UX设计相关的书籍和网站，熊先生想了想，决定写一篇推荐原型设计工具的文章，和大家一起分享一下。这一次我收集了10款工具，根据特点的不同，主要分为以下三类：简单快速、灵活轻快、功能全面。

第一类特点：简单快速。

代表工具：Chainco、InVision、Flinto Lite。

操作难度：低。

就像Chainco的标语一样，这一类工具是UI设计师的交互演示利器。三款工具都是在网页端进行设计，虽然风格略有不同，但实质上是大同小异。交互的设置上多以创建热区为基础，点击热区跳转页面为主要功能，几乎不需要任何学习成本，也没有什么操作难度。国内用户可能对Chainco更熟悉一点，但Chainco还没有国外的版本，而且由于具有协作功能等原因，InVision显现出更加优秀的一面，也赢得了更多国外用户的青睐。

使用这一类的工具有一点明显的好处，就是可以把UI设计师做好的图片直接导入当做界面，比如InVision和Flinto Lite，它们可以直接导入PS或AI的设计文件。然而，它们是，也只能是UI设计师的交互演示利器，因为这三款工具并不支持设置组件以及组件交互。

Chainco：

InVision：

第二类特点：灵活轻快。

代表工具：Mockplus、Proto.io 6、UXPin、Flinto for Mac。

操作难度：适中。

在第二类的四款工具都是进行交互设计的好帮手，它们的共同特点就是设计上相对的轻便快捷。比如Flinto for Mac，只需要根据层级移动组件位置，就可以创造出对应的交互效果。同时，这些工具虽然看上去操作方式并不是完全一致，但它们都不约而同的采用了拖拽链接点来作为基本的操作方式。这种操作中的高度可视化，使得设计的过程变得十分简单有效。

Mockplus可以说是在这四款工具中比较具有代表性的，相对于Proto.io 6这种由小组件组成容器，再由容器组合为其他组件的设计模式，Mockplus则是更多的直接提供高度封装组件。作为一个“懒人”，熊先生对这种化繁为简的方式甚是喜爱。而且依靠着这种简单的操作方式和程序本身自带的超过2000枚的矢量图标，你甚至可以在完全没有网络的情况下仍然出色地完成原型设计。导出的演示包、HTML的离线包也会让预览变得不受网络的限制。

Flinto for Mac：

Mockplus：

这一类工具的学习成本和操作难度相对于第一类确实是要高一些的，但是如果和下面的第三类比较，那你就会发现，第二类工具的学习成本，还真的是低得很啊。

第三类特点：功能全面。

代表工具：Axure RP、Justinmind、Framer JS。

操作难度：高。

原型设计想做到功能全面，那就难免会和代码挂上钩。这一类中，Axure应该是大家更为熟悉的一个。也可以说，Axure是原型设计工具中在设计难度和可用性上平衡把握的比较好的一个了。但是，即便如此，它的变量、判断等等功能还是难倒了许多交互设计师。

如果说Axure是在寻求平衡，那么Framer JS则是在诠释着到底什么才是用代码“写”原型。这才是这一类中真正以代码为基础的原型设计工具，只要能够写出相应的代码，它就可以把你的想法通通变成现实。

这一类工具功能虽然相对全面，但是学习成本被大幅提升，尤其是Framer JS，功能强大到使其他工具望尘莫及，但其学习成本也可以说是“十年磨一剑”。所以，想要熟练运用这一类工具，最好还是先掌握了足够的知识，再来尝试。

Framer JS：

以上就是熊先生最近探索总结出的十款原型设计工具的推荐。每个人对原型设计的理解不同，对各类知识的掌握程度也不一样，还是希望大家能够根据自身的具体情况，多加琢磨，相信这十款工具中一定有一款是适合你的！

文／安静的的的熊先生