2018年，你必定要选对这些原型工具

提及软件原型，有些人也许会对更普遍意义上的原型比较熟悉。其实二者本质也是同样的东西。原型设计在绝大多数的产品阶段中已不可或缺。通过思路，数据，信息，需求，评估等相关信息的收集和整理后，设计师每每须要将这些抽象的思惟以原型的方式具体呈现出来。原型设计为非专业的股东们和用户们提拱了一种最直观的方式来理解设计者的思路和创造。也能保证最快最准确的从用户那里获取产品信息的相关反馈。

一般，常见软件原型有如下几种类型：

1.纸质原型 - 这主要是为了设计师本身记录创意和想法;

2.快速原型 - 最多见的原型，讲究快速呈现，应用范围普遍;

3.高保真原型 - 强调互动和用户界面，多用于呈现给股东和开发团队;

4.低保真原型 - 强调设计团队成员之间的互动和想法，运用普遍;

在常见的原型类型中，除了纸质原型，只需用到纸笔，其余的原型制做都须要使用原型设计工具。现在，形形色色的原型工具能够说是眼花缭乱，如何选择呢？尤为是原型又有不一样的受众，加之时间成本，人力成本，资金成本等条件，设计师每每须要呈现不一样品质的原型，以适应当前的最佳选择。这里，我精选出了5款各有所长的原型工具，但愿对您的工具选择有所帮助。

每款工具，我将从主要功能、学习成本、价格、兼容平台、项目类型、上手速度、保真度、分享方式、用户反馈等几方面进行介绍。仅供参考。

1.Mockplus - 快速简洁的专业原型设计工具

平台：Windows, Mac, Android, IOS

价格：普通-免费；专业-￥199元/年

主要功能:

Mockplus致力于快速构建和迭代原型，为设计师提供简洁高效的设计方式，能在最短期里创造出最优的设计成果。

快速设计：Mockplus拥有200多个高度封装的交互组件，3000个矢量图标，以及大量可供直接使用的模板、例子项目以及模板页面，而且支持在Sketch中直接导出MP文件，为快速原型设计提供了有效支持。

快速交互：Mockplus仍是交互设计的不二选择。只需使用封装可见的交互组件，用鼠标进行拖拽便可完成可视化的交互，不须要任何一行代码或者参数的设置。Mockplus目前支持3种交互方式：页面交互，组件交互和属性交互。交互命令还可一键自动还原，贴切而周到。

新功能：Mockplus团队推出了一系列人性化设计，例如可视化格式刷，可快速进行批量复制，简单直观；格子功能，可轻松复制页面布局，而且可自定义属性；数据填充，智能解锁繁复操做；最新的表格组件，体会Excel里操做般的感受；脑图设计模式，能快速完成项目的全部页面构架，而后一键转化为原型项目等等。

全新的表格组件

快速演示：Mockplus拥有8种快速测试和演示方式，支持手机端、浏览器及桌面端的原型测试。在线预览和离线演示均可轻松实现，不受终端，网络地域的限制。

视频地址：http://doc.mockplus.cn/?p=1668

学习成本：很低。Mockplus是一款让你关注设计，而非工具自己的工具，致力于让设计更快、更简单！无需写代码。

项目类型：手机APP，网页项目，平板项目，自由项目等

上手时间：5-10分钟

保真度：中低保真

分享和协做: Mockplus的团队协做功能支持多人编辑同一个项目，能够增强团队的配合，提升生产力。参与人员可对设计进行批注和审阅，即时获取反馈。

用户反馈：周边购+外卖+智能物业+类京东商城+聊天功能的APP，几百页很正常。感受用mockplus作原型效率真高，几百页的交互原型一个月就能完成。 

更多反馈：https://www.mockplus.cn/features

2.Balsamiq - 一款基于Flash的快速原型设计工具

平台：Windows, Mac, Web-based

价格：$89

主要功能:

Balsamiq Mockups是一款备受青睐的原型图工具，是2008由一个软件工程师开发的，能帮助设计师更快地进行原型设计。

拖拽操做：Balsamiq拥有能够直接进行拖拽使用的元素，包括一些按钮和列表，值得一提的是，这些元素都是手绘风格。设计师还可在编辑器里提早准备好须要使用的小部件。

资源模板：Balsamiq官方网站还提供了不少模板，包括桌面App、移动端App以及网站模板等。可供点击下载，使用起来快速便捷。

手绘风格：Balsamiq独一无二的手写设计在现在的机械化设计中显得十分别致，能让设计师体会一种在空白屏幕里进行手绘设计的独特体验。加上其种类繁多且风格独特的UI库，能为设计师提供最便捷的服务。

线框图设计：但Balsamiq并非一款适合作超大型项目的工具，虽然它也能够用于作一些设计，但想要加入一些比较深刻的动态效果就比较局限，固然，这和他们的设计初衷也不相一致，Balsamiq更专一于简洁粗略的线框图设计。

视频地址：https://www.youtube.com/watch?v=0mYYqsJ-rE8&feature=youtu.be

学习成本：低。拖拽和放置元素都很简单。初学者也能够尝试不用纸笔，而是以贴近纸笔的设计方式进行设计。

项目类型：手机APP，网页项目等

上手时间：15-20 分钟

保真度：低保真

分享和协做：Balsamiq能够说是专为协做而设计。整个团队能够进行交流，以确保设计的正确方向。客户和老板均可以更清楚地描述本身的需求。在Balsamiq Mockups中共享文件，能够经过共享模型项目文件，共享交互式PDF文档等方式。

用户反馈：

“Balsamiq is bitchin'. Pure and simple. It's rare to find a tool that both devs and non-devs enjoy using, and use productively together. Huge fan!”—Jay Simons form VP of Marketing, Atlassian.

3.Webflow - 设计和开发协同进行的简单静态网站原型工具

平台：Mac，Windows

价格：2个项目免费（10个项目：16美圆/月，无限项目：35美圆/月）

主要功能:

直观的设计和开发网站：Webflow为网页设计人员提供了HTML，CSS和JavaScript的所有功能。可是不须要编写代码，而是直接进行直观操做。在您构建网站并填充网站内容时，Webflow的“Designer”会自动建立简洁的语义代码，这些代码能够直接发布到网页上，也能够交给开发人员参考。

空白画布，创做空间无限：您能够在画布上填充须要的任何元素：盒子模型，浮动组件等，元素布局自由，尽在掌握中，而后使用强大的排版和配色工具进行美化设计。

精准的交互和动画：直观的可视化界面不只仅局限于页面布局和风格选择，并且还能够自由使用JavaScript和CSS动画的全部功能。

轻松管理和低成本维护：整个网站的风格和组件均可以有效进行管理和维护。可视化构建毫不是重复、笨重的工做流程。若是结合CSS的系统样式以及自定义符号和组件库，设计和管理网站将会更轻松。

视频地址：https://www.youtube.com/watch?v=Ymn1sPuNMt8

学习成本：较低。Webflow可让设计师在相对较短的时间内建立一个网站。虽然您不须要写代码，但仍须要根据客户需求导出甚至更改网站的html / css标签。

项目类型：Web网站

上手时间：15-20分钟

保真度：高保真。

分享和协做：一旦在Webflow发布网页，您的站点就已经算是完成了，能够直接分享给他人。但若是还需进一步改进再分享，可使用Webflow Hosting进行网页托管。

用户反馈：“In comparison to the many site designing tools we've used during our 13 years in business, Webflow is absolutely the most user-friendly and capable out there.”

4.Fliud UI - 更简单的网页，桌面和移动原型工具

平台：Web端。支持Chrome，Firefox和Safari，不兼容Internet Explorer。

价格：我的- $8.25/月；高级版- $19.08/月；团队版- $41.58/月

主要功能:

高保真：Fliud UI是一款基于网页端的原型设计设计工具，与其余的大部分原型图工具不一样，Fliud UI支持添加手势，而且具备动画效果，能够制做高保真的原型图。

快速线框图工具：Fluid UI更可能是线框图设计，但也能影响到后期的界面设计、产品功能设置以及上线前测试。

界面关系展现：Fluid UI可以将不一样的界面联立起来，以便于看到产品不一样界面之间的关系，对于UX流程设计有很大帮助。

快速设计：Fliud UI有16个用于iOS，Android，Windows8的用户界面库，其中包含超过2000个可定制的小部件和图标，能够直接从这些内置库里拖拽元素建立页面，简洁高效。FluidUI还提供团队的实时协做，可用于用户测试的视频环聊，进行设备上的测试和交互式预览，团队共享很是便捷。

视频地址：https://www.youtube.com/watch?v=uodln1GmrFM

学习成本：较低。FluidUI是一个原型开发工具，可让您快速设计，测试并获取有关的反馈信息，无编写代码要求。

项目类型：Web应用程序和桌面应用程序

上手时间：10-15分钟

保真度：高保真。

分享和协做：强大的协做功能，不受空间限制，随时能够实时进行设计。只需邀请你的团队成员到同一个原型项目上，就能够进行添加，反馈和评论等操做。分享原型，你能够选择在设备上直接查看，或经过电子邮件分享，甚至直接将项目发送给客户。

用户反馈：“It’s a great tool for working the project from scratch, for creating high quality prototype. It’s very easy and intuitive. Sharing is very easy.”—John Wastion.

5.Invision - 基于web端的原型设计工具

平台：Mac，Windows

价格：1个项目免费（3个项目：15美圆/月，无限项目：25美圆/月，团队版：99美圆/月）

主要功能:

静动转化：在InVision中，设计人员能够直接上传设计文件并添加动画，手势和转换，将静态画面转换为可点击的交互式原型。

多格式支持：支持PNG，JPG，GIF，AI和PSD格式的文件。

高效协做：InVision App在产品讨论阶段使用很是合适，能够快速呈现，加之有效的协做，能够有效收集同事和客户的反馈意见。

视频地址：https://www.youtube.com/channel/UCndfHdRdEiGOyCOgxQ4W9YQ

学习成本：低。基于其能够在设计文件添加动画和手势，所以只需5分钟内便可得到高保真原型设计。无需代码和编程。

项目类型：移动和Web应用程序

上手时间：15-20分钟

保真度：高保真。

分享和协做：InVision最突出的优点就是它的协做功能，全部参与原型项目的成员均可以提供反馈，记录问题和查看实时设计。

用户反馈：“A lot of the products we're making are really meaty. InVision allows us to see if these really complex solutions are working." Joshua Taylor, Evernote

以上是我总结出的5款软件原型设计工具，各具特点，也各有不足，但愿总有一款适合你当前的项目。但在设计过程当中，对工具的要求每每会更多，譬如设计灵感的查找，更短的学习时间，更低的成本，多样的快速演示和分享方式，比较深刻的交互和动效，以及更多的人性化设置，综合每款工具的分析，Mockplus是性价比较高的选择，也是我极力推荐的一款工具。