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

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

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

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

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

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

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

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

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

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

草圖

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

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

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

矢量圖編輯；

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

支持可變字體；

與同事及客戶合作；

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

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

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

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

大量可用的插件；

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

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

Figma

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

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

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

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

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

直接從設(shè)計(jì)文件復(fù)制CSS；

一個(gè)可搜索的資源庫；

用戶權(quán)限；

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

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

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

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

Adobe XD

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

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

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

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

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

輕松復(fù)制設(shè)計(jì)元素；

Adobe字體集成；

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

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

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

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

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

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

做出正確的選擇

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

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

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

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