指導(dǎo)團(tuán)隊(duì)小伙伴的時(shí)候會(huì)發(fā)現(xiàn)他們對(duì)規(guī)范沒什么概念拷淘，但是在實(shí)際工作中，我們的項(xiàng)目有很多的復(fù)用性蒙保，特別是B端后臺(tái)類的辕棚，所以普及各種規(guī)范就比較必要了。
以下是實(shí)際工作中我總結(jié)的有關(guān)圖標(biāo)的規(guī)范邓厕，希望對(duì)大家也有幫助逝嚎。
一、圖標(biāo)命名規(guī)范
做什么：圖標(biāo)的命名需要符合規(guī)范
為何：方便UED團(tuán)隊(duì)協(xié)同使用圖標(biāo)
何時(shí)：隨時(shí)
誰來做：所有UED同學(xué)
-
實(shí)心和描線圖標(biāo)保持同名详恼，用【-o】來區(qū)分补君，比如【question-circle】（實(shí)心） 和【question-circle-o】（描線）；
-
有無-circle/-square區(qū)別于邊框和非邊框昧互，有無-o區(qū)別于實(shí)心和空心
-
有無-circle/-square區(qū)別于邊框和非邊框昧互，有無-o區(qū)別于實(shí)心和空心
-
命名順序：【模塊】-【圖標(biāo)名】-【形狀?】-【描線?】-【方向?】（? 為可選）挽铁。
- 模塊，例如左側(cè)導(dǎo)航欄模塊的圖標(biāo)比較特殊敞掘，圖標(biāo)名前可加【sidebar】叽掘，常用模塊英文：頂部導(dǎo)航欄【navbar】，底部導(dǎo)航欄【tabbar】玖雁，自定義模塊命名根據(jù)實(shí)際需要選擇性添加
- 圖標(biāo)名更扁，常用的圖標(biāo)命名用習(xí)慣的英文單詞命名，非常用和自定義的圖標(biāo)命名可用拼音赫冬，多參考其他網(wǎng)站的命名方式
- 描線浓镜，只在區(qū)分同一個(gè)功能的圖標(biāo)描線和非描線狀態(tài)下使用，如果圖標(biāo)風(fēng)格就是描線劲厌，不用每個(gè)圖標(biāo)后面都加此后綴
PC端圖標(biāo)前綴【pc】膛薛，移動(dòng)端圖標(biāo)前綴【mb】
-
Font Family：【公司名icon】，例如大院的項(xiàng)目名為【dyicon】
特殊模塊的圖標(biāo)前綴
二补鼻、制作字體庫
做什么：制作字體庫
為何：1. 方便UED團(tuán)隊(duì)同步圖標(biāo)哄啄；2. 避免重復(fù)造輪子雅任；3. 方便前端使用字體
何時(shí)：隨時(shí)
誰來做：所有UED同學(xué)
三、icon添加到設(shè)計(jì)稿
做什么：將iconfont的字體同步到設(shè)計(jì)稿
為何：1. 使設(shè)計(jì)稿和上線的產(chǎn)品盡可能地保持一致增淹；2. 避免重復(fù)造輪子椿访；3. 更好地和開發(fā)協(xié)同乌企，
何時(shí)：隨時(shí)
誰來做：所有UED同學(xué)
操作步驟：
-
把字體文件下載到本地
-
雙擊字體文件虑润，安裝到本地
-
復(fù)制icon字體
-
將icon字體粘貼到sketch設(shè)計(jì)稿中
-
修改圖層名稱為fontclass，圖標(biāo)圖層名稱必須和fontclass名稱保持一致加酵，而且盡量不要去修改這個(gè)名稱拳喻，方便前端直接在藍(lán)湖復(fù)制引用該圖標(biāo)
