萝卜白菜，各有所爱的原型设计工具推荐

最近网上很多文章强烈推荐一些UI/UX设计方案相关的书籍和网站。熊老师想了想，决定写一篇强烈推荐原型设计工具的文章，分享给大家。这次，我收集了10个工具。根据不同的特点，重点分为以下三类:简单快捷、灵活开朗、功能全面。

第一个特点:简单快捷。

代表工具:Chainco，InVision，FlintoLite。

*** 作难度系数:低。

像Chainco的slogan，这种工具就是UI设计师的交互测试神器。这三个工具都是在web端设计的。虽然设计风格略有不同，但本质上是一样的。大部分的交互设置都是建立在商品详情页的基础上，点击商品详情页的页面跳转是关键功能。基本上不需要所有的学习培训费用，也没有 *** 作难度系数。中国客户很可能对Chainco有更多的了解，但是Chainco没有海外版本号，而且由于其合作功能，InVision展现出了更好的一面，获得了大量海外客户的青睐。

这类工具的应用有一个显著的优势，就是可以立即将UI设计师制作的照片作为页面导入，比如InVision、FlintoLite，它们可以立即导入PS或AI的设计文档。众所周知，它们是，也仅仅是，UI设计师的交互测试神器，因为这三个工具并不兼容设置组件及其组件交互。

Chainco:

视觉:

第二个特点:敏捷开朗。

工具:Mockplus，Proto.io6，UXPin，FlintoforMac。

*** 作难度系数:中等。

第二类的四个工具都是开发交互设计方案的好助手，它们的共同特点是设计方案相对性的轻便。比如FlintoforMac，只需要根据等级移动零件，就可以创造出匹配的交互效果。另外，虽然这些工具的 *** 作方式看起来并不完全一致，但都选择拖动连接点作为基本 *** 作方式。这种 *** 作中纵横比数据的可视化使得整个设计过程越来越简单合理。

这里的四个工具中，Mockplus可以说是比较有代表性的，相对于Proto.io6来说，proto.io6是一个先有小组件，再有其他组件的战略模型。Mockplus是大量打包的组件，立即显示纵横比。熊老师作为一个“懒人”，非常喜欢这种由繁到简的方法。并且借助这种简单的 *** 作方法，以及程序流程本身内置的2000多块的矢量图标，即使完全没有网络，你依然可以进行优秀的原型设计。导出的演示包和HTML离线包也会让浏览越来越不受互联网的限制。

FlintoforMac:

Mockplus:

这种工具的学习培训成本和 *** 作难度系数确实比第一种高，但是如果和下面的第三种比较，你会发现第二种工具的学习培训成本真的很低。

第三种功能:全能功能。

代表:AxureRP、Justinmind、FramerJS。

*** 作难度系数:高。

原型设计力求实现全方位的功能，所以不可避免的要和编码挂钩。在这一类中，Axure应该是大家比较了解的一个。也可以说Axure是在设计方案的难度系数和可用性上有很好平衡的原型设计工具之一。然而，即使如此，它的独立变量和区分这些功能仍然困扰着许多交互式室内设计师。

如果Axure在寻找平衡，那么FramerJS就是在解释什么是编码的原型。这才是真正的基于编码的原型设计工具这一类。如果能写成相对编码，就能把你所有的想法变成现实。

虽然这类工具的功能是全方位的，但是学习和培训的成本却大大增加了，尤其是FramerJS，强大到让其他工具自惭形秽，但是它的学习和培训成本也可谓是“十年磨一剑”。所以，想要熟练运用这类工具，最好掌握足够的专业知识再去尝试。

框架器JS:

以上是熊老师最近总结的十款原型设计工具的强力推荐。每个人对原型设计的理解不同，专业知识水平也不同。还是希望大家能根据自己的细节去揣摩，坚信这十个工具中有一个是适合你的！