尋夢新聞LINE@每日推播熱門推薦文章，趣聞不漏接❤️
Balsamiq、Sketch以及Mockplus都是當今十分熱門的設計工具，但是三個工具各有特色、適用場景。讓我們一起來看看三者的對比，了解三者不同，以在不同場景中選擇正確的工具。一、概論簡介
1. Balsamiq Mockups 是美國加利福利亞的Balsamiq 工作室（ 2008 年 3 月創建）推出的原型圖繪制軟件。於 2008 年 6 月發行了第一個版本。Balsamiq Mockups 在軟件產品原型圖設計領域，特別是 Web 原型圖設計領域尤其受歡迎。使用 Balsamiq Mockups 畫出的原型圖都是手繪風格的圖像，看上去美觀、清爽。它支持幾乎所有的 HTML 控件原型圖，還支持 iPhone 手機元素原型圖。
2.Sketch是一款由Bohemian Coding團隊為視覺設計師打造的專業矢量圖形處理應用，最初發布於2010年，後在2012年榮獲Apple公司ADA設計獎項。軟件頁面清爽、簡潔，功能多樣而強大，可以免費使用空間、菜單、調色板等功能，還完美支持布爾運算，符號和強大的標尺，可以幫助設計師快速的進行UI設計工作。Sketch也可以用於製作交互原型，雖然相對於其它原型設計工具來講會有不足，但也不乏亮點之處。
3. Mockplus（摩客）是一款簡潔快速的原型圖設計工具。由國內團隊一手打造，於14年上線，相比其他原型工具進入市場較晚，但已贏得百萬級用戶的鐘愛。適合軟件團隊、個人在軟件開發的設計階段使用，其低保真、無需學習、快速上手、功能夠用，能夠很好地表達設計，幫助設計師「關注設計，而非工具」。從設計上，採取了隱藏、堆疊、組合等方式，把原本複雜的功能，精心安排。上手很容易，但隨著你的使用，功能層層遞進，你會發現更多適合自己的有用的功能。新手不會迷惑，熟手可以夠用。二、價格一覽
Balsamiq：
Sketch：
Mockplus：
三、適用場景
Balsamiq：低保真；線框草圖。
Sketch：高保真；矢量圖形。
Mockplus：中保真；交互原型。四、功能對比
1、頁面管理
Balsamiq：List
由於沒有頁面交互，Balsamiq也沒有頁面層級，頁面間的關係是平行的。
Sketch：Pages
不管有多少畫布（pages）都被包含在同一個文檔中，可以在程序內部進行搜尋。全局視野，規劃自由度高，也利於思考界面元素關係和維護界面設計的一致性。
這樣的平級排列，頁面數量少的時候比較方便，數量多時就會亂得讓人奔潰。
Mockplus：項目樹
Mockplus項目樹層級很分明，項目樹中以分組和子頁面來規定層級。嚴格的層級管理有利於梳理邏輯，讓原型項目層次清晰。同時也展現了Mockplus在交互上的功能性。另外，Mockplus還支持導出項目樹，可導出為：樹圖、腦圖、html、Csv（用Excel直接打開）、XML、文本、MarkDown文本等，使項目文檔製作更加方便。
Mockplus提供的基於各類頁面、流程的組織功能，可以使設計者全面把控原型系統的功能組織和交互關係，尤其是可通過流程圖來描述業務承接關係，對於設計複雜原型系統有著非常重要的意義。
2、組件資源
Balsamiq：
Balsamiq組件的藝術家塗鴉風格，令其所製作的界面效果更具趣味性。Balsamiq組件資源分別按「All」，「Big」、「Button」、「Common」、「Layout」、「Markup」、「Midia」、 「Text」、「IPhone」分類組織，並提供了 「Quick Add」和快速檢索功能，改善了選取組件的效率。
Sketch：
以往做一個界面底部導航欄 的時候，一般會把每個圖標的兩種狀態均放置在設計稿中，遇到不同的頁面，就顯示/隱藏 不同的圖標。sketch在4.1版本更新以後增加了一個強大的功能：組件套用。這個功能能將上面描述的過程規範化，智能化。
Mockplus：
Mockplus提供300多個高度封裝組件，2000多個矢量圖標，無需繪制，拖拽即可呈現界面設計，組件資源豐富、使用便利。另外可以通過分享「我的組件庫」來分享組件，通過「組件樣式」可復用組件的樣式。
3、團隊協作
Balsamiq和Sketch：本身不具備團隊協作功能。但Sketch有團隊協作的插件。
Mockplus：
有較為完整的團隊管理功能。
原型編輯層面上，支持多人編輯項目和審閱：可以在一個團隊項目之中，以頁面為顆粒度件劃分每個人的負責區域，上傳到雲、刷新界面方能互通。【詳見：在Mockplus中進行協作設計】
成員管理層面上，Mockplus支持對團隊成員、團隊項目進行分組管理、權限設定。【詳見：Mockplus團隊管理功能】
4、交互
Balsamiq：
Balsamiq的交互基本上就一個一個操作，即「鏈接到另外一個頁面」。這對複雜的業務應用來說，是遠遠不夠的。但這也跟Balsamiq的低仿真的定位有關。
Sketch：
還是基於定位的原因，Sketch本身無法做到交互。但是可以借助一些插件來做到。【詳見：sketch做的原型圖，如何更好地展示交互邏輯關係？】
Mockplus：
交互能力的強弱，直接影響原型系統和最終交付的應用系統的仿真程度。這點上，Mockplus明顯占據優勢，每個功能項有多個交互效果可以供選擇，基本上覆蓋了網頁端、桌面端、移動端的各種可能。交互動作上，只需要將組件的鏈接點拖拽到目標組件/頁面，即可迅速設置交互。另外，Mockplus已經封裝好的交互組件，拖出即可使用，十分地方便、節省時間。
5、矢量繪圖
Balsamiq和Mockplus：兩者都只能勉強畫出基本圖形，不支持矢量繪圖。當然也跟產品定位相關。
Sketch：
可以滿足大多繪圖需要。尤其是給折角設置圓角的功能很好用。
6、備註說明
Balsamiq：
有標註功能。Balsamiq中標記有：箭頭/下劃線，插圖編號，記事貼，紅叉和花括號。支持鎖定、隱藏標記，可用快捷鍵迅速操作。【詳見：Balsamiq中使用標記】
Sketch：
缺少備註說明功能。需要用文本的形式附上或是使用備註插件。【詳見：與Sketch搭配設計APP的最佳標註插件】
Mockplus：
備註功能較為完善。
Mockplus中支持使用批註組件。組件分類中有一類組件叫做「批註」，打開左側組件面板的最後一個分類，其中包含了不少常用的
批註組件。
Mockplus支持頁面標記。使用頁面標記，可以給頁面或分組的圖標設置不同的顏色，方便管理和區分。
Mockplus支持給組件添加備註。選定組件，在屬性面板找到「備註」或者直接按下快捷鍵Ctrl + M，彈出備註對話框，你可以輸入需要的文字。演示的時候，當滑鼠移動到有備註的組件時，會自動彈出備註小窗，顯示你的備註，如圖：
7、文件導出
Balsamiq：
Balsamiq支持以PDF/圖片形式導出、將項目導出至另一個項目。
Sketch：
只能導出靜態圖：Artboard、切片和所選元件。
Mockplus：
內容上，Mockplus支持導出可交互原型、組件、頁面、項目樹、頁面流程圖、腦圖；形式上，支持導出為HTML、離線演示包、圖片格式。
8、表格功能
Balsamiq：
Balsamiq目前的表格功能有點類似於Mockplus從前的表格功能，其對於表格的控制，採用的是通過文字來控制外形和數據的方法。需雙擊表格，進入編輯，再裝入數據。如果需要裝入的數據很多，可以先在文本編輯器中寫好，再一次黏貼進去。【詳見：Balsamiq表格指南】
sketch：
用Sketch製作表格比較複雜。Sketch中的單元格看似簡單，其實是由不同的元素和屬性組合而成；對齊樣式、分隔樣式、字色設定也比較複雜，但可做到的效果也比較豐富。【詳見：用Sketch搭建複雜表格】
Mockplus：
Mockplus 全新的表格組件的所有操作全都是可視化的，可以像操作電子表格一樣使用。可以非常方便地增加、編輯、刪除、拆分和合併單元格，可以任意設置一個或多個單元格的風格和文字格式。充分滿足在原型中整理PRD的需求。【詳見：Axure vs Mockplus表格對比】
五、產品迭代
三個工具中，Mockplus產品更新換代較快，在不久前推出了摹客設計系統。摹客設計系統（Mockplus Design System）是國內獨家設計系統平台，致力於定制設計規範、統一管理設計資源、讓設計和開發溝通更簡單。
摹客設計系統中，可以資源管理：在雲端管理你的所有設計資源，包括顏色、Logo、圖標、文字、組件、度量元素、陰影等。你可以建立多個庫、分類和子分類來進行管理。可以快捷設計：團隊中的成員均可分享設計資源並遵守設計規範。可以在Mockplus和Sketch中，將設計元素上傳到設計系統形成規範，同時，也可將庫中的設計資源快速應用到Mockplus和Sketch的設計中，自動同步更新。可以輕鬆分享：一鍵分享設計規範給夥伴兒。可以導出CSS、SCSS、LESS，應用到前端開發。還可以自動導出各類版式的設計規範圖（UI Style Guide）。
總結
Balsamiq、Sketch、Mockplus都可以應用於類似的使用場景，但三個工具的定位不同、功能點不同、擅長領域也不同，可根據需要來選擇使用。蘿蔔青菜各有所愛，希望這篇文字能幫助你選中適合你的工具！
