一、首先介紹一下XD是什么

XD是adobe家的一款可以快速創(chuàng)建UI/UX的應(yīng)用，用戶可以在 Mac 和 Windows 10系統(tǒng)免費安裝和使用，現(xiàn)已經(jīng)支持Ps和Sketch文件的導(dǎo)入。

官方網(wǎng)址https://www.adobe.com/cn/products/xd.html 軟件的獲取和基礎(chǔ)教程都有。不過官方教程都是英文版的，對于英文不好的同學(xué)可能不是特別友好。

二、XD的好處

1.文件小 對于PS動輒上百兆的文件，XD是非常輕便了，整套文件幾十個畫板，最后才幾十兆的大小。

2.Mac 和 Windows 10系統(tǒng)兼容。相對于Sketch只能Mac系統(tǒng)使用，XD的使用平臺相對更寬放一些，用戶使用門檻相對較低。

3.一鍵裁切圖。使用PS進(jìn)行切圖工作一般是安裝插件，XD卻可一鍵切出各平臺iOS、Android、web所需切圖，省時省心。

三、軟件界面

1.啟動頁面

頁面上展示了幾種畫板類型，根據(jù)項目類型選擇相應(yīng)的畫板，或者自定義畫板大小。在XD中是使用一倍圖進(jìn)行設(shè)計，由于XD是矢量設(shè)計軟件，所以導(dǎo)出@2x、@3x也不會模糊不清。使用一倍圖設(shè)計的另一個好處就是對應(yīng)開發(fā)邏輯分辨率，開發(fā)同事可以直接使用，不需要再進(jìn)行px和pt/dp的單位換算。

了解基礎(chǔ)知識（Explore the basics）提供了一個基礎(chǔ)教程，可以根據(jù)提示來進(jìn)行操作，熟悉軟件，學(xué)習(xí)基礎(chǔ)操作。之前做了一個這部分的翻譯和演示，不過目前XD已經(jīng)是全中文版本，翻譯out了演示還可以看看。《Adobe XD入門教程翻譯+演示》

用戶界面套件（UI Kits）提供了一些系統(tǒng)組件可以下載直接使用，More UI Kits有一些大神的設(shè)計源文件可以拿來學(xué)習(xí)。

2.軟件初始界面

選擇初始畫布類型，點擊進(jìn)入初始界面。下圖標(biāo)示了工具欄和屬性欄。

3.基本工具使用

選擇工具：選擇移動頁面元素，快捷鍵v；雙擊形狀可添加／移動／刪除錨點，調(diào)整貝塞爾曲線。

矩形工具：創(chuàng)建頁面矩形元素，快捷鍵r；可在屬性欄設(shè)置大小／旋轉(zhuǎn)／顏色／透明度／圓角／邊界／陰影／模糊等屬性。

橢圓工具：創(chuàng)建頁面圓形元素，快捷鍵e；屬性同上，按住shift 畫出正圓；按住shift+alt從中心畫正圓（類似ps）。

直線段工具：創(chuàng)建線段元素，快捷鍵l；最近新增了描邊屬性和虛線功能。

鋼筆工具：快捷鍵p；類似ps／ai中的鋼筆工具，但是功能不如ps／ai完善。

文字工具：快捷鍵t，直接點擊輸入為點文本，滑動區(qū)域框輸入為區(qū)域文本；可互相轉(zhuǎn)換。最近新增的段落間距功能覺得很實用。

畫板工具：快捷鍵a，有各種設(shè)備的預(yù)設(shè)畫板，可以在畫板屬性設(shè)置柵格系統(tǒng)和網(wǎng)格系統(tǒng)，進(jìn)行輔助設(shè)計。

4.資源面板使用 （快捷鍵cmd+shift+y)

在資源面板中可以集中管理模型資源和符號。通過“資源”面板重復(fù)使用和編輯資源。創(chuàng)建符號，這樣對一個實例做出的編輯便會反映到整個項目中。在8月份更新中“資源”面板可以整理顏色、字符樣式和符號。只需進(jìn)行拖動，即可在列表視圖中重新排列其順序。

最后Thanks!!!

有時間會再做一下交互部分的演示～