2021年我應該使用哪種UI設計工具?

我們先來回顧一下現階段各大UI設計工具的概況

現階段,UI設計工具已經蠻飽和的了。自從Sketch以其光滑、簡單、高效的工具來制作用戶界面設計以來,許多公司都緊隨其后,從設計工具的市場份額中分了一塊蛋糕。根據UXtools進行的2019設計工具調查。Sketch去年依然是最熱門的工具,但是對比2018年,相當多的工具已經逐漸迎頭趕上。

2019年最受歡迎UI設計工具調查結果

UI設計工具調查圖2019

2018年最受歡迎UI設計工具調查結果

UI設計工具調查圖2018

根據我觀察到的這些工具的增長,我自己使用這些工具的經驗以及聽取其他設計師使用這些工具的經驗,我預計近兩三年間,能給我們帶來更多驚喜的無疑是Sketch,Figma和Adobe XD 這三款工具。

今年,我與很多年輕設計師交流時遇到的最常見問題之一是“我應該學習Sketch還是其他工具?”。為了回答這個問題,我們可以深入研究工具的幾個關鍵方面并進行比較。為了使本文簡潔明了,我們只關注調查中的前三個工具,即Sketch,Figma和Adobe XD。

| 系統需求

讓我們從該工具的一個關鍵需求開始,也就是您正在運行的操作系統。Sketch是Macintosh唯一的應用程序。因此,如果你運行的是Windows或Linux機器,那么你只能使用Figma或Adobe XD。

對于Mac用戶來說,以上三款軟件則都在你的選擇范圍之內。

| 定價

對少部分人來說,這是另一個關鍵的決定因素,假如你支持正版的話且資金實(TU)力(HAO)雄(BA)厚(BA)的話

。以下是對每種工具的個人版本的定價:?對大部分人而言,你懂的,請直接跳過這一段

Sketch::$99美刀一次性付款。為期一年的免費更新。這意味著你可能需要每年支付$79美刀的續簽費才能享受新功能帶來的好處。

Figma:它有3個項目限制,單個項目中文件數量無限制+2個編輯器。

Adobexd:?2020年10月前免費,項目/文件不限,共享沒有限制。2020年10月后,只有一個共享項目和兩個編輯器。

Adobe XD似乎提供了最大的價值。

| 布局編輯

大量的設計時間都花在了管理布局上。選擇布局良好的工具對提高生產率至關重要。

對于Sketch來說,他們有智能的布局特性,可以在內容長度/大小發生變化時自動調整容器的大小。例如,按鈕背景調整為其文本長度。

Sketch的智能布局可以在編輯內容時自動調整元素的大小

Figma也提供了類似的自動布局功能,比如拖放內容的重新排列。

Figma的拖放自動布局

Adobe XD有其感知內容的布局特性,這有助于在調整內容大小時強制層組的填充。與其他工具的布局特性相比,我認為Adobe XD的填充特性是相當獨特的。

Adobexd提供了填充布局特性,可在編輯內容時強制填充

當改變內容高度時,自動調整圖層垂直高度的是一個很節省時間的方法。Figma在這一點是做的最好的。

| 協作

如果您與其他設計師一起工作,則這三種工具都提供了與其他人共享文件的方法,并且還可以通過安裝插件的方式來滿足更多需求。在這里的討論中,我們將重點介紹每種工具自帶的協作功能。

Sketch的文件可以存儲在其云服務器中。這些文件也可以與其他人共享和編輯。可以使用版本控制,但撰寫本文的檢查工具處于beta版。Sketch可以與其他工具(例如Invision或Zeplin)配對使用,以實現諸如設計共享和移交之類的協作功能。Sketch正完善這些這些功能,但截至目前仍落后于其他競爭對手。

Figma的多人編輯示例

Figma憑借其實時協作功能脫穎而出,它允許多個人同時查看/編輯同一文件。這是近年來UI設計工具市場上最獨特的功能之一。? 實時編輯/預覽功能很方便,因為任何人查看設計文件并可以隨時看到最新的更改。除了實時協作之外,Figma還具有其版本控制,設計系統和檢查功能。

Adobe XD于2019年11月推出了自己的共同編輯功能,其中包括多用戶編輯和文件版本控制等功能。此外,XD具有與其他工具相似的共享和移交功能。

在Adobe XD中,允許多個人可以訪問同一文件,并且您可以實時查看其他人的文件。

Adobexd的協同編輯功能目前處于測試階段

考慮到Adobe XD協作功能處于測試狀態,以及Sketch功能的完善度,Figma是這一模塊是首選,特別是對于那些重視實時協作的設計師。

| 性能

對于大多數擁有良好硬件規格的人來說,這三種設計工具之間的性能差異不會太大。當使用大量畫板/框架,外部插件和文件中的圖像資產時,性能問題將變得更加明顯。

使用Sketch時,在一個Sketch頁面上包含幾十個畫板的文件上工作時,經常會遇到呆滯的交互。我還看到了一些報告,其中人們在使用第三方插件時遇到性能問題。

在使用Figma的日常流程中,我很少遇到性能問題。考慮到Figma是基于瀏覽器的工具,因此性能對硬件的依賴性較小,并且在大多數情況下都相當不錯。

Adobe XD,我在2019年初首次啟動時遇到了一些性能問題。此后,后續的更新解決了相同的性能問題。老實說,我沒有像其他工具那樣廣泛地測試過XD的性能,但是到目前為止,該性能已經可以與Sketch媲美。

在性能這個模塊中,根據我的經驗,Figma依舊是最可靠的。

| 原型功能

當談到原型工具時,有很多需要討論的,因為市場上有更多專門的原型制作工具可供考慮。

Sketch支持屏幕鏈接,使用熱點構建可點擊的原型。?原型可以在本地預覽,也可以通過Sketch Cloud與他人共享。另外還有一些不錯的功能,比如“滾動時固定位置”和“點擊后保持滾動位置”使草圖與Invision提供的原型制作功能相當。

Sketch滾動時的固定位置功能有助于創建更復雜的點擊原型

Figma擁有與Sketch幾乎相同的一套原型特征。主要的區別是在過渡效果,其中Figma有一個智能動畫功能,可以在狀態的兩幀之間創自動創建動畫。使用智能動畫,我們可以創建更復雜的外觀原型。

Figma的智能動畫可以在幀之間創建更復雜的過渡

Adobexd在原型設計方面功能是最強大的。除了Figma和Sketch提供的功能外,還有如鍵盤、手柄和基于語音的觸發器,可以支持更專業的原型體驗。

Adobe XD有一個用于構建基于語音的用戶體驗的觸發器

對于原型開發的功能,Adobe XD無疑是最優秀的,它提供了豐富的輸入選項。

?| 插件

這三種工具都帶有一個插件生態系統。

Sketch的官方插件頁面

Sketch擁有一個大型的、多樣化的插件庫。你可以找到許多有用的插件來加速設計工作流程或擴展草圖的功能。

Figma插件頁面

Figma的插件支持于2019年8月啟動。從那時起,許多插件被添加了進來,但是與其他工具相比,這些插件還是遠遠不夠的。

Adobexd的插件面板

Adobe XD于2018年開始了其插件生態系統。雖然它尚未與Sketch處于同一級別,但它的追趕速度很快。并且我認為,在這三個工具中,Adobe XD的插件的瀏覽和管理體驗感是最好的。

那么,在插件這個模塊,Sketch絕對是最佳的選擇。

| 發展速度

當選擇一個設計工具來投入你的學習時間時,一個重要的考慮是這個工具的發展速度有多快。

查看Sketch的更新日志,他們在過去的一年里,平均每個月都有一次重大的更新(1個完整版本)。這可能是由于2019年初他們為了“追趕”其他競爭對手,為什么這里的關鍵字是“趕上”呢,坦率地說,素描在功能上落后于Figma和Adobe XD有一段時間了。考慮到Sketch的推出比它的競爭對手早了幾年,但是Sketch只是與其他競爭的設計工具的優勢并沒有很大,這是有點令人沮喪的。

Figma發布功能的速度和Sketch差不多。值得注意的是,Figma已經發布了更多與其他工具相關的集成特性,比如用于測試的Maze和用于原型設計的Framer Web。正因為如此,Figma能夠很好地與那些使用額外工具來補充設計流程的設計師或團隊合作。

相對而言,Adobe XD的發布速度令人印象深刻。它最初發布時(測試版在2017年底發布)存在不少問題,但在不到兩年的時間里,它趕上了其他工具,成為一個強有力的競爭者。XD沒有與其他第三方設計或開發工具廣泛集成,但它與Adobe套件緊密集成。

在這方面,雖然Adobe XD到目前為止已經完善的還不錯了,但Figma在推出新的和多樣化的功能方面卻更讓人期待。

| 總結:

那么應該使用哪種工具呢?

Sketch、Figma和adobexd都是很棒的UI設計工具。如果你剛剛開始,還在考慮使用哪些工具,我建議你從Figma開始。如果您正在尋找還能夠創建更復雜原型的設計工具(例如,語音輸入觸發器),那么使用Adobe XD。最終,你的雇主/設計團隊可能會為你選擇一種工具,但好消息是這三種工具非常相似。這意味著如果你已經在一種工具上投入了時間,那么當你選擇另一種工具時,大部分的知識都是可轉移的。

最后補充,其實,軟件不是最重要的,它只是實現你想要功能的一個工具,真正重要的是設計思維和還有你的思考能力。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容