公司現(xiàn)在已有一整套的Icon，那我們應該如何繪制一個Icon，讓其風格與之前的保持統(tǒng)一呢。
| ?在設計icon時，按標準化規(guī)范設計
icon設計的標準化規(guī)范是圖標柵格化矢量設計，像素滿格，輪廓精確對齊1px網(wǎng)格，而不是0.1~0.9px，減少線條發(fā)虛。
刪格模板（白色畫板大小28px*28px，每格1px*1px）
圓形icon
直徑為28px ?描邊為2px
方形icon
邊長16px，圓角1px，內(nèi)部均為直角，主線條2px，輔助線條1px（由于方形本身視覺上看起來比圓形大，因此在同一范圍內(nèi)方形要往中心點收縮一部分才會讓兩者在視覺上保持一致）。
水平矩形icon
寬28px高21px，圓角1px，內(nèi)部均為直角，主線條2px，輔助線條1px
豎直矩形icon
寬24px高26px，圓角1px，內(nèi)部均為直角，主線條2px，輔助線條1px
不規(guī)則icon
舉例：圖中音符高28px寬27px，圓角不定，主線條2px，輔助線條1px
以上只是拿一套圖標中的幾個做個范例，最終目的要做到利用這些核心形狀做為向導，使整個相關產(chǎn)品的圖標保持一致的視覺比例。
關鍵點
● ?主線條2px，輔助線條1px，不要修改它
● ?一致的圓角半徑（1px）是統(tǒng)一全系列系統(tǒng)圖標的關鍵，不要修改它
● ?圖標內(nèi)部的角應為直角，不要修改它
● ?在部分只由線段組成的圖形中（比如 ? ），線段的端點為圓頭端點，不要修改它
| ?制作成字體圖標方便后續(xù)使用
按照圖標制作規(guī)范畫完icon后，我們經(jīng)常會制作成字體圖標。
什么是字體圖標
利用字體工具把我們平時 Web 上用的圖形圖標（icons）轉換成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到網(wǎng)頁里，用以顯示 icons。
為什么要制作字體圖標
● ? 字體是矢量化圖形，它天生具有「分辨率無關」的特性，在任何分辨率和PPI下面，都可以做到完美縮放，不會像傳統(tǒng)位圖， 如：png，jpeg，放大后有鋸齒或模糊現(xiàn)象。
● ? ?文件小。
● ? ?加載性能好。
● ? ?支持css樣式。
● ? ?兼容性好。
如何制作字體圖標
我們現(xiàn)在用的字體圖標平臺是阿里巴巴旗下的Iconfont，我們先來看一下它的制作指南
除了遵守以上規(guī)則外，我們需要新建一個畫板（560px*560px），將制作的28px*28px的圖標復制進去，按快捷鍵command+k開啟首選項設置，勾選“縮放描邊和效果”選項，如下圖所示
然后將28px*28px的圖標放大為560px*560px，上下左右居中對齊畫板。然后導出為svg文件。
最后打開iconfont頁面，上傳svg文件并選擇去除顏色并提交。
這樣我們就會在我的圖標內(nèi)看到剛剛上傳的圖標，字體圖標就上傳成功了
如何把字體圖標給到開發(fā)
通常開發(fā)要用字體圖標，會找到設計師。那設計師應該如何交付字體圖標呢
這時候字體圖標的強大之處就體現(xiàn)出來了，感謝阿里爸爸提供這個平臺～～
我們只需要選擇開發(fā)需要的圖標項目，下載到本地就可以，會自動生成一個文件包，給到開發(fā)就好了。
到此，字體圖標的整個制作流程就完成了，這個流程基本上可以適用，除非某些大型公司有自己特別的規(guī)范和標準。以上只是我的一些經(jīng)驗，如果不妥之處請留言，如果正確我會及時修改，非常感謝～
