UI 設(shè)計(jì)的工具層出不窮，每年都有不同的設(shè)計(jì)軟件、動(dòng)效工具、標(biāo)注工具、原型工具問(wèn)世。原因是因?yàn)?UI 類設(shè)計(jì)操作太簡(jiǎn)單，所以軟件都以輕量化標(biāo)榜。

輕量就意味著開(kāi)發(fā)的門(mén)檻低，會(huì)有很多新創(chuàng)業(yè)團(tuán)隊(duì)參與開(kāi)發(fā)新的軟件，形成一個(gè)充分 “內(nèi)卷” 的環(huán)境。

從 Sketch 問(wèn)世以后，Adobe 上市了 XD，Affinity Design 更新了對(duì) UI 的支持，再然后有了千呼萬(wàn)喚始出來(lái)的 Invision Studio，以及后來(lái)居上的 Figma 等。

沒(méi)有一家產(chǎn)品能像 Adobe 一樣在平面領(lǐng)域獲得統(tǒng)治地位，山頭林立。

上面提到的還都是國(guó)外的產(chǎn)品，既然產(chǎn)品門(mén)檻不高，為什么只能鬼佬做，中國(guó)人就不能做（狗頭）。于是，在今天國(guó)內(nèi) “致敬” Figma 的 UI 界面工具也出現(xiàn)了。

還有一些針對(duì)原型、交互領(lǐng)域的設(shè)計(jì)工具理論上也是可以進(jìn)行 UI 界面視覺(jué)設(shè)計(jì)的，這導(dǎo)致了我們?cè)诠ぞ哌x擇領(lǐng)域上的進(jìn)一步混亂。

下面，我們?cè)侔焉厦嫣岬降乃熊浖鰝€(gè)匯總，見(jiàn)下面的圖表。

界面的設(shè)計(jì)本質(zhì)上是對(duì) 2D 平面圖形的設(shè)計(jì)、排版，理論上所有可以進(jìn)行平面設(shè)計(jì)、排版的軟件都可以做 UI 設(shè)計(jì)。但合不合適，好不好用，那是另一個(gè)議題。

只要你樂(lè)意，拿 Excel 做 UI 也不是不可以。

在 Adobe 已經(jīng)稱霸平面軟件的背景下，Sketch 還能異軍突起，就是因?yàn)?PS、AI、ID 等軟件，對(duì)于 UI 設(shè)計(jì)來(lái)說(shuō)太臃腫。

本來(lái)這應(yīng)該是一個(gè)共識(shí)了，但依舊有大量的同學(xué)還在用 PS 做界面，以及爭(zhēng)論 PS 的好處（對(duì) UI 設(shè)計(jì)），這是讓我比較驚訝的。

“設(shè)計(jì)重要的是想法，不是軟件……”，這話并不是在什么情景下都正確，PS/AI 和 Sketch 的對(duì)比，就像歐洲重卡和超市購(gòu)物車的區(qū)別，都可以裝貨送貨，即使歐卡冠軍也不會(huì)開(kāi)重卡進(jìn)超市里購(gòu)物的。

UI 的界面設(shè)計(jì)需要應(yīng)用到視覺(jué)功能大概只占 PS/AI 的 1%，而多出來(lái)的 99%，并不是額外附贈(zèng)的，是需要承擔(dān)對(duì)應(yīng)代價(jià)的：

• 啟動(dòng)關(guān)閉軟件速度更慢，時(shí)間更久
• 生成的文件體積更大，更占空間
• 對(duì) CPU、內(nèi)存的消耗更大，更占資源
• 圖層計(jì)算量較大，延遲高，卡頓
• 有更多的奇怪 BUG 和閃退問(wèn)題
• ……

在剛開(kāi)始學(xué)習(xí)做界面的時(shí)候，只做一兩個(gè)界面對(duì)問(wèn)題感知是不明顯的。但一個(gè)完整的 UI 項(xiàng)目，頁(yè)面數(shù)不是個(gè)位數(shù)，往往總量達(dá)到三位數(shù)。

我們不僅要做很多頁(yè)面，而且要反復(fù)調(diào)整里面的內(nèi)容，在上百個(gè)頁(yè)面中甚至還要經(jīng)常修改反復(fù)出現(xiàn)的某類文字、控件的樣式，這樣操作效率的問(wèn)題就會(huì)被無(wú)限的放大，直至你發(fā)現(xiàn) PS/AI 的缺陷會(huì)嚴(yán)重影響你的進(jìn)度和工作量，并且完全無(wú)法避免。

而在 Sketch/XD/Figma 中，除了輕量化帶來(lái)的效率優(yōu)勢(shì)外，會(huì)針對(duì)項(xiàng)目使用場(chǎng)景提供豐富的功能，包括樣式批量的修改、自動(dòng)布局、復(fù)用組件、團(tuán)隊(duì)協(xié)作、線上分享……

PS/AI 雖然是設(shè)計(jì)師必學(xué)軟件，但應(yīng)用它們的場(chǎng)景并不在設(shè)計(jì)一般 APP 界面中，這是毋庸置疑的結(jié)論。

我們?cè)趯W(xué)習(xí)的過(guò)程是不需要糾結(jié)應(yīng)該學(xué) PS/AI 好還是 Sketch/XD/Figma 好，而是兩類都要學(xué)，只是 Sketch/XD/Figma，你應(yīng)該學(xué)哪個(gè)？

熟悉我們的朋友應(yīng)該都知道，很多年前我們就在網(wǎng)上的平臺(tái)推薦使用 XD，也錄制了不少和 XD 有關(guān)的教程 ?? https://uiiiuiii.com/other/121283544.html

但是，今天它是我們第一個(gè)要排除的對(duì)象，因?yàn)檫^(guò)去我們看好它的潛力在這幾年并沒(méi)有兌現(xiàn)，且遠(yuǎn)遠(yuǎn)沒(méi)有達(dá)到預(yù)期。相比 Sketch 和 Figma 來(lái)講，功能過(guò)于簡(jiǎn)陋。

而且在國(guó)學(xué)的教學(xué)經(jīng)驗(yàn)中，XD 還有個(gè)非常不靠譜的問(wèn)題就是因?yàn)椴捎?Winapp 格式，兼容性極差，在 Win10 不同版本會(huì)產(chǎn)生各種奇怪的問(wèn)題，只有重裝系統(tǒng)一條路能走。

所以還沒(méi)開(kāi)始學(xué)習(xí)的同學(xué)，可以直接略過(guò) XD，正在用的同學(xué)，可以盡早開(kāi)始遷移到其它軟件。

而接下來(lái)，就要說(shuō)說(shuō) Sketch，這是名氣最響，在國(guó)內(nèi)使用范圍也最廣的 UI 設(shè)計(jì)工具。

Sketch 功能強(qiáng)大，也發(fā)展和積累了足夠久的輕量化設(shè)計(jì)軟件，但苦于只能在 Mac 端使用，Windows 用戶是無(wú)緣上手的。

當(dāng)然，這也不是它唯一的問(wèn)題，還有下面這些缺點(diǎn)：

• 內(nèi)存管理不理想，容易導(dǎo)致內(nèi)存占用率過(guò)高和溢出
• 位圖渲染方式也不理想，縮放顯示效率低..
• 不能多人協(xié)作，只能使用傳統(tǒng)的文件保存和分享
• BUG 越改越多，極其容易造成未響應(yīng)和閃退問(wèn)題
• ……

Sketch 的這些缺陷在 UI 設(shè)計(jì)圈子中造成非常普遍的吐槽和不滿，所以，F(xiàn)igma 就踩著它的痛處上位了。

Figma 從誕生起就被稱為次世代的設(shè)計(jì)工具，因?yàn)樗畲蟮奶攸c(diǎn)就是通過(guò)線上網(wǎng)頁(yè)的方式運(yùn)行，能高效滿足遠(yuǎn)程的分享、協(xié)作和溝通。

這意味著一個(gè)設(shè)計(jì)團(tuán)隊(duì)的工程文件管理可以實(shí)時(shí)同步，再也不用分散在每個(gè)設(shè)計(jì)師的電腦中，修改一個(gè)文件也不用每次發(fā)一遍源文件，加上可外鏈的規(guī)范庫(kù)，讓團(tuán)隊(duì)設(shè)計(jì)效率得到革命性的升級(jí)。

至于細(xì)節(jié)功能上的差異，還有 Figma 對(duì)頁(yè)面渲染效率的優(yōu)勢(shì)，都是次要因素。在各個(gè)國(guó)外設(shè)計(jì)媒體和網(wǎng)站上，F(xiàn)igma 使用者的占比逐年穩(wěn)步上升，反超 Sketch 成為最多人使用的 UI 設(shè)計(jì)工具，就已經(jīng)說(shuō)明它的優(yōu)勢(shì)了。

即使國(guó)內(nèi)的主流大廠，也有大量的團(tuán)隊(duì)開(kāi)始轉(zhuǎn)用 Figma，作為主要的項(xiàng)目界面設(shè)計(jì)工具。騰訊自己出過(guò)一份 Figma for Tencent 的報(bào)告，下面是一些關(guān)鍵截圖。

Figma 在國(guó)內(nèi)也必將成為未來(lái)的發(fā)展趨勢(shì)之一，這個(gè)方向是不可逆的，在趨勢(shì)面前……當(dāng)然是選擇順應(yīng)它咯！Figma 是目前我們最推薦的 UI 設(shè)計(jì)工具，是新手學(xué)習(xí)和入門(mén)的首選。但是，對(duì)新手來(lái)講，它前期包含的 3 個(gè)阻力，分別是網(wǎng)絡(luò)、語(yǔ)言、費(fèi)用，下面簡(jiǎn)單做個(gè)說(shuō)明。

1. 網(wǎng)絡(luò)問(wèn)題

因?yàn)?Figma 沒(méi)在國(guó)內(nèi)部署服務(wù)器，所以在不開(kāi)加速器的情況下往往會(huì)訪問(wèn)比較慢，但實(shí)際體驗(yàn)下是這兩年的國(guó)內(nèi)訪問(wèn)速度提升非常可觀（做過(guò)專項(xiàng)線路優(yōu)化應(yīng)該），滿足日常使用。

2. 語(yǔ)言問(wèn)題

因?yàn)?Figma 沒(méi)做中文適配，有傳說(shuō)中的補(bǔ)丁包，但是非常不穩(wěn)定，而且每次 Figma 更新就要重裝（每周一次以上的頻率）。作為 UI 設(shè)計(jì)來(lái)講，必要的英文專業(yè)詞匯還是要了解的，只要看過(guò)教程多操作，順帶用翻譯軟件看下名詞解釋，幾天就能完全適應(yīng)。

3. 費(fèi)用問(wèn)題

對(duì)于個(gè)人用戶是免費(fèi)的，在未來(lái)進(jìn)行團(tuán)隊(duì)協(xié)作的時(shí)候，人均月費(fèi)是 12 刀，價(jià)格并不算太貴，而且因?yàn)樽詭{(lán)湖的功能，可以省掉藍(lán)湖的費(fèi)用。

如果現(xiàn)在正在用別的軟件，也不要緊，UI 類軟件的學(xué)習(xí)成本非常低，只要掌握其中一款，再學(xué)會(huì)另一款也就 1-2 天的時(shí)間。

前面也說(shuō)到，除了國(guó)外的產(chǎn)品，國(guó)內(nèi)也開(kāi)始有團(tuán)隊(duì)入局開(kāi)發(fā)類 Figma 的軟件，我們姑且稱為是 “致敬”（比如類 Notion 應(yīng)用）。

長(zhǎng)遠(yuǎn)來(lái)看，這當(dāng)然是一件好事，因?yàn)樽约喝俗龅漠a(chǎn)品必然會(huì)以迎合本土設(shè)計(jì)市場(chǎng)、習(xí)慣來(lái)定制，隨著功能的迭代，必然會(huì)新增更多符合國(guó)內(nèi) UI 設(shè)計(jì)師實(shí)際需求的功能。同時(shí)，會(huì)有更快的網(wǎng)絡(luò)，更便宜的價(jià)格，更好的售后支持，這對(duì)于生產(chǎn)力工具來(lái)說(shuō)都是必要的條件。

當(dāng)然，前景看好歸看好，那是以后的事情，但在今天，這兩款軟件都還非常的不成熟，有大量的問(wèn)題。

JS Design 上線的比較早，功能相對(duì)完善一點(diǎn)，我們有用它來(lái)處理一些課程需要的知識(shí)點(diǎn)，但是頁(yè)面往往加載有 BUG，讀取速度慢，對(duì)于輕量使用來(lái)說(shuō)勉強(qiáng)夠用。

而剛上線的 Master，是由藍(lán)湖團(tuán)隊(duì)自己開(kāi)發(fā)的設(shè)計(jì)工具，明擺著是為了和自家標(biāo)注切圖工具打通實(shí)現(xiàn) UI 設(shè)計(jì)流的閉環(huán)。

但是，目前的實(shí)際使用體驗(yàn)只能說(shuō)是 “慘不忍睹”，有大量的惡性 BUG，字體的使用上也有非常多的局限。只能簡(jiǎn)單嘗嘗鮮關(guān)注下，在短期內(nèi)完全無(wú)法作為生產(chǎn)力工具。

雖然看好國(guó)產(chǎn)類 Figma 工具的未來(lái)，但是時(shí)機(jī)還不夠成熟，作為新人也不需要花太多精力學(xué)習(xí)。只要能掌握 Figma 本身，等到這些軟件完善以后在未來(lái)再轉(zhuǎn)入即可。

看完想必大家也知道我們最推薦的 UI 設(shè)計(jì)工具就是 Figma，它代表了未來(lái)的生產(chǎn)力和趨勢(shì)。順便，我們?cè)僦谱髁藦埍恚堰@些軟件的特征做一個(gè)橫向的對(duì)比。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」