2019年網(wǎng)頁設(shè)計師最感興趣的發(fā)展之一是UI設(shè)計工具的爆炸式增長，這些應(yīng)用程序標志著我們在創(chuàng)建現(xiàn)代用戶界面方面的一個轉(zhuǎn)變，在Photoshop中創(chuàng)建PSD模型的日子可能就要結(jié)束了。

不相信嗎？在過去的幾年里，Sketch和Figma都有了一批忠實的追隨者。但或許最大的進展是設(shè)計軟件巨頭Adobe攜其XD產(chǎn)品躍入游戲。這表明我們的工作方式確實在向更專業(yè)的工具轉(zhuǎn)變。

考慮到這一點，讓我們來看看這些"三大"應(yīng)用程序中的每一個。我們將介紹一些核心特性以及可能影響哪一個最適合您的需求的其他因素。

UI設(shè)計工具的獨特之處是什么？

多年來，網(wǎng)頁設(shè)計師使用前面提到的Adobe Photoshop創(chuàng)建網(wǎng)站原型。這比直接跳到代碼中更好，因為它允許我們構(gòu)建一個非常詳細的界面，并且可以輕松地進行編輯——而不需要分解Html、CSS等。

雖然這仍然是一種有效的工作流，但這種新型應(yīng)用程序具有特定于web設(shè)計的特性。諸如導航和按鈕之類的UI元素是交互式的——您可以看到懸停效果或單擊其他頁面。

此外，UI設(shè)計應(yīng)用程序構(gòu)建的接口通常是響應(yīng)性的。這意味著您可以看到它們?nèi)绾卧诓煌囊晥D中工作。您不再需要為電話、平板電腦和桌面設(shè)備構(gòu)建一個完全獨立的PSD文件。

還有大量現(xiàn)成的UI工具包和模板，為設(shè)計過程提供了一個良好的開端。

本質(zhì)上，你不再創(chuàng)建一個靜態(tài)的屏幕，而是一個完全沉浸式的原型。

現(xiàn)在，讓我們看看這些應(yīng)用程序！

草圖

Sketch是第一個投放市場的新奇工具，最早發(fā)布于2010年。這讓這款應(yīng)用在這篇綜述中領(lǐng)先于其他應(yīng)用。因此，這也意味著有大量的可用資源。

有一個包含各種擴展的庫，它們帶來了新的功能并增強了工作流。功能范圍從調(diào)整各種設(shè)計元素到與庫存攝影服務(wù)相結(jié)合，以便更容易地導入。

在它的主要功能中，你會發(fā)現(xiàn)：

矢量圖編輯；

通過智能布局響應(yīng)式設(shè)計；

支持可變字體；

與同事及客戶合作；

輕松添加文本和基于圖像的數(shù)據(jù)到您的演示；

草圖云服務(wù)，分享你的創(chuàng)意；

用于跨文檔共享資源(符號、圖像、文本、樣式)的庫；

能夠創(chuàng)建和使用模板；

大量可用的插件；

Sketch是一個桌面應(yīng)用程序，提供30天的免費試用，但其他方面的商業(yè)許可費用為99美元。每年的續(xù)簽以折扣價提供。

這里需要注意的是，Sketch只適用于macOS。如果你使用的是Windows或Linux，你將無法加入到樂趣中。

Figma

Figma于2016年首次發(fā)布，是一個基于瀏覽器的應(yīng)用程序，它宣揚一種協(xié)作的設(shè)計方法。這樣做的好處是，不管您的操作系統(tǒng)是什么，您都可以方便地隨時訪問它。

另外，當你與他人共享項目時，你是在使用一個實時鏈接。這意味著您不必首先導出到PDF或其他圖像。他們看到的正是你所創(chuàng)造的。

此外，F(xiàn)igma還支持實時協(xié)作。團隊成員可以相互溝通并管理自己的項目任務(wù)。包含的版本歷史記錄允許您在需要時回滾更改。

除此之外，你會發(fā)現(xiàn)：

能夠創(chuàng)建一致的樣式并在項目中應(yīng)用它們；

直接從設(shè)計文件復制CSS；

一個可搜索的資源庫；

用戶權(quán)限；

創(chuàng)建動畫，交互式原型；

響應(yīng)式設(shè)計的自動布局功能；

一個插件庫，并能夠創(chuàng)建自己的插件；

Figma有一個免費的計劃，允許3個項目，2個編輯器和一個30天的版本歷史。全功能的商業(yè)套餐起價為每月12美元(按年計費)。

Adobe XD

現(xiàn)在，給新來的孩子。adobexd于2017年10月發(fā)布測試版，目標用戶是那些希望創(chuàng)建網(wǎng)站、移動應(yīng)用程序甚至游戲的設(shè)計師。它擁有一個內(nèi)置的協(xié)作系統(tǒng)，稱為"協(xié)同編輯"，以及客戶和同事提供反饋的能力。

與它的競爭對手一樣，XD使您能夠一次又一次地重用設(shè)計組件。您還可以一次編輯一個組件并將其推到所有實例，從而提高設(shè)計的一致性。

也許最大的優(yōu)點是adobexd可以很好地與其他Adobe應(yīng)用程序配合。例如，你可以從XD直接在Photoshop中打開和編輯圖像(只需右鍵單擊圖像來打開它)。您對映像所做的任何更改都將自動反映在XD中。它還可以從adobeillustrator、Photoshop甚至Sketch中導入文件。

其他值得探索的功能包括：

狀態(tài)允許您編輯基于用戶交互的設(shè)計組件，例如懸?；騿螕?；

輕松復制設(shè)計元素；

Adobe字體集成；

為原型創(chuàng)建交互和觸發(fā)器；

通過配套應(yīng)用程序在實際設(shè)備上預覽移動應(yīng)用程序；

文檔歷史允許您回滾到以前的版本；

開發(fā)人員友好的資產(chǎn)，如CSS，顏色，可下載的資產(chǎn)；

支持功能并與第三方服務(wù)相結(jié)合的擴展；

adobexd是基于訂閱的軟件，它需要一個完整的創(chuàng)意云會員資格，或者你可以選擇以每月9.99美元的價格訂閱XD。如果您想先嘗試一下，有一個免費的XD Starter計劃可以讓您嘗試一些限制。您可以在macOS或Windows上運行應(yīng)用程序。

做出正確的選擇

這些工具都有自己的一組引人注目的特性，這樣的話，很難說你會做錯任何一件事。

但是，為了縮小你的選擇范圍，考慮一下你打算如何以及在哪里使用這個應(yīng)用程序。例如，如果你是Windows用戶，你將無法使用Sketch。如果您更喜歡基于瀏覽器和/或使用Linux，那么Figma是您的選擇。如果你是一個Mac用戶，想要一些有很多模板和插件選擇的東西，Sketch是贏家。忠實的Adobe客戶會喜歡XD的互操作性。

否則，你會發(fā)現(xiàn)許多相似之處。每個應(yīng)用程序至少有一些協(xié)作能力。它們都創(chuàng)建向量圖形并提供資產(chǎn)庫。所有人都擅長創(chuàng)建一個設(shè)計系統(tǒng)。另外，它們在某種程度上都是可擴展的。

不管你朝哪個方向走，你都可以確定一件事。你將站在網(wǎng)頁設(shè)計的前沿。