事半功倍！帮你设计加速的7款顶尖原型工具

对于许多刚刚开始接触原型设计的设计师而言，很容易混淆线框图（Wireframe）、视觉稿（Mockup）和原型（Prototyping）这三个基本概念。

在许多项目和相关文章中，这些概念经常被混用。虽然在功用上，三者有许多相似点，然而差异也非常明显。

• 线框图是一种低保真的静态设计稿，它勾勒出布局轮廓，但是缺少细节。
• 视觉稿则是算得上是接近于高保真的设计稿，其中拥有大量的视觉信息和细节呈现，但是它依然是静态的。
• 原型和视觉稿接近，是接近于高保真的设计稿，但是原型是动态可交互的，一些后期的、完成度极高的原型设计甚至和最终的产品看起来相差无几，因为它们不仅拥有细致到位的视觉设计，同时还模拟出了理想中的用户体验。

不过，许多原型并不一定得做的非常的好看，它最主要的的功能是还原并呈现设计思路，它需要是可运行、可交互的，这是核心。

一个典型的原型设计工作流大概是这个样子的：

• 绘制页面流程。呈现出用户可能会如何浏览页面或者APP。
• 创建低保真原型，为每个页面创建多个不同的版本，进行可用性测试，搜集相关的数据和用户反馈。
• 完善原型的细节和真实度，向着最终产品的外观靠拢。在增加细节之前，请确保原型的功能已经得到完善，并足以满足需求。

对于原型本身在产品设计中的重要性，通过前天的文章《等等，原型设计的重要性你真的明白么？》，想必已经无需赘述。都说工欲善其事必先利其器，那么，有哪些优秀的原型设计值得推荐呢？

▌InVision

InVision有多优秀？Twitter和 Uber在用它，福布斯推荐它，而财富榜百强企业都在用它来设计产品。InVision 将产品设计流程中的每一个环节都进行了细化，让协作成为了流程的核心，让团队中每个人都能围绕着项目推进紧密地合作。

InVision 让团队可以在浏览器中实现实时协作。如果你想让你的高保真原型能够像真实产品一样运作，如果你想让你的原型自由无限制地进行测试，如果你希望你的原型能够像素完美，那么InVision 应该是最适合你的原型工具，哪怕你没有一点编程和代码知识。

▌Pidoco

如果你不想在产品开发流程中放弃线框图，那么Pidoco 可能是更好的选择。和InVision 不同，Pidoco 真正的核心优势在于设计出强交互性的UX原型。在Pidoco 的协助下，你能创造出可用来展示、完全可操作的原型，支持手势操作、过渡动效、键盘录入等多种复杂交互，它可以为你带来理想的移动端演示原型。

你可以在浏览器、iOS和Android 设备上实时演示你的原型，Pidoco 的智能模板使得原型的设计和搭建极其快速而便捷，这也使得它简单易学，将它介绍给团队成员并作为主要的工具之一绝不会是麻烦的事情。

由于Pidoco 主要是在云端运行，所以你不需要安装程序，只需要登录、同步、演示就好了。同样的，Pidoco 不需要你具备代码知识，上手很快的哦。

▌Proto.io

Proto.io 是一款专门的移动端原型设计平台，它不仅能帮你搭建可交互的原型，可以能用来测试和模拟移动端APP。Proto.io 能运行于绝大多数的网页浏览器，它拥有一个用来管理整个项目的控制面板，一个专用的编辑器，以及专门运行原型的播放器。这些工具使得你可以在iOS和Android 设备上测试你所设计的原型。

在使用编辑器搭建原型的过程中，用户可以查看并参与进来，通过交互和体验之后，给予设计者以反馈。来自IDEO、迪士尼、PayPal 的设计师目前都在使用Proto.io 设计原型。Proto.io 不仅加快了他们的设计工作，而且避免了开发过程中犯错的可能带来的高昂代价。

如果你想更快地将产品推向市场，Proto.io 所提供的解决方案应当能够让你事半功倍。

▌Webflow

如果你的产品从研发到发布都是采用标准的HTML、CSS和JS的代码，那么Webflow 能够为你提供从原型设计到最终交付一条龙的服务。借助Webflow 设计的页面都是响应式的，当你打算将它展示给团队成员、客户和其他利益相关者的时候，发送一个链接就可以了。

Webflow 是一款针对网页端的高素质原型设计工具，版本控制和迭代升级永远不是问题。从原型、设计到开发，逐步推进，步步为营。

▌PowerMockup

如果你是PowerPoint 用户，那么这款原型工具会是你的菜。PowerMockup 是一款PowerPoint中运行的原型工具包，有了它，你可以借助PPT直接设计制作出可运行、能交互的原型，绝对有说服力。

借助PowerMockup 来设计原型并不复杂，你所需要做的就是从PowerMockup 的库当中选取合适的形状和控件，托拽到PPT背景上，制作成合理的布局。结合PPT当中的动效和交互功能，一个可靠的原型就能搞定了。

▌HotGloo

如果你一直在寻找一款简单易用、拥有全部正确功能的原型工具，那么不妨试试HotGloo。作为一款屡获殊荣的原型设计工具，HotGloo 能为你提供舒适的设计环境，帮你在浏览器中设计出交互生动而有趣的原型。

当你开始使用HotGloo的之后，你同时拥有了其中内置的2000+ UI控件，多账户授权能够方便你与同事进行协同，同事能够针对移动端优化，测试你的设计效果，并且能够动态地添加注释。除此之外，HotGloo还拥有完整的文档说明，详细的视频教程，还有在线论坛供大家讨论。

▌Lucidchart

Lucidchart 可能是目前市场上最好的图表和线框图设计解决方案。它不仅仅能帮你完成工作流程图和思维导图，还能将你设计的图表和线框图快速地转化为可交互的原型，并且能用作展示和测试之用。

有了Lucidchart ，创建大型、复杂的线框图就再也不是问题了，内置的协同服务让你可以更加便捷地同团队成员和客户进行合作。Lucidchart 本身是一个基于云服务的APP，能够和 Google Apps 、Google Drive、Confluence、Jive以及 JIRA 进行联动和协同。

▌总结

其实就像刘语老师在她的交互课程中所提到，原型设计工具都只是手段，选择合适的工具即可，更重要的是原型设计的思路。

了解更多原型设计的知识，参与更多的项目，一边实践一边学习知识，在实战中了解不同工具的优劣好坏，再作出符合你需求的选择就好了。

原文地址：designyourway
原文作者：Bogdan Sandu
优设译文：@陈子木