1.清晰
大家先想想圖標(biāo)在A(yíng)PP里的主要作用是什么呢？可以作為功能和信息的提示標(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)創(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ì)中穿插使用。例如在A(yíng)PP底部導(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)格尺寸有16×16、24×24、32×32、48×48、64×64、96×96。
▲ 所有的圖標(biāo)都將建立在基礎(chǔ)網(wǎng)格之上，圖標(biāo)的每個(gè)部分都應(yīng)該放在像素網(wǎng)格內(nèi)。
5.安全區(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，圓的面積約等于314px2。
把圓的面積開(kāi)個(gè)根號(hào)√，方形的邊長(zhǎng)a大約為17.7px，四舍五入到整數(shù)，那么邊長(zhǎng)a為18px，接下來(lái)算算方形的面積：
▲ 邊長(zhǎng)a為18px，方形的面積為324px2。
最后算一下矩形的面積：
▲ 邊長(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ì)。
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的圓角，這樣會(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)，也要注意多用眼睛去觀(guā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)。
但是任何規(guī)則都有例外，如果有必要，我們可以打破規(guī)則。
▲ 左邊的圖標(biāo)使用了不同的圓角和角度，來(lái)保證圖標(biāo)像素級(jí)的完美；在右邊的圖標(biāo)中，右下角的圖形雖然超出了安全區(qū)域，卻保證了整個(gè)圖標(biāo)的平衡。
結(jié)論
圖標(biāo)設(shè)計(jì)是看著容易，做起來(lái)卻很難的一類(lèi)設(shè)計(jì)，把握這些關(guān)鍵細(xì)節(jié)能讓我們的圖標(biāo)設(shè)計(jì)水平提升更多。
最后為大家精心挑選了700+圖標(biāo)合集源文件，可以直接用在移動(dòng)端、網(wǎng)頁(yè)端設(shè)計(jì)中！
參考: Design principles for creating the perfect icon set
領(lǐng)取方式：
關(guān)注公眾號(hào)，后臺(tái)回復(fù)【圖標(biāo)】獲取下載鏈接。
原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）
作者：Clippp
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何強(qiáng)化圖標(biāo)設(shè)計(jì)的細(xì)節(jié)？我總結(jié)了12個(gè)關(guān)鍵點(diǎn)！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.ocunn.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)