寫在前面

本人在學了一年半平面設計之后（苦于不會畫畫，只會用軟件，沒做出個啥東西來），轉做的 iOS 開發，算是能寫點新手教程，如果您是職業設計師，就別對這篇文章抱太大希望啦。如果你是不會做 UI 的程序員（做 iOS 開發的最好），希望你能有所收獲。

如果你還沒裝上 Adobe Xd，鑒于現在的 Xd 預覽版并不收費，而國內的網絡環境又實在不利于我等從 Adobe 官網裝那個 Creative Cloud Desktop，我傳了一份到百度盤，戳鏈接下載吧。如果用不了的話，里面還有一份 Creative Cloud Installer，裝上 Creative Cloud Desktop 之后，可以在線安裝 Xd。Sketch 是收費軟件，就不給地址了。

這陣容！

在那個沒有 Sketch 的年代，Photoshop 作為圖像處理軟件之王，橫行了很久。Sketch 出現之后呢，雖然 Photoshop 依然在橫行，但是在 UI 這個領域，至少被 Sketch 沖擊地不輕。而 Photoshop 有自己的產品定位，就是做綜合功能最強大的 CG 軟件（實際上它也確實做到了），不能為了 Sketch 而改掉自己。等了好久終于等到今天！Adobe 出了一款和 Sketch 定位一模一樣的產品 —— Adobe Xd！

---

基礎

如果您已經會用 Sketch 的話，那是最好，如果是不會做 UI 的程序員的話……快去學一下噻（也只能湊合著看啦）

---

正文

Sketch & Xd

如圖，左邊是 Sketch，右邊是 Xd，我分別加入了一個初始的 iPhone 6 大小的 Artboard，別說兩邊界面基本一樣，就連用詞都沒差。

Sketch Insert

Sketch 把插入新元素這個功能放到了 Insert 里面，平時使用基本都是用快捷鍵的，雖然 Xd 也支持用快捷鍵來調用這些工具，但是默認左邊還有個邊欄一直放在這，和 Photoshop 如出一轍，要知道 Xd 的工具比 Photoshop 少的不是一點半點啊，個人感覺這個欄有點雞肋。

Xd 左欄

而 Sketch 那個豐富的頂部工具欄，在 Xd 里面被分拆了。如 Union、Subtract 等布爾運算，被放到了右側欄，Mask、Group 等功能，放到了軟件的頂部菜單欄里面，這使得 Xd 看起來更簡潔一些。不過無所謂，在兩個軟件里，這些功能都可以用快捷鍵使用。

Sketch 頂部工具欄
那么 Xd 的頂部放了什么呢
Xd Prototype
通過這個入口，加入了做原型的功能！一看就明了，有木有！ Xd Prototype

如果你是做 iOS 開發的，這些 Segue、Easing、Duration、TARGET 的用詞，不能再熟悉了，對開發人員不能再友好。

回到 Xd 的 Design 這個地方，我發現缺少了 Sketch 左邊那個圖層管理的列表，還是有些別扭。

一個較為復雜的 Sketch 項目

比如對于上面這個界面，如果沒有左邊這個管理界面的話，而如果這個東西又是別人做的，我必須要逐個點擊才知道誰和誰是一組的，就很麻煩。而且在 Xd 里面，不導出，你是不知道某一個圖層的名字的。

Xd Export

比如這么一個圓形，雖然導出的時候我可以更改它的命名，但是如果我有20個不同的圓，我可能會希望先全部命名好，再批量導出。

不過在導出的時候，除了文件命名這個事情之外，有一個地方 Xd 做的非常棒，那就是自動生成 1x、2x、3x 等不同尺寸。

Xd Export

雖然在 Sketch 里面我們可以給每一個圖層加一個 Slice，再給 Slice 設定導出的 1x、2x、3x，還是沒有 Xd 的這個解決方案好。針對 Android，Xd 也給了相應的從 ldpi 到 xxxhdpi 的六種規格。

Sketch Slice

當然也不是說 Sketch 的 Slice 就一無是處，繁瑣的東西它當然就自定義程度高一些。比如我們做了一個圓形，要導出一個左半圓和右半圓，那當然用 Slice 要方便的多。

除此之外，Sketch 還有安裝插件的功能，也憑借先發優勢積累了大量的資源和論壇內容。不知道可以做原型的 Xd 和它的好爸爸 Adobe，能不能有機會一舉殺入 Sketch 的陣地。

---

總結

因為我個人平時不做原型，對這個要求不高，所以現在 Xd 做原型的功能對我來說，簡單、夠用。
假設原型工具占了產品界面設計過程的 20%，那么 Adobe 可能會希望把以前的 PS + Sketch = 80% 的情況，變成 PS + Xd = 100% 吧。
就目前工作來說，我會嘗試開始用 Xd，遇到個別情況，Xd 不順手的話，會打開 Sketch，兩把刷子一起用，等時間長了，哪個更適合我就有概念了。相當長的一段時間內，我是不會刪掉 Sketch 的，就憑那些優質的 Sketch 資源，我也不會刪。
于個人喜好，雖然我忠愛 Adobe，但壟斷總是不好的，Sketch 堅挺住啊！

總結

以上是生活随笔為你收集整理的【设计】Adobe Xd 简明教程 对比 Sketch的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。