UI設計工具，分為2個派系。

其中，最大、最主流的派系，是Sketch、Adobe XD、墨刀這個派系。

這個派系的軟體，操作方式、思路都非常接近，連常用快捷鍵都一樣，會一個就等於都會了。

在一個無限大的畫布上，使用者可以建立任意數量的頁面，建立的內容，可以包裝成元件，複製貼上到別的專案用。

比如，adobe xd，就是軟體本體不自帶任何UI套件，而是把UI套件的專案檔案給你，你開啟來，找到喜歡的UI元件，複製到自己的專案去就行了。

類似於，Photoshop裡，可以在不同圖片之間複製貼上。

這個派系的軟體，分2大功能區。

上圖你看到的是頁面設計區，還有個互動設計區。就是你點什麼按鈕，跳到哪個頁面，發生什麼變化，都能連線連出來，模擬出程式最終面貌。

另外，軟體自帶功能不多，但都支援外掛。類似於chrome功能不多，主要靠擴充套件。

比如，紅框標註的外掛，可以自動填充大量使用者頭像，模擬使用者列表。

大部分外掛是免費的，但也有收費外掛。

這個派系內，幾個軟體的區別：

Sketch是這個派系的開創者，是龍頭老大，但是隻有mac版，而且官方宣告不會開發windows版本。

墨刀，是國產高仿Sketch版，而且是基於網頁的，所以跨平臺。但是幾乎不免費。免費帳號只能建立3個專案，最多20個頁面。等於完全不免費。

由於sketch不支援windows，過去幾年，墨刀作為國內唯一近似產品，在國內很受歡迎。

Adobe XD，adobe的高仿Sketch產品，支援win/mac，有官方中文，100%完全免費，而且各種套件、模板、外掛，都在飛速增長，而且大都是免費的。

（更新說明：XD對儲存本地檔案開始收費，儲存到雲空間依然免費。本質就是開始收費了。但是你還是可以找到免費版）

Adobe XD最吃虧的，就是面市比較晚，它在2019年，功能才追上它的前輩。如果它早幾年面世，就沒墨刀什麼事了，XD就會像Photoshop一樣，全面佔領windows市場。

現在，雖然Adobe XD來的晚，但新使用者也是飛速增長狀態。畢竟，完全不要錢。

如果要使用這個派系的軟體，推薦Adobe XD。首先，完全不花錢，就已經是巨大優勢了。而且，還有來自全球的設計師提供免費元件。功能，大家都一樣，全是高仿Sketch。

這個派系，能較容易做出漂亮頁面，模擬豐富的頁面互動和切換。

但這個派系，實際上並不完美。它有個巨大問題：做功能草圖低效。

在設計最初期，我們關注的是頁面功能，是佈局，完全無視美觀。要求軟體，能以最快速度，精確反映頁面功能。

而Sketch， adobe xd這個派系，你會不停陷入修改元件圖層的細節中。

比如，下圖的按鈕元件，當你點選時，你會發現右邊不能修改顏色、文字。

那是因為，這個按鈕，由很多基本圖形組成，類似於Photoshop一張圖片有很多圖層。你要精確選到對應區域，才能修改對應屬性。

而且，這個派系，你頁面上的UI元素，是從各個不同的檔案複製過來的小元件，顏色混雜、文字不統一，你都要一個個去修改。

這會導致，設計師不斷陷入對美術細節的調整，而無暇專注於頁面功能設計。

也就是說，這個派系，實際上不適合初期頁面功能設計，而是在頁面內容精確定型之後，用來做美工上的精確實現+互動模擬。

所以，這裡，另一個高效的派系就要登場了：Balsamiq、Mockplus和Axure RP的 原型設計派系。

（更新說明：墨刀也進入這個派系了，而且提供了設計網頁和手機APP的常用元件樣式。但如果是軟體或遊戲的原型設計，元件目前不如Mockplus豐富好用）

這個派系的特點是，自帶完善、風格統一的元件庫，元件沒有圖層，所有內容直接修改屬性，也沒有複雜顏色，不會干擾視覺。

這樣，這個派系，能夠迅速完成頁面功能設計，完全不會被任何因素干擾。因此適合設計原型。

但是，和Sketch派系各個軟體幾乎一模一樣不同，這個派系的3個軟體，差異其實很大。

Balsamiq，是模擬手繪草圖風格，

類似下面這種：

它只有黑白，不能設定顏色，模擬互動只有基本的點選跳轉。優點是，他的簡潔，讓它能飛速完成功能設計，因此多年來都廣受歡迎。

很多時候，有了上面這種草圖，前端其實就可以寫程式碼了，無需再整那些花裡胡哨的，尤其是小團隊、全棧開發的情況。

大名鼎鼎的Axure RP，是個古老的軟體，它是在開發windows軟體的時代的產物，如今來看一切都現得很過時。

如今來看，它自帶的元件庫非常過時，常用元件欠缺，大量過時元件永遠用不上。它的互動設定也是，每個元件，都能夠設定大量行為，然而，如今這個觸屏、web為主的時代，95%的設定你都用不上，放在那純屬礙眼。

從很多角度講，Axure RP是個應該被時代淘汰的產品。

Mockplus，實際上是介於Axure RP 和 Sketch派系之間的國貨精品。

它的開發者曾經是Axure RP的使用者，卻不滿於Axure RP的各種問題。於是，Mockplus很多方面，都像是個改良版的Axure RP。

Mockplus擁有Axure RP類似的介面、操作方式，但提供了與時俱進的元件，去掉了如今永遠用不上的互動方式。

這樣，它能像Axure RP那樣，透過簡潔便利的元件設定，初期只專注功能，快速完成頁面功能設計，並模擬互動。等功能佈局精確定型，又能透過樣式設定，實現和Sketch派系一致的最終成果。

聽起來很美好，然而，這是有代價的：

元件靠官方提供，沒有全球藝術家為它構造龐大內容庫。

從毫無美術感的功能草圖，最終改成華麗的頁面成品，需要手動設定非常多的內容。

沒有節點式互動設計。它在左上角有個頁面列表，每個頁面內，可以給按鈕、連結，新增行為。比如跳轉到其他頁面，或改變本頁某些內容。

MockPlus依然是非常傳統的軟體設計方式。對於複雜任務，不如Sketch派的節點式操作靈活。

這種設計，能夠高效的滿足常見、基本需求，但無法適應複雜、高定製化的需求。

MockPlus顯然意識到了這一點，於是推出了單獨的節點式互動設計產品。他是網頁版，你把做好的UI設計圖，上傳之後，再拖線設計互動。這種專用的互動設計工具，提供審批、修訂等團隊工作流程。

國內有個叫藍湖的產品，也是這樣，只做互動，不做UI。藍湖因為做得早，已經是一統天下的狀態。功能上，這一類產品功能幾乎完全一樣，而且大都免費，所以用哪個都差不多。

使用者量上，Mockplus 和 Sketch派的國貨墨刀，使用者都在50萬左右。而且我相信會有一定重疊。因為這兩個流派，有一定互補關係。

最終建議：

在頁面功能設計階段，使用 Mockplus 或 墨刀新出的原型設計功能 ，做到功能佈局上，精確定型。

如果有進一步模擬的必要，再換用Adobe XD，昇華美工，模擬互動。

更新：

由於Adobe XD收費（當然，你還是能下到免費版），而

Mockplus

和

墨刀

都開始進入對方的領域，提供從 原型設計 到 互動設計的完整產品鏈。這兩家應該成為大家的首選。

至於到底選哪個，標準如下：

如果是軟體或遊戲，直接Mockplus

如果是網頁或手機APP，在意預算，看哪家便宜選哪家，功能都差不多。

如果是網頁或手機APP，不在意預算，直接墨刀。因為它提供了熱門網頁 和 APP設計樣式的元件，能夠在原型設計階段，就感受到頁面上色之後的效果。