Adobe XD 與 Sketch – 對決 2020

已發表: 2022-03-11

兩個重量級的競爭者繼續爭奪最受青睞的設計工具的頭把交椅：Adobe XD vs Sketch。 哪個工具將統治他們？ 答案並不簡單。 由於近年來兩者都取得了非凡的進步，因此應該對功能、性能和易用性進行全面的設計工具比較。

在 XD 首次亮相之前，Sketch 已經提前了好幾年：確切地說是六年。 它擁有廣泛而專注的粉絲群，功能豐富，並且擁有廣泛的插件生態系統。 但 Sketch 有一個致命弱點——它只適用於 Mac。

2016 年，Adobe 掀起熱潮，加入了競爭。 他們不僅將 Sketch 與 XD 中的類似功能相匹配，而且還使其在 Windows 上可用。 由於世界上大約 78% 的台式計算機在 Windows 上運行，因此這是一個大膽且具有競爭力的舉措。

Adobe XD 還填補了 Creative Suite 陣容中的一個重大漏洞。 Fireworks 獲得了金色握手，XD 提供的功能在 Illustrator 或 Photoshop 等其他應用程序中不可用。 XD 不僅是與 Sketch 相同的輕量級、基於矢量的設計工具，它還可以更好地與 Adob​​e Creative Suite 生態系統的其他部分集成。

然而，在設計師之間，對於哪種工具更好，意見仍然不同。 隨著功能迅速添加到兩種工具中，這場戰鬥最近發展成為一場全面戰爭，經常追趕並經常互相模仿。

讓我們深入並比較 Adob​​e XD 與 Sketch 中的以下功能：

  • 用戶界面
  • 使用符號/主組件
  • 資產和組件面板
  • 縮放層和組件
  • 複製和分發元素
  • 響應式設計工具
  • 插件
  • 原型製作
  • 團隊協作
  • 開發者交接
  • 版本控制和共享庫
  • 黑暗模式

用戶界面

儘管 Sketch 和 Adob​​e XD 共享相似的界面，但Sketch 的 UI 比 XD 更有優勢。 它感覺更像是一個強大的專業設計工具，而 XD 感覺更像是 Illustrator 和 Photoshop 的精簡組合。

Adobe XD 的一個顯著不便之處在於它默認顯示資源面板打開。 這不是大多數設計師所期望的。 在開始設計文檔時，大多數設計師希望立即看到圖層面板——而不是資產或插件。

➠ +1 到 Sketch 的直觀界面。

Sketch vs XD - Sketch 設計工具
Sketch 有一個直觀的界面設計者可以直接開始使用。

Adobe XD 用戶界面 - Sketch 與 Adob​​e XD
Adobe XD 用戶界麵類似於其他 Adob​​e 應用程序。

使用符號/主組件

Sketch 和 Adob​​e XD 中都提供了可重複使用的設計庫“符號”（它們在 XD 中稱為“主組件”）。 更新符號或主組件時，項目中該組件的所有其他實例都會反映更新。

然而，與 Adob​​e XD 相比，Sketch 的智能佈局功能在使用此類主組件時更為強大。 它允許更大的靈活性和更快的工作流程。

在 Sketch 中，我們可以為組件分配特定的佈局 → 將組件拖到畫布上 → 使用覆蓋來自定義內容，組件將根據其新內容調整大小。

➠ +1 到 Sketch，因為它更好地處理符號。

Sketch 設計工具中的符號
Sketch 早期的成功很大程度上歸功於它的符號功能。

資產和組件面板

Sketch 和 Adob​​e XD 共享相似的資源/組件面板，但存在一些差異。

對於資產，XD 有一個下拉菜單，讓設計師可以選擇僅查看特定類別，除了“全部”。 設計師還可以在“網格視圖”和“列表視圖”之間切換。 這些選項使 XD 中的資產面板更加用戶友好。 此外，查看特定類別的下拉菜單為將來添加更多類別提供了更大的靈活性。

草圖不太靈活。 它在一個三按鈕分段控件（用於符號、文本樣式和顏色樣式）下顯示項目資產。 使用 Sketch，組件是可搜索的，但不能跨類別搜索。 XD 通過搜索所有資產中的所有組件來進行更好的搜索。

➠ +1 給 Adob​​e XD，因為它可以更好地管理資產。

UX 設計工具 Adob​​e XD UI 審查 - 資產面板
Adobe XD 的“資產”面板比 Sketch 提供了更多的靈活性。

使用來自其他庫的主組件

使用 Sketch，設計師可以從大量鏈接庫（本地或在線共享）中快速輕鬆地將主符號添加到畫板。 在 Adob​​e XD 中，“鏈接資源”可以從“XD 雲”（組件、顏色和字符樣式）放入設計中，但由於這種尷尬的工作流程，Adobe XD 的靈活性要差得多。

➠ 在使用主組件時為 Sketch +1 以獲得更好的用戶體驗。

編輯顏色樣式

添加到資源庫後，Adobe XD 讓設計師可以編輯顏色樣式並在畫板上實時觀察顏色變化。 在 Sketch 中，有一種全局編輯顏色的解決方法，但它不如 Adob​​e XD 直觀。

➠ +1 到 Adob​​e XD 以更好地編輯顏色樣式。

建立設計系統

在構建設計系統（圖標、按鈕、顏色樣式、文本樣式等）時，Sketch 有一種很好的方式來組織組件。 在創建和命名這些資產時使用斜線“/”，它們在組件面板中分組並在插入菜單中分層排列。 這是一種以合乎邏輯的方式組織組件的絕佳方法，對於使用數百個設計元素的設計師來說很有意義。

Adobe XD 不提供這種靈活性。

➠ +1 到 Sketch，便於管理設計資產。

Sketch 與 Adob​​e XD - 在 Sketch 中組織資產更容易
Sketch 中的符號可以拖入組以在組件面板下創建層次結構。 同樣可以通過在組名後使用斜杠“/”重命名圖層來實現。

縮放層和組件

Adobe XD 不能很好地處理包含多個組件的縮放對象。 一般來說，Sketch 處理得更好。 例如，在縮放符號時，它可以很好地保持元素之間的比例間距。

此外，Sketch 有一個有用的縮放圖層功能 ( Command+K )，其中一組元素可以使用百分比或數字縮放，同時指定從哪個原點縮放。 Sketch 會調整所選圖層的大小，而邊框粗細、陰影大小和半徑等樣式屬性將適當縮放。

Sketch 中另一個方便的功能是能夠通過數字或百分比調整檢查器中元素的大小。 這與上面的“縮放圖層”命令略有不同。 通過將以下字母附加到百分比或數字——c /m、t、b、r—— Sketch 將從該原點縮放所選元素。 例如，“ 50%c ”會將所選元素從中心縮放 50%。

  • c/m：從中心縮放
  • t：從頂部縮放
  • b：從底部縮放
  • r：從右邊縮放

注意：“從左邊縮放”選項沒有顯示，因為它是 Sketch 中的默認行為。

查看 Sketch 中圖層縮放的工作原理→

➠ +1 以在縮放元素時為 Sketch 提供更多功能和精度。

Sketch 與 Adob​​e XD - 在 Sketch 中手動調整圖層大小更好
Sketch 可以更好地調整圖層大小，因為檢查器允許我們使用數學來調整大小。

複製和分發元素

Adobe XD 中的重複網格是一項方便的功能，可將一組元素轉換為重複這些對象的網格。 大多數設計師在探索 XD 時可能嘗試過幾次，但設計師會使用多少次呢？ 不幸的是，重複網格不會對齊圖層，這是一個很大的缺點。

另一方面，使用 Sketch，我們可以按住Option鍵並拖動圖層來複製它（同時按住Shift鍵來約束它）。 之後， Command+D根據需要重複元素多次，重複項之間的間距相同。

此外，Sketch 通過Smart Distribute加快了設計工作流程。 它使設計人員可以更好地控制創建網格、調整間距和重新排序圖層。 除了Smart Distribute所做的許多有用的小事情外，它在檢查器中還有一個神奇的“整潔”按鈕。

在畫板上隨機放置多個對像後，我們可以單擊“整理”按鈕，它會神奇地將它們均勻地分佈在網格上。 我們可以通過拖動出現的手柄（當懸停在組上時）或通過輸入手動值來獲得絕對精度來對間距進行額外的調整。

除了Smart Distribute之外，還創建了幾個 Sketch 插件來幫助設計人員使用網格、指南和分佈。 這裡有三個：

分佈層 • SketchDistributor • 均勻分佈的指南

➠ +1 到 Sketch 以更好地複制和分配元素。

Adobe XD 與 Sketch - Sketch 中的智能分佈
智能分佈是一個有用的功能，可以以均勻的間距分佈元素。

響應式設計工具

Adobe XD 和 Sketch 都具有類似的自動響應功能。 它們都允許手動控制元素的固定寬度和高度，同時將元素固定到邊界框的特定原點。 Adobe XD 還有一個聰明的“響應式調整大小”工具，可以自動確定元素和組的大小調整——但它並不完美。

Sketch 有一個名為Smart Layout的智能響應工具。 設計人員可以構建響應式組件，每當調整其內容時，組件就會適應變化，從而實現更大的靈活性和更快的工作流程。

使用Smart Layout ，設計人員可以輕鬆創建自動調整大小的按鈕，同時保持一致的邊距和填充 - 無論文本標籤有多長。 智能佈局也適用於組。

Adobe XD 最近實現了“響應式調整大小”功能，但仍然落後於 Sketch。

➠ +1 為 Sketch 提供快速、簡單的響應式設計功能。

Sketch 與 Adob​​e XD - Sketch 中的智能佈局功能
使用 Sketch 中的 Smart Layout 可以輕鬆合併響應式組件。

插件

在眾多的數字設計工具中，Sketch 擁有最強大的插件生態系統之一。 擁有數千個插件是 Sketch 最吸引人的功能之一，開發人員不斷製作有用的插件來擴展 Sketch 的功能。

相比之下，Adobe XD 的插件集合相形見絀。 即使同一個開發人員創建了 Sketch 插件的 XD 版本，XD 也太新了，插件無法被廣泛採用。 更重要的是，許多新的 XD 插件並沒有為設計師增加足夠的價值來接受它們。

➠ +1 為 Sketch 提供廣泛的插件生態系統。

原型製作

借助Auto-animate ，Adobe XD 提高了原型製作的賭注。 使用“智能”自動動畫功能，設計師可以在原型中創建漂亮的過渡，以可視化跨屏幕內容的移動。 XD 還可以通過新的“動作”將聲音添加到原型中，該“動作”播放聲音效果和其他音頻文件以響應觸發器。

Sketch 在用於原型製作的屏幕之間有一些基本的擦除，但沒有提供與微交互相同的流動性。 尚不確定 Sketch 何時可以添加它們。 看起來，重點更多地在於將其他有價值的功能（例如助手）整合到 Sketch 中。

Sketch 的製造者很可能認為還有許多其他工具可以創建具有高度詳細的微交互的原型，例如 ProtoPie。 它功能強大，可以輕鬆地從 Sketch、Figma 和 Adob​​e XD 導入設計。

在提供用於在移動設備上預覽原型的應用程序方面，Sketch 和 Adob​​e XD 並駕齊驅： Sketch Mirror和Adob​​e XD 。 這些應用程序通過 USB 電纜或 wifi 將在桌面上設計的原型拉到移動屏幕上。

➠ +1 Adob​​e XD 用於自動動畫轉換以可視化原型。

Adobe 原型製作：Adobe XD 中的自動動畫
Adobe XD 的自動動畫功能使原型製作變得輕鬆簡單。

團隊協作

這兩種工具都提供團隊協作。 Sketch 擁有Sketch for Teams ，使用共享雲工作區的設計人員可以在其中分享想法、與共享雲庫保持同步、檢查其他團隊項目的進度並留下對設計的反饋——所有這些都在一個地方。

此外，無權訪問 Sketch 應用程序的受邀利益相關者和合作者可以在瀏覽器中查看、檢查和評論設計。 開發人員移交也使用Sketch for Teams集成到 Sketch 中。

在撰寫本文時，Adobe XD 的高級版本允許團隊通過 Creative Cloud 與其他設計師（在線和離線）共同編輯 XD 文件，共享文件以供審查，並輕鬆地將規範移交給開發人員。 所有這些功能目前都處於測試階段。

➠ +1 到 Sketch，實現直接的團隊協作。

開發者交接

將設計交付給開發人員是至關重要的一步，Adobe XD 和 Sketch 都能很好地處理它。 通過在線平台共享項目，設計師可以生成規範並與開發人員合作，幫助他們將設計轉變為網站和應用程序。

➠ +1 給 Adob​​e XD和+1 給 Sketch以供開發人員交接。

Sketch vs XD：兩種設計工具的開發人員交接都很容易
Adobe XD 和 Sketch 都使開發人員的交接變得容易。

版本控制和共享庫

與其他設計人員一起處理同一項目時，控制設計文件版本至關重要。 它還有助於更有效地促進團隊協作和設計反饋。 Sketch 最近將這些功能集成到Sketch for Teams中。 借助Sketch Cloud ，設計人員可以共享設計文件和庫，從而更輕鬆地在分佈式團隊中使用設計系統。

Adobe XD 還有一個帶有 Adob​​e Creative Cloud 的雲文件版本控制系統。 雖然 Creative Cloud 網站保留 XD 文件的版本，但無法恢復到以前的版本。 要恢復到以前的版本，設計人員需要通過 Creative Cloud 網站在 Adob​​e XD 中打開文件，然後將內容複製並粘貼到當前文檔中。 除非命名或添加書籤，否則文件版本也會在 30 天后自動刪除。 換句話說，這不是一個無縫的過程。

與 Sketch 一樣，XD 還使團隊可以通過 Creative Cloud Libraries 輕鬆使用共享資源。 設計人員可以將這些庫中的顏色、字符樣式和圖形引入 XD。

➠ +1 到 Sketch，以便在雲中輕鬆進行文件版本控制和共享庫。

黑暗模式

看起來很棒，讓設計脫穎而出

許多設計師更喜歡在光線昏暗的房間里工作，以便在屏幕上看到他們的作品而不會產生反光或眩光。 深色模式 UI 非常適合該環境。 它為幾乎所有顏色提供了出色的對比度，並使視覺內容更加引人注目。

深色模式不僅看起來很棒，而且可以最大程度地減少“數字眼睛疲勞”。 讓我們面對現實吧，設計師們一天中的大部分時間都在盯著屏幕。 數字眼睛疲勞是影響數百萬人的常見疾病。 從過度使用電腦到經常暴露在強光下，都會引起頭痛、頸部疼痛、視力模糊和眼睛灼痛/刺痛。

深色模式在 Sketch App 與 Adob​​e XD 中的效果更好
設計師喜歡在深色模式下使用 Sketch，因為它可以讓設計脫穎而出。 （來源：米克洛斯飛利浦）

強調和突出顏色

從 Sketch 52（2018 年 10 月）開始，Sketch 就支持暗模式。 它還支持 macOS Mojave 的全局口音和高光顏色首選項。 在“圖層”面板、“檢查器”和應用程序其他位置突出顯示的選定選項將匹配系統首選項。

暗模式在 Adob​​e XD 中不可用，甚至在 macOS 上也不可用。

➠ +1 到素描暗模式。

Sketch App vs Adob​​e XD：強調和突出顏色
Sketch 還在其 UI 中支持 macOS Accent 和 Highlight 顏色首選項。

Adobe XD 與 Sketch 決戰的獲勝者是…… Sketch

Sketch 以領先於 Adob​​e XD 的優勢贏得了設計工具霸主地位的戰鬥。

在某些情況下，選擇是顯而易見的：Sketch 不適用於 Windows。 Adobe Creative Cloud 訂閱者的一個顯著優勢還在於 XD“入門計劃”是免費的——儘管它有相當大的限制。

Sketch 的多功能性應該迫使 macOS 上的設計師選擇 Sketch 而不是 XD。 它的界面、插件、協作功能、響應式設計工具、可重複使用的符號、共享庫和其他方便的功能勝過 Adob​​e XD。

Adobe XD vs Sketch 最終得分：Sketch 獲勝
Sketch vs XD——最終得分。 草圖顯然是最重要的。

值得注意的是，無法將設計文件從 XD 移動到 Sketch 。 從 Sketch（和 Photoshop 或 Illustrator）過渡到 XD 更容易，因為 XD 可以打開 Sketch 文件。 使用 Abstract 或 InVision Craft 等純 Sketch 插件時可能會出現一些問題，但可以通過一些清理來避免這種情況。

一些設計師喜歡 Adob​​e XD 的自動動畫功能。 這是一個吸引人的功能，使原型看起來很棒。 然而，設計師需要記住，這只是一個花哨的屬性。 考慮到 Sketch 與 XD 的優勢，這種權衡是不值得的。 許多複雜的原型製作工具都可以與 Sketch 無縫協作。

戰鬥還沒有結束。 未來幾年，Adobe XD 與 Sketch 之間應該會展開一場激烈的全面戰爭。 最後，隨著更多功能被添加到這兩種設計工具中，設計師將從中受益。 這將使他們的日常工作生活更加輕鬆，這是值得期待的。

讓我們知道您的想法！ 請在下方留下您的想法、評論和反饋。

• • •

進一步閱讀 Toptal 設計博客：

  • 精准設計——Adobe XD 評論
  • 探索多模式設計 - Adob​​e XD 教程
  • 形式和功能——頂級線框工具指南
  • 使用這些頂級 UX 工具掌握您的工藝
  • 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例