4款最受欢迎的Mac原型工具

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

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

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

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

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

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

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

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

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

功能特色：

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

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

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

总结

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