提示：閱讀本文前建議先從《碼農與產品經理看過來-教你用Adobe Xd輕鬆做原型設計^_^》文章入手，會更加學度的掌握此建模神器的精髓http://www.zoomla.cn/blog/techs/3080.shtml

逐浪小子注：面向雲，面向未來。

Adobe Experience Design CC（簡稱adobe XD)是基於向量用於WEB、移動應用設計和原型的使用者體驗設計的工具。集線框圖，視覺設計，互動設計，原型製作，預覽和共享輕鬆切換於一體的一個強大的工具。

如果您認為這Adobe XD僅僅是一款原型設計工具，那就太幼稚了，樸素的原教旨主義者們，信奉簡潔就是一切，其實也可以用它進行諸如LOGO創作等經驗，下面我們來作一次講解。

　　首先來看看Xd如何繪製一個圖示。

　　1、開啟Xd，在歡迎介面選擇Custom size，輸入500*500尺寸，如下圖所示。

　2、目前Xd的功能還非常簡陋，繪製圖標能用的工具只有本教材第一部分中所介紹到的幾款工具以及布林運算工具，但利用這些工具也可以足夠我們繪製一些漂亮的圖示，如下圖所示。

3、在畫布上使用快捷鍵E，選擇橢圓工具，按下shift鍵在畫板上繪製一個正圓，如下圖所示

　　4、快捷鍵command+D，複製該圖層，然後按住shift+option鍵，並拖動滑鼠，縮小複製的正圓，縮小到合適的尺寸即可，可以參考下圖中的數值。

　　5、快捷鍵P，使用鋼筆工具，將鋼筆工具移動到和小圓底部平行，但是在大圓的邊緣，當移動到合適位置軟體自動會出現一條藍色參考線，如下圖所示。（此處滑鼠是鋼筆的造型，因為截圖無法顯示滑鼠，為了讓大家看清手動添加了一個指標）

　6、按下滑鼠，然後在圓的下方單擊，然後回到右側大圓邊緣，當和第一個錨點平行時會自動出參考線，單擊，然後再在第一個錨點處閉合圖形，繪製一個三角形，如下圖所示。

　　7、此時三角形的最底部的錨點並未和上面的圓居中，用鋼筆工具單擊該錨點，然後使用鍵盤上的左右方向鍵移動錨點位置。若三角形的左右兩條邊和大圓有相交而非相切，則應使用上下方向鍵移動錨點位置讓其相切。Xd目前功能非常不完善，要完全居中需要非常大的耐心。大家也可以看右側檢查器中的各錨點的座標去計算出來。具體的計算方法如下：

• 　　A：檢視三角形右邊端點的X軸數值，檢視三角形左邊端點的X軸數值。

• 　　B：用右邊的數值減去左邊的數值，除以2，再加上左邊的數值，即得出最下方的錨點的X軸數值。

　　調整好後效果如下圖所示。

　　8、快捷鍵V，使用選擇工具框選全部圖層，然後將圖層的填充色設定為紅色，如下圖所示。

　　9、選擇大圓和小圓圖層，單擊右側檢查器中布林運算工具中的第二個工具——減掉頂層工具。如下圖所示。若要對大小圓的相對位置和小圓尺寸進行修改，再次單擊布林運算工具即可取消布林運算，此時即可調整圖層。

　　10、選擇圓圈和三角形圖層，執行布林運算工具中的合併圖層工具合併兩個圖層。基本上圖示繪製完成，然後從視覺上考慮，取消描邊，單擊Border旁邊的眼睛圖示即可。如下圖所示。

　　TIPS：

　　1、在繪製圖標時沒有給圖示填充，是因為線條更方便我們精確對齊。

　　2、要得到儘可能精確對齊的圖示，建議繪製時儘可能放大畫布檢視對齊情況，Mac上可以雙指縮放觸控板對畫布進行縮放。

　　3、Xd目前無法對線條的端點進行設定，線條的端點只能是直角。

　　4、Xd暫時只能繪製可以通過布林運算得出的簡單圖示，更復雜的圖示還是建議使用AI或者Sketch繪製後再匯入Xd，關於匯入方法後文會介紹。

　　注：更多圖示教程可以檢視茂趣之前分享的：PS畫一個可愛的小鳥圖示教程、【UI教程】人類史上最簡單的圖示教程第一課、【UI教程】人類史上最簡單的圖示教程第二課、【UI教程】史上最簡單的圖示教程第7課

　　Adobe Experience Design CC 應用介面的設計

　　在進行介面繪製之前，我們可以在歡迎介面單擊UI KITS部分的內容，檢視軟體自帶的一些系統介面，如下圖所示是iOS的內容。裡面的內容均可編輯和複製使用。

　　Xd暫時設計方面的功能相對較少，不是特別建議大家全部使用Xd進行UI介面的設計，在介面部分我只講一下Xd中非常強大的Repeat Grid（重複格）功能。

　　1、在歡迎介面中，開啟範例文件，複製其中“Campvibes - Home”，複製快捷鍵為command+C，然後回到我們所建立圖示的文件，使用command+V進行貼上。如下圖所示。

　　2、選中LATEST ADVENTURES下方的圖層組，單擊檢查器中的Repeat Grid按鈕，可以看到圖層組的選中狀態由之前的八個錨點的框變為了如下圖所示狀態。

　　3、拖動白色的圓角矩形，即可發現會自動複製該圖層組，且不僅可以向下拖動，也可以向右拖動，如下圖所示。

　　4、將滑鼠移動到圖層組的間隙上間隙會變成紫色，按下滑鼠並拖動即可調整圖層間間隔大小，如下圖所示。

　　5、選中單個圖層，如文字圖層，調整任意文字圖層的樣式，即可發現通過此方法複製的圖層組中所有的文字樣式都已經同步進行變更，如下圖所示。

　　6、按住command+shift鍵，批量選擇圖層組中所有的圖片，然後從Finder中找到需要替換的圖片，全選後拖動到Xd中，即可批量進行替換，如下圖所示。

　　7、使用快捷鍵A，新建一個畫板，然後快捷鍵E，繪製一個正圓，如下圖所示。

　　8、從Finder中找到圖片檔案，拖動到正圓中，即可發現該正圓自動用該圖片進行填充。如下圖所示。

　　9、快捷鍵R，使用矩形工具建立一個正方形，填充為黃色，並從Finder中拖入一張圖片，如下圖所示。

　　10、選中這兩個圖層，然後使用快捷鍵command+shift+M或單擊選單欄中Object-Mask with sharp，即可將該正方形設定為剪下蒙版。如下圖所示。

　　11、對該蒙版圖層雙擊，即可進入編輯模式，可以任意調整圖層的尺寸和位置，調整完成後滑鼠點選任意其他區域退出編輯，如下圖所示。

　　12、快捷鍵T，輸入任意文字，然後使用快捷鍵command+8或單擊選單欄中Object-Path-Convert to Path，即可將該文字轉變為輪廓，如下圖所示。

　　TIPS：

　　現階段Xd的功能極為有限，目前來看可以將Xd定位於原型圖設計軟體，但是如果是UI設計軟體還差的有點遠。不過相信隨著時間的推移，Xd的功能也一定會越來越多，可能後續還是會具備非常強大的設計功能。