來源：一淘UX
設計的迴圈
畢加索終生喜歡畫牛。年輕時他畫的牛體形龐大，有血有肉，威武雄壯。但隨著年齡的增長，他畫的牛越來越突顯筋骨。到他八十多歲時，他畫的牛隻有瘳瘳數筆，乍看上去就象一副牛的骨架。那些牛的外在的皮毛、血肉全沒有了，只剩一副具有牛的神韻的骨架了。
設計也同樣，過去我們藉助工具希望把我們的設計做的很飽滿很逼真，通過漸變、高光、投影等手段把效果做的很絢麗，但是隨著設計風格的推進，簡約越來越受設計師們推崇，可能因為我們生活在一個嘈雜的社會，設計師們希望通過簡化設計，去除一些無用的元素凸顯產品主要功能為我們的科技生活帶來一些寧靜；
我們彷彿看到了大師畫11副牛時思考的畫面。簡單——真實——簡練；
圖示設計
圖示是網站、軟體設計不可避免的涉及到元素，在過去各個大公司在圖示設計上有自己不同的理解，微軟的圖示設計的原則是數位化，非真實生活中有的。蘋果公司的圖示設計更偏於寫實。但今天他們對圖示的表現風格卻有了一些共識——扁平化！雖然圖示在頁面、軟體中的存在地位是勿用質疑的，但是設計師還是希望降低圖示對內容的干擾，圖示設計時設計師更注重圖示形本身所能傳達的含義，使用者是否可以很直覺的瞭解圖示形的含義。
科技帶來的挑戰
科技日新月異的今天，市面上各種解析度、各種顯示精度的顯示裝置層出不窮，在不同精度不同解析度的顯示裝置下圖示的應用展現出現了不同要求；如設計師為iphone 3gs設計的圖示在iphone4下的展現就顯得很糟糕了。我們為pc端產品設計的圖示到平板電腦上顯示（new ipad）上展現就不盡人意了。那這麼多的顯示裝置，那麼多的圖示尺寸設計師難道要一個一個去優化去設計嗎？
傳統點陣圖形式的圖示應用使設計師在不同平臺上花費很多重複的工作量，而且還未必能做到面面俱到。向量圖示技術在網站、app中的應用就顯得尤為重要了；
向量技術在圖示上的應用
現在可以承載向量圖形，同時又可以在app、web上使用的主要有svg和我們熟悉的字型檔案；在這裡我們主要介紹後者——圖示字型；顧名思義圖示字型是將圖示以字型檔案為載體在頁面中展現，前段工程師可以通過控制字型的方式控制圖示的大小顏色；
圖示字型的特點：
1、高相容性；因為是向量格式所以圖示在不同解析度不同顯示精度的顯示裝置下都不會出現模糊的情況；
2、易於控制；因為是字型格式，所以可以通過css控制圖示的大小、色彩實現投影、浮雕等效果，也可以通過兩個圖示疊加方式的方式實現更多豐富的效果；
3、方便管理查詢；由於圖示字型的靈活呼叫並展現，我們在可以把他們集合展現在一個頁面上，設計師或則前端工程師可以方便查詢或預覽部門效果；
4、檔案非常輕量；一個專案如果只需要20個圖示，一份圖示字型檔案的大小可能不超過15K。
5、減輕設計師的工作量；對於苦逼的設計師來說一個圖示只要畫一次，可以衍生出不同尺寸，那絕對是福音；
圖示字型制作
首先是製作字型軟體，大家可以使用Font Creator Program、Fontographer、FontLab Studio；我們這裡主要介紹如何用FontLab Studio製作一個帶有圖示的字型，非常簡單；
1、複製一個已在AI或ps裡畫好的圖形，圖形的路徑必須是封閉的；
2、用fontlab開啟一個字型，拷貝圖形並替換某個文字圖形，調整圖形大小（以虛框為標準，大小不要超過虛框）
3、將製作好的圖示匯出ttf字型格式；
前端應用
第一步：使用font-face宣告字型
-
1@font-face {font-family: 'uxiconfont';src: url('uxiconfont.eot'); /* IE9*/src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('uxiconfont.woff') format('woff'), /* chrome、firefox */url('uxiconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('uxiconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */}
- 第二步：定義使用iconfont的樣式
-
1.iconfont{font-family:"uxiconfont";font-size:16px;font-style:normal;}
- 第三步：挑選相應圖示並獲取字型編碼，應用於頁面
-
1<icolor: rgb(3, 105, 6); ">iconfont">!</i>