在數(shù)字產(chǎn)品設(shè)計產(chǎn)業(yè)鏈中，UI設(shè)計師通常扮演著承上啟下的角色。產(chǎn)品經(jīng)理從一個產(chǎn)品經(jīng)理開始“需求”首先，制定一個抽象的產(chǎn)品概念原型，UI設(shè)計師通過視覺呈現(xiàn)來形象化這種抽象，完成線框圖交互邏輯視覺客戶體驗，最后導(dǎo)出輸出高保真原型交付給研發(fā)工程師、決策者、客戶等角色。

根據(jù)波士頓的權(quán)威數(shù)據(jù)，全球設(shè)計師從業(yè)人員近1億，主要集中在美國、中國、德國、日本、意大利等科技發(fā)展的前沿，互聯(lián)網(wǎng)設(shè)計師的專業(yè)人才正在飆升。因此，它是專門為互聯(lián)網(wǎng)數(shù)字產(chǎn)品設(shè)計的UI設(shè)計工具可以快速增長，從而Sketch首先，它贏得了第一批全球粉絲，并且在很長一段時間內(nèi)，Sketch是很多UI設(shè)計師和UX設(shè)計工具是設(shè)計師的首選。但是最近幾年，UI設(shè)計領(lǐng)域相繼出現(xiàn)了許多后起之秀。

Sketch，AdobeXD，F(xiàn)igma這三款軟件都常優(yōu)秀的軟件，但是每一款都有自己的優(yōu)勢。

Sketch

過去十年，Sketch一直是主流UI其中一個設(shè)計工具，雖然到目前為止還不支持Windows但仍有大量忠實的追隨者。

回顧它的背景，這是荷蘭公司SketchBV于2010年推出的macOS桌面矢量圖形處理軟件。Sketch在設(shè)計之初，它被設(shè)計成盡可能輕和快速的響應(yīng)，并被刪除AdobePhotoshop和IIustrator許多內(nèi)置的附加功能。

與IIustratorCS相比之下，初期Sketch界面非常簡單，不像Adobe有復(fù)雜的嵌套工具欄，Sketch其核心功能是頂部圖標(biāo)。

SketchMirrorApp是Sketch設(shè)計師將是最有用和最受歡迎的功能之一iPhone連收到Mac在移動設(shè)備上，電腦可以立即檢測他的設(shè)計。

這在今天看來可能還不夠驚艷，但在2010年，即使是行業(yè)標(biāo)桿，也可以稱之為改變游戲規(guī)則的功能Adobe沒有類似的功能。

Sketch起初不支持多人實時在線合作，團隊成員在編輯稿件時，需要頻繁來回傳輸文件，效率很低。

直到2020年底，Sketch即時協(xié)作功能剛剛發(fā)布，試圖趕上這個領(lǐng)域Figma。然而，此功能尚未集成到Sketch客戶端，在開始合作之前，當(dāng)?shù)氐腟ketch需要先把文件傳到SketchCloud只有在瀏覽器中打開共享鏈接，才能參與合作。https://js.design/special/sketch

就價格而言，Sketch選擇免費試用訂閱系統(tǒng)方案，提供30天免費試用，期滿后每位編輯每月9美元，每年支付99美元，整體成本對設(shè)計師來說并不吸引人。

AdobeXD

Sketch優(yōu)勢很明顯，但一直沒有推出Windows版本，有人為了可以使用Sketch進行UI設(shè)計，我必須先買一臺蘋果電腦…天下苦Sketch久矣。

2016年，Adobe公司推出了基于矢量的UI設(shè)計工具AdobeXD，支持macOS和Windows系統(tǒng)，作為Sketch在Windows代替產(chǎn)品，讓跨平臺合作的團隊能夠順暢溝通。

使用AdobeXD以前，假設(shè)你用過Adobe軟件，并且熟悉軟件的界面，所以當(dāng)你觸摸它的時候，XD，會覺得很親切，能很快上手，唯一不同的是設(shè)計系統(tǒng)和元器件的復(fù)用。

背靠Adobe打造多個軟件，真的是XD最大的賣點之一，從位圖到矢量再到動態(tài)效果，Adobe有相應(yīng)的工具來滿足設(shè)計師的需求，可以滿足設(shè)計師的需求XD聯(lián)動工作非常順暢。

為了追逐Sketch插件生態(tài)，Adobe公司設(shè)立了一個1000萬美元的基金，鼓勵許多開發(fā)者為開發(fā)者開發(fā)基金XD現(xiàn)在的插件XD已集成了RenameIt，PixelPerfect，DataGenerator等插件。

就多人合作而言，XD支持將本地文件保存為云文件，以后向合作者發(fā)送電子郵件邀請，接到邀請人打開文檔就可以參與設(shè)計合作。

不過，XD協(xié)作功能有一定的限制，對于付費用戶建立的文檔，免費客戶試用30天合作編輯后才能查看，不能再編輯。

XD真的很多Windows客戶的福音，但在實際使用中，仍會遇到許多問題，如軟件容易崩潰，中國客戶不能使用內(nèi)置的插件庫，這在某種意義上減少了UI設(shè)計效率。AdobeXD為了滿足用戶的需求，商品設(shè)計仍在探索更多的功能。https://js.design/special/xd

與XD前后時間出現(xiàn)了另一個軟件，這是近兩年國內(nèi)外的熱點Figma。

Figma

Figma，這是一個基于云的UI可以直接在瀏覽器中運行的設(shè)計工具，您可以在任何設(shè)備或平臺上瀏覽您的項目，無需安裝軟件或購買多個軟件許可證。

來自UXTOOLS根據(jù)發(fā)布的2021設(shè)計工具調(diào)查報告，在Windows和macOS系統(tǒng)上，F(xiàn)igma用戶數(shù)量超過了之前推出的Sketch和AdobeXD。

在Figma以前，從最初的草圖到原型設(shè)計，往往需要使用多種軟件，文檔運行次數(shù)多，迭代周期較長。

有了Figma之后，同樣的對接流程大大縮短，團隊成員可以獲得最新版本的文檔。

Figma最大的特點是合作。目前正在瀏覽和編輯文件的成員的頭像將顯示在右上角。每個人的鼠標(biāo)指針都會有自己的昵稱，可以輕松查看誰改變了什么，并直接將評論和反饋添加到需要溝通的位置。

涉及矢量操作時，F(xiàn)igma鋼筆工具更加靈活。Figma內(nèi)置的矢量網(wǎng)絡(luò)，允許您將多條線連接到一個點，當(dāng)移動線段時，連接到線段的點也會自動跟隨，這加速矢量制圖的效率。

對于選定的畫板或目標(biāo)，F(xiàn)igma能夠CSS，iOS或Android開發(fā)人員在查看設(shè)計文檔時，格式顯示代碼片段。此外，開發(fā)人員可以直接在設(shè)計文檔中獲取標(biāo)記信息，無需使用第三方工具。

就價格而言，F(xiàn)igma有兩種方式:免費和收費。免費客戶最多可以建立一個項目和三個文檔。每個文檔只能包含三個頁面，存儲30天的版本歷史記錄，不能使用共享團隊數(shù)據(jù)庫；收費版分為兩檔，專業(yè)版每人每月12美元，組織版每人每月45美元，整體價格較高。https://js.design/special/figma

寫在最終

本文中提到的三種常見模式UI可以說是設(shè)計軟件UI事實上，設(shè)計工具的演變和發(fā)展也是行業(yè)工作模式變化的縮影。

從一開始就有一個好用的UI設(shè)計工具就夠了。后來誕生了一站式，有很多人立即合作，開放生產(chǎn)設(shè)計和研究流程UI設(shè)計工具，工具的演變軌跡，也越來越貼合UI設(shè)計師的需求和協(xié)作流程。經(jīng)過比較，無論是否Sktech原型設(shè)計功能強大，F(xiàn)igma社區(qū)生態(tài)，還是Pixso的原形UI設(shè)計順利的交付感覺，并不限制你必須選擇哪種工具，而是要了解和選擇更適合團隊工作節(jié)奏和語言環(huán)境的工具。