产品经理告诉你原型你要找对工具

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

通常，常见软件原型有以下几种类型：

• 1.纸质原型 – 这主要是为了设计师自己记录创意和想法;
• 2.快速原型 – 最常见的原型，讲究快速呈现，应用范围广泛;
• 3.高保真原型 – 强调互动和用户界面，多用于呈现给股东和开发团队;
• 4.低保真原型 – 强调设计团队成员之间的互动和想法，运用广泛;

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

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

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

平台：Windows, Mac, Android, IOS

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

主要功能:

• 1. Mockplus致力于快速构建和迭代原型，为设计师提供简洁高效的设计方式，能在最短时间里创造出最优的设计成果。
• 2. 快速设计：Mockplus拥有200多个高度封装的交互组件，3000个矢量图标，以及大量可供直接使用的模板、例子项目以及模板页面，并且支持在Sketch中直接导出MP文件，为快速原型设计提供了有效支持。
• 3. 快速交互：Mockplus还是交互设计的不二选择。只需使用封装可见的交互组件，用鼠标进行拖拽即可完成可视化的交互，不需要任何一行代码或者参数的设置。Mockplus目前支持3种交互方式：页面交互，组件交互和属性交互。交互命令还可一键自动还原，贴切而周到。
• 4. 新功能：Mockplus团队推出了一系列人性化设计，例如可视化格式刷，可快速进行批量复制，简单直观；格子功能，可轻松复制页面布局，并且可自定义属性；数据填充，智能解锁繁复操作；最新的表格组件，体会Excel里操作般的感觉；脑图设计模式，能快速完成项目的所有页面构架，然后一键转化为原型项目等等。

全新的表格组件

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

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

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

上手时间：5-10分钟

保真度：中低保真

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

用户反馈：“ I have used the tool and I love the idea that making real screen view through QR code. I\\’m really satisfied with what I see and even start recommending it at the office to some of my workmates. I love this app and it is super easy-to-use I must say.” – Ari Arturo Velázquez Fierro at Interaction Designer at Infotec.

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

平台：Windows, Mac, Web-based

价格：$89

主要功能:

• 1. Balsamiq Mockups是一款备受青睐的原型图工具，是2008由一个软件工程师开发的，能帮助设计师更快地进行原型设计。
• 2. 拖拽操作：Balsamiq拥有可以直接进行拖拽使用的元素，包括一些按钮和列表，值得一提的是，这些元素都是手绘风格。设计师还可在编辑器里提前准备好需要使用的小部件。
• 3. 资源模板：Balsamiq官方网站还提供了很多模板，包括桌面App、移动端App以及网站模板等。可供点击下载，使用起来快速便捷。
• 4. 手绘风格：Balsamiq独一无二的手写设计在如今的机械化设计中显得十分别致，能让设计师体会一种在空白屏幕里进行手绘设计的独特体验。加上其种类繁多且风格独特的UI库，能为设计师提供最便捷的服务。
• 5. 线框图设计：但Balsamiq并不是一款适合做超大型项目的工具，虽然它也可以用于做一些设计，但想要加入一些比较深入的动态效果就比较局限，当然，这和他们的设计初衷也不相一致，Balsamiq更专注于简洁粗略的线框图设计。

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

项目类型：手机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美元/月）

主要功能:

• 1. 直观的设计和开发网站：Webflow为网页设计人员提供了HTML，CSS和JavaScript的全部功能。但是不需要编写代码，而是直接进行直观操作。在您构建网站并填充网站内容时，Webflow的“Designer”会自动创建简洁的语义代码，这些代码可以直接发布到网页上，也可以交给开发人员参考。
• 2. 空白画布，创作空间无限：您可以在画布上填充需要的任何元素：盒子模型，浮动组件等，元素布局自由，尽在掌握中，然后使用强大的排版和配色工具进行美化设计。
• 3. 精准的交互和动画：直观的可视化界面不仅仅局限于页面布局和风格选择，而且还可以自由使用JavaScript和CSS动画的所有功能。
• 4. 轻松管理和低成本维护：整个网站的风格和组件都可以有效进行管理和维护。可视化构建绝不是重复、笨重的工作流程。如果结合CSS的系统样式以及自定义符号和组件库，设计和管理网站将会更轻松。

学习成本：较低。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/月

主要功能:

• 1. 高保真：Fliud UI是一款基于网页端的原型设计设计工具，与其他的大部分原型图工具不同，Fliud UI支持添加手势，并且具有动画效果，可以制作高保真的原型图。
• 2. 快速线框图工具：Fluid UI更多是线框图设计，但也能影响到后期的界面设计、产品功能设置以及上线前测试。
• 3. 界面关系展示：Fluid UI能够将不同的界面联立起来，以便于看到产品不同界面之间的关系，对于UX流程设计有很大帮助。
• 4. 快速设计：Fliud UI有16个用于iOS，Android，Windows8的用户界面库，其中包含超过2000个可定制的小部件和图标，可以直接从这些内置库里拖拽元素创建页面，简洁高效。FluidUI还提供团队的实时协作，可用于用户测试的视频环聊，进行设备上的测试和交互式预览，团队共享非常便捷。

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

项目类型：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美元/月）

主要功能:

• 1. 静动转化：在InVision中，设计人员可以直接上传设计文件并添加动画，手势和转换，将静态画面转换为可点击的交互式原型。
• 2. 多格式支持：支持PNG，JPG，GIF，AI和PSD格式的文件。
• 3. 高效协作：InVision App在产品讨论阶段使用非常合适，可以快速呈现，加之有效的协作，可以有效收集同事和客户的反馈意见。

学习成本：低。基于其可以在设计文件添加动画和手势，因此只需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是性价比较高的选择，也是我极力推荐的一款工具。

相关文章--《UI大牛教你布尔运算》