在 UI 設計中善用 Icon Font
儘管網路頻寬與手機容量已經越來越大，但是 App 檔案大小也是我們需要注意的，而現在的 App 架構越來越大、配合手機螢幕的尺寸破碎化，需要針對尺寸大量出圖時也帶給設計師與工程師不少困擾，而在 App 設計中置入 IconFont 正好可以為我們解決這個問題！
什麼是 IconFont ?
IconFont 顧名思義，就是把我們所繪出的 “Icon” 轉存成字體檔，在要使用的時候只要打出相對應的代碼，就可以以文字的形式產生出該 Icon 而既然為字體檔，當然特性也就與文字一樣，工程師可以自由調整大小、顏色也不用擔心失真的問題！
有接觸過網頁設計的朋友們對於 IconFont 應該都不算陌生，就算沒有使用過，你也一定在某些網站中看過，有些比較常見的如：Font Awesome 、 IcoMoon …等由於其輕便快速以又免費的性質被廣泛運用。
怎麼製作屬於自己的 IconFont ?
這次我們使用的是由 IcoMoon 所提供的服務，可以將 SVG 檔案轉變為 IconFont，步驟非常簡單：
1.將想要整理起來的 Icon 個別 轉存成 SVG 檔案：
這邊是以 Illustrator 為例（筆者有嘗試過 Sketch 的 SVG輸出，但是也許目前Sketch的輸出功能還很陽春，常常會出問題，因此還是建議先將Icon 複製至Illustrator再輸出至SVG）
這邊我整理的方式是將每個 Icon 放置在 72*72 px 的工作區域內，需注意的是圖層只能為一層，不可以有任何多餘的或剪裁路徑，否則在匯入 IcoMoon時會發生問題，而輸出時需另存成個別的 SVG 檔案。
2.Import 至 IcoMoon App
打開 IcoMoon App 並且點選左上角的「Import Icons」、
並且選擇剛剛我們所轉存的 SVG 檔案。
很快地便會看到下面的區塊多了一個 「Untitled Set」 這就是屬於我們自己的 Icon Font了 ！ 可以利用 Header 的工具在此做大小以及位置的微調
3.選擇要輸出的Icon
在 Header 中選擇箭頭工具、選擇要包進字體的所有 Icon，（除了點擊之外也可以拖曳、不用一個一個點）
選擇完畢後，點擊下方的「Generate Font」按鈕，便可以產生字體檔
4.有需要的話，為 Icon 加上 語意
產生完成的頁面，你可以開啟快速分享功能，讓工程師可以引用一行程式碼就可以直接連結你的Icon Font(但此功能只提供免費24小時有效，若需要長期使用則要付費啦～)
如果你什麼都沒有設定就直接下載字體檔的話，也是可以使用的，但再引用時工程師需要按照此表上的代號去輸入，如圖中的愛心 Icon 代號就為「e900」。
但是當你想要將 Icon 連結語意時，則可在此設定「Ligature」，假設我希望使用此字體時，我打出 VoiceTube 、 VT 、 VTawesome 等字樣，就要自動將文字轉變為我設定好的Icon ，便可以在該 Icon 底下的欄位輸入指定文字 !
5.輸出字體，安裝後即可運用
都設定完畢後，可以直接點擊右下角的 “Download”
就可以下載屬於自己的 Icon Font 囉！
打開並且安裝完字體後可以測試看看是否與自己預期的一樣囉：
最後
目前 IconFont 在 App 系統中似乎只支援 Android 系統，在 Ios 系統中出 Icon 還是以 PNG or PDF 為主，但是我主觀認為 iconfont 的彈性真的很大，且將常用的 icon 整理成一個輕便的字體檔也好管理以及維護，更可以統合一致性（也可運用在 Web ），希望大家如果有什麼使用心得或者想法，都可以留言討論哦！
想要了解創造了屬於自己的 icon Font 後，如何在 Sketch 中運用 icon Font 可以參考《在 Sketch 中運用 iconFont》文章。
而將自己所有使用的 icon 統整成一個字體也有助於發展屬於自己企業或者產品的設計系統，有興趣的話可以參考 《為什麼要建立設計系統？》文章。
