如何強(qiáng)化圖標(biāo)設(shè)計(jì)的細(xì)節(jié)

1、今天為大家分享的是圖標(biāo)設(shè)計(jì)關(guān)鍵點(diǎn)。圖標(biāo)在頁(yè)面中的尺寸很小，不怎么起眼，卻包含著太多的設(shè)計(jì)細(xì)節(jié)。作為通用的視覺(jué)化語(yǔ)言，把握住其中的設(shè)計(jì)關(guān)鍵點(diǎn)至關(guān)重要。這次分享一些更為關(guān)鍵的圖標(biāo)設(shè)計(jì)細(xì)節(jié)，確保設(shè)計(jì)出來(lái)的圖標(biāo)能達(dá)到像素級(jí)完美。1.清晰大家先想想圖標(biāo)在APP里的主要作用是什么呢？可以作為功能和信息的提示標(biāo)識(shí)，引導(dǎo)用戶(hù)的操作。而且我們通過(guò)看圖獲取信息的速度要比閱讀文字獲取快得多，圖標(biāo)作為一種通用化的視覺(jué)語(yǔ)言，讓頁(yè)面更容易被閱讀。圖標(biāo)代表的隱喻越準(zhǔn)確，就越容易被用戶(hù)準(zhǔn)確識(shí)別。2.簡(jiǎn)潔圖標(biāo)本身的尺寸就特別小，如果在里面摻雜著大量沒(méi)必要的裝飾性元素，會(huì)讓圖標(biāo)的閱讀變得很困難?？梢酝ㄟ^(guò)使用盡可能簡(jiǎn)單的設(shè)計(jì)元素來(lái)

2、創(chuàng)建圖標(biāo)，保證形狀的簡(jiǎn)潔易懂。如果在設(shè)計(jì)過(guò)程中發(fā)現(xiàn)圖標(biāo)變得很復(fù)雜，大膽嘗試去做減法，刪除不必要的細(xì)節(jié)，只留下最重要的部分。3.風(fēng)格統(tǒng)一在Dribbble中搜索“icons”，會(huì)看到很多不同風(fēng)格的圖標(biāo)樣式，但同一個(gè)集合中的圖標(biāo)都會(huì)保持統(tǒng)一的設(shè)計(jì)風(fēng)格。不同風(fēng)格的圖標(biāo)可以在設(shè)計(jì)中穿插使用。例如在APP底部導(dǎo)航中，使用線(xiàn)形風(fēng)格的圖標(biāo)作為基本狀態(tài)，點(diǎn)擊選中時(shí)可以變換為面性風(fēng)格，用來(lái)區(qū)分不同的狀態(tài)。4.基礎(chǔ)網(wǎng)格網(wǎng)格有助于我們建立一個(gè)明確的尺寸規(guī)范，常見(jiàn)的網(wǎng)格尺寸有16x16、24x24、32x32、48x48、64x64、96x96。所有的圖標(biāo)都將建立在基礎(chǔ)網(wǎng)格之上，圖標(biāo)的每個(gè)部分都應(yīng)該放在像素網(wǎng)格內(nèi)。5

3、.安全區(qū)域圖標(biāo)的主體部分應(yīng)該保持在安全區(qū)域內(nèi)，這種情況適用于大多數(shù)的場(chǎng)景。安全區(qū)域可以作為設(shè)計(jì)建議，而不是一項(xiàng)必須的規(guī)則，如果有需要，我們完全可以在安全區(qū)域外擴(kuò)展圖標(biāo)的形狀。6.關(guān)鍵形狀如果想讓一組圖標(biāo)放在一起看起來(lái)很和諧，那這些圖標(biāo)的視覺(jué)權(quán)重應(yīng)該保持一致。在設(shè)計(jì)前首先確定圖標(biāo)的基本形狀，例如圓形、正方形、矩形等，能有效幫助我們確定圖標(biāo)的比例關(guān)系。可以用數(shù)學(xué)面積公式來(lái)計(jì)算一下不同形狀圖標(biāo)的權(quán)重，找出近似值。來(lái)吧，先從圓形開(kāi)始：在這個(gè)例子中，直徑d是20px，半徑r是10px，圓的面積約等于314px。把圓的面積開(kāi)個(gè)根號(hào)，方形的邊長(zhǎng)a大約為17.7px，四舍五入到整數(shù)，那么邊長(zhǎng)a為18px，接下

4、來(lái)算算方形的面積：邊長(zhǎng)a為18px，方形的面積為324px。最后算一下矩形的面積：邊長(zhǎng)b為20px，邊長(zhǎng)c為16px。最后我們根據(jù)這些科學(xué)的尺寸設(shè)計(jì)一組相對(duì)和諧的圖標(biāo)：7.描邊寬度除了保持相同的視覺(jué)權(quán)重，圖標(biāo)的描線(xiàn)寬度也應(yīng)該保持一致，達(dá)到像素級(jí)統(tǒng)一，這里我建議描邊使用整數(shù)值，這樣更便于設(shè)計(jì)。 另外，不要忘記元素之間的最小間距，應(yīng)該大于或等于描邊的寬度。8.圓角圖標(biāo)的和諧還在于邊角的統(tǒng)一。尖角不用說(shuō)了，保持統(tǒng)一的垂直90度就可以。這里需要重要說(shuō)的是圓角，不能所有的形狀都使用同一個(gè)圓角度數(shù)，而是要根據(jù)圖標(biāo)形狀的不同靈活調(diào)節(jié)圓角度數(shù)。 例如一個(gè)圖標(biāo)有里外兩個(gè)平行的圓角時(shí)，不能里外都使用1px的圓角，

5、這樣會(huì)讓圖標(biāo)看起來(lái)不統(tǒng)一。正確的做法是讓外面的圓角更大，設(shè)置為3px，里面的圓角為1px，讓圖標(biāo)看起來(lái)更和諧。 根據(jù)對(duì)象大小，設(shè)置不同的圓角數(shù)，保證視覺(jué)統(tǒng)一。9.角度同一組圖標(biāo)保持相同的傾角設(shè)計(jì)，可以讓圖標(biāo)看起來(lái)更統(tǒng)一。 圖標(biāo)中所有傾斜的線(xiàn)條都限定為45度角，會(huì)讓圖標(biāo)看起來(lái)更嚴(yán)謹(jǐn)和規(guī)范。10.視覺(jué)平衡在設(shè)計(jì)圖標(biāo)時(shí)，既要利用作圖軟件把握嚴(yán)格的對(duì)稱(chēng)和尺寸標(biāo)準(zhǔn)，也要注意多用眼睛去觀察圖標(biāo)的視覺(jué)平衡，保證圖標(biāo)看起來(lái)很統(tǒng)一。 最典型的情況就是繪制“播放”圖標(biāo)時(shí)，使用軟件去調(diào)節(jié)三角形左右兩邊的完全對(duì)稱(chēng)，圖標(biāo)看起來(lái)反而會(huì)有點(diǎn)不平衡，看著感覺(jué)離左邊近，離右邊遠(yuǎn)(右圖)。在這種情況下，我們就要在對(duì)稱(chēng)的基礎(chǔ)上，將三角形向右移動(dòng)一點(diǎn)，來(lái)保證視覺(jué)上的平衡(左圖)。11.透視 (2D/3D)除了扁平的2D風(fēng)格圖標(biāo)外，也可以考慮使用3D風(fēng)格的圖標(biāo)樣式，讓圖標(biāo)的體積感和空間感更強(qiáng)。 無(wú)論使用哪一種，同一組的圖標(biāo)要保持統(tǒng)一的樣式，比如要用3D樣式，那么這一組3D圖標(biāo)要使用相同角度的透視。12.設(shè)計(jì)常識(shí)上面提到了圖標(biāo)設(shè)計(jì)的很多規(guī)則，在日常設(shè)計(jì)中建議大家將這些規(guī)則作為指導(dǎo)。但是任何