你必須要了解的切圖命名規則

今天菜心要分享的內容是關于切圖命名的規范,由于最近正在總結這一部分內容,所以拿出來和大家一起分享探討一下。

關于切圖命名的規范,我個人覺得關鍵是在于團隊能夠有一個統一的規則,所有成員嚴格遵守并且和所有開發全盤拉通,不然一切都是空談。

不同的團隊使用的軟件都不一樣,如果經常使用sketch軟件中symbols的同學,可能在命名的時候會考慮更多內容,但是照顧到還有很多同學在使用ps作圖,所以這里只介紹一種通用的命名規則,當然大家也可以根據自己的實際情況去制定,這里只提供一種方法與思路,僅供參考。


一、為什么要制定規范的命名規則

1.自身層面

對我們自己的文件整理有很大的幫助,后期修改文件、圖層的時候更加方便快捷,而且規范的命名也顯得我們自身比較專業。

2.團隊層面

如果命名不統一,大家就很難達成共識,任務交接時需要很大的學習成本,所以規范的命名對于團隊協同也有極大的推動作用。

3.開發層面

這一點是最重要的,可以極大的節省程序開發的時間成本,減少很多不必要的溝通與重復切圖的概率,因為只要我們的命名足夠規范,并且和開發達成共識,他們完全可以直接使用的我們切片而不更改切片的名稱,后期我們更換切圖,只要切片名稱不變,開發看都不用看直接替換就可以了。


二、所有命名全部為小寫英文字母

這一點的理由很簡單,我們的目標是讓開發直接拿我們的切圖進行使用,不能夠隨意修改名稱,但是我們要知道,開發哥哥的代碼里只有小寫的英文字母,如果你給出的命名全是中文的,那么他們是一定會更改的。所以命名全部用小寫的英文字母是最基本的規則。


三、命名格式

眾所周知,一個大型項目會分很多模塊,每個模塊由不同的設計師來獨立完成,還有人會專門管理公共的組件,如tabbar、navbar等等,這種情況下就會分為兩種切圖,一種是通用類型的切圖,還有一種就是各個模塊特有的切圖。

通用切片命名格式:

組件_類別_功能_狀態@2x.png

舉例:tabbar_icon_home_default@2x.png

(對應中文:標簽欄_圖標_主頁_默認@2x.png)

模塊特有切圖命名規則:

模塊_類別_功能_狀態@2x.png

舉例:mail_icon_search_pressed@2x.png

(對應的中文為:郵件_圖標_搜索_ 默認@2x.png)

當然這兩個例子都是比較基本的情況,有很多時候可能一個單詞并不能清楚的描述功能,比如有兩個名字相同的搜索圖標,大小不一,那這種情況你就可以這樣命名:mail_icon_search_big_default@2x.png,我們的原則就是清晰的表達出切片的具體內容并且沒有重復的名稱,希望大家能夠活學活用。(大家要注意,命名中不能含有空格?。?/p>


四、常用英文單詞表

如果所有命名都寫為全稱,名字就會特別長,所以我們可以將一些常用的英文單詞進行縮寫,減少工作成本與開發代碼資源。至于怎么縮寫,只要整個團隊能夠達成共識并且輸出一份縮寫清單,任何縮寫規則都是可以的。

下面提供一些命名時常用的英文單詞列表(有些是已經縮寫過的,僅供參考)

bg(backgrond 背景)

nav(navbar 導航欄)

tab(tabbar 標簽欄)

btn(button 按鈕)

img(image 圖片)

del(delete 刪除)

msg(message 提示信息)

pop(pop up 彈出)

icon(圖標)

selected(選中)

disabled(不可點擊)

default(默認)

pressed(按下)

back(返回)

edit(編輯)

content(內容)

left/center/right(左/中/右)

logo(標識)

login(登錄)

refresh(刷新)

banner(廣告)

link(鏈接)

user(用戶)

download(下載)

note(注釋)

有些人會覺得寫這么多英文太麻煩,但其實為了自己專業能力的提高,這種規范的命名方式是必須要經歷的過程,當你習慣了這樣的命名方式后,你的成就感會油然而生。


五、總結

今天要分享的內容就這么多,最后還是想和大家說,有什么不懂得地方,真的要多去資訊開發的同事,去思考問題的本質原因是什么,每一個小問題都需要我們去透徹的理解,反之積攢多了,最后吃虧的還是你自己。

任何別人給出的規范,都不要直接拿來就用,要去思考為什么用這樣的規范,解決什么樣的問題?你有沒有更好的解決方案?試問一下,蘋果和安卓開發的切圖文件管理機制是怎樣的?有什么區別?如果這么基礎的問題你都不知道,而是拿著別人的規范直接套用,那結果就是被別人牽著走。

所以去了解所有表層背后的思考與邏輯,也許下一個規范就是你制定的!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,818評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,185評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,656評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,647評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,446評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,951評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,041評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,189評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,718評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,602評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,800評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,045評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,419評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,420評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,755評論 2 371

推薦閱讀更多精彩內容