新神器 ADOBE XD真的吊打 SKETCH 嗎？

天津國家軟體進出口基地設計主管趙一說

最近大家都知道的，Sketch與 Adobe 爸爸又開始撕逼了。自 Sketch 發布以來，一直都是被冠以『專業的 UI 設計工具』、『UI 設計好用遠超 PS』這樣的名頭。並且越來越多的界面設計師轉向了 Sketch 的懷抱當中。終於，在這個新年頭，Adobe 爸爸坐不住了…發布了最近炒的火熱的神器：

XD

是吧

首先是 XD 的下載官網：http://www.adobe.com/products/experience-design.html

然後需要有一個叫做Adobe Creative Cloud 的軟體，對 XD進行下載與更新。另外 XD 是沒有 Windows 版本的，所以故事的開頭就變成了：

首先，你得先有個……Mac

讓美丫姐帶著你們先看看官方的視頻吧：

比較有亮點的地方，一來是整個 XD 界面樣式走的十份簡單直白。告別了類似 PS/AI/AE 這類常用軟體所給我們的印象。如果說 PS 這類是集大成者，像是一部大部頭的書，那麼 這次 XD 就像是一則使用說明，專攻一個方向。二來，就是大家可以看到的設計與原型製作的相互結合。一個 tab 切換兩種模式，方便快捷。對於需要快速溝通的中小型團隊，簡直大愛。

並且，後面的鏈接分享的預覽效果也是超贊。（後面會附錄一個設計作品的案例，就可以直接掃描觀看效果）溝通起來也是超方便，

但是，單看軟體界面的精緻程度來說的話。還是前輩 Sketch 來的比較精緻一些，不過 XD 後面可是有著龐大 Adobe 家族在撐腰的，繼續迭代下去也是前途不可估量。

讓我們用簡單的操作來看看 XD 所設計到的一些功能。

（以下資料圖片來自：http://www.sitepoint.com/）

簡單的工具部分

上圖對此也進行了對比，XD 保留了 Adobe 的傳統將工具欄放在了左側。用慣了 PS 的人一看就知道這些圖標代表了什麼含意。完全不用擔心有識別的問題，相比之下 Sketch 這塊展示的更佳清晰。

右邊則是對象的編輯欄

一些不痛不癢的編輯功能，畫個矢量 ICON 什麼的 還是夠夠的了。這點兩者差不多…不過Sketch 的線上各類逆天插件還是 XD 暫時無法逾越的。

快捷的布爾運算

畫 ICON 必備的功能之一，一直覺得無論是 Sketch 還是 XD 裡面的布爾工具都比 PS 裡面的好用。切吧切吧，小 ICON 就出來了。

網格工具

這個就比較逆天了，繪製一個單元格之後，選擇網格工具。你再對物體進行拖拽，則會複製出多個單元格。大小與間距都保持了一直（如圖二）。這種輕量級但是又會被高頻使用到的小工具，就是界面設計師選擇它們而拋棄 PS 的願意之一吧。

殺雞焉用宰牛刀？

快捷的分享方式

如果是想要快速溝通，XD 可以直接生成一個小鏈接。Copy 下來之後發送給對方就可以直接對你的項目進行預覽了！保留了上面的設計與交互效果，基本與實際使用無異。

迅速構建原型結構

對於頁面的層級結構，XD 也是可以通過拖拽關聯線的方式進行跳轉。但是也僅僅是跳轉而已，展示簡單的頁面關係就點到為止了。並沒有什麼過多的動畫效果在裡面，相比

Origami、Hype 來說就弱爆了，當然也沒啥可比性。

頁面效果也可以比較快速的預覽出來。

總得來說，美丫姐個人覺得 XD 的出現是 Adobe 的占坑行為。功能上並沒有太多的亮點，剛出來外部插件也無法快速跟進。相比 Sketch 來說，還是要弱一些的。推出的原型工具部分，單例拿出說也沒啥亮點。但好就好在 Adobe 爸爸的信徒比較多，隨便丟出一個顏文字 XD 就引得一堆人關注。

你我不都屁顛屁顛去下載了么！

再說按照 Adobe 爸爸軟體的精良程度，以後的發展也是具有無限可能的。

下面是網上用 XD 製作的 App 案例展示。長按下面的二維碼可以感受一下頁面的操作效果與流程。只能跳轉而沒有任何動畫效果，看起來也是有點心酸的…

（長按掃碼預覽案例）

https://xd.adobe.com/view/0682043a-c0f4-427a-6eef-d750138abc39/ (二維碼自動識別)