如何強(qiáng)化圖標(biāo)設(shè)計細(xì)節(jié)？我總結(jié)了12個關(guān)鍵點

　　如何強(qiáng)化圖標(biāo)設(shè)計細(xì)節(jié)?我總結(jié)了12個關(guān)鍵點!

　　1.清晰

　　大家先想想圖標(biāo)在APP里的主要作用是什么呢?可以作為功能和信息的提示標(biāo)識，引導(dǎo)用戶的操作。

　　而且我們通過看圖獲取信息的速度要比閱讀文字獲取快得多，圖標(biāo)作為一種通用化的視覺語言，讓頁面更容易被閱讀。

　　▲ 圖標(biāo)代表的隱喻越準(zhǔn)確，就越容易被用戶準(zhǔn)確識別。

　　2.簡潔

　　圖標(biāo)本身的尺寸就特別小，如果在里面摻雜著大量沒必要的裝飾性元素，會讓圖標(biāo)的閱讀變得很困難。

　　可以通過使用盡可能簡單的設(shè)計元素來創(chuàng)建圖標(biāo)，保證形狀的簡潔易懂。

　　▲ 如果在設(shè)計過程中發(fā)現(xiàn)圖標(biāo)變得很復(fù)雜，大膽嘗試去做減法，刪除不必要的細(xì)節(jié)，只留下最重要的部分。

　　3.風(fēng)格統(tǒng)一

　　在Dribbble中搜索“icons”，會看到很多不同風(fēng)格的圖標(biāo)樣式，但同一個集合中的圖標(biāo)都會保持統(tǒng)一的設(shè)計風(fēng)格。

　　▲ 不同風(fēng)格的圖標(biāo)可以在設(shè)計中穿插使用。例如在APP底部導(dǎo)航中，使用線形風(fēng)格的圖標(biāo)作為基本狀態(tài)，點擊選中時可以變換為面性風(fēng)格，用來區(qū)分不同的狀態(tài)。

　　4.基礎(chǔ)網(wǎng)格

　　網(wǎng)格有助于我們建立一個明確的尺寸規(guī)范，常見的網(wǎng)格尺寸有16×16、24×24、32×32、48×48、64×64、96×96。

　　▲ 所有的圖標(biāo)都將建立在基礎(chǔ)網(wǎng)格之上，圖標(biāo)的每個部分都應(yīng)該放在像素網(wǎng)格內(nèi)。

　　5.安全區(qū)域

　　圖標(biāo)的主體部分應(yīng)該保持在安全區(qū)域內(nèi)，這種情況適用于大多數(shù)的場景。

　　安全區(qū)域可以作為設(shè)計建議，而不是一項必須的規(guī)則，如果有需要，我們完全可以在安全區(qū)域外擴(kuò)展圖標(biāo)的形狀。

　　6.關(guān)鍵形狀

　　如果想讓一組圖標(biāo)放在一起看起來很和諧，那這些圖標(biāo)的視覺權(quán)重應(yīng)該保持一致。

　　在設(shè)計前首先確定圖標(biāo)的基本形狀，例如圓形、正方形、矩形等，能有效幫助我們確定圖標(biāo)的比例關(guān)系。

　　可以用數(shù)學(xué)面積公式來計算一下不同形狀圖標(biāo)的權(quán)重，找出近似值。

　　來吧，先從圓形開始：

　　▲ 在這個例子中，直徑d是20px，半徑r是10px，圓的面積約等于314px²。

　　把圓的面積開個根號√，方形的邊長a大約為17.7px，四舍五入到整數(shù)，那么邊長a為18px，接下來算算方形的面積：

　　▲ 邊長a為18px，方形的面積為324px²。

　　最后算一下矩形的面積：

　　▲ 邊長b為20px，邊長c為16px。

　　最后我們根據(jù)這些科學(xué)的尺寸設(shè)計一組相對和諧的圖標(biāo)：

　　7.描邊寬度

　　除了保持相同的視覺權(quán)重，圖標(biāo)的描線寬度也應(yīng)該保持一致，達(dá)到像素級統(tǒng)一，這里我建議描邊使用整數(shù)值，這樣更便于設(shè)計。

　　▲ 另外，不要忘記元素之間的最小間距，應(yīng)該大于或等于描邊的寬度。

　　8.圓角

　　圖標(biāo)的和諧還在于邊角的統(tǒng)一。尖角不用說了，保持統(tǒng)一的垂直90度就可以。

　　這里需要重要說的是圓角，不能所有的形狀都使用同一個圓角度數(shù)，而是要根據(jù)圖標(biāo)形狀的不同靈活調(diào)節(jié)圓角度數(shù)。

　　▲ 例如一個圖標(biāo)有里外兩個平行的圓角時，不能里外都使用1px的圓角，這樣會讓圖標(biāo)看起來不統(tǒng)一。

　　正確的做法是讓外面的圓角更大，設(shè)置為3px，里面的圓角為1px，讓圖標(biāo)看起來更和諧。

　　▲ 根據(jù)對象大小，設(shè)置不同的圓角數(shù)，保證視覺統(tǒng)一。

　　9.角度

　　同一組圖標(biāo)保持相同的傾角設(shè)計，可以讓圖標(biāo)看起來更統(tǒng)一。

　　▲ 圖標(biāo)中所有傾斜的線條都限定為45度角，會讓圖標(biāo)看起來更嚴(yán)謹(jǐn)和規(guī)范。

　　10.視覺平衡

　　在設(shè)計圖標(biāo)時，既要利用作圖軟件把握嚴(yán)格的對稱和尺寸標(biāo)準(zhǔn)，也要注意多用眼睛去觀察圖標(biāo)的視覺平衡，保證圖標(biāo)看起來很統(tǒng)一。

　　▲ 最典型的情況就是繪制“播放”圖標(biāo)時，使用軟件去調(diào)節(jié)三角形左右兩邊的完全對稱，圖標(biāo)看起來反而會有點不平衡，看著感覺離左邊近，離右邊遠(yuǎn)(右圖)。

　　在這種情況下，我們就要在對稱的基礎(chǔ)上，將三角形向右移動一點，來保證視覺上的平衡(左圖)。

　　11.透視 (2D/3D)

　　除了扁平的2D風(fēng)格圖標(biāo)外，也可以考慮使用3D風(fēng)格的圖標(biāo)樣式，讓圖標(biāo)的體積感和空間感更強(qiáng)。

　　▲ 無論使用哪一種，同一組的圖標(biāo)要保持統(tǒng)一的樣式，比如要用3D樣式，那么這一組3D圖標(biāo)要使用相同角度的透視。

　　12.設(shè)計常識

　　上面提到了圖標(biāo)設(shè)計的很多規(guī)則，在日常設(shè)計中建議大家將這些規(guī)則作為指導(dǎo)。

　　但是任何規(guī)則都有例外，如果有必要，我們可以打破規(guī)則。

　　▲ 左邊的圖標(biāo)使用了不同的圓角和角度，來保證圖標(biāo)像素級的完美;在右邊的圖標(biāo)中，右下角的圖形雖然超出了安全區(qū)域，卻保證了整個圖標(biāo)的平衡。

　　結(jié)論

　　圖標(biāo)設(shè)計是看著容易，做起來卻很難的一類設(shè)計，把握這些關(guān)鍵細(xì)節(jié)能讓我們的圖標(biāo)設(shè)計水平提升更多。

　　最后為大家精心挑選了700+圖標(biāo)合集源文件，可以直接用在移動端、網(wǎng)頁端設(shè)計中!

更多關(guān)于“UI培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。