新手設(shè)計(jì)師應(yīng)該如何設(shè)計(jì)出有創(chuàng)意的線性圖標(biāo)

    作為一名 UI 設(shè)計(jì)師，必須要重視 icon 的作用，那么新手UI設(shè)計(jì)師在設(shè)計(jì)線形圖標(biāo)的時(shí)候，應(yīng)該怎么做，才能使自己的圖標(biāo)既美觀又富有創(chuàng)意呢？首先是需要大量地練習(xí)，其次是盡量不要一遇到畫圖標(biāo)的時(shí)候就隨便在網(wǎng)上下載，而是結(jié)合產(chǎn)品調(diào)性創(chuàng)造屬于這套產(chǎn)品的圖標(biāo)。

一、圖標(biāo)在 UI 中的應(yīng)用

在本文中所說(shuō)的圖標(biāo)，是指界面中的 icon。icon 增加了界面的趣味性，也提高了識(shí)別性，是界面中不可或缺的部分。

1. icon 在界面中的分類

icon 在功能上來(lái)說(shuō)，分為不可點(diǎn)擊的展示圖標(biāo)和可點(diǎn)擊的按鈕圖標(biāo)：

• 不可點(diǎn)擊的展示圖標(biāo)，是為了輔助后面的文字內(nèi)容，側(cè)重點(diǎn)在于文字，通常尺寸為24×24、28×28、32×32。在小尺寸內(nèi)為了便于辨認(rèn)圖像，也不要在界面中太搶眼，建議可以使用簡(jiǎn)單的線性或者面性圖標(biāo)。
• 可點(diǎn)擊的按鈕圖標(biāo)，常用于導(dǎo)航欄、操作欄、標(biāo)簽欄，通常尺寸為44×44、48×48、56×56、64×64，這類圖標(biāo)可以結(jié)合產(chǎn)品調(diào)性進(jìn)行富有趣味性的設(shè)計(jì)。

詳見(jiàn)圖1.1.1以及1.1.2中紅框部分：

△ 好享瘦 app 中的界面

2. icon 的尺寸

icon 的尺寸一般選擇4的倍數(shù)，這樣有利于在成倍縮放的時(shí)候，不會(huì)造成半像素的情況。例如48×48的 icon，縮小2倍的時(shí)候是24×24；而34×34的 icon，縮小2倍的時(shí)候是17×17。在圖標(biāo)中應(yīng)盡量避免出現(xiàn)單數(shù)。

3. icon 的風(fēng)格

時(shí)下流行的圖標(biāo)可以歸納為：線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)。至于 mbe 風(fēng)格、斷線風(fēng)格、色塊風(fēng)格、漸變風(fēng)格、半透明風(fēng)格、雙色搭配風(fēng)格等等，都是基于以上三種來(lái)進(jìn)行風(fēng)格設(shè)計(jì)。圖1.3.1為在 dribbble上看到一些比較好看的 icon 設(shè)計(jì)，作者 ID 均備注在右下角，在此僅供參考。除了在 dribbble、站酷、花瓣、優(yōu)設(shè)、iconfont 等找好看的圖標(biāo)以外，還可以參考市面上主流 app 中的圖標(biāo)。

二、如何畫圖標(biāo)

1. 畫圖標(biāo)的軟件

常用的畫圖標(biāo)軟件有三個(gè)：AI、PS、sketch。

AI 的好處是矢量，網(wǎng)格比較規(guī)范，容易處理圖標(biāo)的線面轉(zhuǎn)換，其中直角一鍵轉(zhuǎn)圓角功能非常好用，缺點(diǎn)就是調(diào)色非常的難用，操作不便，只能處理普通色塊，復(fù)雜的色彩會(huì)耗費(fèi)很多時(shí)間。

PS 的好處是調(diào)色功能強(qiáng)大，形狀剪切中規(guī)中矩，缺點(diǎn)是做線性圖標(biāo)的時(shí)候需要用布爾運(yùn)算，描邊功能操作起來(lái)沒(méi)有 AI 方便。

Sketch 的好處是矢量，調(diào)色十分智能，并且現(xiàn)在做界面多數(shù)用 sketch，應(yīng)用起來(lái)十分便捷，缺點(diǎn)是它的造型沒(méi)有 AI 和 PS 嚴(yán)謹(jǐn)，一些轉(zhuǎn)角的位置不夠流暢，小圖的時(shí)候不易察覺(jué)，放大后就能看到不流暢的線條。

我通常是三者結(jié)合來(lái)畫圖標(biāo)：首先用 AI 構(gòu)造基本的形狀。如果是要發(fā)作品做展示，就拉到 ps 里面進(jìn)行調(diào)色和展示；如果是放在界面中使用，就拉到 sketch 調(diào)色使用。

2. 參數(shù)設(shè)置與參考線的繪制

在這里演示的是用 AI 畫圖標(biāo)的方法。參數(shù)設(shè)置方面：首先在首選項(xiàng) – 參考線和網(wǎng)格，網(wǎng)格線間隔10px，次分隔線10，勾選顯示像素網(wǎng)格；然后在畫布框內(nèi)點(diǎn)擊鼠標(biāo)右鍵，顯示網(wǎng)格；最后在視圖中打開(kāi)「對(duì)齊網(wǎng)格」「對(duì)齊像素」「對(duì)齊點(diǎn)」。圖2.2.1為參數(shù)設(shè)置步驟。

參數(shù)設(shè)置完畢后，新建畫布，我一般新建800×600（dribbble 的展示尺寸），圖標(biāo)應(yīng)小而精致，不宜建過(guò)大的畫布。

參考線是為了規(guī)范圖標(biāo)而存在，一般有兩種參考線畫法（復(fù)雜規(guī)范與簡(jiǎn)單規(guī)范），它們?cè)矶际且粯拥模?xí)慣哪種就用哪種。不要糾結(jié)參考線的大小應(yīng)該是多少，根據(jù)你圖標(biāo)使用的位置來(lái)確定圖標(biāo)大?。ㄒ簿褪菂⒖季€的范圍），有的朋友知道了 46px 的參考線怎么畫之后，又糾結(jié) 88px 應(yīng)該怎么畫，其實(shí)就是一樣的原理。你可以根據(jù)自己的感覺(jué)來(lái)微調(diào)，稍微大點(diǎn)小點(diǎn)無(wú)所謂，重要的是不要出現(xiàn)單數(shù)的像素大小就可以。在此以44px大小的圖標(biāo)為例子。

復(fù)雜規(guī)范

畫一個(gè)44×44的正方形，顏色調(diào)為灰色，描邊選擇0.25pt（在此補(bǔ)充一個(gè)知識(shí)點(diǎn)，72ppi下的1pt是等于1px的，具體請(qǐng)自行百度），然后畫一個(gè)42×42的正方形居于其中。這個(gè)42×42的界線為安全界線，圖標(biāo)不要畫超過(guò)這個(gè)界線，避免在給開(kāi)發(fā)切圖的時(shí)候貼邊切，導(dǎo)致圖標(biāo)出現(xiàn)不自然的邊界。圖2.2.2詳細(xì)展示畫參考線的步驟。

那么，以上的參考線應(yīng)該怎么使用？我們畫圖標(biāo)的時(shí)候，物體會(huì)有長(zhǎng)有扁，有圓有方，在統(tǒng)一體量感的時(shí)候，就需要用到里面的一些參考線。但是記住，參考線是死的，人眼是活的，畫完以后，要靠感覺(jué)微調(diào)，直至視覺(jué)上體量感達(dá)到一致。請(qǐng)看下圖2.2.3分析：

△ 圖標(biāo)是 iconfont 比賽里第二名的商務(wù)計(jì)劃書圖標(biāo)，我臨摹了一遍，在此用以示范，原作者 回憶的沙漏2003

簡(jiǎn)單規(guī)范

用復(fù)雜規(guī)范的參考線畫到熟練的時(shí)候，就可以用比較簡(jiǎn)單的參考線去限制圖標(biāo)范圍，因?yàn)槟阋呀?jīng)十分熟悉體量感的控制了。

簡(jiǎn)單的畫法是只需要畫三個(gè)正方形，同樣線性選擇顏色是灰色，描邊選擇0.25pt。這里有個(gè)小口訣：長(zhǎng)物體上下超左右不超、扁物體左右超上下不超、方物體要比圓物體小。下圖2.2.4詳細(xì)展示畫簡(jiǎn)單參考線的方法。

3. 如何在 AI 建立參考線來(lái)復(fù)用？

在畫布中用描邊 0.25pt 來(lái)畫好參考線，然后選中參考線，右鍵 – 建立參考線。詳細(xì)請(qǐng)看圖2.3.1。

4. 各種形狀的圖標(biāo)如何在參考線中統(tǒng)一

前面說(shuō)到，參考線是為了限定圖標(biāo)的大小，從而達(dá)到整體的美觀與規(guī)范。在畫了很多圖標(biāo)之后，我總結(jié)出兩個(gè)小訣竅：

• 當(dāng)你總結(jié)出你要畫的物體形狀時(shí)，只要不影響辨識(shí)度，可以適當(dāng)改變一下形狀，把高的或者扁的物品，畫成比較飽滿的樣子（圖2.4.1的鉛筆為例）；
• 當(dāng)物體形狀不適合畫得飽滿時(shí)，可以盡量上下或者左右撐滿，然后旋轉(zhuǎn)45度，以增加畫面的飽滿感（圖2.4.2的刀為例）。

5. 繪制過(guò)程中要注意的點(diǎn)

畫圖標(biāo)的時(shí)候要對(duì)齊網(wǎng)格，改變圖標(biāo)大小的時(shí)候，注意是不是兩邊同時(shí)縮放，有沒(méi)有造成半像素，有的話就手動(dòng)拖動(dòng)圖標(biāo)對(duì)齊網(wǎng)格。

可以使用內(nèi)描邊來(lái)進(jìn)行線性圖標(biāo)的繪制，這樣更容易對(duì)齊網(wǎng)格，但是內(nèi)描邊只要使用鋼筆加點(diǎn)來(lái)斷點(diǎn)的話，就會(huì)自動(dòng)變成居中描邊。那么使用內(nèi)描邊的時(shí)候怎么進(jìn)行斷點(diǎn)？可以把描邊進(jìn)行對(duì)象 – 擴(kuò)展，轉(zhuǎn)為形狀，然后用布爾運(yùn)算來(lái)剪切。由于太麻煩，我一般使用居中描邊（不推薦居中描邊是因?yàn)樵谑謾C(jī)界面中的線性圖標(biāo)一般是3像素，居中描邊怕出現(xiàn)半像素，影響清晰度），但經(jīng)過(guò)檢驗(yàn)，只要注意把線拖動(dòng)對(duì)齊網(wǎng)格，不會(huì)影響清晰度。

補(bǔ)充一個(gè)知識(shí)點(diǎn)：手機(jī)界面中的圖標(biāo)，線性一般是用3像素，因?yàn)?像素太細(xì)，4像素又顯得太笨重；當(dāng)2倍圖的時(shí)候用3像素，3倍圖的時(shí)候就會(huì)變成4.5像素，所以3倍圖的時(shí)候要手動(dòng)把4.5調(diào)成4或者5像素。

6. 什么是圖標(biāo)的統(tǒng)一性和差異性

在這里的統(tǒng)一性不是指所有的圖標(biāo)里面都要用一模一樣的元素，而是圖標(biāo)的線粗細(xì)、斷點(diǎn)的距離、元素的大小、切割的距離、同樣的色調(diào)、風(fēng)格的一致。當(dāng)所有的圖標(biāo)在里面都使用一樣的元素，會(huì)造成辨認(rèn)困難。下圖2.6.1，一眼看過(guò)去，一模一樣的笑臉降低了識(shí)別率。

差異性是指在統(tǒng)一的風(fēng)格下，通過(guò)造型能力，進(jìn)行圖標(biāo)的區(qū)別，增加辨識(shí)度。

三、線性圖標(biāo)畫完后如何創(chuàng)造風(fēng)格

1. 多彩底色線性圖標(biāo)風(fēng)格

2. 同色調(diào)線面結(jié)合風(fēng)格

圖標(biāo)的造型塑造都是一樣的原理，關(guān)鍵是風(fēng)格的形成，需要不斷的嘗試。前期可以在 dribbble、站酷、花瓣、各位大神的作品展示平臺(tái)多看看，學(xué)習(xí)一些優(yōu)秀的圖標(biāo)造型塑造方法、風(fēng)格、配色，通過(guò)大量練習(xí)和嘗試，慢慢就可以找到屬于自己的那套畫法。

四、圖標(biāo)的導(dǎo)出及展示

上面說(shuō)過(guò)，我在 AI 中造型完畢，會(huì)拉到 sketch 或者 PS 里面修飾。

• 導(dǎo)到 sketch 里面的方法（即導(dǎo) svg 方法）：把單獨(dú)的圖標(biāo)擴(kuò)展，然后編組，每個(gè)圖標(biāo)是獨(dú)立的一個(gè)編組，拉到「資源導(dǎo)出」那里，選擇導(dǎo)出 svg 格式，直接就可以拖到 sketch 里面用。
• 導(dǎo)到 PS 里面的方法：選擇單獨(dú)圖標(biāo)，復(fù)制粘貼到 PS 里面，再進(jìn)行美化。

我常用的圖標(biāo)展示方式之一：

六、總結(jié)

只有少數(shù)人是天才，大多數(shù)情況下我們都要通過(guò)大量的練習(xí)，才能促成質(zhì)變。一開(kāi)始畫不好不要?dú)怵H，只要勤奮，明天的你永遠(yuǎn)會(huì)比今天的你要進(jìn)步得多。不要偷懶套用別人的圖標(biāo)，設(shè)計(jì)師最不應(yīng)該丟的是自己的創(chuàng)造能力。