最近在整理設(shè)計(jì)稿中出現(xiàn)的圖標(biāo)，整理除了匯總之外寝志，還需要重新調(diào)整一下圖標(biāo)的大小哆料，使他們看起來“差不多大”缸剪。調(diào)了很久，也咨詢了一些設(shè)計(jì)師朋友东亦，最后在谷歌的Material Design找到了一種規(guī)定的方式杏节，特此來記錄一下唬渗。需要注意的是，方法有很多奋渔，這只是提供一種可行的方法镊逝，可供參考，有什么問題可以留言討論嫉鲸。
首先撑蒜，這種方法制作出來的圖標(biāo)大小為48px*48px，需要其他尺寸的圖標(biāo)可以做完之后等比放縮即可玄渗，放縮過程中可能需要注意半像素（見下文）的問題座菠。
Material Design把圖標(biāo)的形狀類型分為三種：圓形、方形和矩形藤树。其中圓形的半徑為44px浴滴，方形的邊長為38px，矩形為44px*32px岁钓。
怎么判定圖標(biāo)應(yīng)該套用那種尺寸的升略？有一種方法是：將圖標(biāo)與上圖的模板居中對齊，然后中心不動(dòng)甜紫，放大圖標(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)，大小就會(huì)比較統(tǒng)一的圆。如下圖鼓拧，左邊是調(diào)整前，右邊是調(diào)整后越妈。（不過也有人反饋說看不太出來o(╯□╰)o）
順便把這次整理圖標(biāo)遇到的坑也記錄一下：
1. 關(guān)于半像素的問題季俩。
半像素的問題主要是在進(jìn)行Android不同尺寸適配的時(shí)候，有時(shí)候開發(fā)會(huì)要求圖標(biāo)不能出現(xiàn)非整數(shù)的尺寸梅掠，不然可能圖標(biāo)就會(huì)糊掉酌住。所以在設(shè)計(jì)Android端使用的圖標(biāo)時(shí)，注意一下這個(gè)問題阎抒。適當(dāng)?shù)貙Τ叽邕M(jìn)行四舍五入一下即可酪我。
2. 關(guān)于iconfont的問題。
現(xiàn)在大部分團(tuán)隊(duì)都會(huì)將圖標(biāo)轉(zhuǎn)換為iconfont且叁，這樣可以縮小整個(gè)項(xiàng)目的大小都哭。圖標(biāo)在轉(zhuǎn)換為iconfont的時(shí)候，會(huì)忽略所有的線條（包括填充色塊的邊）逞带。所以欺矫，如果圖標(biāo)中有線條，則需要利用高度為1px的矩形代替展氓，色塊的邊長需要用色塊疊加來替代穆趴。
3. 關(guān)于對齊的問題。
如果有仔細(xì)看遇汞，我這個(gè)方法指定的圖標(biāo)大小為48px*48px未妹，但是里面有內(nèi)容的部分，比如說圓形空入，就只會(huì)占據(jù)44px*44px教寂，這時(shí)候我們當(dāng)然會(huì)希望把圖形放置在圖標(biāo)的中央。免不了就會(huì)使用對齊工具执庐，咻咻兩下，一個(gè)上下居中對齊导梆，一個(gè)左右居中對齊轨淌，搞掂迂烁。但是，慢著递鹉，如果仔細(xì)發(fā)現(xiàn)一下盟步，你會(huì)發(fā)現(xiàn)看上去并不是居中的。這是由于人的視覺錯(cuò)覺造成的【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)會(huì)顯得顏色比較淺屈溉，這是因?yàn)閟ketch處理圖形的透明度有兩個(gè)地方塞关，一個(gè)是整體的透明度（在填充選項(xiàng)區(qū)域的上方），一個(gè)是填充的透明度子巾，這個(gè)往往是因?yàn)檎w透明度那里有問題帆赢，修改一下即可。
