UI設(shè)計(jì)工具，分為2個(gè)派系。

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

這個(gè)派系的軟件，操作方式、思路都非常接近，連常用快捷鍵都一樣，會(huì)一個(gè)就等于都會(huì)了。

在一個(gè)無(wú)限大的畫(huà)布上，用戶可以創(chuàng)建任意數(shù)量的頁(yè)面，創(chuàng)建的內(nèi)容，可以包裝成組件，復(fù)制粘貼到別的項(xiàng)目用。

比如，adobe xd，就是軟件本體不自帶任何UI套件，而是把UI套件的項(xiàng)目文件給你，你打開(kāi)來(lái)，找到喜歡的UI組件，復(fù)制到自己的項(xiàng)目去就行了。

類似于，Photoshop里，可以在不同圖片之間復(fù)制粘貼。

這個(gè)派系的軟件，分2大功能區(qū)。上圖你看到的是頁(yè)面設(shè)計(jì)區(qū)，還有個(gè)交互設(shè)計(jì)區(qū)。就是你點(diǎn)什么按鈕，跳到哪個(gè)頁(yè)面，發(fā)生什么變化，都能連線連出來(lái)，模擬出程序最終面貌。

另外，軟件自帶功能不多，但都支持插件。類似于chrome功能不多，主要靠擴(kuò)展。

比如，紅框標(biāo)注的插件，可以自動(dòng)填充大量用戶頭像，模擬用戶列表。

大部分插件是免費(fèi)的，但也有收費(fèi)插件。

這個(gè)派系內(nèi)，幾個(gè)軟件的區(qū)別：

• Sketch是這個(gè)派系的開(kāi)創(chuàng)者，是龍頭老大，但是只有mac版，而且官方聲明不會(huì)開(kāi)發(fā)windows版本。

?

• 墨刀，是國(guó)產(chǎn)高仿Sketch版，而且是基于網(wǎng)頁(yè)的，所以跨平臺(tái)。但是幾乎不免費(fèi)。免費(fèi)帳號(hào)只能創(chuàng)建3個(gè)項(xiàng)目，最多20個(gè)頁(yè)面。等于完全不免費(fèi)。

由于sketch不支持windows，過(guò)去幾年，墨刀作為國(guó)內(nèi)唯一近似產(chǎn)品，在國(guó)內(nèi)很受歡迎。

• Adobe XD，adobe的高仿Sketch產(chǎn)品，支持win/mac，有官方中文，100%完全免費(fèi)，而且各種套件、模板、插件，都在飛速增長(zhǎng)，而且大都是免費(fèi)的。

Adobe XD最吃虧的，就是面市比較晚，它在2019年，功能才追上它的前輩。如果它早幾年面世，就沒(méi)墨刀什么事了，XD就會(huì)像Photoshop一樣，全面占領(lǐng)windows市場(chǎng)。

現(xiàn)在，雖然Adobe XD來(lái)的晚，但新用戶也是飛速增長(zhǎng)狀態(tài)。畢竟，完全不要錢(qián)。

如果要使用這個(gè)派系的軟件，推薦Adobe XD。首先，完全不花錢(qián)，就已經(jīng)是巨大優(yōu)勢(shì)了。而且，還有來(lái)自全球的設(shè)計(jì)師提供免費(fèi)組件。功能，大家都一樣，全是高仿Sketch。

?

這個(gè)派系，能較容易做出漂亮頁(yè)面，模擬豐富的頁(yè)面互動(dòng)和切換。但這個(gè)派系，實(shí)際上并不完美。它有個(gè)巨大問(wèn)題：做功能草圖低效。

在設(shè)計(jì)最初期，我們關(guān)注的是頁(yè)面功能，是布局，完全無(wú)視美觀。要求軟件，能以最快速度，精確反映頁(yè)面功能。

而Sketch， adobe xd這個(gè)派系，你會(huì)不停陷入修改組件圖層的細(xì)節(jié)中。

比如，下圖的按鈕組件，當(dāng)你點(diǎn)選時(shí)，你會(huì)發(fā)現(xiàn)右邊不能修改顏色、文字。

那是因?yàn)?#xff0c;這個(gè)按鈕，由很多基本圖形組成，類似于Photoshop一張圖片有很多圖層。你要精確選到對(duì)應(yīng)區(qū)域，才能修改對(duì)應(yīng)屬性。

而且，這個(gè)派系，你頁(yè)面上的UI元素，是從各個(gè)不同的文件復(fù)制過(guò)來(lái)的小組件，顏色混雜、文字不統(tǒng)一，你都要一個(gè)個(gè)去修改。

這會(huì)導(dǎo)致，設(shè)計(jì)師不斷陷入對(duì)美術(shù)細(xì)節(jié)的調(diào)整，而無(wú)暇專注于頁(yè)面功能設(shè)計(jì)。

?

也就是說(shuō)，這個(gè)派系，實(shí)際上不適合初期頁(yè)面功能設(shè)計(jì)，而是在頁(yè)面內(nèi)容精確定型之后，用來(lái)做美工上的精確實(shí)現(xiàn)+互動(dòng)模擬。

---

所以，這里，另一個(gè)高效的派系就要登場(chǎng)了：Balsamiq、Mockplus和Axure RP派系。

這個(gè)派系的特點(diǎn)是，自帶完善、風(fēng)格統(tǒng)一的組件庫(kù)，組件沒(méi)有圖層，所有內(nèi)容直接修改屬性，也沒(méi)有復(fù)雜顏色，不會(huì)干擾視覺(jué)。

這樣，這個(gè)派系，能夠迅速完成頁(yè)面功能設(shè)計(jì)，完全不會(huì)被任何因素干擾。

?

但是，和Sketch派系各個(gè)軟件幾乎一模一樣不同，這個(gè)派系的3個(gè)軟件，差異其實(shí)很大。

Balsamiq，是模擬手繪草圖風(fēng)格，類似下面這種：

它只有黑白，不能設(shè)置顏色，模擬互動(dòng)只有基本的點(diǎn)擊跳轉(zhuǎn)。優(yōu)點(diǎn)是，他的簡(jiǎn)潔，讓它能飛速完成功能設(shè)計(jì)，因此多年來(lái)都廣受歡迎。

很多時(shí)候，有了上面這種草圖，前端其實(shí)就可以寫(xiě)代碼了，無(wú)需再整那些花里胡哨的，尤其是小團(tuán)隊(duì)、全棧開(kāi)發(fā)的情況。

大名鼎鼎的Axure RP，是個(gè)古老的軟件，它是在開(kāi)發(fā)windows軟件的時(shí)代的產(chǎn)物，如今來(lái)看一切都現(xiàn)得很過(guò)時(shí)。

如今來(lái)看，它自帶的組件庫(kù)非常過(guò)時(shí)，常用組件欠缺，大量過(guò)時(shí)組件永遠(yuǎn)用不上。它的互動(dòng)設(shè)置也是，每個(gè)組件，都能夠設(shè)置大量行為，然而，如今這個(gè)觸屏、web為主的時(shí)代，95%的設(shè)置你都用不上，放在那純屬礙眼。

從很多角度講，Axure RP是個(gè)應(yīng)該被時(shí)代淘汰的產(chǎn)品。

?

Mockplus，實(shí)際上是介于Axure RP 和 Sketch派系之間的國(guó)貨精品。

它的開(kāi)發(fā)者曾經(jīng)是Axure RP的用戶，卻不滿于Axure RP的各種問(wèn)題。于是，Mockplus很多方面，都像是個(gè)改良版的Axure RP。

Mockplus擁有Axure RP類似的界面、操作方式，但提供了與時(shí)俱進(jìn)的組件，去掉了如今永遠(yuǎn)用不上的互動(dòng)方式。

這樣，它能像Axure RP那樣，通過(guò)簡(jiǎn)潔便利的組件設(shè)置，初期只專注功能，快速完成頁(yè)面功能設(shè)計(jì)，并模擬互動(dòng)。等功能布局精確定型，又能通過(guò)樣式設(shè)置，實(shí)現(xiàn)和Sketch派系一致的最終成果。

聽(tīng)起來(lái)很美好，然而，這是有代價(jià)的：

• 組件靠官方提供，沒(méi)有全球藝術(shù)家為它構(gòu)造龐大內(nèi)容庫(kù)。
• 從毫無(wú)美術(shù)感的功能草圖，最終改成華麗的頁(yè)面成品，需要手動(dòng)設(shè)置非常多的內(nèi)容。
• 沒(méi)有節(jié)點(diǎn)式互動(dòng)設(shè)計(jì)。它在左上角有個(gè)頁(yè)面列表，每個(gè)頁(yè)面內(nèi)，可以給按鈕、鏈接，添加行為。比如跳轉(zhuǎn)到其他頁(yè)面，或改變本頁(yè)某些內(nèi)容。

MockPlus依然是非常傳統(tǒng)的軟件設(shè)計(jì)方式。對(duì)于復(fù)雜任務(wù)，不如Sketch派的節(jié)點(diǎn)式操作靈活。這種設(shè)計(jì)，能夠高效的滿足常見(jiàn)、基本需求，但無(wú)法適應(yīng)復(fù)雜、高定制化的需求。

MockPlus顯然意識(shí)到了這一點(diǎn)，于是推出了單獨(dú)的節(jié)點(diǎn)式交互設(shè)計(jì)產(chǎn)品，叫iDoc。他是網(wǎng)頁(yè)版，你把做好的UI設(shè)計(jì)圖，上傳之后，再拖線設(shè)計(jì)交互。這種專用的交互設(shè)計(jì)工具，提供審批、修訂等團(tuán)隊(duì)工作流程。

國(guó)內(nèi)有個(gè)叫藍(lán)湖的產(chǎn)品，也是這樣，只做交互，不做UI。藍(lán)湖因?yàn)樽龅迷?#xff0c;已經(jīng)是一統(tǒng)天下的狀態(tài)。功能上，這一類產(chǎn)品功能幾乎完全一樣，而且大都免費(fèi)，所以用哪個(gè)都差不多。

?

用戶量上，Mockplus 和 Sketch派的國(guó)貨墨刀，用戶都在50萬(wàn)左右。而且我相信會(huì)有一定重疊。因?yàn)檫@兩個(gè)流派，有一定互補(bǔ)關(guān)系。

---

最終建議：

在頁(yè)面功能設(shè)計(jì)階段，使用Balsamiq或Mockplus，做到功能布局上，精確定型。

如果有進(jìn)一步模擬的必要，再換用Adobe XD，升華美工，模擬互動(dòng)。

總結(jié)

以上是生活随笔為你收集整理的UI设计工具比较：Sketch、Adobe XD、墨刀、Mockplus、Axure RP的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。