5款高效的原型设计工具

Sponsor

设计并不是随心所欲，也不是每时每刻都需要创意。你需要一个向导为你指明方向- 这就是原型。

什么是原型？

原型可以概括的说是整个产品面市之前的一个框架设计。设计师可以利用它引导每个人都参与到项目中来。原型展示了各个部分之间的比重以及各个部分之间的联系。原型不仅仅只是表面的东西，它能够说明用户将如何与产品进行交互。举个栗子，一个下拉菜单，通过原型设计，你可以直观的感受到每次点击或者鼠标划过时菜单如何相应。

高效的原型设计工具

与其他工作一样，完成原型设计需要相应的工具协助。在众多原型工具中，这里推荐5款高效的工具。

1. Mockplus

工具地址：http://www.mockplus.cn/features

简单易上手，摩客已经逐渐成为很多设计师们的选择。写代码是很讨厌的事情。因此，摩客给大家提供了拖拽设计原型的功能。

对于还在使用纸和笔的设计师来说，摩客提供了更多的灵活性。你可以使用素描风格的组件来画原型。摩客丰富的组件库和图标也让设计更加快捷。

摩客的易用性还表现在创建原型的速度。如果使用其他工具，你可能需要花大量的时间完成一个原型。但使用摩客，只需5分钟。你还可以通过扫描二维码，快速的预览原型。

今年摩客团队推出了2.1版本，这就意味着你可以使用简单的拖拽完成交互功能的设计。高度封装的交互组件（例如弹出面板、弹窗、弹出菜单、抽屉、内容面板、轮播、滚动区等）让原型设计变得更加简单，快速。想了解摩客更多功能，请查看摩客官方教程。文章中提到的功能只是很小的一部分，摩客还有更多简单好用的功能等着你去挖掘。

2. UXpin

网站地址：https://www.uxpin.com/

Uxpin，另外一款值得推荐的原型设计工具。这款工具的优点就是简单易用。它的界面十分简洁，你可以轻易的把图片和文件合并到你的设计中去。这款工具的预览功能也很好用，不仅可以预览原型，也可以预览点击时或者鼠标划过时各个页面的状态。其他人也可以对原型进行评论，方便了同事间的协作。

谈到评论功能，如果UXpin 能够在有新评论的时候增加一个提醒就更好了。目前没有这个功能，如果有新的评论，你需要手动的去检查。

3. Proto.io

网站地址：https://proto.io/

与其他原型工具不一样，Proto.io 是一款在线工具，因此使用它的时候需要联网。如果你经常在线，那么使用这款工具就没什么问题。其中很重要的一个功能就是内置的组件库，设计师都知道从第三方寻找组件是很痛苦的事情。即使软件中没有你想要的组件，你也可以轻易的从第三方导入。

如果你只是需要一个常规的布局，proto.io 的启动项目能够让你的工作变得简单。你也可以保存不同的变量，并且能够预览用户与各个页面之间的交互。 正因为这是一款在线的功能，在使用的时候有一些局限。例如，不能单独备份某一个页面，而只能备份整个项目；不能添加需求文档。

4. MockFlow

网站地址：https://www.mockflow.com/

MockFlow简单的界面让原型设计十分容易。它没有花哨的东西—为你提供了一个整洁的设计界面。顶部是标准的菜单和工具栏。如果需要更多的设计空间，可以隐藏菜单和工具栏。这款工具也提供了内置的组件。

你可以使用这款工具免费创建一个原型，这样就可以在购买之前体验所有的功能。简单的拖拽和双击功能让你很容易的添加组件，不需写任何代码。导出功能同样也很简单。

MockFlow 也提供了协作功能，以便你邀请其他人预览项目或者查看项目进度。它提供了聊天功能，这样就可以交流意见。但是有一个问题，如果有一个人在刷新页面，其他人就不能刷新该页面。

5. InVision

网站地址：https://www.invisionapp.com/

这款工具很大的一个优势就是它可以让你免费创建一个项目。这对于学生和初学者来说是一个不错的福利，这样一开始的时候就不用担心预算问题了。这款工具的付费版本也是比较便宜的。 功能的分享和协作功能也很简单。你的团队成员或者客户都可以给你的设计添加评论，并且你能够很轻松的追踪评论。

项目状态是此工具另外一个强大的功能，你可以向你的整个团队分享项目进度。每一个进程都可以标为“进行中”或者“需测评”或者某部分也可以标为“积压”或者“通过”。

Invison提供了版本控制功能。你也可以与其他工具进行协作，例如 DropBox，PS，Sketch等。

以上五款原型设计工具都有自身的优劣点，但它们是目前市场上最高效的原型设计工具。

更高效的设计原型尽管有很多原型设计工具可以为你的工作带来便利，但是也还会有不少的工作需要我们去做。下面有一些小建议，希望可以让你的原型设计更优秀。

寻找灵感

尽管各个原型设计工具都提供了大量的组件，你只需要简单的拖拽，但是如果没有灵感，原型设计也是做不好的。不停的寻找灵感，学习其他设计者的项目，找出你喜欢的地方和不喜欢的地方。清楚的知道你的原型中需要避免的东西，这样可以更容易画出自己需要的原型。

形成自己的工作流程

每个人的工作方式都不一样，对别人适用的方法对你不一定适用。形成最适合自己的工作流程，最大化的利用好时间和精力。某些人可能觉得先画线框图，然后画原型，最后再进行视觉设计是很有效的流程。但是你可能觉得画完线框图就直接写代码更高效。这些都取决于你自己。

选择适合自己的工具

大部分设计师都在使用同一款原型工具，并不意味着你也需要使用这款工具。由于每个人的工作流程不一样，其他人使用的工具不一定适合你。对比市场上不同的工具，寻找一款与你性格和风格最匹配的工具。担心其他人都不用你使用的工具？ 但此工具可以给你带来最好的效率才是最重要的。

层次清楚的大纲

每个页面都有一个焦点。大纲可以让你知道每个页面中应该重点突出哪一部分。如果没有大纲，想要画出理想的原型很困难。如果你很清楚的知道页面中哪部分最重要，那你就很容易判断某些文字是否需要加粗。

从灰度图开始

颜色很重要，但是需要谨慎。从灰度图开始设计，然后添加图片，然后再添颜色。如果你一开始就使用颜色，很有可能你的页面看起来像一个小丑。

原型设计并不简单，但是会一次比一次好。通过不停的练习，选择正确的工具，你就可以设计出让客户满意的原型。

作者：Igor
原文：http://inspirationfeed.com/resources/applications/top-5-wireframing-tools-for-designers/
翻译：Becky

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。