公約
設(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
