公約
設(shè)計(jì)師給開發(fā)者提供的資源的命名應(yīng)該是清晰、準(zhǔn)確、分門別類的肢执,以最大程度地讓開發(fā)者更高效的使用資源。因此译红,此公約應(yīng)作為約束预茄,統(tǒng)一各個(gè)端的開發(fā)者與設(shè)計(jì)師的資源名使用,盡量不讓開發(fā)者對(duì)資源進(jìn)行二次命名修改侦厚。
范圍
- Web 前端資源的文件名
- Android 資源的文件名
- iOS 資源的文件名
- Sketch 圖層命名
Sketch 的圖層命名
在使用類似 Sketch 等工具進(jìn)行設(shè)計(jì)時(shí)耻陕,圖層名稱請(qǐng)使用本公約的相關(guān)規(guī)范進(jìn)行命名,## 文件與圖層名規(guī)范請(qǐng)保持一致刨沦,以便更方便地導(dǎo)出資源诗宣。在 Sketch 中,不需要導(dǎo)出的 Symbol 可以使用「/」來分隔以分組想诅。需要導(dǎo)出的資源務(wù)必使用下方提供的命名方式召庞。
使用全稱
我們?cè)诿袘?yīng)該盡量不要使用簡稱。減少語義上的偏差侧蘸,例如有的人習(xí)慣稱 icon 為 icn裁眯,而有些則習(xí)慣使用 ico,為了減低大家的溝通成本讳癌,應(yīng)最大程度避免使用 button -> btn,background -> bg存皂。
使用連字符 (-)
命名時(shí)使用 (-) 作為資源名區(qū)塊連接符號(hào)晌坤。(-) 符號(hào)較容易被辨識(shí)逢艘,并且通常比其他連接符號(hào)更加節(jié)約空間。
使用小寫英文
所有資源的命名都應(yīng)該使用小寫的英文命名骤菠,尤其是在資源上傳至服務(wù)器后它改,如果使用有大寫字母的文件名,將會(huì)導(dǎo)致維護(hù)成本的增加商乎。統(tǒng)一地使用小寫央拖,將降低后期維護(hù)的成本。注意鹉戚,請(qǐng)不要使用任何拼音鲜戒。
格式
常規(guī)的資源文件類型有:.jpg / .png / .svg / .gif / .tif / .pdf / .md / .ico / .ttf / .wof / .otf
導(dǎo)出素材命名規(guī)范
Web:
[type]-[location]-[usage]-[annotation*repeatable]-[state].png
[類型]-[位置]-[用途]-[備注*可重復(fù)]-[狀態(tài)].png
icon-sidebar-navigation-link-normal.png
iOS:
[type]-[location]-[usage]-[annotation*repeatable]-[state]@[resolution].png
[類型]-[位置]-[用途]-[狀態(tài)]-[備注*可重復(fù)]@[分辨率].png
icon-sidebar-navigation-link-normal@2x.png
Android:
[drawable目錄]/[type]-[location]-[usage]-[annotation*repeatable]-[state].png
[類型]-[位置]-[用途]-[狀態(tài)]-[備注*可重復(fù)].png
drawable-hdpi/icon-sidebar-navigation-link-normal.png
SKETCH圖層:
icon-sidebar-navigation-link-normal@2x
[type](必填)
當(dāng)前資源的類型,例如 icon抹凳、button遏餐、image、avatar赢底。
[location]
當(dāng)前資源使用到的位置失都,如特定只能用在底部的按鈕:button-footer.png
[usage]
當(dāng)前資源用途,如作為鏈接使用的圖標(biāo):icon-link.png
[annotation]
當(dāng)前資源的備注幸冻,此項(xiàng)可重復(fù)粹庞,如果遇到描述不清楚或不足夠的狀態(tài),可以添加單個(gè)或 多個(gè) 備注洽损,如:icon-link-grey.png 庞溜、avatar-link-middle.png 或是 button-frame-gray-small.png。
[state]
當(dāng)前資源的狀態(tài)趁啸。如: button-icon-danger-normal.png
[resolution]
如果表示資源大强缘、中、小三個(gè)大小不傅。請(qǐng)?jiān)赱annotation]中描述旅掂,這里僅在 iOS 和 Sketch 圖層中使用。
名詞處理
當(dāng) [location] 或是 [usage] 等非備注內(nèi)容所使用的名詞非單個(gè)單詞為短語時(shí)访娶。允許使用## 「_」進(jìn)行分隔商虐。如:
Web:
[type]-[location_words]-[usage_words]-[annotation*repeatable]-[state].png
[類型]-[位置]-[用途]-[備注*可重復(fù)]-[狀態(tài)].png
icon-official_website-navigation_bar-link-normal.png