設計工具對決 – Adob​​e XD 與 Sketch (2019)

Sketch 是一種成熟的設計工具，自 2010 年推出以來，取得了驚人的增長。2016 年，Adobe 推出了 XD 作為強大的競爭對手。 經過近三年的發展，Adobe XD 是否為設計師提供了足夠的挑戰來考慮改變？

用戶體驗設計過程很複雜，需要使用特定的工具、方法和框架。 用戶研究、分析、線框圖、模型、迭代、可用性測試和 UI 原型設計只是設計師在與開發人員、利益相關者和其他團隊成員溝通時使用的一些工件和流程。

用戶體驗設計師依賴的兩個廣受認可的設計工具是 Adob​​e XD 和 Sketch。

由於其簡單的界面、大量的插件、完整的工具包功能和頻繁的更新，Sketch 已成為絕大多數數字設計師的事實上的標準。

雖然 Sketch 成為 UX 設計師的首選工具，但長期以來以其屢獲殊榮的設計軟件和與設計社區的深厚聯繫而聞名的 Adob​​e 卻沒有類似的選擇。 他們有 Photoshop、Illustrator 和 Fireworks，但設計師沒有興趣使用三種工具來完成 Sketch 可以在一個應用程序中提供的任務。

2016 年，Adobe 推出了 XD（體驗設計）。 作為 Sketch 的有力競爭者，他們還有很多工作要做。 當時 Sketch 才六歲，擁有廣泛的用戶群和完整的插件生態系統，使其成為強大的設計工具。 競爭在接下來的兩年中升級，Adobe XD 從一個靈活的競爭對手成長為一個備受推崇的設計工具，贏得了許多專業設計師的青睞。

Toptal 設計博客在 2017 年發表了一篇關於 Sketch 與 Adob​​e XD 的文章，當時它仍處於測試階段。 兩年後的現在，Adobe XD 看到了多次修訂，其目標明確：提供 UX 設計師本機所需的一切，並具有出色的性能。

UX 設計師是時候從 Sketch 切換到 Adob​​e XD 了嗎？

Adobe XD 與 Sketch

讓我們探索一下 Adob​​e XD 與 Sketch 的比較。 我們將比較以下功能：

• 用戶界面
• 重複網格
• 符號和資產面板
• 響應式設計工具
• 附加組件和插件
• 使用自動動畫製作原型
• 分享和評論
• 與開發人員合作
• 版本控制和實時協作

用戶界面

熟悉 Photoshop 等工具的設計師在學習 Adob​​e XD 或 Sketch 時應該沒有問題，因為它們都共享相似的 UI。

一個顯著的 UI 差異是 Adob​​e XD 中沒有工具欄。 位於 UI 頂部的工具欄是 Sketch 中的一項有用功能，可自定義常用功能和工具的快捷方式，例如對對象進行分組。 Adobe 提供了一個類似的縮減功能，稱為工具箱，位於軟件的右側。

Sketch vs XD ： Sketch 的優勢在於其有用的工具欄。

重複網格

Adobe XD 中的一個顯著功能是重複網格。 這是一個方便的工具，可以輕鬆創建可調整的列表和基於網格的屏幕。 雖然 Sketch 缺少此功能，但它或多或少可以通過插件進行複制。

Sketch vs XD ： Adobe XD 具有軟件原生的重複網格的優勢。

符號和資產面板

符號是一個早期功能，對 Sketch 的成功做出了重大貢獻。 符號之於 Sketch 就像 CSS（層疊樣式表）之於網站設計。 它們允許設計人員輕鬆重用和批量編輯資源，從而節省大量時間，幫助創建現成的設計系統，並提供所有屏幕的一致性。

Adobe 從基本符號開始，然後引入了將符號、字體和顏色組合到一個位置的資產面板。 編輯這些元素中的任何一個都會實時顯示結果更新。 Sketch 確實具有這些功能，但 Adob​​e XD 提供了更具凝聚力和改進的用戶體驗。

Sketch 與 XD ：由於資產面板中的 UI 元素組合，Adobe XD 略有優勢。

響應式設計工具

Adobe XD 提供了一組強大的響應式設計工具。 一個突出的功能，響應式自動模式，猜測屏幕應該如何響應不同的設備尺寸。

這是一個非常有用的功能，可以使用簡單的滑塊按鈕打開和關閉。 如果自動模式達不到其預期行為，設計人員可以手動更改響應屬性。

Sketch 沒有內置這個功能，但它有很多插件，比如 Anima Toolkit，可以很好地完成這項工作。

Sketch 與 XD： Adobe XD 在這裡具有優勢。 它們提供了一種內置方式來查看 UI 元素上的響應效果。

附加組件和插件

Sketch 中的插件生態系統可以說是其最大的功能之一。 有數百個插件可以擴展 Sketch 的功能，並允許設計人員在留在 Sketch 生態系統中的同時使用增強的功能。

附加組件是相當於插件的 Adob​​e XD。 Adobe 於 2018 年啟動了他們的附加生態系統，因此它不如 Sketch 強大。 這不是 Adob​​e 關心的問題，因為他們的目標是嘗試減少對附加組件的需求，並專注於製作軟件內置的功能。

Sketch vs XD： Sketch 的優勢在於其廣泛的插件庫。

使用自動動畫製作原型

Adobe 最近更新了 XD，為 UX 設計師提供了一個非常有用的功能：自動動畫。 它的工作原理是在不同屏幕的元素之間進行巧妙、平滑的過渡。 結果令人印象深刻，使原型製作成為吸引潛在客戶的愉快體驗。 即使使用插件，Sketch 也不提供此功能。

Adobe 引入的另一個出色的原型設計功能是支持微交互，例如，從屏幕邊緣拉出面板或顯示鍵盤。 Adobe XD 還支持基於語音的 UI（如 Alexa 或 Google Home）的原型設計。

Sketch vs XD： Adobe XD 的優勢在於節省時間的自動動畫功能和對 Sketch 缺乏的微交互的支持。

分享和評論

設計師經常與其他團隊成員、開發人員和利益相關者互動——共享設計和接收反饋的能力是設計過程的關鍵部分。 因此，Adobe XD 包含用於在線共享模型和原型的內置功能，因此任何人都可以添加一般評論，或指向佈局上的特定位置並留下反饋。

這些功能與 Adob​​e XD 的動態原型製作模式相結合，還可以在手機上使用原生 Adob​​e XD 應用程序進行測試，甚至可以錄製下來用於非交互式演示。

Sketch 可以使用 Zeplin 等協作工具或與 Invision 等 3rd 方工具集成來共享和評論。

Sketch vs XD： Adobe 在這方面略勝一籌，內置在線共享和評論功能。

設計規格

在設計項目的過程中，用戶體驗設計師經常需要與開發人員分享設計規範。 Adobe 將此功能包含在 XD 中，而 Sketch 用戶將需要使用 Zeplin 或 InVision 等集成。

Sketch vs XD： Adobe 比 Sketch 有優勢，因為設計規範是內置的，不需要第三方集成。

版本控制和實時協作

設計人員和開發人員依賴的兩個重要功能是版本控制和實時協作。 在同一個項目上一起工作的大型設計團隊需要能夠查看何時進行了更改，並訪問這些更改的歷史記錄。

Adobe 通過引入雲文檔解決了協作問題。 這為團隊中的每個人（包括開發人員）提供了一個工作的中心位置。 根據 Adob​​e 的說法，雲文檔功能的下一步將是版本控制。

Sketch 提供版本控制和與插件的實時協作，但這些功能並未內置在產品中。

Sketch vs XD： Sketch 贏得了這場比賽。 他們有版本控制，儘管有插件； XD 目前不提供此功能。

功能摘要：Adobe XD 與 Sketch

當前版本的 Adob​​e XD 和 Sketch 之間既有相似之處，也有不同之處。 以下是每種產品的比較：

是時候改變用戶體驗設計工具了嗎？

比較特徵，Sketch 和 XD 很接近。 Sketch 缺少一些 XD 原生的功能，如自動動畫、自動響應設計和重複網格。

Adobe XD 唯一缺少的就是版本控制，這要歸功於 Sketch 的插件。 隨著 Adob​​e 繼續開發雲文檔功能集，預計這將很快出現在 XD 中。

從 Sketch（和 Photoshop 或 Illustrator）轉換到 XD 比從其他方式轉換更容易，因為 XD 可以以出色的保真度打開 Sketch 文件。 如果您依賴像 Abstract 或 InVision Craft 這樣的純 Sketch 插件，您可能會遇到一些問題。

在某些情況下，選擇是顯而易見的：對於 Windows 用戶，Sketch 不可用，而對於 Adob​​e Creative Cloud 訂閱者，XD 是免費提供的，並且可以無限共享原型。 這不是偶然發生的。

但 Sketch 正在反擊。 該公司最近完成了 2000 萬美元的融資，並承諾在 2019 年推出團隊協作、本地切換和網絡版應用程序等重要功能。

如果版本控制不是關鍵問題，那麼現在正是考慮使用 Adob​​e XD 的最佳時機。 Adobe 對用戶體驗設計社區的承諾通過自動響應模式、重複網格和內置原型等功能顯而易見。 儘管起步較晚，但 Adob​​e 已經證明他們可以為 Sketch 帶來巨大的挑戰。

進一步閱讀 Toptal 設計博客：

• Adobe XD 與 Sketch - 哪個 UX 工具適合您？
• 原子設計和草圖 - 改進工作流程的指南
• 精確設計 - Adob​​e XD 評論
• 關於 Sketch 中的排版你可能不知道的事情
• 熟悉 Sketch 插件開發