最近在整理設(shè)計(jì)稿中出現(xiàn)的圖標(biāo)，整理除了匯總之外，還需要重新調(diào)整一下圖標(biāo)的大小，使他們看起來(lái)“差不多大”。調(diào)了很久，也咨詢了一些設(shè)計(jì)師朋友，最后在谷歌的Material Design找到了一種規(guī)定的方式，特此來(lái)記錄一下。需要注意的是，方法有很多，這只是提供一種可行的方法，可供參考，有什么問(wèn)題可以留言討論。
首先，這種方法制作出來(lái)的圖標(biāo)大小為48px*48px，需要其他尺寸的圖標(biāo)可以做完之后等比放縮即可，放縮過(guò)程中可能需要注意半像素（見(jiàn)下文）的問(wèn)題。
Material Design把圖標(biāo)的形狀類型分為三種：圓形、方形和矩形。其中圓形的半徑為44px，方形的邊長(zhǎng)為38px，矩形為44px*32px。
怎么判定圖標(biāo)應(yīng)該套用那種尺寸的？有一種方法是：將圖標(biāo)與上圖的模板居中對(duì)齊，然后中心不動(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í)長(zhǎng)邊大于或者約等于44px，則取長(zhǎng)邊為44px，等比放縮；否則，令長(zhǎng)邊為y，取長(zhǎng)邊為（44+y）/2，再向上取整，然后進(jìn)行等比放縮。
根據(jù)以上的規(guī)則制定出來(lái)的圖標(biāo)，大小就會(huì)比較統(tǒng)一。如下圖，左邊是調(diào)整前，右邊是調(diào)整后。（不過(guò)也有人反饋說(shuō)看不太出來(lái)o(╯□╰)o）
順便把這次整理圖標(biāo)遇到的坑也記錄一下：
1. 關(guān)于半像素的問(wèn)題。
半像素的問(wèn)題主要是在進(jìn)行Android不同尺寸適配的時(shí)候，有時(shí)候開(kāi)發(fā)會(huì)要求圖標(biāo)不能出現(xiàn)非整數(shù)的尺寸，不然可能圖標(biāo)就會(huì)糊掉。所以在設(shè)計(jì)Android端使用的圖標(biāo)時(shí)，注意一下這個(gè)問(wèn)題。適當(dāng)?shù)貙?duì)尺寸進(jìn)行四舍五入一下即可。
2. 關(guān)于iconfont的問(wèn)題。
現(xiàn)在大部分團(tuán)隊(duì)都會(huì)將圖標(biāo)轉(zhuǎn)換為iconfont，這樣可以縮小整個(gè)項(xiàng)目的大小。圖標(biāo)在轉(zhuǎn)換為iconfont的時(shí)候，會(huì)忽略所有的線條（包括填充色塊的邊）。所以，如果圖標(biāo)中有線條，則需要利用高度為1px的矩形代替，色塊的邊長(zhǎng)需要用色塊疊加來(lái)替代。
3. 關(guān)于對(duì)齊的問(wèn)題。
如果有仔細(xì)看，我這個(gè)方法指定的圖標(biāo)大小為48px*48px，但是里面有內(nèi)容的部分，比如說(shuō)圓形，就只會(huì)占據(jù)44px*44px，這時(shí)候我們當(dāng)然會(huì)希望把圖形放置在圖標(biāo)的中央。免不了就會(huì)使用對(duì)齊工具，咻咻兩下，一個(gè)上下居中對(duì)齊，一個(gè)左右居中對(duì)齊，搞掂。但是，慢著，如果仔細(xì)發(fā)現(xiàn)一下，你會(huì)發(fā)現(xiàn)看上去并不是居中的。這是由于人的視覺(jué)錯(cuò)覺(jué)造成的【2】，這時(shí)候就需要進(jìn)行適當(dāng)?shù)恼{(diào)整，通過(guò)自己的視覺(jué)判斷來(lái)進(jìn)行對(duì)齊。
4. 關(guān)于顏色統(tǒng)一的問(wèn)題。
一般而言，圖標(biāo)設(shè)定為同一個(gè)色值（比如#999999）就能統(tǒng)一顏色，但是也有遇到過(guò)某個(gè)圖標(biāo)會(huì)顯得顏色比較淺，這是因?yàn)閟ketch處理圖形的透明度有兩個(gè)地方，一個(gè)是整體的透明度（在填充選項(xiàng)區(qū)域的上方），一個(gè)是填充的透明度，這個(gè)往往是因?yàn)檎w透明度那里有問(wèn)題，修改一下即可。
