茂趣注：Adobe XD剛出來沒多久，就有了教程，真是驚喜，感謝偉大的IXDC作者黃方聞。MAC用戶早就體驗上了，PC用戶據說年底前會有得用。

首先來看看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的功能也一定會越來越多，可能後續還是會具備非常強大的設計功能。

現階段界面的設計還是建議大家使用Sketch或PS等其他軟件完成。

來源:IXDC，作者黃方聞。

本文由茂趣創意（ID：maofuns）原創編輯整理，圖片版權歸Girl Grey Beauty所有。轉載請注明出處，違者必究，謝謝你的合作。注明出處格式：來源公衆号茂趣創意（ID：maofuns）

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!