想必大家都已經(jīng)Adobe XD了，這是Adobe為UI和UX設(shè)計(jì)師們打造的一款超實(shí)用的免費(fèi)軟件！但是它具體是做什么的，又有哪些特色呢？
今天數(shù)藝君就來(lái)跟大家嘮嘮這款軟件吧！
1. 為 UI/UX 設(shè)計(jì)而生
從Adobe XD的軟件界面可以看到，該軟件摒棄了一切與UI/UX設(shè)計(jì)無(wú)關(guān)的功能。在Adobe XD中，有 大量可以極大提升UI/UX 設(shè)計(jì)工作效率的功能，這些功能在后面的章節(jié)中會(huì)逐一進(jìn)行講解。圖所示為Adobe XD的一個(gè)重要功能——重復(fù)網(wǎng)格。
2. 快速創(chuàng)建可交互原型
在Adobe XD中完成UI界面的設(shè)計(jì)工作后，可以直接在軟件中把這些界面快速鏈接起來(lái)，生成一個(gè)可交互的原型文檔，并且能簡(jiǎn)單設(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ì)成 員之間的溝通了，這時(shí)，Web實(shí)際上是一種更為便捷的方式。使用Adobe XD 設(shè)計(jì)完后，可以一鍵生成一個(gè)鏈接，團(tuán)隊(duì)成員可以通過(guò)該鏈接查看和評(píng)論設(shè)計(jì)文檔，并且可以直接進(jìn)行界面之間的交互跳轉(zhuǎn)體驗(yàn)。
4. 在移動(dòng)設(shè)備上實(shí)時(shí)預(yù)覽
移動(dòng)UI和UX都是在Mac或者PC桌面端進(jìn)行設(shè)計(jì)，但實(shí)際上卻是在移動(dòng)設(shè)備上使用，很多情況下，在 桌面端看著不錯(cuò)的設(shè)計(jì)，可能在移動(dòng)端上并沒(méi)有達(dá)到最好的效果，所以能實(shí)時(shí)預(yù)覽移動(dòng)設(shè)備上的效果是非常 必要的。Adobe XD提供了官方的APP，支持設(shè)計(jì)師在設(shè)計(jì)的時(shí)候?qū)崟r(shí)預(yù)覽設(shè)計(jì)效果，包括交互原型的設(shè)計(jì)效 果，同時(shí)支持iOS和Android系統(tǒng)。
5. 多應(yīng)用的無(wú)縫銜接
Adobe XD 提供了完整的設(shè)計(jì)功能，同時(shí)也可以非常方便地和其他設(shè)計(jì)軟件進(jìn)行無(wú)縫銜接。在Adobe XD中， 設(shè)計(jì)師可以直接導(dǎo)入PSD 和Sketch 的源文件，同時(shí)，越來(lái)越多的第三方應(yīng)用開始集成到或者支持Adobe XD，如Dropbox、Zeplin、Avocode、Sympli、ProtoPie 和 Kite Compositor 等。這樣可以讓設(shè)計(jì)師最大化利用這些軟件， 從而制作出一個(gè)最佳的設(shè)計(jì)文檔。圖所示為直接用Adobe XD打開一個(gè)Sketch文檔。
6. 雙系統(tǒng)支持
Sketch只支持Mac系統(tǒng)，這讓很多Windows 用戶非常無(wú)奈。但是，Adobe XD針對(duì)macOS和Windows進(jìn)行了原生應(yīng)用的研發(fā)，無(wú)論是Mac還是PC用戶，都可以無(wú)差別地使用Adobe XD，并且不同平臺(tái)之間的文檔都是通用的。
7. 一款與時(shí)俱進(jìn)的軟件
Adobe XD 最早在2015年出現(xiàn)，在2016 年發(fā)布了Beta版，可以說(shuō)是一款非?！澳贻p”的設(shè)計(jì)軟件。Adobe XD從Beta版發(fā)布到現(xiàn)在，一直保持每月發(fā)布一個(gè)新版本的迭代頻率，在Adobe XD的官方博客上，可以看到對(duì)每個(gè)新版本的變更介紹，如圖所示。截至目前，Adobe XD的界面和功能基本上已經(jīng)穩(wěn)定下來(lái)，盡管Adobe保留著每月一更新的頻率，但相信本書的內(nèi)容依然在相當(dāng)長(zhǎng)的時(shí)間內(nèi)適用于Adobe XD的最新版本。
8. 免費(fèi)
從Adobe XD發(fā)布開始，Adobe公司就對(duì)其寄予厚望，并且對(duì)外宣稱 Adobe XD 為其公司的旗艦產(chǎn)品，而 現(xiàn)在，更令人興奮的是，Adobe XD已經(jīng)免費(fèi)了。
免費(fèi)版的Adobe XD具備完整的產(chǎn)品功能， 并且沒(méi)有任何時(shí)效的限制。對(duì)于這樣一款功能強(qiáng)大卻免費(fèi)的軟件，你有什么理由不來(lái)了解一下呢？
實(shí)驗(yàn)器材圖標(biāo)設(shè)計(jì)
我們用Adobe XD來(lái)畫一個(gè)彩色扁平圖標(biāo)吧！
1.按快捷鍵E 激活“橢圓”工具，然后按住Shift 鍵繪制一個(gè)500px×500px 的圓，并去掉“邊界”，接著 將填充色設(shè)置為 #2DC9D0，如圖所示。
2.按快捷鍵R 激活“矩形”工具，繪制一個(gè)80px×10px 的矩形，并去掉“邊界”，然后將填充色設(shè)置為 #FFFFFF，接著將矩形的圓角半徑設(shè)置為 5px，最后將其移動(dòng)至合適的位置，如圖所示。
3.按快捷鍵R激活“矩形”工具，繪制一個(gè)50px×120px的矩形，并去掉“邊界”，然后將填充色設(shè)置為#FFFFFF，接著將其移動(dòng)至合適的位置，如圖所示。
4.按快捷鍵E激活“橢圓”工具，然后按住Shift鍵繪制一個(gè) 220px×220px 的圓，并去掉“邊界”，接著 將填充色設(shè)置為#FFFFFF，最后將其移動(dòng)至合適的位置，如圖所示。
5.按快捷鍵command+D（macOS系統(tǒng)）/Ctrl+D（Windows 系統(tǒng)）復(fù)制一個(gè)圓，然后將復(fù)制的圓的大小調(diào) 整為 200px×200px，接著將填充色設(shè)置為 #FFCE35，最后使其和底部的圓居中對(duì)齊，如圖所示。
6.按快捷鍵R激活“矩形”工具，繪制一個(gè)200px×80px的矩形，然后移動(dòng)到圖所示的位置，確保矩形在黃色圓的上方。
7.選中矩形和下方的黃色圓形，按快捷鍵option+command+S（macOS 系統(tǒng)）/Ctrl+Alt+S（Windows 系統(tǒng)）對(duì)其執(zhí)行減去頂層布爾運(yùn)算，如圖所示。
8.按快捷鍵 E 激活“橢圓”工具，然后按住 Shift 鍵繪制一個(gè) 40px×40px 的圓，并去掉“邊界”，接著將 填充色設(shè)置為#FFFFFF，最后將其移動(dòng)至合適的位置，如圖所示。
9.采用同樣的方式繪制一個(gè)16px×16px的圓，并將其移動(dòng)至合適的位置，如圖所示。
10.按快捷鍵V激活“選擇”工具，然后用“選擇”工具選中40px×40px 的圓，并按住option 鍵（macOS 系統(tǒng)）/Alt 鍵（Windows 系統(tǒng)）拖曳，可以復(fù)制并移動(dòng)圓形圖層，接著將復(fù)制的圓形移動(dòng)至合適的位置，最后 將填充色設(shè)置為 #FFCE35，如圖所示。
11.用“橢圓”工具繪制或者直接采用拖曳的方式復(fù)制一個(gè)圓，并將尺寸調(diào)整為16px×16px，然后將填充 色設(shè)置為#FFCE35，接著將其移動(dòng)至合適的位置，如圖所示。
選中除藍(lán)色底以外的所有圖層，然后按快捷鍵 command+G（macOS）/Ctrl+G（Windows 系統(tǒng)）進(jìn)行編組， 接著將圖層組調(diào)整至和底部藍(lán)色圓居中對(duì)齊，完成實(shí)驗(yàn)器材圖標(biāo)的設(shè)計(jì)。
聯(lián)系客服
