切圖命名規(guī)則

關(guān)于切圖命名的規(guī)范,我個(gè)人覺(jué)得關(guān)鍵是在于團(tuán)隊(duì)能夠有一個(gè)統(tǒng)一的規(guī)則,所有成員嚴(yán)格遵守并且和所有開(kāi)發(fā)全盤(pán)拉通,不然一切都是空談。

不同的團(tuán)隊(duì)使用的軟件都不一樣,可能在命名的時(shí)候會(huì)考慮更多內(nèi)容,所以這里只介紹一種通用的命名規(guī)則,當(dāng)然大家也可以根據(jù)自己的實(shí)際情況去制定,這里只提供一種方法與思路,僅供參考。

一、為什么要制定規(guī)范的命名規(guī)則

1.自身層面

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

2.團(tuán)隊(duì)層面

如果命名不統(tǒng)一,大家就很難達(dá)成共識(shí),任務(wù)交接時(shí)需要很大的學(xué)習(xí)成本,所以規(guī)范的命名對(duì)于團(tuán)隊(duì)協(xié)同也有極大的推動(dòng)作用。

3.開(kāi)發(fā)層面

這一點(diǎn)是最重要的,可以極大的節(jié)省程序開(kāi)發(fā)的時(shí)間成本,減少很多不必要的溝通與重復(fù)切圖的概率,因?yàn)橹灰覀兊拿銐蛞?guī)范,并且和開(kāi)發(fā)達(dá)成共識(shí),他們完全可以直接使用的我們切片而不更改切片的名稱,后期我們更換切圖,只要切片名稱不變,開(kāi)發(fā)看都不用看直接替換就可以了。

二、所有命名全部為小寫(xiě)英文字母

這一點(diǎn)的理由很簡(jiǎn)單,我們的目標(biāo)是讓開(kāi)發(fā)直接拿我們的切圖進(jìn)行使用,不能夠隨意修改名稱,但是我們要知道,開(kāi)發(fā)哥哥的代碼里只有小寫(xiě)的英文字母,如果你給出的命名全是中文的,那么他們是一定會(huì)更改的。所以命名全部用小寫(xiě)的英文字母是最基本的規(guī)則。

三、命名格式

眾所周知,一個(gè)大型項(xiàng)目會(huì)分很多模塊,每個(gè)模塊由不同的設(shè)計(jì)師來(lái)獨(dú)立完成,還有人會(huì)專門(mén)管理公共的組件,如tabbar、navbar等等,這種情況下就會(huì)分為兩種切圖,一種是通用類(lèi)型的切圖,還有一種就是各個(gè)模塊特有的切圖。

通用切片命名格式:

組件_類(lèi)別_功能_狀態(tài)@2x.png

舉例:tabbar_icon_home_default@2x.png

(對(duì)應(yīng)中文:標(biāo)簽欄_圖標(biāo)_主頁(yè)_默認(rèn)@2x.png)

模塊特有切圖命名規(guī)則:

模塊_類(lèi)別_功能_狀態(tài)@2x.png

舉例:mail_icon_search_pressed@2x.png

(對(duì)應(yīng)的中文為:郵件_圖標(biāo)_搜索_ 默認(rèn)@2x.png)

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

四、常用英文單詞表

如果所有命名都寫(xiě)為全稱,名字就會(huì)特別長(zhǎng),所以我們可以將一些常用的英文單詞進(jìn)行縮寫(xiě),減少工作成本與開(kāi)發(fā)代碼資源。至于怎么縮寫(xiě),只要整個(gè)團(tuán)隊(duì)能夠達(dá)成共識(shí)并且輸出一份縮寫(xiě)清單,任何縮寫(xiě)規(guī)則都是可以的。

下面提供一些命名時(shí)常用的英文單詞列表(有些是已經(jīng)縮寫(xiě)過(guò)的,僅供參考)

bg(backgrond 背景)

nav(navbar 導(dǎo)航欄)

tab(tabbar 標(biāo)簽欄)

btn(button 按鈕)

img(image 圖片)

del(delete 刪除)

msg(message 提示信息)

pop(pop up 彈出)

icon(圖標(biāo))

selected(選中)

disabled(不可點(diǎn)擊)

default(默認(rèn))

pressed(按下)

back(返回)

edit(編輯)

content(內(nèi)容)

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

logo(標(biāo)識(shí))

login(登錄)

refresh(刷新)

banner(廣告)

link(鏈接)

user(用戶)

download(下載)

note(注釋)

這種規(guī)范的命名方式是必須要經(jīng)歷的過(guò)程,習(xí)慣了這樣的命名方式后。

五、總結(jié)

任何別人給出的規(guī)范,都不要直接拿來(lái)就用,要去思考為什么用這樣的規(guī)范,解決什么樣的問(wèn)題?你有沒(méi)有更好的解決方案?試問(wèn)一下,蘋(píng)果和安卓開(kāi)發(fā)的切圖文件管理機(jī)制是怎樣的?有什么區(qū)別?有些切圖規(guī)則可能直接設(shè)計(jì)后期的動(dòng)效上運(yùn)用,因此有時(shí)候設(shè)計(jì)師也要懂得完整的設(shè)計(jì)流程應(yīng)該如何走向。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容