首先，這種方法制作出來的圖標(biāo)大小為48px*48px，需要其他尺寸的圖標(biāo)可以做完之后等比放縮即可，放縮過程中可能需要注意半像素（見下文）的問題。

Material Design把圖標(biāo)的形狀類型分為三種：圓形、方形和矩形。其中圓形的半徑為44px，方形的邊長為38px，矩形為44px*32px。

怎么判定圖標(biāo)應(yīng)該套用那種尺寸的？有一種方法是：將圖標(biāo)與上圖的模板居中對齊，然后中心不動，放大圖標(biāo)使之圖標(biāo)依次碰到三種形狀的邊界，填充最滿的那個(gè)形狀的尺寸就是該圖標(biāo)需要規(guī)定的尺寸。如下圖，依次將設(shè)置圖標(biāo)放大并使之接觸到不同形狀的邊界，可以看到在圓形里，該圖標(biāo)最大，證明設(shè)置圖標(biāo)最匹配圓形，所以使用圓形的尺寸44px*44px。

下面正式定義尺寸部分：

1. 如果形狀為方形，則圖標(biāo)大小為38px*38px，若只是近似的方形，則取較小的邊為38px，等比放縮。

2. 如果形狀為圓形，則取圖標(biāo)大小為44px*44px，若只是近似的圓形，取較大的邊為44px，等比放縮。

3. 如果形狀為矩形，先令短邊為32px，等比放縮圖標(biāo)，若此時(shí)長邊大于或者約等于44px，則取長邊為44px，等比放縮；否則，令長邊為y，取長邊為（44+y）/2，再向上取整，然后進(jìn)行等比放縮。

根據(jù)以上的規(guī)則制定出來的圖標(biāo)，大小就會比較統(tǒng)一。如下圖，左邊是調(diào)整前，右邊是調(diào)整后。（不過也有人反饋說看不太出來o(╯□╰)o）

順便把這次整理圖標(biāo)遇到的坑也記錄一下：

1. 關(guān)于半像素的問題。

半像素的問題主要是在進(jìn)行Android不同尺寸適配的時(shí)候，有時(shí)候開發(fā)會要求圖標(biāo)不能出現(xiàn)非整數(shù)的尺寸，不然可能圖標(biāo)就會糊掉。所以在設(shè)計(jì)Android端使用的圖標(biāo)時(shí)，注意一下這個(gè)問題。適當(dāng)?shù)貙Τ叽邕M(jìn)行四舍五入一下即可。

2. 關(guān)于iconfont的問題。

現(xiàn)在大部分團(tuán)隊(duì)都會將圖標(biāo)轉(zhuǎn)換為iconfont，這樣可以縮小整個(gè)項(xiàng)目的大小。圖標(biāo)在轉(zhuǎn)換為iconfont的時(shí)候，會忽略所有的線條（包括填充色塊的邊）。所以，如果圖標(biāo)中有線條，則需要利用高度為1px的矩形代替，色塊的邊長需要用色塊疊加來替代。

3. 關(guān)于對齊的問題。

如果有仔細(xì)看，我這個(gè)方法指定的圖標(biāo)大小為48px*48px，但是里面有內(nèi)容的部分，比如說圓形，就只會占據(jù)44px*44px，這時(shí)候我們當(dāng)然會希望把圖形放置在圖標(biāo)的中央。免不了就會使用對齊工具，咻咻兩下，一個(gè)上下居中對齊，一個(gè)左右居中對齊，搞掂。但是，慢著，如果仔細(xì)發(fā)現(xiàn)一下，你會發(fā)現(xiàn)看上去并不是居中的。這是由于人的視覺錯覺造成的【2】，這時(shí)候就需要進(jìn)行適當(dāng)?shù)恼{(diào)整，通過自己的視覺判斷來進(jìn)行對齊。

4. 關(guān)于顏色統(tǒng)一的問題。

一般而言，圖標(biāo)設(shè)定為同一個(gè)色值（比如#999999）就能統(tǒng)一顏色，但是也有遇到過某個(gè)圖標(biāo)會顯得顏色比較淺，這是因?yàn)閟ketch處理圖形的透明度有兩個(gè)地方，一個(gè)是整體的透明度（在填充選項(xiàng)區(qū)域的上方），一個(gè)是填充的透明度，這個(gè)往往是因?yàn)檎w透明度那里有問題，修改一下即可。

【1】圖標(biāo) – Material Design 中文版

【2】盡信工具，還不如沒有工具@設(shè)計(jì)譯言

#專欄作家#

妖葉秋，一年級交互設(shè)計(jì)師，人人都是產(chǎn)品經(jīng)理專欄作家。做過ToC產(chǎn)品的交互設(shè)計(jì)，現(xiàn)在在嘗試ToB的業(yè)務(wù)。主攻交互，也懂點(diǎn)用研、視覺和產(chǎn)品的知識。愛生活、愛設(shè)計(jì)、愛讀書、愛總結(jié)，頭像下方是我的聯(lián)系方式，歡迎志同道合者與我交流。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。