個人前端規範系列-圖標工程化[好用的圖標]

爲何要有圖標規範

1.文字和圖標能更好的搭配使用
圖標是具備指代意義的圖形，也是一種標識，即文字的一種延展，實際應用中也常與文字一塊兒配合使用,按字體標準規範化設計的圖標更容易對齊。
2.圖標適配變得更簡單，圖標風格更統一,大小統一
矢量化後的圖標，因爲程序對顏色大小可控,且不失真的特色,更利於適配實現圖標的72變。另外因爲切圖大小統一，不用把時間花費在調整圖片容器上。
3.能快速修改和獲得想要的圖標
圖標命名規範化後,編程人員能夠很快配合ide找到想要的圖標。 不用把時間浪費在找圖上。

目標

1.圖標規格統一
2.圖標命名規範
3.圖標切取統一
4.圖標管理

圖標命名規範

規範順序

[圖標名]-[狀態?]-[形狀?]-[描線?]-[方向?]@[1,2,3]x.png 帶?號爲可選

圖標名

公用圖標名

舉例:[圖標名]
舉例:button
釋義:按鈕

非公用圖標名

舉例:[模塊]-[類別]-[功能]
舉例:nav-button-search
釋義:導航-按鈕-搜索

修飾名定義

形狀

這裏咱們簡單分三種狀況,一種被方框包圍-square，一種被圓圈包圍-circle

是否實心

這裏咱們使用修飾符-o表示描邊型，不帶-o爲實心型

經常使用狀態svg和iconfont能夠不須要

經常使用狀態
激活 actived
禁用 disabled
懸停 hover

示例

帶圈圈的加號非實心且激活
png：plus-actived-circle-o
svg/iconfont: plus-circle-o

建議使用svg和iconfont

png vs svn vs iconfont

格式	優點	劣勢
png	渲染快	存在適配問題須要製做各類x圖,程序不可控，適配後體積大
svg	支持單獨和整合打包,支持多色彩,矢量,顏色大小可控,有成熟的管理工具	渲染比圖片慢
iconfont	矢量，顏色大小可控,有成熟的管理工具	不支持多色彩,字體文件大,低像素屏有鋸齒

那麼簡單得出svg和iconfont的特色

• 設計只需出一次圖,圖標集中處理,程序可批量改色改大小且不失真
• 能夠直接獲取別人的svg或 iconfont進行修改

工具管理示例

阿里UX矢量圖標庫

小結

若是設計不介意頻繁改圖片顏色，製做各類大小狀態。使用png也是能夠的，但基於之後項目換膚的要求仍是建議svg和iconfont裏二選一。

圖標設計規範

圖標要有重心

根據不一樣的圖標形狀類型使用不一樣的輪廓線，可使圖標之間保持一致的視覺效果。
請將全部圖標在 1024×1024（16×16 的 64 倍）的畫板中製做。
權重不一的圖標會破壞視覺平衡

圖標尺寸規範

規範

應該與字體搭配時和字體的尺寸保持一致儘可能不要標新立異,由於只有和字體大小一致時並排時才能保持水平對齊[一下爲@1x時的狀況]。

勁量不要切入陰影，因爲陰影的深度，若是沒有切取得當，常常拿到陰影截斷的圖標,導致反覆修改

圖標切圖規範

規範

無論圖標是扁的 仍是長的方的 都應該一致切成方的須要按設計圖標時的容器輪廓線切圖，由於程序設計時若是每一個圖標都要特定定義一個特別的容器來裝的話，工做量和可維護性都會出現很大問題。