线框图工具和App原型设计工具不断的改变着UX设计师的工作方式。作为一名设计师，很幸运市面上有丰富的原型设计工具供我们使用。特别是像Axure，Mockplus，sketch这样的app原型工具，可以提供各种保真度，让我们能够以较低的成本来创建我们的原型。这篇文章中，博主将分享一些app原型设计工具的入门知识，也会推荐一些口碑较好的原型设计工具。
原型设计过程中需要避免的问题：
l 过于关注视觉设计
l 忽略了可用性测试
l 没有收集用户反馈
l 忽视了原型工具的重要性
首先当我们在设计一个应用程序或网站时，会选择一些app原型设计工具来画原型。直接创建高保真原型非常不明智，不仅会投入大量的人力金钱资源，也会浪费大量的时间。在产品的初级阶段，最好选择使用线框图或者快速的app原型工具来创建原型。
为什么产品初级阶段最好选择中低保原型？
原型作为一种交流工具，其主要任务是让团队成员快速了解整个产品，框架、结构、布局，逻辑等。便于之后的讨论并迅速搜集用户的反馈，从而不断来改进自己的产品。由于原型并不是产品的最终版本，所以不需要考虑太多视觉方面的细节，因为在产品迭代过程中，设计师会反复的进行修改。
使用app原型设计工具的优势：
节省时间和金钱；
可让每个人都可参与到设计过程中；
充当设计师和开发人员之间的桥梁；
简单介绍下原型的分类及区别：
纸上原型（Paper-prototyping）
顾名思义，不借助原型设计工具，利用笔和纸绘制的原型。设计师可随时随地的将头脑中的想法画在纸上；简单快速，低成本，所以大部分设计师都很喜欢。
低保真线框图（wireframe）
不同于app原型设计工具如此在乎视觉效果，线框图只关注于我们想表达的功能，至于外观，不重要，所以色彩大多以黑白灰为主。线框图的目的是清晰的表达出你产品的页面布局，结构以及操作逻辑。
source：App原型工具绘制的线框图
中高保真的原型模型（prototype）
原型是指可点击，可操作的原型，更像是一个成品，其比较真实的模拟了用户与UI界面之间的交互，经过制作原型，用户测试等，设计师可在产品开发的早期及时的发现产品存在的问题并修正，帮助设计师不断迭代完善设计和验证自己的想法。
来源：用Mockplus绘制的app原型。Mockplus这样的app原型设计工具可以通过一键拖拽链接点与页面与组件进行交互，轻松创建交互原型。
简而言之，原型设计包括一系列保真度，从低到高，设计师根据不同的设计需求，来选择和使用不同的app原型工具。
使用app原型设计工具的三个阶段
1. 设计
选择一款适合的app原型工具，根据用户的需求创建设计原型。我们需从可用性，可访问性，信息架构（如何更好呈现信息？）等方面来考虑设计，给用户带来良好的用户体验。
2. 测试与反馈
及时收集团队成员或者用户的反馈。当团队协作时，头脑风暴最有效，所以最好准备好一些便利贴，重要的反馈一点要记录下来！通过原型图→反馈→原型图→反馈这个流程不断来改进产品。像Mockplus这样的app原型设计工具可让设计师直接在原型中来收集反馈，使参与此项目的每位设计师都能直接发表评论，省时省力。
3. 完善
根据反馈，迭代→反馈→迭代→反馈，及时改进并完善产品。
口碑最好的app原型设计工具推荐
大多数新产品的设计最好从绘制线框图开始，然后根据系统的复杂程度和保真度的要求，不断迭代，将其转化成中或高保真的原型。
Mockplus
兼容：Mac，Window，Android，IOS
学习曲线：低
优势：快速进行设计，交互和测试
Mockplus是产品经理圈子中最受欢迎的一款app原型设计工具。与Axure等复杂的app原型工具相比，Mockplus最大的优势就是快，简单，高效。非常适合做中低保真原型，采用拖拽连接点的方式就可快速的创建页面与组件的交互，并且提供了封装好的3,000个图标和200个组件，一键拖拽，即可使用。另外Mockplus有8种预览方式可以共享和测试你的原型，也可直接通过微信小程序分享给客户或者朋友查看，十分方便，这也是我非常喜欢的原因之一。
Sketch
兼容：只支持Mac
学习曲线：中
优势：轻量，提供大量插件
Sketch是一款比较受欢迎的基于矢量的app原型设计工具。自2009年推出以来，Sketch就收获了一大批粉丝。 Sketch提供了上百个插件，基本上你想要的插件都可以下载到，极大的提升了设计师的工作效率。虽然Sketch确实支持一定程度上的交互和用户流（使用插件）但它真正令人眼前一亮的是它填补了Photoshop一些功能上的空白。
摹客
兼容：Mac，Window，Android，IOS
学习曲线：低
优势：支持上传sketch、PS、XD的设计稿和Mockplus、Axure的原型图，可快速完成高保真设计、智能标注、自动切图等
在摹客中，按住鼠标在设计稿上绘制一个矩形的热区，再松开鼠标通过左侧项目树选择热区跳转的目标页面，即可完成交互跳转链接的设置。对设置好的交互链接还可以设置跳转动画，有9种动画样式可以选择，默认没有动画。还可通过下拉框或直接输入数值修改动画执行时长。可快速将sketch、PS、XD的设计稿转为高保真原型。
Axure
兼容：Mac＆Win
学习曲线：高
优势：拥有强大功能的界面
Axure是一款强大的原型设计工具，适合有复杂交互的web端产品。学习成本较高，需要设计师有足够的耐心和时间去学习它。但如果你喜欢简单和高效的app原型工具，建议还是选择Mockplus或摹客。
总结：
在产品的不同阶段选择不同的app原型设计工具。正如我之前说的，原型并不是成品，所有不需要花太多精力在设计高保真原型上面，只要能清晰的传达出产品的构架，布局，操作逻辑即可，Mockplus不失为一个很好的选择。节省时间，快速输出自己的想法，迅速收集反馈，及时对产品进行迭代和完善，才是一名合格产品经理应该做的事情。