原型工具中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). Mockplus

Mockplus是一款簡單快速且全面的Mac原型工具。提供了非常豐富的功能幫助設計師創建網頁或移動端app的wireframe, mockplus 或prototype項目：

*提供了超過3000個圖標和200組件的強大組件庫，便於設計師快速設計創建原型

*允許設計是通過簡單拖拽創建可視化交互和動畫

*快速格子功能，傻瓜式操作，為設計師快速實現批量復制提供了便利

*8種演示分享方式，方便設計師展示和分享原型設計

*團隊協作功能，一鍵分享，通知閱覽和批註，方便設計師分享設計資源和完善原型設計

*項目例子和模板，一鍵導入即可使用，方便用戶設計各種社交，音樂，旅遊及學習等軟件原型。

總之，無論你是需要創建線框圖，mockup或擁有靈活交互的prototype, Mockplus都會是你不錯的選擇。

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都值得嘗試。

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