前言：多年從事UI設(shè)計，我們一直被這樣的困擾：畫板太多sketch.im 打不開了，源文件就會很大，占用電腦資源，對電腦配置要求高，容易崩潰。自從Adobe XD推出后，UI設(shè)計師在APP\WEB\小程序設(shè)計時都可以使用Adobe XD，會大大減少PS源文件過大導(dǎo)致的電腦資源占用和卡頓問題。我們來看看和XD中兩個相同源文件的資源大小對比。

首先：

請查看左下角的尺寸

這是一個簡單的公眾號頁面，大小高達580MB。

接下來看一下XD版的APP界面：

它的大小變成了339kb，是的，KB。

相比源文件的大小sketch.im 打不開了，電腦操作的流暢度很高，Adobe號稱是提升設(shè)計效率5倍的工具，但它并不能完全取代PS，在圖片合成的時候還是需要依賴它，目前XD的功能還在不斷完善更新，比如漸變方面，XD只能實現(xiàn)兩種顏色的漸變效果，而PS中的漸變效果是多種顏色的組合。

下面詳細介紹XD在實際UI設(shè)計中的一些基本功能。

1.圖標：

在瀏覽器中打開安裝程序

瀏覽器中會出現(xiàn)一個徽標，單擊它。

點擊后會跳轉(zhuǎn)到阿里巴巴圖標庫。

（之前用PS的時候，要從阿里巴巴獲取圖標，需要下載png或者AI文件，然后只能修改顏色或者在AI里修改，再復(fù)制到PS里，比較麻煩。安裝了Axhub icons+adobe XD之后，這樣的操作就會簡單很多。）

選擇一個圖標并將鼠標移到它上面：

提示成功后，就可以返回XD按ctrl+V進行粘貼了。

該圖標將作為分組形狀層出現(xiàn)在畫布中。

如果不按shift鍵修改圖標，則只會修改圖標組中的圖層自適應(yīng)位置。

如果選擇一個圖標組并在拖動時按住 Shift，則可以縮放圖標大小。

由于從 Axhub icons 復(fù)制的圖標是一組形狀圖層，因此我們可以選擇形狀圖層來修改顏色和其他屬性。

上述方法使用XD實現(xiàn)比使用PS方便得多。

2.重復(fù)網(wǎng)格：

使用重復(fù)網(wǎng)格有助于提高列表布局的準確性。

首先，我們在 XD 中創(chuàng)建一個新列表并將其分組：

然后點擊右上角的重復(fù)網(wǎng)格。

當(dāng)綠線出現(xiàn)時，我們將其向下拖動。

會生成一個列表，此時如果想單獨修改某一項的文字位置，必須取消【重復(fù)網(wǎng)格】，取消之后會生成多個列表項，也就是一個分組。

3. 重復(fù)用數(shù)據(jù)填充網(wǎng)格。

我們需要在PS中逐一填寫每一列假數(shù)據(jù)，非常耗時，這時候就需要利用XD中的重復(fù)網(wǎng)格，將TXT文件拖進去，就能生成所有的真實數(shù)據(jù)。

我選擇段落，下載到桌面，并將txt文件拖到設(shè)計稿的文本區(qū)域。

需要填寫的數(shù)據(jù)將會被一次性填寫。

4. 共享問題

畫完設(shè)計稿之后，想把交互分享出來，但是發(fā)現(xiàn)錯誤。

如果一定要用XD來分享的話，目前的解決方案是重新注冊一個Adobe賬號，選擇國外地點，并且年滿18歲才能使用分享功能。其實習(xí)慣使用Blue Lake的朋友也可以上傳到Blue Lake進行互動。

5.切割

PS的局部摳圖就不多說了，PS的藍湖摳圖需要選中圖層，點擊藍湖插件里的摳圖按鈕，就可以標注為摳圖了，在XD里上傳藍湖摳圖很簡單。

選中圖標或者圖標組，點擊右側(cè)屬性欄中的【添加導(dǎo)出標記】。

然后將畫布上傳到Blue Lake，圖標就可以被前端下載。

選擇對應(yīng)的Blue Lake項目，使用Blue Lake XD桌面軟件，選擇畫布，點擊上傳，就可以了。

今天的XD教程就分享到這里，明天繼續(xù)，有問題可以留言或者私信。

如有侵權(quán)請聯(lián)系刪除！