正文共：3945字 13圖

預(yù)估閱讀時(shí)間：10 分鐘

成為UI 設(shè)計(jì)師之前，得先學(xué)會(huì)哪個(gè)設(shè)計(jì)軟件？

Sketch 多年來(lái)都是UI（使用者界面設(shè)計(jì)）設(shè)計(jì)師主要使用的設(shè)計(jì)團(tuán)體，再配合Adobe Ai 以及Ps 進(jìn)行制圖，但Adobe 推出了自家專用于UI/UX 設(shè)計(jì)的軟體「Adobe Xd（Experience Design）」之后，設(shè)計(jì)師們從此有了新的選擇?

今天這篇Adobe Xd以及Sketch比較，我想在剛踏入U(xiǎn)I領(lǐng)域?qū)W習(xí)時(shí)，不少同學(xué)都會(huì)有這樣的猶豫，而這也是設(shè)計(jì)師上常見的問(wèn)題，而很多人也為此要去買新電腦。但若已經(jīng)很資深的朋友，反而不會(huì)去想要去學(xué)哪一套工具，原因我們會(huì)在最后做說(shuō)明。

Adobe Xd / Sketch 基本介紹

Adobe Xd

Adobe 旗下一款全新且主打結(jié)合界面設(shè)計(jì)、建立原型以及跨平臺(tái)體驗(yàn)設(shè)計(jì)的軟體，將Wireframe、Design 以及Prototype 等UI/UX 設(shè)計(jì)流程整合至同一軟體中，并能直接導(dǎo)出標(biāo)注元件與開發(fā)者進(jìn)行協(xié)作。

Sketch

以其閃亮亮黃色鉆石為人所知，由于是很早就以功能簡(jiǎn)單與UI 設(shè)計(jì)專門為訴求而成為設(shè)計(jì)師慣用軟體，并因此在網(wǎng)路上大多數(shù)的教學(xué)文章都以推薦Sketch 為主，業(yè)界中較資深的設(shè)計(jì)工作人員也多使用以此為主軸的設(shè)計(jì)流程。

Adobe Xd / Sketch 使用比較

接下來(lái)，我們擷取各自的設(shè)計(jì)使用情境中，共8 個(gè)實(shí)際的比較與參考性等。

1.「容易上手程度」

Adobe Xd - ??????????

Sketch - ??????????

如果你是設(shè)計(jì)系大學(xué)生，或已經(jīng)熟悉Illustrator / Photoshop 等繪圖軟體，那不管是Adobe Xd 還是Sketch 都是很容易上手的，因?yàn)檫@類專門用于UI 介面設(shè)計(jì)軟體的功能都做得相當(dāng)簡(jiǎn)單，介面也是。

就算都沒(méi)接觸過(guò)相關(guān)軟體，為數(shù)不多的基本功能對(duì)于新手來(lái)說(shuō)的門檻也不是非常高。

Adobe Xd 軟體界面

Sketch 軟體界面

2.「電腦（作業(yè)系統(tǒng)）支援」

Adobe Xd - ??????????

Sketch - ????????

Sketch 多年以來(lái)都只支援MacOS 系統(tǒng)的電腦，因此在初步購(gòu)買電腦時(shí)，大多數(shù)的設(shè)計(jì)師會(huì)推薦使用MacBook Pro 電腦，或是iMac 臺(tái)式機(jī)等，但相較于PC 電腦來(lái)說(shuō)，價(jià)格稍微貴了一些。

Adobe Xd 的問(wèn)世可以說(shuō)是解決了這個(gè)入門門檻，支援Windows 以及MacOS 雙作業(yè)系統(tǒng)都可以安裝使用，如果團(tuán)隊(duì)協(xié)作時(shí)也不用擔(dān)心對(duì)方的電腦能不能開啟專案檔，另外因?yàn)椴簧俅髮W(xué)機(jī)構(gòu)以及企業(yè)的硬體裝置都是PC（Windows）電腦，所以大大地解決了以往沒(méi)有專用UI 設(shè)計(jì)軟體的麻煩。

比較需要注意的是，Windows目前僅支援Win10 Ver.1703以上版本。

3.「繪圖功能」

Adobe Xd - ????????

Sketch - ??????????

以向量繪圖來(lái)說(shuō)，Sketch 軟體內(nèi)建的工具更豐富，尤其是漸層的部分我個(gè)人覺得很好用！也比較多細(xì)部設(shè)定可以操作；Adobe Xd 內(nèi)建的基本繪圖工具較少，單純做界面還夠用，要進(jìn)行插畫繪制就比較辛苦。

但其實(shí)Xd 這項(xiàng)產(chǎn)品是故意這么設(shè)計(jì)的，主要是用來(lái)搭配同為Adobe 家的Illustrator 以及Photoshop 做設(shè)計(jì)?，F(xiàn)在Adobe Creative Cloud 是走訂閱制，可以一次使用全套的Adobe 軟體，也就是說(shuō)用了Xd，要順便開Ai/Ps 只需要安裝一下就可以使用。

我們可以在Ai 先畫好圖，直接貼上Adobe Xd，或是直接用Xd 開啟.psd 的檔案，圖層以及圖形設(shè)定大多數(shù)都會(huì)保留下來(lái)*，可以直接接續(xù)設(shè)計(jì)流程。

（*在Ai以及Ps少數(shù)復(fù)雜的圖形不支援，詳見官方說(shuō)明。）

Adobe Xd 的繪圖工具簡(jiǎn)單易懂

Sketch 的繪圖工具較多，且能自定義面板。

4.「軟體輕量化」

Adobe Xd - ??????????

Sketch - ??????????

這兩款設(shè)計(jì)軟體有個(gè)很棒的共同點(diǎn)，就是都屬于輕量級(jí)的工具。

也就是電腦在開啟并執(zhí)行設(shè)計(jì)的同時(shí)，比較不容易宕機(jī)或是卡頓，相較于其他像是Ps/Ae 這樣需要大量渲染處理的工具來(lái)說(shuō)，Adobe Xd 以及Sketch 在使用時(shí)都相當(dāng)順暢。

這樣是為了在做UI 設(shè)計(jì)時(shí)，能展開大量的畫布（Artboards），并進(jìn)行各自頁(yè)面的處理；有時(shí)候一個(gè)稍微大一點(diǎn)的網(wǎng)站可能就有30 個(gè)、50 個(gè)以上的頁(yè)面，為了畫面間的連貫性，一定是都會(huì)放在同個(gè)專案檔的，這時(shí)候輕量級(jí)的軟體才能負(fù)荷。

至于電腦硬體的選擇上，如果是初階的電腦（比如說(shuō)MacBook Air）在「學(xué)習(xí)」上兩個(gè)軟體都是沒(méi)問(wèn)題的；但如果在工作或是在公司使用，建議一定都要使用到MacBook Pro 或是以上的規(guī)格，我目前工作主力機(jī)是MBPR 15"（16G RAM、512GB SSD、i7處理器）以符合實(shí)際工作上時(shí)可能會(huì)多開軟體、同時(shí)使用效能怪獸Chrome 以及開啟團(tuán)隊(duì)協(xié)作工具等等。

5.「擴(kuò)充外掛」

Adobe Xd - ????????

Sketch - ??????????

Sketch 略勝；原因是多年來(lái)開發(fā)者們替其開發(fā)了無(wú)數(shù)的實(shí)用Plugin，做專案的時(shí)候常常遇到某個(gè)功能Sketch 沒(méi)有，但可以在全球最大男性交友平臺(tái)GitHub 上找到，或是偶爾逛到很方便的工具，可以加速流程效率。

相信每一位UI 設(shè)計(jì)師都有自己一套常用的Plugins。不過(guò)長(zhǎng)期來(lái)看有個(gè)缺點(diǎn)，就是許多民開開發(fā)者制作的Plugin 可能不會(huì)一直保持更新，隨著Sketch 的幾次改版后，可能就會(huì)有不支援的情況發(fā)生。

Adobe Xd 在去年也終于開放的Plugin 的功能，我們可以直接搭配Google 試算表、微軟Teams，以及標(biāo)注工具Zeplin 等官方的插件，也可以使用許多第三方的外掛來(lái)協(xié)助我們進(jìn)行UI 設(shè)計(jì)。根據(jù)我的觀察，Adobe Xd 的Plugin 數(shù)量成長(zhǎng)非常快，而且多是Adobe 官方導(dǎo)入的，相較于Sketch 的高手在民間，Adobe Xd 的Plugin 在版本及穩(wěn)定性上稍微好一些。

Adobe 甚至還發(fā)布了幫Xd 制作Plugin 的設(shè)計(jì)師、開發(fā)者的加速器計(jì)劃，補(bǔ)助獎(jiǎng)金甚至進(jìn)駐總部，從此可以看出Adobe 對(duì)于UI/UX 產(chǎn)業(yè)以及發(fā)展Xd 的重視。

6.「獨(dú)一無(wú)二的殺手級(jí)功能」

Adobe Xd - ????????????????????

Sketch - ????????????????????

其實(shí)對(duì)已經(jīng)掌握UI 設(shè)計(jì)軟體的資深設(shè)計(jì)師來(lái)說(shuō)，包含Adobe Xd 與Sketch 在內(nèi)的軟體都是長(zhǎng)得差不多的，唯一會(huì)影響今天要打開什么軟體的決策，除了專案或電腦硬體限制外，就是各個(gè)軟體的「特色功能」。

• Adobe Xd 的Repeat Grid 做元件的快速布局

先科普一下：除了基本的Assets 元件庫(kù)做常用物件的儲(chǔ)存之外，Adobe Xd 內(nèi)的Component 則可以將UI 中會(huì)重復(fù)出現(xiàn)的元件做歸整，之后要修改時(shí)可以一次處理好。

其實(shí)這個(gè)Component 功能在Sketch 里也是有的，就叫「Symbol」。但Adobe Xd 有個(gè)很特別的玩法，叫「Repeat Grid」可以復(fù)制整排元件并進(jìn)行快速排版。

這個(gè)功能肯定是基于UI 上常見的設(shè)計(jì)師操作去設(shè)計(jì)的！

不論是做網(wǎng)頁(yè)的貼文樣式、電商的產(chǎn)品版面，或是展示user 的資料欄位，在以往都是需要一個(gè)復(fù)制一個(gè)，然后去做對(duì)齊；透過(guò)Adobe Xd 的Repeat Grid 可以快速地進(jìn)行水平的重復(fù)，并且在做不同尺寸的排版時(shí)，同個(gè)物件也可以直接做垂直延伸。

這邊有個(gè)小提示，就是如果你設(shè)計(jì)的元件內(nèi)含切圖標(biāo)記，在設(shè)計(jì)稿最后導(dǎo)出的時(shí)候，不會(huì)因?yàn)镽epeat Grid 而重復(fù)出現(xiàn)，而是會(huì)相當(dāng)聰明地只擷取原始元件的切圖設(shè)定。

• Sketch 巢狀元件Nested Symbol （Overrides）

上面提到的「Symbol」功能在Sketch 中行之有年，我猜這也是剛開始大多數(shù)UI 設(shè)計(jì)師喜歡用Sktch 的主要原因：元件化設(shè)計(jì)。

簡(jiǎn)單來(lái)說(shuō)，你看平常用的那些網(wǎng)站啊、APP，其實(shí)有很多局部是重復(fù)的，像是最上面的Header、最下面的Footer，或是頁(yè)面中的標(biāo)題、按鈕以及卡片式設(shè)計(jì)等等，這些重復(fù)性的元件如果都各自獨(dú)立，那如果有天要調(diào)整一點(diǎn)點(diǎn)間距或換顏色，那不就要全部手動(dòng)調(diào)整嗎？

透過(guò)元件化的Symbol 可以將做好的母元件儲(chǔ)存成模組，并直接復(fù)制沿用，這大大地加速了我們的設(shè)計(jì)流程。而且Sketch 有更強(qiáng)的「巢狀Symbol」可以把UI 整理成一鍵切換的區(qū)塊，如下圖這樣神清氣爽的版面，也讓整體的設(shè)計(jì)更一致地系統(tǒng)化。

8.「第三方工具相容性」

Adobe Xd - ??????????

Sketch - ??????????

我覺得Adobe Xd 最強(qiáng)的就是跟同家的Ai / Ps / Ae 水平的整合，除此之外A 社身為地球上最大的數(shù)位產(chǎn)品公司有跟很多知名企業(yè)的產(chǎn)品做連動(dòng)，可以透過(guò)Plugin 或是軟體內(nèi)進(jìn)行協(xié)作，頻繁地更新也讓Xd 與第三方工具間的相容性更好。

Adobe Xd 的部分合作第三方工具。

Sketch 的部分合作第三方工具。

相較之下Sketch 顯得更新創(chuàng)感一點(diǎn)，因此有很多數(shù)位產(chǎn)品開發(fā)上很貼心的設(shè)計(jì)，也跟時(shí)下最新的生產(chǎn)力工具整并在一起，比如說(shuō)可以用版控Abstract 或是Plant 等，在GitHub上面也有許多獨(dú)立開發(fā)者所制作的外掛可以使用。

由于各自支援的第三方工具青菜蘿卜都有，難分高下；如果團(tuán)隊(duì)在設(shè)計(jì)開發(fā)流程中有剛好能配合上的工具，在設(shè)計(jì)流程上就很加分。

最后的總結(jié)

「你覺得Sketch 還是Adobe XD 哪個(gè)比較好用？」

UI設(shè)計(jì)軟件領(lǐng)取

關(guān)注我頭條號(hào)：@UI設(shè)計(jì)學(xué)習(xí)視頻

回復(fù)關(guān)鍵詞：學(xué)習(xí)

即可獲取軟件。