无论你是一名刚入行的UX/UI设计师，还是入行多年的老手，在制作原型的过程中一定接触或听说过其中很重要的三个原型术语：“wireframe（线框图）”， “Mockup” 或“prototype”。但扪心自问，你真的能够明明白白的分清他们吗？
事实上，就我而言，更多的是将他们当做是产品软件迭代设计的三个阶段：
第一阶段:绘制线框图（wireframe）
当设计师或产品经理在了解到用户需求和产品本身特色及性能之后，会理所当然的对于产品软件主要界面，布局和功能分配之类要素有个全局把握，为了测试这些想法的可行性，他们常常会使用一些手绘的原型工具绘制出一些没有太多产品细节的原型草图，而这些草图一般被称作线框图（wireframe）。
第二阶段：编辑调整线框图创建具有更多细节的Mockup
然后，当设计师们与其他的设计师或产品经理讨论并听取他们的意见之后，会对线框图做出调整和完善，即添加更多的部件，颜色，图层，布局和排版之类的细节之后，创建更真实和高保真的Mockup。
第三阶段：添加动画交互创建prototype项目
之后，为了让网页或移动端原型更生动，直观且接近最终应用,设计师会对原型添加各种动画，交互以及转化设计，从而创建prototype项目。
总之，线框图（wireframe）更类似于设计师根据想法制作的关于产品应用的草图，展示出应用大致的布局，所包含的的功能界面以及真实外观之类主要因素。而Mockup则加入了更多细节和视觉元素，以便让原型本身更接近应用的最终成品。当然，只是外观上的接近。然后，prototype则是添加了更多交互和动画的原型，以便设计师可以更好的展示和测试软件应用的功能。
简而言之，三种原型各有特色。而且，现今市场上，为增加原型工具本身的市场竞争力，从产品功能上分析，并没有绝对的wireframe，mockup或prototype原型工具。例如balsamiq就是一款允许设计师绘制草图的mockup原型工具（既可用作wireframe工具，也可用做mockup工具。）
哪些最受欢迎且免费的Mac原型工具值得试一试
