課程介紹

詳細(xì)講解如何使用Adobe完成圖標(biāo)、界面的繪制和設(shè)計(jì)。

通過本課程，您可以熟練使用該軟件的工具。 內(nèi)文包含導(dǎo)師的經(jīng)驗(yàn)和溫馨提示。

為人

已經(jīng)有使用經(jīng)驗(yàn)、熟悉基本UI設(shè)計(jì)知識的設(shè)計(jì)師和產(chǎn)品經(jīng)理。

軟件安裝及工具使用說明：

歡迎加入QQ群：與講師交流學(xué)習(xí)！ 中文視頻教程正在更新中。

Adobe CC 圖標(biāo)的繪制

首先我們來看看Xd是如何繪制圖標(biāo)的。

1、打開Xd，在歡迎界面選擇尺寸，輸入500*500的尺寸，如下圖。

2、目前Xd的功能還很初級。 能夠用來繪制圖標(biāo)的工具只有本書第一部分介紹的幾個(gè)工具和布爾運(yùn)算工具。 不過，使用這些工具也足以讓我們繪制一些漂亮的圖標(biāo)，如下圖所示。

3、在畫布上使用快捷鍵E，選擇橢圓工具，按下shift鍵在畫板上畫一個(gè)正圓，如下圖所示。

4、按快捷鍵+D復(fù)制圖層，然后按住shift+鍵拖動鼠標(biāo)將復(fù)制的正圓縮小到合適的大小。 可以參考下圖中的數(shù)值。

5.按快捷鍵P，使用鋼筆工具，將鋼筆工具平行移動到小圓的底部，但在大圓的邊緣，移動到合適的位置時(shí)，軟件會自動出現(xiàn)一個(gè)藍(lán)色參考線，如下圖所示。 （這里的鼠標(biāo)是筆的形狀，因?yàn)榻貓D中無法顯示鼠標(biāo)，所以手動添加了一個(gè)指針，方便大家看清楚）

6. 按下鼠標(biāo)，然后單擊圓圈下方，然后返回到右側(cè)大圓圈的邊緣。 當(dāng)與第一個(gè)錨點(diǎn)平行時(shí)，引導(dǎo)線會自動出現(xiàn)，單擊，然后在第一個(gè)錨點(diǎn)處將其關(guān)閉。 在圖形上，繪制一個(gè)三角形，如下所示。

7. 此時(shí)，三角形的底部錨點(diǎn)不以上部圓為中心。 使用鋼筆工具單擊錨點(diǎn)，然后使用鍵盤上的左右箭頭鍵移動錨點(diǎn)位置。 如果三角形的左右邊與大圓相交而不是相切，則應(yīng)使用向上和向下箭頭鍵移動錨點(diǎn)，使它們相切。 Xd 目前還很不完善，需要很大的耐心才能完全居中。 您還可以通過查看右側(cè)檢查器中每個(gè)錨點(diǎn)的坐標(biāo)來計(jì)算它。 具體計(jì)算方法如下：

A：檢查三角形右端點(diǎn)的X軸值，檢查三角形左端點(diǎn)的X軸值。

B：右邊的值減去左邊的值，除以2，加上左邊的值，得到底部錨點(diǎn)的X軸值。

調(diào)整后的效果如下圖所示。

8、按快捷鍵V，使用選擇工具選擇所有圖層，然后將圖層的填充顏色設(shè)置為紅色，如下圖所示。

9. 選中大圓和小圓圖層，然后單擊右側(cè)檢查器中布爾運(yùn)算工具中的第二個(gè)工具——頂部減去工具。 如下所示。 如果要修改大小圓的相對位置以及小圓的大小，再次單擊布爾操作工具取消布爾操作，然后就可以調(diào)整圖層了。

10. 選擇圓形和三角形圖層，執(zhí)行布爾運(yùn)算工具中的合并圖層工具，將兩個(gè)圖層合并。 基本上就是圖標(biāo)畫好了，然后從視覺角度來說，取消描邊，點(diǎn)擊旁邊的眼睛圖標(biāo)。 如下所示。

尖端：

1.在繪制圖標(biāo)的時(shí)候，圖標(biāo)是不填充的，因?yàn)榫€條更方便我們準(zhǔn)確對齊。

2. 為了使圖標(biāo)盡可能準(zhǔn)確地對齊，建議在繪制時(shí)盡可能放大畫布以檢查對齊情況。 在 Mac 上，您可以用兩根手指在觸控板上縮放畫布。

3、Xd目前無法設(shè)置直線的端點(diǎn)，且直線的端點(diǎn)只能是直角。

4、Xd暫時(shí)只能繪制簡單的圖標(biāo)，可以通過布爾運(yùn)算來繪制。 對于更復(fù)雜的圖標(biāo)，建議先使用AI或繪制它們，然后再導(dǎo)入Xd。 導(dǎo)入方法稍后介紹。

Adobe CC應(yīng)用程序界面設(shè)計(jì)

在繪制界面之前，我們可以點(diǎn)擊歡迎界面上UI KITS部分的內(nèi)容ai圖標(biāo)導(dǎo)入sketch，查看軟件自帶的一些系統(tǒng)界面，iOS如下圖所示。 里面的內(nèi)容可以編輯、復(fù)制使用。

Xd目前的設(shè)計(jì)功能比較少。 不建議大家使用Xd進(jìn)行UI界面設(shè)計(jì)。 界面部分我只講Xd中非常強(qiáng)大的Grid（重復(fù)網(wǎng)格）功能。

1.在歡迎界面中，打開示例文檔，復(fù)制“-Home”，并將快捷鍵復(fù)制為+C，然后返回到我們創(chuàng)建的圖標(biāo)的文檔，使用+V進(jìn)行粘貼。 如下所示。

2. 選擇下面的圖層組，然后單擊檢查器中的“網(wǎng)格”按鈕。 可以看到圖層組的選中狀態(tài)由之前的八個(gè)錨點(diǎn)的方框變成了下圖所示的狀態(tài)。

3、拖動白色圓角矩形，你會發(fā)現(xiàn)圖層組會被自動復(fù)制，并且不僅可以向下拖動，還可以向右拖動，如下圖所示。

4、將鼠標(biāo)移動到圖層組中的間隙處，間隙會變成紫色。 按住鼠標(biāo)并拖動可調(diào)整圖層之間間隙的大小，如下圖所示。

5. 選擇單個(gè)圖層，例如文本圖層，然后調(diào)整任意文本圖層的樣式。 你會發(fā)現(xiàn)通過這種方法復(fù)制的圖層組中的所有文字樣式都同時(shí)改變了，如下圖所示。

6.按住+shift鍵批量選擇圖層組中的所有圖片，然后找到需要替換的圖片，全部選中拖至Xd即可批量替換，如下圖。

7、使用快捷鍵A新建一個(gè)畫板，然后使用快捷鍵E繪制正圓，如下圖所示。

8.找到圖片文件ai圖標(biāo)導(dǎo)入sketch，將其拖入正圓中，你會發(fā)現(xiàn)正圓自動被圖片填充了。 如下所示。

9. 按快捷鍵R，使用矩形工具創(chuàng)建一個(gè)正方形，填充黃色，并從中拖入圖像，如下圖所示。

10、選中這兩個(gè)圖層，然后使用快捷鍵+shift+M或者點(diǎn)擊菜單欄的-Mask with Sharp，將正方形設(shè)置為剪貼蒙版。 如下所示。

11.雙擊遮罩層進(jìn)入編輯模式。 您可以任意調(diào)整圖層的大小和位置。 調(diào)整完成后，點(diǎn)擊任意其他區(qū)域即可退出編輯，如下圖。

12、按快捷鍵T，輸入任意文字，然后使用快捷鍵+8或者點(diǎn)擊菜單欄中的-Path-到Path，將文字轉(zhuǎn)換為輪廓，如下圖所示。

尖端：

現(xiàn)階段，Xd的功能極其有限。 目前Xd可以定位為一款原型設(shè)計(jì)軟件，但如果是UI設(shè)計(jì)軟件的話，還差得有點(diǎn)遠(yuǎn)。 不過我相信，隨著時(shí)間的推移，Xd的功能會越來越多，未來可能還會有非常強(qiáng)大的設(shè)計(jì)功能。

現(xiàn)階段建議大家使用PS或PS等其他軟件來完成界面設(shè)計(jì)。

輔導(dǎo)老師：黃方文

資深交互設(shè)計(jì)師，國內(nèi)最早的用戶之一，致力于最新交互軟件的推廣和研究。 自2007年誕生以來，一直專注于移動交互設(shè)計(jì)領(lǐng)域的研究。 對移動交互設(shè)計(jì)領(lǐng)域有著深刻的思考和獨(dú)特的見解。 提倡全棧設(shè)計(jì)和工作效率最大化，并在國外多次翻譯分享。 尖端的設(shè)計(jì)文檔和交互式說明。 《動與靜之美——移動UI與交互效果設(shè)計(jì)詳解》一書即將出版。

想要跟隨教程請查看底部閱讀原文！ 下一期我們將為大家?guī)鞟dobe XD教程的第三個(gè)例子，講解“如何進(jìn)行交互式原型制作”。

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