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

首先：

請(qǐng)查看左下角的尺寸

這是一個(gè)簡單的公眾號(hào)頁面，大小高達(dá)580MB。

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

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

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

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

1.圖標(biāo)：

在瀏覽器中打開安裝程序

瀏覽器中會(huì)出現(xiàn)一個(gè)徽標(biāo)，單擊它。

點(diǎn)擊后會(huì)跳轉(zhuǎn)到阿里巴巴圖標(biāo)庫。

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

選擇一個(gè)圖標(biāo)并將鼠標(biāo)移到它上面：

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

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

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

如果選擇一個(gè)圖標(biāo)組并在拖動(dòng)時(shí)按住 Shift，則可以縮放圖標(biāo)大小。

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

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

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

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

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

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

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

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

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

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

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

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

4. 共享問題

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

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

5.切割

PS的局部摳圖就不多說了，PS的藍(lán)湖摳圖需要選中圖層，點(diǎn)擊藍(lán)湖插件里的摳圖按鈕，就可以標(biāo)注為摳圖了，在XD里上傳藍(lán)湖摳圖很簡單。

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

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

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

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

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