前端圖片命名規(guī)范

命名順序

圖片命名建議以以下順序命名：

圖片業(yè)務(wù)（可選） +（mod_）圖片功能類別（必選）+ 圖片模塊名稱（可選） + 圖片精度（可選）

• 圖片業(yè)務(wù)：

  • pp_：拍拍
  • wx_：微信
  • sq_：手Q
  • jd_：京東商城
  • …

• 圖片功能類別：

  • mod_：是否公共，可選
  • icon：模塊類固化的圖標(biāo)
  • logo：LOGO類
  • spr：單頁面各種元素合并集合
  • btn：按鈕
  • bg：可平鋪或者大背景
  • …

• 圖片模塊名稱：

  • goodslist：商品列表
  • goodsinfo：商品信息
  • userava tar：用戶頭像
  • …

• 圖片精度：

  • 普清：@1x
  • Retina：@2x | @3x
  • …

如下面例子：

公共模塊：
wx_mod_btn_goodlist@2x.png
wx_mod_btn_goodlist.png
mod_btn_goodlist.png 

非公共模塊：
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png

交叉業(yè)務(wù)協(xié)作

業(yè)務(wù)交叉協(xié)作的時候，為了避免圖片命名沖突，建議圖片名加上業(yè)務(wù)和模塊前輟，如拍拍側(cè)和手Q側(cè)的業(yè)務(wù)交叉合作時，側(cè)欄導(dǎo)航icon雪碧圖命名：

推薦：
pp_icon_mod_sidenav.png

不推薦：
icon_mod_sidenav.png

處理高清圖片的時候，命名應(yīng)該加上圖片相應(yīng)的精度說明

推薦：
jdc_logo@1x.png
jdc_logo@2x.png

不推薦：
jdc_logo.png
jdc_logo_retina.png