Iconfont——阿里巴巴矢量圖標庫,是阿里巴巴UED團隊(花名: 阿里媽媽MUX)打造的矢量圖標管理平臺。
Iconfont
通過這個免費的工具,設計師不僅可以瀏覽下載(不可商用)大量優秀設計師的圖標作品,還可以管理和展示自己設計的圖標。是很多UI設計師日常工作的必備工具。
以下是我認為非常實用的幾點功能:
- 矢量圖標云存儲工具,搜索功能強大
UI設計師在工作中要繪制大量的圖標,這給管理和查找圖標帶來了困難。具有好習慣的設計師,將圖標分門別類的存儲在本地,要花費一定的時間精力和存儲空間。習慣不好的設計師,估計用完即焚,下次又要重畫。
如果把圖標存儲在Iconfont上,那么只要是有網絡的地方,就可以重復使用自己之前畫過的圖標。Iconfont支持模糊搜索,讓查找圖標變得非常便捷。
- 支持尺寸和顏色的變幻,讓設計師和切圖說再見
當你在Iconfont平臺上傳了一個符合其規范的矢量圖標,那你的團隊接下來要做的僅僅就是下載。
Iconfont支持選擇尺寸和顏色,所以,設計師不必再切2-3套圖,工程師需要什么尺寸,可以在平臺上自行下載。
下載時,可以設置顏色和尺寸
- 建立自己的圖標作品集,支持打賞
Iconfont的知名度意味著,設計師可以在這個平臺上宣傳自己。簡歷里直接給意向企業自己圖標庫的鏈接,實力展現一目了然。
而且,優秀的作品,還會收到打賞,雖然不多,但是也算是一筆小小的收入。
在Iconfont平臺上傳圖標的注意事項
工具:Sketch/Illustrator, 個人建議單色圖標兩者皆可,彩色圖標用AI。
格式:SVG
上傳不成功時的可能原因排查:
- 顏色:支持單色和彩色,不支持漸變和透明度
- 不支持描邊,上傳前將描邊輪廓化(outline stroke)。理想情況下,UI設計師制作圖標應該用圖形的運算,而不是描邊。如果你是用規范的方式做的圖標,就可以忽略這一步。
- 用sketch制作的時候,確保合并所有的形狀為一個形狀組件。再導出為SVG。否則上傳SVG后,文件為空。
沒有合并形狀組件,錯誤
上傳文件成功,但是圖標顯示不出
合并成一個形狀組件,正確
- 彩色圖標,必須在AI中先“擴展對象”(不知Sketch是否有類似功能,如果有朋友知道,請不吝賜教),再導出SVG。否則上傳的文件為空。
擴展對象
現在,我幾乎每天都要訪問Iconfont, 一方面是在設計圖標的時候采集靈感,另一方面是管理自己的圖標庫,以及所在公司項目組的圖標庫。它給我的工作帶來了極大的便利。