【UI分享】界面設計工具都在這裡了

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

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

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

這裡也給大家分享他們對應的學習網站，感興趣的同學可以深度學習。

Figma：https://figmachina.com/；

Sketch：https://oursketch.com/；

Adobe XD：https://xd.94xy.com/；

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

Sketch早期版本

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

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

除此之外，Sketch另一個特點就是擁有很多改善使用體驗的小設計。Sketch最實用和受歡迎的功能之一是伴侶應用Sketch Mirror，用戶的行動裝置和電腦端Sketch能夠協同工作。設計師可以連接iPhone到Mac上，並在行動裝置上實時測試自己本地端的設計。現在聽起來這沒什麼，但在2010年，這絕對是產品的殺手鐧之一。Photoshop和Illustrator也沒有類似的功能。對於UI設計師來說，Mirror節省了許多時間和精力。

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

經過12年的不斷迭代，Sketch的功能不斷飽滿，並且越來越偏向界面設計。Sketch Cloud能夠讓你輕鬆的和團隊共享設計文檔，直接在網上查看自動標註和切圖；

強大的組件庫，為項目製作一套組件庫，能夠極大的方便後續的迭代和修改；

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

Sketch還加入了原型製作功能，能夠直接製作界面的簡單跳轉；

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

Sketch好用的功能還有很多，但到目前為止製作團隊還沒有開發Windows版本的計劃，所以想要體驗它的高效與便捷，你需要先擁有一臺Mac電腦。Sketch的定位12年都未曾改變，它就是一款專門用來做界面設計的軟體。它開創和建立了這一全新的工具類別，也是後起之秀不斷模仿的標杆。Figma是一個非常年輕的產品，它在Sketch開始流行的時候才正式誕生。所以，它幾乎繼承了Sketch所有的基礎功能，很多初次接觸的設計師都會認為它只是Sketch的網頁版。

Figma2015年發布測試版

Figma的創始人對軟體一直秉持的理念，就是軟體都應該是在線的。從前的軟體因為瀏覽器和 Web 技術的瓶頸無法在這方面取得飛躍，但如今 WebGL、 WebAssembly 等新興 Web 技術的出現，一切都變了，利用這些技術可以在瀏覽器中構建出快速穩定高效的軟體。也就是說你可以在你的ipad、手機、甚至智能電視（只要你願意）上修改你的設計文檔，聽著就很有魅力。Figma的核心優勢便是來自於Web開發的好處。在線編輯能夠讓你的文件再也不怕丟失，能夠非常好的管理你的文件版本。其次，它解決了傳統設計團隊中最麻煩的多人協作問題。就像當你第一次接觸Google Doc時感受到的那股魔力，溝通和協作的成本大大降低了。最後，基於web的開發也讓軟體的運行效率突破了硬體性能的限制。

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

1.隨時隨地跨設備啟動工作

2.設計師、非設計師之間的實時協作

3.響應速度遠超 Sketch

4.擁有一套覆蓋整個設計流程所必須的功能

5.集中的設計資產的管理和共享，可以單獨更新

6.基於 Web 的插件生態

7.集合了整套谷歌字體，涵蓋字體1000+

直接在線查看標註和代碼

編輯你的樣式規範，團隊可直接使用

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

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

對比兩者的主界面布局就可以發現，功能區的劃分都是相似的

Invision Studio是起步較晚的設計工具，它的前身是一個Sketch的外掛原型製作工具，之後被Invision收購，開發成獨立的軟體。Invision Studio的獨特之處也正是來源於此，它不僅能滿足設計師設計界面的需求，還能直接製作可交互原型，並且提供了較為全面的轉跳動效編輯器。我們都知道Sketch只支持Mac OS，而Figma卻又無法保存本地文件，Invision Studio同時彌補了這兩大問題，它同時支持Mac和Windows系統，甚至可以直接打開Sketch的文件。從2018年初才開始測試上線的Invision Studio目前才到1.28的版本，基本與初始版本沒有太多的改變。

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

2.設計共享系統，可以理解為Sketch「組件「功能的2.0版本，能夠獨立管理

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

4.交互動效調節，新工具中不但實現了界面跳轉，還可以做出花式跳轉，這個也是原本 InVision 的功能。

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

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

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

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

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

Adobe XD大有要幹掉Sketch的趨勢，雖說基礎功能都抄自Sketch，但是通過多次的迭代，Adobe XD已經擁有了眾多令人喜愛的特色功能，並讓人讚嘆。看起來它的發展速度遠大於現在的Sketch。

Adobe XD 特色功能列舉：

1、Repeat Grid

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

2、互動：Auto-Animate

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

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

3、與PS互通

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

4、不一樣的組件庫

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

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

5、間距管理

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

以上就是對目前已有的主流界面設計工具的不完全介紹。從10年前Sketch挑戰PS、AI，樹立界面設計工具這一全新品類，到如今新的設計工具不斷出現，試圖挑戰Sketch的江湖位置。工具軟體的不斷更新，也在倒逼設計師們去學習新的技術，以及產出更嚴格的設計稿。

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

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

如果你處在項目團隊中，並且非常注重項目文件管理，那我推薦Figma；Figma所有內容都是實時在線編輯，且有很好的版本管理系統，能夠很輕鬆的實現大規模系統的多人協作設計。

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

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

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