UI界面設計工具都在這里了，Sketch、XD、Figma、即時設計哪個好？

時間：2023-09-27 17:54:02 | 來源：網(wǎng)站運營

時間：2023-09-27 17:54:02 來源：網(wǎng)站運營

UI界面設計工具都在這里了，Sketch、XD、Figma、即時設計哪個好？：

好工具讓點子漂亮著陸

十年前，那時候的設計師還只有PS一種軟件可選，而如今界面設計專用的設計軟件已經(jīng)多到用手指都數(shù)不過來。無論你是即將跨入這個行業(yè)，或是在設計領域馳騁多年，了解新的軟件都能夠拓展你的能力，讓你的想法和創(chuàng)意更愉快的落地。

今天和大家主要分享目前較為優(yōu)秀的軟件各自的特色，以及其適用的設計范圍。推薦的軟件總體分為以下內(nèi)容：界面設計工具（screen design tools）：Sketch、Figma、Invision Studio、Adobe XD、即時設計。

界面設計工具20年

當我們跨入第二個千禧年，互聯(lián)網(wǎng)的浪潮徹底改變了我們的生活方式。與此同時，由于互聯(lián)網(wǎng)產(chǎn)品服務于數(shù)以萬計的用戶群，其操作體驗的質(zhì)量也變得格外重要，交互體驗設計師這一全新的職業(yè)也由此誕生。也是在2003年，Axure RP 的第一個版本誕生，交互體驗設計師也有了自己的生產(chǎn)力工具。2020年，已有越來越多的界面設計工具相繼出現(xiàn)，并越來越成熟。下面我們會對每一個設計軟件做詳細的分析和對比，幫助大家更好的選擇適合你的設計軟件。

這里也給大家分享他們對應的學習網(wǎng)站，感興趣的同學可以深度學習。

Figma：https://figmachina.com/；《Figma基礎入門教程》

Sketch：https://oursketch.com/；《UI設計技法-Sketch教程》

Adobe XD：https://xd.94xy.com/；《Adobe XD零基礎教程》

---

01、Sketch

圖片編輯軟件Sketch致力于成為服務UI設計師的必備工具，瞄準設計行業(yè)內(nèi)的唯一巨頭Adobe，聽取用戶的意見和建議，反其道而行，放棄了Adobe旗艦產(chǎn)品Illustrator提供的眾多功能，主打輕量級、實用，信奉“產(chǎn)品的深度大于廣度”。

2008年，荷蘭特溫特大學計算機專業(yè)彼得·歐姆弗利被要求設計一個簡單的繪圖應用。那時候平面設計軟件公司Adobe已經(jīng)有豐富的設計工具，所以彼得準備開發(fā)一款又快又輕巧的設計工具。Sketch便由此誕生，2008年，Sketch推出封閉測試版，自那以后，Sketch聚攏了一批小規(guī)模的忠實擁躉。如今，sketch已經(jīng)成為炙手可熱的UI設計工具。

【軟件優(yōu)勢】

Sketch從一開始就有非常明確的定位，他不像PS或是AI一樣提供許許多多的功能，而是只把最基礎常用的功能加入進軟件中。保證軟件輕巧的體積，和快速的響應是Sketch的第一競爭力。

除此之外，Sketch另一個特點就是擁有很多改善使用體驗的小設計。Sketch最實用和受歡迎的功能之一是伴侶應用Sketch Mirror，用戶的移動設備和電腦端Sketch能夠協(xié)同工作。設計師可以連接iPhone到Mac上，并在移動設備上實時測試自己本地端的設計?，F(xiàn)在聽起來這沒什么，但在2010年，這絕對是產(chǎn)品的殺手锏之一。Photoshop和Illustrator也沒有類似的功能。對于UI設計師來說，Mirror節(jié)省了許多時間和精力。

Sketch還擁有非常強大的第三方設計插件庫，各種軟件本身不具備的功能都可以通過插件自有拓展。自動標注、切圖，在線圖標庫，圖表生成器等等，幾乎涵蓋了所有你想到和想不到的功能。

經(jīng)過12年的不斷迭代，Sketch的功能不斷飽滿，并且越來越偏向界面設計。Sketch Cloud能夠讓你輕松的和團隊共享設計文檔，直接在網(wǎng)上查看自動標注和切圖；

強大的組件庫，為項目制作一套組件庫，能夠極大的方便后續(xù)的迭代和修改；

Sketch同樣支持自適應規(guī)則的編寫，你可以設置元素的適配規(guī)則，例如最小寬度，兩邊對齊規(guī)則等等；

Sketch還加入了原型制作功能，能夠直接制作界面的簡單跳轉(zhuǎn)；

在最新的68版本中，更是加入了文字樣式和圖層樣式庫，設計師可以直接保存自己制作的樣式，然后在其他控件上直接復用；

Sketch好用的功能還有很多，但到目前為止制作團隊還沒有開發(fā)Windows版本的計劃，所以想要體驗它的高效與便捷，你需要先擁有一臺Mac電腦。Sketch的定位12年都未曾改變，它就是一款專門用來做界面設計的軟件。它開創(chuàng)和建立了這一全新的工具類別，也是后起之秀不斷模仿的標桿。

---

02、Figma

Figma是一個非常年輕的產(chǎn)品，它在Sketch開始流行的時候才正式誕生。所以，它幾乎繼承了Sketch所有的基礎功能，很多初次接觸的設計師都會認為它只是Sketch的網(wǎng)頁版。

Figma的創(chuàng)始人對軟件一直秉持的理念，就是軟件都應該是在線的。從前的軟件因為瀏覽器和 Web 技術(shù)的瓶頸無法在這方面取得飛躍，但如今 WebGL、 WebAssembly 等新興 Web 技術(shù)的出現(xiàn)，一切都變了，利用這些技術(shù)可以在瀏覽器中構(gòu)建出快速穩(wěn)定高效的軟件。

也就是說你可以在你的ipad、手機、甚至智能電視（只要你愿意）上修改你的設計文檔，聽著就很有魅力。

【軟件優(yōu)勢】

Figma的核心優(yōu)勢便是來自于Web開發(fā)的好處。在線編輯能夠讓你的文件再也不怕丟失，能夠非常好的管理你的文件版本。其次，它解決了傳統(tǒng)設計團隊中最麻煩的多人協(xié)作問題。就像當你第一次接觸Google Doc時感受到的那股魔力，溝通和協(xié)作的成本大大降低了。最后，基于web的開發(fā)也讓軟件的運行效率突破了硬件性能的限制。

Figma可以說是站在了Sketch的肩膀上，這讓它變得更加優(yōu)秀：

1.隨時隨地跨設備啟動工作
2.設計師、非設計師之間的實時協(xié)作
3.響應速度遠超 Sketch
4.擁有一套覆蓋整個設計流程所必須的功能
5.集中的設計資產(chǎn)的管理和共享，可以單獨更新
6.基于 Web 的插件生態(tài)
7.集合了整套谷歌字體，涵蓋字體1000+

Selection Colors的功能，無論要一次更換大量顏色或更改相同顏色都很方便，在Color styles可以建立自己的顏色系統(tǒng)。

Figma在基礎功能上和Sketch區(qū)別很小，在一些工具（比如鋼筆工具）上做了一些優(yōu)化創(chuàng)新。所以在使用體驗上基本還原了Sketch。

△對比兩者的主界面布局就可以發(fā)現(xiàn)，功能區(qū)的劃分都是相似的

---

03、Invision Studio

Invision Studio是起步較晚的設計工具，它的前身是一個Sketch的外掛原型制作工具，之后被Invision收購，開發(fā)成獨立的軟件。Invision Studio的獨特之處也正是來源于此，它不僅能滿足設計師設計界面的需求，還能直接制作可交互原型，并且提供了較為全面的轉(zhuǎn)跳動效編輯器。

我們都知道Sketch只支持Mac OS，而Figma卻又無法保存本地文件，Invision Studio同時彌補了這兩大問題，它同時支持Mac和Windows系統(tǒng)，甚至可以直接打開Sketch的文件。

【軟件優(yōu)勢】

從2018年初才開始測試上線的Invision Studio目前才到1.28的版本，基本與初始版本沒有太多的改變。軟件主打的幾個特色功能包括：

1. 響應式設計，其機制在之后也被加入Sketch

2.設計共享系統(tǒng)，可以理解為Sketch“組件“功能的2.0版本，能夠獨立管理

3.快速原型制作，這個本來就是 InVision 的拿手好戲，他們只是把原有的能力融進了新產(chǎn)品，解決了整個設計流程的一些必要環(huán)節(jié)的痛點，例如設計評審、用戶測試。

4.交互動效調(diào)節(jié)，新工具中不但實現(xiàn)了界面跳轉(zhuǎn)，還可以做出花式跳轉(zhuǎn)，這個也是原本 InVision 的功能。

5.協(xié)作設計，這個概念不同于Figma的在線多人編輯，它只是在線的瀏覽和展示設計稿，然后其他的職能可以進行批注和討論。

Invision Studio初次上線之時一度被設計師們譽為“來自未來的設計工具”“最好用的界面設計工具”。從它涵蓋的功能來看，我們可以發(fā)現(xiàn)它的聚焦點與Figma完全不同，它是在向界面設計的下游拓展。這也是界面設計軟件近幾年所呈現(xiàn)的一種趨勢，“全鏈路”、“全棧式”。Invision Studio不光能夠讓設計師完成界面設計這一環(huán)節(jié)，還能直接制作原型和豐富的交互動效。

但是Invision Studio的更新速度和用戶量并沒有像眾人所期待的那樣一路高歌猛進，“全鏈路”的功能是否真的適合大多數(shù)的設計者，也值得大Invision Studio家去思考。

---

04、Adobe XD

Adobe想必大家都非常熟悉，是設計領域的工具老大哥，有無數(shù)的設計創(chuàng)意工具。但不知為何，在界面設計發(fā)展了十多年時間里，Adobe就沒有為界面設計提供相關的工具。直到Sketch擁有了數(shù)千萬的用戶之后，Adobe才后知后覺，開始了界面設計工具的研發(fā)。

Adobe XD在2017年十月第一次和大家見面，并宣布同時擁有Mac和Windows兩個版本。XD在界面布局上不再使用自家（PS）的傳統(tǒng)布局，而是沿用了Sketch的輕量化布局。XD的迭代速度非?？?，每個月都會推出新的功能。

【軟件優(yōu)勢】

Adobe XD大有要干掉Sketch的趨勢，雖說基礎功能都抄自Sketch，但是通過多次的迭代，Adobe XD已經(jīng)擁有了眾多令人喜愛的特色功能，并讓人贊嘆。看起來它的發(fā)展速度遠大于現(xiàn)在的Sketch。

Adobe XD 特色功能列舉：

1、Repeat Grid

許多界面都有重復的元素出現(xiàn)，像是文章、分享按鈕等等，要逐一復制粘貼非常麻煩，不過透過Adobe XD 內(nèi)的Repeat Grid，大家可以輕易制造到重復元素。而在Repeat Grid 內(nèi)，元素的間隔都是一致的，可以自行調(diào)整間隔來呈現(xiàn)最合適的界面。

2、互動：Auto-Animate

在網(wǎng)頁中，界面互動有時會用到CSS3 的Transition 效果來制造滑動的動畫效果，例如是選單收合等。在Adobe XD，我們的互動類型可以使用Auto-Animate 來模擬效果。

使用Auto-Animate 有幾個注意事項。首先，元件必須在兩個Artboard 出現(xiàn)，并要同一名字；第二，兩個元件必須先建立Interaction 并設定成Auto-Animate，這樣當元件移出Artboard 范圍時才不會被當成Pasteboard；第三，除了相同元件要設定Auto-Animate 之外，觸發(fā)事件的元件也要設定成Auto-Animate。

3、與PS互通

現(xiàn)在你可以直接用XD打開PS文件，也可以從XD中選擇內(nèi)容使用PS打開并編輯；這樣就可以在工具之間無縫銜接而不需要反復的導入導出。

4、不一樣的組件庫

組件庫想必大家都很熟悉，大多數(shù)的軟件邏輯是，當你修改一個組件時，所有相同的組件都會被修改；而在XD中，組件被加入了父子集的概念；當你修改組件庫中的組件時，你的每一個操作會影響每一個組件；但是如果你修改的是一個復制而來組件，你的修改只會對這個實例產(chǎn)生影響，并且這個影響會覆蓋主組件的原本樣式。這讓組件庫不再死板，能夠很好的適配多個尺寸；

這種組件的管理邏輯可以說比Figma的自由度還要高，鼓勵設計者將所有的設計進行模塊化管理。模塊化的好處是當你下次做其他項目時，仍然可以使用，可以極大的提升你的設計積累。

5、間距管理

當我們做設計的時候，一個很強迫癥的事情就是如何對齊，以及我的間距尺寸是不是都統(tǒng)一了。Adobe XD就提供了這樣一個專門管理間距的組件；你只需要把元素都放入一個組中，就可以整體調(diào)整這個組內(nèi)的間距，軟件會自動識別他們之間的對齊關系；這個功能極大的節(jié)省了設計師的時間，同時讓你的設計稿有更強的規(guī)范意識。

---

05、即時設計

前面說到的那些軟件，雖然各有特色，但畢竟都是老外開發(fā)的軟件，來到中國的市場后，或多或少有些水土不服。比如 Figma 服務器在國外，啟動軟件時加載就會很慢。所以真正更加了解中國UI設計師，更適應中國互聯(lián)網(wǎng)環(huán)境的UI設計軟件，還是要數(shù)國產(chǎn)的UI設計軟件，而【即時設計】就是這樣一款UI設計軟件。

體驗地址：http://www.xxriji.cn/tool/jike

這款軟件，可以說是后來居上的典范，其上線于2020年，萌生于UI設計軟件群雄逐鹿的2016年（前身為：即時原型），其融合了XD、Sketch、Figma軟件的優(yōu)點。就單說其支持云端素材庫這功能，就和前輩們XD、Figma、Sketch等軟件拉開了差距。

現(xiàn)在App軟件都有的：日間模式、夜間模式，即可設計這款UI設計軟件，也是安排上了的。然后UI設計師用了這款軟件，可以一站式交付給開發(fā)工程師，不像sketch、XD這些傳統(tǒng)UI設計工具，還需要借助第三方工具來標注、切圖，這無疑是大大提高了團隊協(xié)作效率。

【軟件優(yōu)勢】

① 行業(yè)趨勢：各大公司都在改用在線設計工具，提高效率，其中很多都用即時設計；

② 全平臺：不受電腦系統(tǒng)的限制，不用下載，打開瀏覽器就能用；

③ 功能全：設計功能豐富且強大，可高效滿足各種矢量設計需求；

④ 易上手：操作簡單，有 PS、Sketch 等軟件基礎可直接上手；

⑤ 資源多：資源廣場中的大量免費設計素材，一鍵保存使用；

⑥ 服務好：客服響應快，加入用戶群，任何問題實時反饋解決；

⑦ 免費用：所有已經(jīng)開放的功能，都能永久免費使用。

相比Figma、Sketch、AD的具體優(yōu)勢我就不一一細說，大家點擊放大圖片一看便知！

現(xiàn)在我要做個界面、或者網(wǎng)頁設計，基本上都是直接用即時設計，打開瀏覽器就能開工，省去了軟件安裝時間，文件自動保存云端。即便是換了一臺電腦，登錄賬號又可以接著工作，真的太爽了！我強烈推薦大家使用！點擊下方卡片，注冊賬號即可使用。

溫馨提示：這款UI軟件的基礎功能，是完全免費的。收費項目僅限于權(quán)限管理、數(shù)據(jù)安全等服務。軟件無文件數(shù)量、容量限制、無團隊協(xié)作人數(shù)限制，妥妥的國產(chǎn)良心。

總結(jié)

以上就是對目前已有的主流界面設計工具的不完全介紹。從10年前Sketch挑戰(zhàn)PS、AI，樹立界面設計工具這一全新品類，到如今新的設計工具不斷出現(xiàn)，試圖挑戰(zhàn)Sketch的江湖位置。工具軟件的不斷更新，也在倒逼設計師們?nèi)W習新的技術(shù)，以及產(chǎn)出更嚴格的設計稿。

如何去挑選適合自己工作的設計工具，我在這里談談我的一些看法。首先，目前這四款軟件的基礎功能差別并不是很大，都可以滿足基本的工作需求。

如果你是喜歡嘗試新鮮事物，自己做出判斷的話，可以都使用并了解后再做出選擇。那要注意的是，目前Sketch只支持Mac系統(tǒng)，而其他軟件都有雙系統(tǒng)的版本可以選擇。

如果你處在項目團隊中，并且非常注重項目文件管理，那我推薦Figma；Figma所有內(nèi)容都是實時在線編輯，且有很好的版本管理系統(tǒng)，能夠很輕松的實現(xiàn)大規(guī)模系統(tǒng)的多人協(xié)作設計。

如果你對協(xié)作的需求沒有那么高，往往是獨立完成設計，那Sketch和XD都可以。Sketch的優(yōu)勢在于它本身功能非常干凈，且有極其豐富的可拓展性，所以你可以自己將其定制成你想要的樣子。但Sketch終究是小作坊的產(chǎn)品，所以隨著體量的逐步上升，也開始出現(xiàn)軟件卡頓，優(yōu)化不到位的情況。而Adobe XD由于背靠大廠，發(fā)展非常迅速，并且加入了很多實用功能，雖然現(xiàn)階段插件數(shù)量和功能不如Sketch豐富，但未來大有會超越的勢頭。對我來說這兩者最大的體驗不同其實來自操作習慣，所以你可以兩者都嘗試，然后根據(jù)你的使用習慣來做選擇。

最后，最不推薦的可能就是Invision Studio；雖然它有著很強的原型制作功能，也擁有所有的設計工具該有的功能，但是常年不更新，少有新功能加入，逐步讓人對它未來的發(fā)展失去了信心。而且在原型制作方面也存在大量可替代的軟件。如果你在工作中經(jīng)常需要設計概念稿，需要從交互線框稿到高保證UI界面的一整套工作流，這倒是個不錯的選擇。

最后一點，目前除了Sketch是收費軟件之外，其他都采取訂閱收費制。也就是只有當你用到多人協(xié)作或是多文檔在線共享時（企業(yè)模式）才會收費。

—

以上就是常見UI設計軟件Sketch、XD、Figma、Invision Studio的大致介紹，如需系統(tǒng)學習更多專業(yè)UI知識，請參考：www.ui100.top/163

參考資料

網(wǎng)易雷火UX用戶體驗中心，地址：https://mp.weixin.qq.com/s/HaQQSPCbByo1R9Zh6J336Q

（完）