好東西和好的小技巧不能藏著，掖著，一定要告訴大家，與大家一起分享。如果你還有別的統(tǒng)一圖標(biāo)大小的方法，不妨也告訴25學(xué)堂。

今天學(xué)堂分享的一個(gè)設(shè)計(jì)統(tǒng)一圖標(biāo)大小的方法來自簡書上的妖葉秋的分享。

當(dāng)我們想要在整理設(shè)計(jì)稿中出現(xiàn)的圖標(biāo)，整理除了匯總之外，還需要重新調(diào)整一下圖標(biāo)的大小，使他們看起來“差不多大”。想要弄成一致性和統(tǒng)一性，非常的麻煩和耗時(shí)。于是作者

最后在谷歌的Material Design找到了一種規(guī)定的方式，特此來跟大家分享一下。

上圖就是我們今天要跟大家分享的一個(gè)統(tǒng)一圖標(biāo)大小的模型。

我們先舉例制作一套：圖標(biāo)大小為48px*48px的 。如果你還需要其他尺寸的圖標(biāo)可以做完之后等比放縮即可。那你設(shè)計(jì)的圖標(biāo)最好是矢量的或者是形狀圖標(biāo)。

谷歌官方規(guī)定Material Design 圖標(biāo)的形狀類型分為三種：

圓形、方形和矩形。

其中圓形的半徑為44px，方形的邊長為38px， ? 矩形為44px*32px。

1、那么問題就來了？怎么判定圖標(biāo)應(yīng)該套用那種尺寸的？

其實(shí)很簡單。下面教你一種方法是：將圖標(biāo)與上圖的模板居中對(duì)齊，然后中心不動(dòng)，放大圖標(biāo)使之圖標(biāo)依次碰到三種形狀的邊界，填充最滿的那個(gè)形狀的尺寸就是該圖標(biāo)需要規(guī)定的尺寸。

如下圖，依次將設(shè)置圖標(biāo)放大并使之接觸到不同形狀的邊界，可以看到在圓形里，該圖標(biāo)最大，證明設(shè)置圖標(biāo)最匹配圓形，所以使用圓形的尺寸44px*44px。

上面我們舉例說明都是面型圖標(biāo)，線型圖標(biāo)也是如此。手機(jī)APP圖標(biāo)設(shè)計(jì)常識(shí)：線形圖標(biāo)的風(fēng)格繪制和什么樣的icon圖標(biāo)才算是好的APP圖標(biāo)設(shè)計(jì)呢

2、下面正式定義尺寸部分：

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)整后。

下面是作者分享四個(gè)需要大家注意的四個(gè)點(diǎn)：

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ù)貙?duì)尺寸進(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)于對(duì)齊的問題。

如果有仔細(xì)看，我這個(gè)方法指定的圖標(biāo)大小為48px*48px，但是里面有內(nèi)容的部分，比如說圓形，就只會(huì)占據(jù)44px*44px，這時(shí)候我們當(dāng)然會(huì)希望把圖形放置在圖標(biāo)的中央。免不了就會(huì)使用對(duì)齊工具，咻咻兩下，一個(gè)上下居中對(duì)齊，一個(gè)左右居中對(duì)齊，搞掂。

但是，慢著，如果仔細(xì)發(fā)現(xiàn)一下，你會(huì)發(fā)現(xiàn)看上去并不是居中的。這是由于人的視覺錯(cuò)覺造成的【2】，這時(shí)候就需要進(jìn)行適當(dāng)?shù)恼{(diào)整，通過自己的視覺判斷來進(jìn)行對(duì)齊。

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透明度那里有問題，修改一下即可。

以上內(nèi)容來源：簡書妖葉秋作者的文章：http://www.jianshu.com/p/1e3dce79ad9b