一名程序員帶你了解切圖命名規(guī)則和標注規(guī)范

一名程序員帶你了解切圖命名規(guī)則和標注規(guī)范今天我要分享的內(nèi)容是關于切圖命名規(guī)則和標注規(guī)范，從工作到現(xiàn)在開發(fā)過的項目大大小小也有十幾二十個了，但每次的設計師可能都不是同一個人，他們每個人都有不同的規(guī)范和標注方式，所以想總結這一部分內(nèi)容，讓大家一起分享探討一下。關于切圖命名的規(guī)范，我個人覺得關鍵是在于團隊能夠有一個統(tǒng)一的規(guī)則，所有成員嚴格遵守并且和所有開發(fā)全盤拉通，不然一切都是空談。而一套統(tǒng)一的標注規(guī)范不單止在一個項目中使用，也可以在之后的項目或者與別人去分享使用，減少重復的工作是很有幫助的。在這里就介紹一種通用的命名規(guī)則，當然大家也可以根據(jù)自己的實際情況去制定，這里只提供一種方法與思路，僅供參考。一、為什么要制定規(guī)范的命名規(guī)則和標注1、自身層面對自己的文件整理有很大的幫助，后期修改文件、圖層的時候更加方便快捷，而且規(guī)范的命名也顯得設計自身比較專業(yè)。積累規(guī)范文檔，對后續(xù)項目有幫助，能夠提高工作效率，避免重復性工作。2.團隊層面如果命名不統(tǒng)一，大家就很難達成共識，任務交接時需要很大的學習成本，所以規(guī)范的命名對于團隊協(xié)作也有極大的推動作用。3.開發(fā)層面這一點是最重要的，可以極大的節(jié)省程序開發(fā)的時間成本，減少很多不必要的溝通與重復切圖的概率，因為只要我們的命名足夠規(guī)范，并且和開發(fā)達成共識，他們完全可以直接使用的我們切片而不需更改切片的名稱，后期我們更換切圖，只要切片名稱不變，開發(fā)看都不用看直接替換就可以了。規(guī)范命名規(guī)則在修改色值、組件大小的時候，能夠統(tǒng)一修改減少重復工作,在同一狀態(tài)但不同界面的組件設計只需修改指定標注文件即可，不需要每個界面的標注都進行修改。二、所有命名全部為小寫英文字母這一點的理由很簡單，設計的目標是讓開發(fā)直接拿到切圖后能夠立刻使用，不能夠隨意修改名稱，但是設計要知道，開發(fā)的代碼里只有小寫的英文字母，如果你給生的命名全是中文的，那么開發(fā)是一定要修改的。所以命名全部用小寫的英文字母是最基本的規(guī)則。三、統(tǒng)一標準遵循規(guī)范在標注文件上的色值要統(tǒng)一，不能一些用RGB一些又用16進制，雖然兩者都可以，但這樣就會把開發(fā)搞糊涂了，也會顯得自己不夠專業(yè)。標注的間隔和組件的大小要偶數(shù)，經(jīng)常會由現(xiàn)設計師把圖片切成是奇數(shù)的還有標注也是，這是一個很低級的錯誤。四、命名格式眾所周知，一個項目通常會分很多模塊，有可能由同一個設計師來完成，或者每個模塊由不同的設計師來獨立完成，還有人會專門管理公共的組件，如tabbar、navigationbar等等，這種情況下就會分為兩種切圖，一種是通用類型的切圖，還有一種就是各個模塊特有的切圖。通用切片命名格式：組件_類別_功能_狀態(tài)@2x.png舉例：tabbar_icon_home_default@2x.png（對應中文：標簽欄_圖標—主頁_默認@2x.png）模塊特有切圖命名規(guī)則：模塊_類別_功能_狀態(tài)@2乂必9舉例：news_icon_search_pressed@2x.png（對應的中文為：新聞_圖標_搜索_默認@2x.png）當然這兩個例子都是比較基本的情況，有很多時候可能一個單詞并不能清楚的描述功能，比如有兩個名字相同的搜索圖標，大小不一，那這種情況你就可以這樣命名：mail_icon_search_big_default@2x.png,我們的原則就是清晰的表達由切片的具體內(nèi)容并且沒有重復的名稱，希望大家能夠活學活用。（大家要注意，命名中不能含有空格?。┒?和6plus以后尺寸有所增加，圖片也要相應增加@3x的尺寸，這時其實1x的圖片就不再需要了，因為現(xiàn)在開發(fā)基本上已經(jīng)拋棄了低分辨率的手機。四、常用英文單詞表如果所有命名都寫成全稱，名字就會特別長，所以我們可以將一些常用的英文單詞進行縮寫，減少工作成本與開發(fā)代碼資源。至于怎么縮寫，只要整個團隊能夠達成共識并且輸由一份縮寫清單，任何縮寫規(guī)則都是可以的。下面提供一些命名時常用的英文單詞列表（僅供參考）各種常用模塊和組件bg（backgrond背景）nav（navigationbar導航欄）tab（tabbar標簽欄）btn（button按鈕）banner（廣告）msg（message提示信息）login（登錄）avatar（頭像）line（線條）10go（標識）各種狀態(tài)del（delete刪除）pop（popup彈由）selected（選中）disabled（不可點擊）default（默認）highlighted（高亮）pop（popup彈由）edit（編輯）on（開啟）off（關閉）有些人會覺得寫這么多英文太麻煩，但其實為了自己專業(yè)能力的提高，這種規(guī)范的命名方式是必須要經(jīng)歷的過程，當你習慣了這樣的命名方式后，你的成就感會油然而生。五、整理存放文件一個項目多則有上千張切圖文件，少則也有一百，總不能把所有文件都放到一個文件夾里面去，這樣將大大增加開發(fā)的開發(fā)時間，他們每次要添加新的切圖都需要在這里面去尋找然后再添加到項目中去，當打開文件夾看到那么多圖片后這是多么懵逼。所以設計可以根據(jù)功能模塊來新建文件夾，把不同模塊的切圖放到相應的文件夾，這樣就可以讓開發(fā)更快找到自己需要的圖片了。六、總結今天要分享的內(nèi)容就這么多，在項目開始后設計與開發(fā)的溝通是很重要的，有時候設計因產(chǎn)品經(jīng)理需求的變更而對UI進行修改，這時設計修改完后就要及時告訴開發(fā)，避免開發(fā)做完后才發(fā)現(xiàn)要修改。設計師在設計前可以去多思考問題的本質(zhì)原因是什么，每一個小問題都需要去透徹的理解，反之積攢多了，最后賺到的還是自己。任何別人給由的規(guī)范，都不要直接拿來就用，要去思考為什么用這樣的規(guī)范，解決什么樣的問題？你有沒有更好的解決方案？試問一下，蘋果和安卓開