原型工具中Wireframe, Mockup和prototype之间的有什么不同？

无论你是一名刚入行的UX/UI设计师，还是入行多年的老手，在制作原型的过程中一定接触或听说过其中很重要的三个原型术语：“wireframe （线框图）”， “Mockup” 或“prototype”。但扪心自问，你真的能够明明白白的分清他们吗？

事实上，就我而言，更多的是将他们当做是产品软件迭代设计的三个阶段：

第一阶段: 绘制线框图（wireframe）

当设计师或产品经理在了解到用户需求和产品本身特色及性能之后，会理所当然的对于产品软件主要界面，布局和功能分配之类要素有个全局把握，为了测试这些想法的可行性，他们常常会使用一些手绘的原型工具绘制出一些没有太多产品细节的原型草图，而这些草图一般被称作线框图（wireframe）。

第二阶段：编辑调整线框图创建具有更多细节的Mockup

然后，当设计师们与其他的设计师或产品经理讨论并听取他们的意见之后，会对线框图做出调整和完善，即添加更多的部件，颜色，图层，布局和排版之类的细节之后，创建更真实和高保真的Mockup。

第三阶段：添加动画交互创建prototype项目

之后，为了让网页或移动端原型更生动，直观且接近最终应用, 设计师会对原型添加各种动画，交互以及转化设计，从而创建prototype项目。

总之，线框图（wireframe）更类似于设计师根据想法制作的关于产品应用的草图，展示出应用大致的布局，所包含的的功能界面以及真实外观之类主要因素。而Mockup则加入了更多细节和视觉元素，以便让原型本身更接近应用的最终成品。当然，只是外观上的接近。然后，prototype则是添加了更多交互和动画的原型，以便设计师可以更好的展示和测试软件应用的功能。

简而言之，三种原型各有特色。而且，现今市场上，为增加原型工具本身的市场竞争力，从产品功能上分析，并没有绝对的wireframe，mockup或prototype原型工具。例如balsamiq就是一款允许设计师绘制草图的mockup原型工具（既可用作wireframe工具，也可用做mockup工具。）

哪些最受欢迎且免费的Mac原型工具值得试一试

既然市场上并没有完全绝对的wireframe, mockup或prototype工具，那么我们在选择的时候就需要更多的关注，哪一款原型工具能够更方便我们制作某种类型的应用原型。所以，这里介绍4款最受欢迎且免费的Mac原型工具，以便大家下载使用：

1). Balsamiq

Balsamiq是一款免费且界面简洁的Mac原型工具，致力于是尽量给用户，即UX/UI设计师，产品经理和开发工程师，一种近似于直接使用笔和纸绘制原型草图的体验。它能够帮助设计师快速地直接在Mac电脑上绘制网页或Android/iOS移动端设备应用的草图。其快速添加功能也为设计师搜索和拖拽需要的应用界面组件提供了便利。而且，其在线团队协作功能也能更方便参与其中的设计师，用户，客户，产品经理及开发工程师提出针对应用原型的建议和评论，更有益于原型方案的提升和完善。

但是，由于Balsamiq是一款需要设计师一一绘制出应用原型部件的手绘工具，并不适合需要创建更多细节和动画的设计师。

2). 摹客原型

摹客原型是一款在线的快速Mac原型设计工具，采用基于Web的全新架构，不需要下载安装，不受设备系统的限制，通过浏览器即可快速进行原型设计。摹客原型自带钢笔、铅笔等矢量工具，可帮助用户自由完成设计。设计完成后可以和团队成员无缝协作，轻量设计还能直接交付开发，真正实现“从创意到落地”。 

功能特色：

• 全新的主辅画板模式，可以灵活创建不同的交互效果。
• 支持多人同时在线编辑同一项目，共同完成APP原型设计。
• 自带钢笔工具、铅笔工具、布尔运算、响应式布局等特色功能，设计创作自由随心
• 支持页面交互、状态交互、命令交互，以及设置多种触发方式和曲线，快速制作交互原型。
• 设计稿中支持直接绘制流程图，清晰呈现项目逻辑。

适用情景：中高保真原型，快速原型， WEB/移动端/平板原型，线框图，视觉稿

3). Pencil Project

Pencil Project是既一款开源的GUI 原型工具，同时也是一款免费且适用于Mac平台的原型工具。软件内置多样的图形和组件，方便设计师直接绘制各式应用界面原型。它支持多种导出格式，例如PNG, PDF, SVG 和 ODT 文件格式等。而且，如果需要的话，在使用Pencil Project制作原型时，还可在原型文件之内添加组件与页面之间的链接，使原型更具可操作性。

所以，从这一方面来讲，Pencil Project对于无需创建复杂原型项目（即无需添加多样配色，版式和动画）的设计师来讲，使用起来会更方便。

4). InVision

InVision是一款在线的原型工具。允许设计师编辑，分享和测试具有一定交互的应用原型。而其团队协作功能，即允许设计师导入原型，讨论和添加交互及动画，也为部分设计师用户所喜爱。而且，作为一款支持大部分浏览器打开的在线工具，InVsion也适用于任何Windows和Mac电脑。

所以，InVision更适合希望通过在线团队协作完善原型交互，同时能够及时获取其他设计师，产品经理以及软件开发人员建议和反馈的设计师使用。

总结

因此，如果你是喜欢手绘网页或手机端应用原型的草图的文艺青年， 手绘风格的Balsamiq会是你不错的选择。如果你是希望创建具有丰富色彩，布局多样，细节清晰且交互生动的应用原型的设计师，简单快捷且功能齐全的Mockplus会是你很好的尝试。如果你是希望找到一款能够帮助你设计和绘制不太复杂的应用原型，Pencil Project会带给你有趣的体验。当然，如果你只是希望通过团队协作优化应用原型并获得其他参与设计师的建议反馈，Mockplus和InVision都值得尝试。