一直在各種文章中能看到圖標的尺寸規(guī)范，但是每個人都有自己的規(guī)范尺寸，或者說基礎(chǔ)尺寸，你可能知道了44px的網(wǎng)格規(guī)范，但不知道30px又應(yīng)該怎么畫，而且這些具體這個尺寸到底是怎么來的也不知道，所以花了幾天的時間，看了站酷、人人都是產(chǎn)品經(jīng)理、簡書的一些文章，然后總結(jié)出來了這些尺寸的算法以及他們的來源，如有錯誤，歡迎拍磚。
一、為什么要制定圖標網(wǎng)格？
圖標設(shè)計有效的三個屬性（樣式、美學(xué)統(tǒng)一以及可識別性），其中美學(xué)統(tǒng)一就是說：線寬是不是一致（2px？4px？）、是圓角還是方角？圓角的大小是不是一致？有沒有斷點？斷點的規(guī)律是什么？配色是不是統(tǒng)一？有沒有點綴？有沒有背影？風(fēng)格構(gòu)成什么（面，線，填充線，或者字形）。元素的統(tǒng)一會讓你的圖標看上去整體風(fēng)格是統(tǒng)一的。而我們要探討的就是元素的視覺統(tǒng)一……
? ? ? ?如下圖所示，我們畫圖標的時候，物體會有長有扁，有圓有方，在統(tǒng)一體量感的時候，就需要用到里面的一些參考線。保證正方形、圓形、縱向矩形、水平矩形視覺保持一致大小。
二、定義網(wǎng)格系統(tǒng)
? ? ? ?產(chǎn)品圖標網(wǎng)格被用來促進圖標的一致性，以及為圖形元素的定位建立一組清晰的規(guī)范。這種標準化的規(guī)范造就了一個靈活但有條理的系統(tǒng)。使用這些核心形狀作為準則，你可以在相關(guān)產(chǎn)品圖標的設(shè)計中保持一致的視覺比例。
? ? ? ?如下圖所示，我們用A、B、C、D四個尺寸來表示:
然后看一些我在文章中看到的幾種設(shè)計網(wǎng)格尺寸：（為方便計算，我把MD網(wǎng)格除以4）
看到這些尺寸的時候，我腦海中有幾個問題：
問題1：為什么這些尺寸沒有統(tǒng)一？
問題2：A是44×44的時候是這個設(shè)計規(guī)范，那么A是34×34的時候，B和C又應(yīng)該怎么設(shè)置？
問題3：這幾種尺寸中的B和C到底是怎么來的？
三、網(wǎng)格規(guī)范算法
帶著那3個問題，開始查閱資料、文章，然后就發(fā)現(xiàn)這個B和C其實是有章可循的。算法是基于面積。
相信大家都知道，44×44的矩形比44×44的圓從視覺上來說要大一些，這是為什么呢？這里就牽扯出來一個面積算法?？煽聪聢D
從視覺上看，矩形要比圓開大，但我們拉根參考線，發(fā)現(xiàn)二者其中一樣高
把這2個圖形放在一起，發(fā)現(xiàn)明顯矩形的面積要比圓的面積大，算法相當(dāng)簡單了
矩形面積S=邊長×邊長=44×44=1936
圓的面積S=π×R2=π×（D÷2）2=3.14×（44÷2）2=3.14×22×22=1519.76
很明顯1936>1519.76
我們用這套面積算法試一下iOS中的B和C
A是圓形，面積SA=π×R2=π×（A/2）2 ?R為半徑，A是直徑，所以R=A/2
B是正方形，面積SB=邊長×邊長=B×B
C是長方形，面積SC=邊長×邊長=C×D
要想視覺大小統(tǒng)一，則 ?SA=SB=SC
對于iOS：已知A=44
所以iOS中的A=D=44，B=38，C=34 對應(yīng)表2，是不是剛剛好呢
在已經(jīng)A的情況下，我們用這種方法算一下其它四種網(wǎng)絡(luò)的B和C：
對比表2和表3中的B和C，我們不難發(fā)現(xiàn)，只有MD和尺寸2中的C有很小的區(qū)別。你可以根據(jù)自己的感覺來微調(diào)，稍微大點小點無所謂。
由此得知，無論你的A的尺寸是多少，都可以根據(jù)公式計算出B和C。參考線是死的，人眼是活的，畫完以后，要靠感覺微調(diào)，直至視覺上體量感達到一致。擺脫死記硬背，媽媽再也不用擔(dān)心我的學(xué)習(xí)了。
四、小tips
01、icon尺寸
icon的尺寸一般選擇4的倍數(shù)，這樣有利于在成倍縮放的時候，不會造成半像素的情況。例如48x48的icon，縮小2倍的時候是24x24；而34x34的icon，縮小2倍的時候是17x17。在圖標中應(yīng)盡量避免出現(xiàn)單數(shù)。
02、安全邊界
為避免給開發(fā)切圖時貼邊節(jié)，導(dǎo)致圖標出現(xiàn)不自然的邊界，我們需要上面的規(guī)范外添加一個外框，圖標不要畫超過這個界線。如紅色外框為48×48，黃色內(nèi)框也就是安全邊界為：44×44。
03、參數(shù)設(shè)置與參考線的繪制
我平時是用AI畫圖標，所以這里僅演示的是用AI畫圖標的方法。第一步：在首選項-參考線和網(wǎng)格，網(wǎng)格線間隔10px，次分隔線10，勾選顯示像素網(wǎng)格；
第二步：畫布框內(nèi)點擊鼠標右鍵，顯示網(wǎng)格；
第三步：在視圖中打開“對齊網(wǎng)格”“對齊像素”“對齊點”。
04、關(guān)于圖標不模糊的方法
我們在@2x，icon內(nèi)部的橫向方向和豎向方向的所有元素的像素值必須是偶數(shù)，同時他們的間隔也是偶數(shù)倍，也就是2px的整數(shù)倍。也就是構(gòu)成圖標的所有元素之間關(guān)系必須偶數(shù)倍（包括正形空間和負型空間）才能避免在導(dǎo)出多倍圖的情況下出現(xiàn)虛邊。
05、角度
在大多數(shù)情況下，保持45度角或其倍數(shù)。在45度角上的鋸齒步進是均勻分布的（源于像素端對端對齊），因此消除鋸齒后結(jié)果會很清晰，并且該角度在對角線上，讓圖案容易識別，這也讓人眼看起來非常舒服。這種可識別的模式在一套圖標中建立了一致性，并在單個圖標中建立了統(tǒng)一性。 如果設(shè)計要求您必須違反這個規(guī)則，您可以請嘗試以一半（22.5度，11.25等）或15度的倍數(shù)。 每種情況都不同，因此都試一試。 使用45度的一半的好處是，鋸齒的步進仍然分布相當(dāng)均勻。
06、插件
inkscribe和VectorScribe，具體用法和下載可自行百度。
