Clarity Design命名規(guī)范

轉(zhuǎn)自Clarity Design
至于為什么用-而不用_,請(qǐng)移步這里:連接復(fù)合詞成分

公約

設(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存皂。


使用連字符 (-)

https://en.wikipedia.org/wiki/Hyphen

命名時(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

補(bǔ)充閱讀

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市崖疤,隨后出現(xiàn)的幾起案子秘车,更是在濱河造成了極大的恐慌,老刑警劉巖劫哼,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叮趴,死亡現(xiàn)場離奇詭異,居然都是意外死亡权烧,警方通過查閱死者的電腦和手機(jī)眯亦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門伤溉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人妻率,你說我怎么就攤上這事乱顾。” “怎么了宫静?”我有些...
    開封第一講書人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵走净,是天一觀的道長。 經(jīng)常有香客問我孤里,道長伏伯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任扭粱,我火速辦了婚禮舵鳞,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘琢蛤。我一直安慰自己蜓堕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開白布博其。 她就那樣靜靜地躺著套才,像睡著了一般。 火紅的嫁衣襯著肌膚如雪慕淡。 梳的紋絲不亂的頭發(fā)上背伴,一...
    開封第一講書人閱讀 49,031評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音峰髓,去河邊找鬼傻寂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛携兵,可吹牛的內(nèi)容都是我干的疾掰。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼徐紧,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼静檬!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起并级,我...
    開封第一講書人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤拂檩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后嘲碧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體稻励,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年愈涩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了钉迷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片至非。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡钠署,死狀恐怖糠聪,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情谐鼎,我是刑警寧澤舰蟆,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站狸棍,受9級(jí)特大地震影響身害,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜草戈,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一塌鸯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧唐片,春花似錦丙猬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至星持,卻和暖如春抢埋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背督暂。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國打工揪垄, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人逻翁。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓饥努,卻偏偏與公主長得像,于是被迫代替她去往敵國和親卢未。 傳聞我的和親對(duì)象是個(gè)殘疾皇子肪凛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容