想必大家都已經(jīng)Adobe XD了，這是Adobe為UI和UX設(shè)計(jì)師們打造的一款超實(shí)用的免費(fèi)軟件！但是它具體是做什么的，又有哪些特色呢？

今天數(shù)藝君就來跟大家嘮嘮這款軟件吧！

1. 為 UI/UX 設(shè)計(jì)而生

從Adobe XD的軟件界面可以看到，該軟件摒棄了一切與UI/UX設(shè)計(jì)無關(guān)的功能。在Adobe XD中，有 大量可以極大提升UI/UX 設(shè)計(jì)工作效率的功能，這些功能在后面的章節(jié)中會逐一進(jìn)行講解。圖所示為Adobe XD的一個重要功能——重復(fù)網(wǎng)格。

2. 快速創(chuàng)建可交互原型

在Adobe XD中完成UI界面的設(shè)計(jì)工作后，可以直接在軟件中把這些界面快速鏈接起來，生成一個可交互的原型文檔，并且能簡單設(shè)置一些跳轉(zhuǎn)效果。

3. 更“現(xiàn)代化”的分享機(jī)制

在Adobe XD中，除了能一鍵導(dǎo)出2×、3×等設(shè)計(jì)稿外，還采用了一種更“現(xiàn)代化”的方式方便設(shè)計(jì)師們進(jìn)行團(tuán)隊(duì)協(xié)作。

因?yàn)锳dobe XD制作的是可交互原型，所以純靜態(tài)圖片已經(jīng)不能滿足團(tuán)隊(duì)成 員之間的溝通了，這時，Web實(shí)際上是一種更為便捷的方式。使用Adobe XD 設(shè)計(jì)完后，可以一鍵生成一個鏈接，團(tuán)隊(duì)成員可以通過該鏈接查看和評論設(shè)計(jì)文檔，并且可以直接進(jìn)行界面之間的交互跳轉(zhuǎn)體驗(yàn)。

4. 在移動設(shè)備上實(shí)時預(yù)覽

移動UI和UX都是在Mac或者PC桌面端進(jìn)行設(shè)計(jì)，但實(shí)際上卻是在移動設(shè)備上使用，很多情況下，在 桌面端看著不錯的設(shè)計(jì)，可能在移動端上并沒有達(dá)到最好的效果，所以能實(shí)時預(yù)覽移動設(shè)備上的效果是非常 必要的。Adobe XD提供了官方的APP，支持設(shè)計(jì)師在設(shè)計(jì)的時候?qū)崟r預(yù)覽設(shè)計(jì)效果，包括交互原型的設(shè)計(jì)效 果，同時支持iOS和Android系統(tǒng)。

5. 多應(yīng)用的無縫銜接

Adobe XD 提供了完整的設(shè)計(jì)功能，同時也可以非常方便地和其他設(shè)計(jì)軟件進(jìn)行無縫銜接。在Adobe XD中， 設(shè)計(jì)師可以直接導(dǎo)入PSD 和Sketch 的源文件，同時，越來越多的第三方應(yīng)用開始集成到或者支持Adobe XD，如Dropbox、Zeplin、Avocode、Sympli、ProtoPie 和 Kite Compositor 等。這樣可以讓設(shè)計(jì)師最大化利用這些軟件， 從而制作出一個最佳的設(shè)計(jì)文檔。圖所示為直接用Adobe XD打開一個Sketch文檔。

6. 雙系統(tǒng)支持

Sketch只支持Mac系統(tǒng)，這讓很多Windows 用戶非常無奈。但是，Adobe XD針對macOS和Windows進(jìn)行了原生應(yīng)用的研發(fā)，無論是Mac還是PC用戶，都可以無差別地使用Adobe XD，并且不同平臺之間的文檔都是通用的。

7. 一款與時俱進(jìn)的軟件

Adobe XD 最早在2015年出現(xiàn)，在2016 年發(fā)布了Beta版，可以說是一款非?！澳贻p”的設(shè)計(jì)軟件。Adobe XD從Beta版發(fā)布到現(xiàn)在，一直保持每月發(fā)布一個新版本的迭代頻率，在Adobe XD的官方博客上，可以看到對每個新版本的變更介紹，如圖所示。截至目前，Adobe XD的界面和功能基本上已經(jīng)穩(wěn)定下來，盡管Adobe保留著每月一更新的頻率，但相信本書的內(nèi)容依然在相當(dāng)長的時間內(nèi)適用于Adobe XD的最新版本。

8. 免費(fèi)

從Adobe XD發(fā)布開始，Adobe公司就對其寄予厚望，并且對外宣稱 Adobe XD 為其公司的旗艦產(chǎn)品，而 現(xiàn)在，更令人興奮的是，Adobe XD已經(jīng)免費(fèi)了。

免費(fèi)版的Adobe XD具備完整的產(chǎn)品功能， 并且沒有任何時效的限制。對于這樣一款功能強(qiáng)大卻免費(fèi)的軟件，你有什么理由不來了解一下呢？

實(shí)驗(yàn)器材圖標(biāo)設(shè)計(jì)

我們用Adobe XD來畫一個彩色扁平圖標(biāo)吧！

1.按快捷鍵E 激活“橢圓”工具，然后按住Shift 鍵繪制一個500px×500px 的圓，并去掉“邊界”，接著 將填充色設(shè)置為 #2DC9D0，如圖所示。

2.按快捷鍵R 激活“矩形”工具，繪制一個80px×10px 的矩形，并去掉“邊界”，然后將填充色設(shè)置為 #FFFFFF，接著將矩形的圓角半徑設(shè)置為 5px，最后將其移動至合適的位置，如圖所示。

3.按快捷鍵R激活“矩形”工具，繪制一個50px×120px的矩形，并去掉“邊界”，然后將填充色設(shè)置為#FFFFFF，接著將其移動至合適的位置，如圖所示。

4.按快捷鍵E激活“橢圓”工具，然后按住Shift鍵繪制一個 220px×220px 的圓，并去掉“邊界”，接著 將填充色設(shè)置為#FFFFFF，最后將其移動至合適的位置，如圖所示。

5.按快捷鍵command+D（macOS系統(tǒng)）/Ctrl+D（Windows 系統(tǒng)）復(fù)制一個圓，然后將復(fù)制的圓的大小調(diào) 整為 200px×200px，接著將填充色設(shè)置為 #FFCE35，最后使其和底部的圓居中對齊，如圖所示。

6.按快捷鍵R激活“矩形”工具，繪制一個200px×80px的矩形，然后移動到圖所示的位置，確保矩形在黃色圓的上方。

7.選中矩形和下方的黃色圓形，按快捷鍵option+command+S（macOS 系統(tǒng)）/Ctrl+Alt+S（Windows 系統(tǒng)）對其執(zhí)行減去頂層布爾運(yùn)算，如圖所示。

8.按快捷鍵 E 激活“橢圓”工具，然后按住 Shift 鍵繪制一個 40px×40px 的圓，并去掉“邊界”，接著將 填充色設(shè)置為#FFFFFF，最后將其移動至合適的位置，如圖所示。

9.采用同樣的方式繪制一個16px×16px的圓，并將其移動至合適的位置，如圖所示。

10.按快捷鍵V激活“選擇”工具，然后用“選擇”工具選中40px×40px 的圓，并按住option 鍵（macOS 系統(tǒng)）/Alt 鍵（Windows 系統(tǒng)）拖曳，可以復(fù)制并移動圓形圖層，接著將復(fù)制的圓形移動至合適的位置，最后 將填充色設(shè)置為 #FFCE35，如圖所示。

11.用“橢圓”工具繪制或者直接采用拖曳的方式復(fù)制一個圓，并將尺寸調(diào)整為16px×16px，然后將填充 色設(shè)置為#FFCE35，接著將其移動至合適的位置，如圖所示。

選中除藍(lán)色底以外的所有圖層，然后按快捷鍵 command+G（macOS）/Ctrl+G（Windows 系統(tǒng)）進(jìn)行編組， 接著將圖層組調(diào)整至和底部藍(lán)色圓居中對齊，完成實(shí)驗(yàn)器材圖標(biāo)的設(shè)計(jì)。