一直在各種文章中能看到圖標(biāo)的尺寸規(guī)范，但是每個(gè)人都有自己的規(guī)范尺寸，或者說基礎(chǔ)尺寸，你可能知道了44PX的網(wǎng)格規(guī)范，但不知道30PX又應(yīng)該怎么畫，而且這些具體這個(gè)尺寸到底是怎么來的也不知道，所以花了幾天的時(shí)間，看了站酷、人人都是產(chǎn)品經(jīng)理、簡書的一些文章，然后總結(jié)出來了這些尺寸的算法以及他們的來源，如有錯(cuò)誤，歡迎拍磚。

 

一、為什么要制定圖標(biāo)網(wǎng)格？

圖標(biāo)設(shè)計(jì)有效的三個(gè)屬性（樣式、美學(xué)統(tǒng)一以及可識(shí)別性），其中美學(xué)統(tǒng)一就是說：線寬是不是一致（2px？4px？）、是圓角還是方角？圓角的大小是不是一致？有沒有斷點(diǎn)？斷點(diǎn)的規(guī)律是什么？配色是不是統(tǒng)一？有沒有點(diǎn)綴？有沒有背影？風(fēng)格構(gòu)成什么（面，線，填充線，或者字形）。元素的統(tǒng)一會(huì)讓你的圖標(biāo)看上去整體風(fēng)格是統(tǒng)一的。而我們要探討的就是元素的視覺統(tǒng)一……

如下圖所示，我們畫圖標(biāo)的時(shí)候，物體會(huì)有長有扁，有圓有方，在統(tǒng)一體量感的時(shí)候，就需要用到里面的一些參考線。保證正方形、圓形、縱向矩形、水平矩形視覺保持一致大小。

二、定義網(wǎng)格系統(tǒng)

產(chǎn)品圖標(biāo)網(wǎng)格被用來促進(jìn)圖標(biāo)的一致性，以及為圖形元素的定位建立一組清晰的規(guī)范。這種標(biāo)準(zhǔn)化的規(guī)范造就了一個(gè)靈活但有條理的系統(tǒng)。使用這些核心形狀作為準(zhǔn)則，你可以在相關(guān)產(chǎn)品圖標(biāo)的設(shè)計(jì)中保持一致的視覺比例。

如下圖所示，我們用A、B、C、D四個(gè)尺寸來表示

然后看一些我在文章中看到的幾種設(shè)計(jì)網(wǎng)格尺寸：（為方便計(jì)算，我把MD網(wǎng)格除以4）

看到這些尺寸的時(shí)候，我腦海中有幾個(gè)問題：

問題1：為什么這些尺寸沒有統(tǒng)一？

問題2：A是44×44的時(shí)候是這個(gè)設(shè)計(jì)規(guī)范，那么A是34×34的時(shí)候，B和C又應(yīng)該怎么設(shè)置？

問題3：這幾種尺寸中的B和C到底是怎么來的？

 

三、網(wǎng)格規(guī)范算法

帶著那3個(gè)問題，開始查閱資料、文章，然后就發(fā)現(xiàn)這個(gè)B和C其實(shí)是有章可循的。算法是基于面積。

相信大家都知道，44×44的矩形比44×44的圓從視覺上來說要大一些，這是為什么呢？這里就牽扯出來一個(gè)面積算法。可看下圖

從視覺上看，矩形要比圓開大，但我們拉根參考線，發(fā)現(xiàn)二者其中一樣高

把這2個(gè)圖形放在一起，發(fā)現(xiàn)明顯矩形的面積要比圓的面積大，算法相當(dāng)簡單了

矩形面積S=邊長×邊長=44×44=1936

圓的面積S=π×R²=π×（D÷2）²=3.14×（44÷2）²=3.14×22×22=1519.76

很明顯1936>1519.76

 

我們用這套面積算法試一下iOS中的B和C

A是圓形，面積S_A=π×R²=π×（A/2）²    R為半徑，A是直徑，所以R=A/2

B是正方形，面積S_B=邊長×邊長=B×B

C是長方形，面積S_C=邊長×邊長=C×D

要想視覺大小統(tǒng)一，則  S_A=S_B=S_C

對于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)，稍微大點(diǎn)小點(diǎn)無所謂

 

由此得知，無論你的A的尺寸是多少，都可以根據(jù)公式計(jì)算出B和C。參考線是死的，人眼是活的，畫完以后，要靠感覺微調(diào)，直至視覺上體量感達(dá)到一致。擺脫死記硬背，媽媽再也不用擔(dān)心我的學(xué)習(xí)了。

四、小tips

01、icon尺寸

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

 

02、安全邊界

為避免給開發(fā)切圖時(shí)貼邊節(jié)，導(dǎo)致圖標(biāo)出現(xiàn)不自然的邊界，我們需要上面的規(guī)范外添加一個(gè)外框，圖標(biāo)不要畫超過這個(gè)界線。如紅色外框?yàn)?8×48，黃色內(nèi)框也就是安全邊界為：44×44

03、參數(shù)設(shè)置與參考線的繪制

我平時(shí)是用AI畫圖標(biāo)，所以這里僅演示的是用AI畫圖標(biāo)的方法。第一步：在首選項(xiàng)-參考線和網(wǎng)格，網(wǎng)格線間隔10px，次分隔線10，勾選顯示像素網(wǎng)格；

第二步：畫布框內(nèi)點(diǎn)擊鼠標(biāo)右鍵，顯示網(wǎng)格；

第三步：在視圖中打開“對齊網(wǎng)格”“對齊像素”“對齊點(diǎn)”。

04、關(guān)于圖標(biāo)不模糊的方法

我們在@2x，icon內(nèi)部的橫向方向和豎向方向的所有元素的像素值必須是偶數(shù)，同時(shí)他們的間隔也是偶數(shù)倍，也就是2px的整數(shù)倍。也就是構(gòu)成圖標(biāo)的所有元素之間關(guān)系必須偶數(shù)倍（包括正形空間和負(fù)型空間）才能避免在導(dǎo)出多倍圖的情況下出現(xiàn)虛邊。

05、角度

在大多數(shù)情況下，保持45度角或其倍數(shù)。在45度角上的鋸齒步進(jìn)是均勻分布的（源于像素端對端對齊），因此消除鋸齒后結(jié)果會(huì)很清晰，并且該角度在對角線上，讓圖案容易識(shí)別，這也讓人眼看起來非常舒服。這種可識(shí)別的模式在一套圖標(biāo)中建立了一致性，并在單個(gè)圖標(biāo)中建立了統(tǒng)一性。 如果設(shè)計(jì)要求您必須違反這個(gè)規(guī)則，您可以請嘗試以一半（22.5度，11.25等）或15度的倍數(shù)。 每種情況都不同，因此都試一試。 使用45度的一半的好處是，鋸齒的步進(jìn)仍然分布相當(dāng)均勻。

06、插件

inkscribe和VectorScribe，具體用法和下載可自行百度。