hi，今天是給新手ui設計師解惑時間，總是在社交平臺上遇到太多新手設計師問一個問題：我是先學Sketch還是先學Adobe Xd，我想在剛踏入UI學習領域時不少同學都會有這樣的猶豫，所以大致從以下幾點來說說2者的區別：

Adobe Xd / Sketch 基本介紹

Adobe Xd（免費方案）

xd是adobe旗下一款全新且主打UI介面設計、建立原型以及跨平臺體驗設計的軟體，將wireframe、design、以及prototype等UI/Ux設計流程整合到一個軟體中。

Sketch（試用30天）

Sketch面市的時間要早很多，算是第一款普及專門的UI在UI設計工具，很早就以功能簡單以及專門為UI設計而成為設計師慣用軟體。

Adobe Xd / Sketch 使用比較

接下來，我們摘取各自的設計使用情境，從8個方面比較。

1.上手容易度

Adobe Xd - ⭐️⭐️⭐️⭐️⭐️

Sketch - ⭐️⭐️⭐️⭐️⭐️

如果你是設計系大學生，或是已經熟悉illustrator/photoshop等繪圖軟體，那不管是AdobeXd還是Sketch都是很容易上手的，因為這類專門用於介面設計軟體的功能都做的相當簡單，介面也是。

就算沒有接觸過相關的軟體，為數不多的基本功能對於新手來說門檻也不是非常高。

adobe xd

sketch

2.電腦系統支援

Adobe Xd - ⭐️⭐️⭐️⭐️⭐️

Sketch - ⭐️⭐️⭐️

Sketch多年來來都只支援macOS系統，因此在初步購買電腦時，大多數設計師會推薦使用MacBook pro或者iMac等，但相較於pc電腦的來說，價格稍微貴了一些。

AdobeXd的問世可以說是解決了這個入門門檻，支援Windows和macOS雙系統，都可以安裝使用，如果團隊協作也不用擔心對方的電腦能不能開啟你的設計文件，另外因為不少企業的硬體都還是以PC（Windows）電腦為主，所以大大解決了這塊的市場空缺。

比較需要注意的是，adobe xd目前僅支援win10 ver。17003以上版本。

2.繪圖功能

Adobe Xd - ⭐️⭐️⭐️⭐️

Sketch - ⭐️⭐️⭐️⭐️⭐️

以向量繪圖來說，sketch軟體的功能更豐富，很多細節部分都可以操作。

sketch

adobexd 的基本繪圖工具較少，單純做介面還算夠用，但如果要繪製插圖就會比較辛苦。

adobe xd

但其實xd這個產品是故意這麼設計的，主要是用來搭配同為adobe家族的illustrator和Photoshop做設計。

我們可以在ai先畫好圖，直接貼上到adobe xd，或是直接用xd開啟psd文件，圖層以及圖形設定大多數都會保留下來，可以直接接著設計。

（在AI以及ps少數複雜的圖形不支援，詳見官方說明）

4.軟體輕量化

Adobe Xd - ⭐️⭐️⭐️⭐️⭐️

Sketch - ⭐️⭐️⭐️⭐️⭐️

這兩個設計軟體都有個很棒的共同點， 都屬於輕量級的工具。

也就是電腦在開啟執行設計的同時，比較不容易卡頓或是當機，相較於其他像ps/ae這樣需要大量渲染處理工具來說，adobexd 以及sketch在使用時都相當順暢。

這樣是為了在做ui設計時，能展開大量的畫板，並進行各自頁面的處理；有時候一個稍微大一點的網站可能就有30個、50個以上的頁面，為了畫面的連貫性，一定是會放在同一個文件中的，這時候輕量級的軟體才能負荷這麼多的畫板協同工作。

5.外掛（plugin）

Adobe Xd - ⭐️⭐️⭐️⭐️

Sketch - ⭐️⭐️⭐️⭐️⭐️

在外掛上sketch略勝，原因是多年來開發者們開發了大量實用的外掛，做設計時候用上這些外掛可以加速流程效率。

sketch

adobe xd的plugin數量成長也非常快，而且多是adobe官方匯入的。大部分要使用的外掛也覆蓋到了。

adobe xd

adobe還發布了xd製作plugin的工程師的補助獎金計劃，從此可以看出adobe對於ui/ux產業以及發展xd的重視，所以外掛這方面，二者以後肯定是不相上下的。

6.購買費用

Adobe Xd - ⭐️⭐️⭐️⭐️⭐️

Sketch - ⭐️⭐️⭐️⭐️⭐️

adobe xd本地方案是免費的。

sketch現在是年訂製，$99 美金一年，教育優惠可以5折。

7.屬於軟體的獨一無二功能

Adobe Xd - ⭐️⭐️⭐️⭐️⭐️

Sketch - ⭐️⭐️⭐️⭐️⭐️

兩個軟體都有自己的特色功能

Adobe Xd 的 Repeat Grid 快速佈局

adobe xd有個特別的功能叫repeat grid可以複製整排元件並進行快速排版。

這個功能ui設計師可以說很受用了。

不論是做網頁，電商產品版面，或是展示user的資料等，在以往都是要複製一個然後去做對齊，透過adobe xd的repeat grid 可以快速地進行水平重複，並且在做不同尺寸的排版時，可以做自適應佈局。

adobe xd

sketch的nested symbol

簡單來說，你平常看到網頁app有很多區域性是重複的，透過元件化的symbol可以將做好的母元件儲存成模版，並直接複製沿用，這大大加速了我們的設計流程。

sketch

8.第三方工具相容性

Adobe Xd - ⭐️⭐️⭐️⭐️⭐️

Sketch - ⭐️⭐️⭐️⭐️⭐️

adobe xd最強大的就是和本家ai/ps/ae的整合，除此之外可以用第三方的plugin如標記獅等，用於匯出標註和實時預覽，標記獅下一版本也將會支援Sketch。

相比較之下，sketch的外掛顯得創新感更強些，比如flinto，pricinple等動效工具，這些工具除了sketch measure以外都是收費的。很多產品開發把生產力拼接在一期，如果團隊設計在開發流程中有配合的好工具，在設計流程上就很加分。

sketch部分第三方工具

最後的總結

你覺得sketch還是adobe xd好用呢？

回答這一問題要結合使用者的場景：

1。你現在手邊有什麼電腦？或者公司是使用什麼電腦？

2。公司目前團隊採用的流程是什麼？比如是Adobe Xd+標記獅那就使用adobe xd。

3。剛開始的學習階段，還不用到正式工作使用，如果你還是學生，或者還在考慮哪個來當第一款工具來學習，我會推薦你使用adobe xd

原因是其實大部分團隊或政府機構用Windows電腦的還是居多，等熟悉了adobe xd之後不管換用sketch或是其他同類軟體等學起來都會很快，因為都“長的差不多”。這篇文章也是給新手一點建議，你也可以挑順手的那個開始學習。

adobe xd或sketch都僅僅是工具而已，設計理論與方法基本上都是一樣，我們不用太糾結到底要哪一個。

並且行業更新很快，各種新的軟體和外掛都層出不窮，作為設計師多少都是要會一些的，所以保持學習的熱情，擁抱變化吧。

想要學習這兩個軟體的基本操作，網上有很多免費的教程，多找找多看看，很快就能上手的，加油吧，乘風破浪的設計師們！