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

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

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

下面正式定義尺寸部分：

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

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

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

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

順便把這次整理圖標遇到的坑也記錄一下：

1. 關于半像素的問題。

半像素的問題主要是在進行Android不同尺寸適配的時候，有時候開發會要求圖標不能出現非整數的尺寸，不然可能圖標就會糊掉。所以在設計Android端使用的圖標時，注意一下這個問題。適當地對尺寸進行四舍五入一下即可。

2. 關于iconfont的問題。

現在大部分團隊都會將圖標轉換為iconfont，這樣可以縮小整個項目的大小。圖標在轉換為iconfont的時候，會忽略所有的線條（包括填充色塊的邊）。所以，如果圖標中有線條，則需要利用高度為1px的矩形代替，色塊的邊長需要用色塊疊加來替代。

3. 關于對齊的問題。

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

4. 關于顏色統一的問題。

一般而言，圖標設定為同一個色值（比如#999999）就能統一顏色，但是也有遇到過某個圖標會顯得顏色比較淺，這是因為sketch處理圖形的透明度有兩個地方，一個是整體的透明度（在填充選項區域的上方），一個是填充的透明度，這個往往是因為整體透明度那里有問題，修改一下即可。

【1】圖標 – Material Design 中文版

【2】盡信工具，還不如沒有工具@設計譯言

#專欄作家#

妖葉秋，一年級交互設計師，人人都是產品經理專欄作家。做過ToC產品的交互設計，現在在嘗試ToB的業務。主攻交互，也懂點用研、視覺和產品的知識。愛生活、愛設計、愛讀書、愛總結，頭像下方是我的聯系方式，歡迎志同道合者與我交流。

本文原創發布于人人都是產品經理，未經許可，不得轉載。