天天看點

切圖命名規則及常用單詞

切圖命名規則及常用單詞
切圖命名規則及常用單詞

一、為什麼要制定規範的命名規則

1. 自身層面

對我們自己的檔案整理有很大的幫助,後期修改檔案、圖層的時候更加友善快捷,而且規範的命名也顯得我們自身比較專業。

2. 團隊層面

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

3. 開發層面

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

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

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

切圖命名規則及常用單詞

三、命名格式

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

通用切片命名格式:

元件_類别_功能_狀态@2x.png

舉例:[email protected]

(對應中文:标簽欄_圖示_首頁_預設@2x.png)

子產品特有切圖命名規則:

子產品_類别_功能_狀态@2x.png

舉例:[email protected]

(對應的中文為:郵件_圖示_搜尋_ 預設@2x.png)

當然這兩個例子都是比較基本的情況,有很多時候可能一個單詞并不能清楚的描述功能,比如有兩個名字相同的搜尋圖示,大小不一,那這種情況你就可以這樣命名:[email protected],我們的原則就是清晰的表達出切片的具體内容并且沒有重複的名稱,希望大家能夠活學活用。(大家要注意,命名中不能含有空格!)

四、常用英文單詞表

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

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

  • 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(注釋)

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

切圖命名規則及常用單詞

五、總結

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

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

繼續閱讀