課程介紹

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

通過(guò)課程，您可以熟練掌握軟件的工具。 文中包含了講師的心得和溫馨提示。

為人

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

軟件安裝及工具使用指導(dǎo)：

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

圖標(biāo)輪廓

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

1、打開Xd，在歡迎界面選擇尺寸，輸入規(guī)格500*500，如右圖。

2、目前Xd的功能還是很有限。 可以用來(lái)畫圖標(biāo)的工具只有本書第一部分介紹的幾個(gè)工具和布爾運(yùn)算工具，但是借助這個(gè)工具，我們也可以畫出一些漂亮的圖標(biāo)。 ，如右圖所示。

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

4、快捷鍵+D，復(fù)制視口，然后按住shift+鍵，拖動(dòng)鍵盤，將復(fù)制的正圓縮小到合適的大小。 您可以參考右圖中的值。

5、快捷鍵P，使用鉛筆工具，將鉛筆工具連接到與小圓平行的上方，在大圓的邊緣，連接到位后，手動(dòng)會(huì)出現(xiàn)一條白色引導(dǎo)線軟件，如右圖所示。 （這里的鍵盤是毛筆形狀的，由于截圖沒有顯示鍵盤，所以自動(dòng)添加了一個(gè)指針供大家識(shí)別）

6.按下鍵盤，然后點(diǎn)擊圓圈下方，然后返回到兩側(cè)大圓圈的邊緣。 當(dāng)與第一個(gè)錨點(diǎn)平行時(shí)，手動(dòng)繪制參考線，點(diǎn)擊，然后在第一個(gè)錨點(diǎn)處關(guān)閉圖形，勾勒出一個(gè)三角形，如右圖。

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

A：查看三角形一側(cè)端點(diǎn)的X軸值，查看三角形一側(cè)端點(diǎn)的X軸值。

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

調(diào)整后的療效如右圖所示。

8、快捷鍵V，用選擇工具選中所有視口，然后設(shè)置視口的填充色為白色，如右圖。

9.選中大圓和小圓視口，點(diǎn)擊兩側(cè)檢測(cè)器中布爾運(yùn)算工具中的第二個(gè)工具——減去頂層工具。 如右圖所示。 如果要改變大小圓的相對(duì)位置和小圓的大小，再次點(diǎn)擊布爾運(yùn)算工具取消布爾運(yùn)算，即可調(diào)整視口。

10、選中圓形和三角形視口，執(zhí)行布爾運(yùn)算工具中的合并視口工具，合并兩個(gè)視口。 基本上，圖標(biāo)的輪廓就完成了。 視覺考慮后，取消遮罩，點(diǎn)擊后面的耳朵圖標(biāo)。 如右圖所示。

尖端：

1.繪制圖標(biāo)時(shí)圖標(biāo)沒有填充，因?yàn)檠€更方便我們準(zhǔn)確對(duì)齊。

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

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

4.Xd暫時(shí)只能繪制簡(jiǎn)單的圖標(biāo)，可以通過(guò)布爾運(yùn)算得到。 對(duì)于更復(fù)雜的圖標(biāo)，建議在導(dǎo)出到 Xd 之前使用 AI 或繪制它們。 導(dǎo)出方法稍后介紹。

應(yīng)用界面設(shè)計(jì)

在畫界面之前，我們可以在歡迎界面點(diǎn)擊部分的內(nèi)容，查看軟件自帶的一些系統(tǒng)界面，右圖是iOS的內(nèi)容。 以上內(nèi)容均可編輯復(fù)制使用。

xd暫時(shí)設(shè)計(jì)功能比較少。 不太建議大家UI界面設(shè)計(jì)都用Xd。 在界面部分，我只講Xd中非常強(qiáng)大的Grid（重復(fù)網(wǎng)格）功能。

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

2、選中下方視口組，點(diǎn)擊檢測(cè)器中的Grid按鈕，可以看到視口組的選中狀態(tài)由之前的八個(gè)錨點(diǎn)框變成了右圖所示的狀態(tài)。

3、拖動(dòng)藍(lán)色圓角方塊，會(huì)發(fā)現(xiàn)視口組會(huì)被手動(dòng)復(fù)制ai圖標(biāo)導(dǎo)入sketch，可以向上或向右拖動(dòng)，如右圖。

4. 將鍵盤連接到視口組之間的縫隙，縫隙會(huì)變成紅色。 按下鍵盤并拖動(dòng)調(diào)整視口間距，如右圖所示。

5、選擇單個(gè)視口，比如文本視口，調(diào)整任意一個(gè)文本視口的樣式，會(huì)發(fā)現(xiàn)這樣復(fù)制的視口組中的所有文本樣式都同步改變了ai圖標(biāo)導(dǎo)入sketch，如右圖.

6、按住+shift鍵，批量選中視口組中的所有圖片，然后找到需要替換的圖片，全部選中拖到Xd即可批量替換，如右圖圖片。

7、用快捷鍵A新建一個(gè)畫板，然后按快捷鍵E畫一個(gè)正圓，如右圖。

8、找到圖片文件，拖到正圓處，可以發(fā)現(xiàn)正圓已經(jīng)手動(dòng)填充圖片了。 如右圖所示。

9、快捷鍵R，用圓形工具畫出一個(gè)正圓，填充紅色，從中推出一張圖片，如右圖。

10.選中這兩個(gè)視口，然后使用快捷鍵+shift+M或者點(diǎn)擊菜單欄中的-將正圓設(shè)置為剪貼蒙版。 如右圖所示。

11、雙擊mask視口進(jìn)入編輯模式，任意調(diào)整視口的大小和位置。 調(diào)整完成后，點(diǎn)擊其他區(qū)域退出編輯，如右圖所示。

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

尖端：

在這個(gè)階段，Xd 的功能極其有限。 目前Xd可以定位為一款原型設(shè)計(jì)軟件，如果是一款UI設(shè)計(jì)軟件，還有點(diǎn)距離。 不過(guò)相信隨著時(shí)間的推移，Xd的功能會(huì)越來(lái)越多，未來(lái)可能還會(huì)有特別強(qiáng)大的設(shè)計(jì)功能。

這個(gè)階段建議大家使用PS或者PS等其他軟件來(lái)完成界面的設(shè)計(jì)。

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

中級(jí)交互設(shè)計(jì)師，國(guó)外最早使用者之一，旨在最新交互軟件的推廣和研究。 自2007年誕生以來(lái)，專注于中國(guó)聯(lián)通交互設(shè)計(jì)領(lǐng)域的研究。 在中國(guó)聯(lián)通交互設(shè)計(jì)領(lǐng)域有著深刻的思考和獨(dú)到的見解。 提倡全棧設(shè)計(jì)師，工作效率最大化，曾多次翻譯分享美國(guó)。 最前沿的設(shè)計(jì)文檔和交互說(shuō)明。 正式出版《動(dòng)靜之美——移動(dòng)端UI與交互動(dòng)效設(shè)計(jì)解讀》一書。

跟隨教程，請(qǐng)查看置頂閱讀原文！ 上一期，我們將為大家?guī)?lái)教學(xué)第三例，講解“如何做交互式原型制作”。

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