10款原型设计工具推荐

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

第一类特色：简单快速。

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

操做难度：低。

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

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

Chainco：

InVision： 

第二类特色：灵活轻快。

表明工具：Mockplus、Proto.io 六、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：

以上就是熊先生最近探索总结出的十款原型设计工具的推荐。每一个人对原型设计的理解不一样，对各种知识的掌握程度也不同，仍是但愿你们可以根据自身的具体状况，多加琢磨，相信这十款工具中必定有一款是适合你的！