想必大家都已經(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)用開(kāi)始集成到或者支持Adobe XD,如Dropbox、Zeplin、Avocode、Sympli、ProtoPie 和 Kite Compositor 等。這樣可以讓設(shè)計(jì)師最大化利用這些軟件, 從而制作出一個(gè)最佳的設(shè)計(jì)文檔。圖所示為直接用Adobe XD打開(kāi)一個(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ō)是一款非常“年輕”的設(shè)計(jì)軟件。Adobe XD從Beta版發(fā)布到現(xiàn)在,一直保持每月發(fā)布一個(gè)新版本的迭代頻率,在Adobe XD的官方博客上,可以看到對(duì)每個(gè)新版本的變更介紹,如圖所示。截至目前,Adobe XD的界面和功能基本上已經(jīng)穩(wěn)定下來(lái),盡管Adobe保留著每月一更新的頻率,但相信本書(shū)的內(nèi)容依然在相當(dāng)長(zhǎng)的時(shí)間內(nèi)適用于Adobe XD的最新版本。
8. 免費(fèi)
從Adobe XD發(fā)布開(kāi)始,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)畫(huà)一個(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ì)。
延伸閱讀
更多內(nèi)容可以購(gòu)買(mǎi)《Adobe XD 功能解析與應(yīng)用》詳細(xì)閱讀哦!
作者:黃方聞
出版社:人民郵電出版社
出版年:2019年5月
ISBN :978-7-115-50847-8
還有PS通識(shí)課程,零基礎(chǔ)也可也學(xué)好PS,了解詳情點(diǎn)擊:https://www.shuyishe.com/courseDetails?id=PCC2c5a36b554&userCommend=33283
加入數(shù)藝社交流群
設(shè)計(jì)素材下載 學(xué)習(xí)視頻資源
讀者交流學(xué)習(xí) 圖書(shū)售后服務(wù)
軟件安裝指導(dǎo) 讀者意見(jiàn)反饋
數(shù)藝社QQ群:
PS學(xué)習(xí)交流群:826043343
手繪學(xué)習(xí)群:931044260
版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請(qǐng)發(fā)送郵件至 舉報(bào),一經(jīng)查實(shí),本站將立刻刪除。