關(guān)于UI界面的切圖命名的規(guī)范，U妹覺得關(guān)鍵是在于團(tuán)隊(duì)能夠有一個(gè)統(tǒng)一的規(guī)則咽弦，所以這里只介紹一種通用的命名規(guī)則徒蟆，當(dāng)然大家也可以根據(jù)自己的實(shí)際情況去制定，這里只提供一種方法與思路型型，僅供參考段审。
規(guī)范的命名方式可以提高開發(fā)人員的開發(fā)效率和整個(gè)開發(fā)團(tuán)隊(duì)的友好合作。U妹建議要竟可能用最少的字符而又能完整的表達(dá)標(biāo)識(shí)符的含義闹蒜。
一寺枉、 ?切圖命名英文縮寫的3個(gè)原則
1. 較短的單詞可通過去掉“元音”形成縮寫
2. 較長(zhǎng)的單詞可取單詞的頭部幾個(gè)字母形成縮寫
3. 還有一些約定俗成的英文單詞縮寫
二、命名規(guī)則
模塊_類別_功能_狀態(tài).png
U妹舉個(gè)栗子：nav_button_search_default.png
釋義為：導(dǎo)航_按鈕_搜索_默認(rèn).png
啟動(dòng)界面
啟動(dòng)圖片：default.png
啟動(dòng)：logodefault_logo.png
如：default.png\defoult@2x.png\defauLt-568@2x.png
登錄界面（login）
登錄背景：login_bg.png
登錄：logologin_logo.png
輸入框：login_input.png
輸入框選中狀態(tài)：login_input_pre.png
登錄按鈕：Login_btn.png
登錄按鈕選中狀態(tài)：Login_btn_pre.png
導(dǎo)航欄按鈕 (nav)
命名nav_功能描述.png
如：nav_menu.png\nav_menu_pre.png
（同按鈕選中前后兩種狀態(tài)命名 ）
按鈕命名（btn可重復(fù)使用按鈕)
一般：normalbtn_xxx_normal.png
點(diǎn)擊：highlightedbtn_xxx_highlighted.png
不能點(diǎn)擊： ?disabledbtn_xxx_disable.png
按下： ?pressedbtn_xxx_pressed.png
選中 ： selectedbtn_xxx_selected.png
做為復(fù)數(shù)選擇出現(xiàn)機(jī)會(huì)不高
btn：_功能屬性或色彩均可.png
如：btn_blue.png\btn_blue.9.png ?藍(lán)色按鈕
其他命名
圖標(biāo)：icon_xxx.png
圖片：pic_xxx.png或是img_xxx.png
照片：pho_xxx.png
左側(cè)導(dǎo)航
命名leftbar_功能描述.png
如：leftbar_info.png\leftbar_info_pre.png ? 個(gè)人中心
底部選項(xiàng)卡按鈕（TabBar）
命名Tab_功能描述.png
如：tab_set.Png\nav_set_pre.png ?設(shè)置
主頁命名
命名home_功能屬性＋描述.png
如：home_menu_recommended.png ?熱門推薦
ps：描述可用英文或拼間開頭字母組合等
列表頁命名規(guī)則
命名List_功能屬性＋描述.png
如：list_menu_collect.png ?列表頁收藏按鈕
UI文件命名規(guī)范常用詞
常用狀態(tài)正常：normal
按下：pressed
選中：selected
禁用：disabled
已訪問：visited
懸停：hover
控件＆部件
控件：較獨(dú)立的可操作界面元素
部件：描述屬于某控件一部分
按鈕（可點(diǎn)）：Btn
圖標(biāo)：Icon不可點(diǎn)绷落、非點(diǎn)擊主體姥闪、圖案部件
標(biāo)記：Sign
列表：List
菜單：Menu
視圖：View
面板：Panel
薄板：Sheet 底部彈出菜單
欄：Bar
狀態(tài)欄：StatusBar
導(dǎo)航欄：NaviBar
標(biāo)簽欄：TabBar
工具欄：ToolBar
切換開關(guān)：Switch
滑動(dòng)器：Slider
單選框：Radio
復(fù)選框：CheckBox
背景：Bg
蒙版、遮罩：Mask
收藏：collect
評(píng)論：comment
廣告：ad
時(shí)間：time
音頻：audio
視頻：viedio
不喜歡：dislike
用戶：user
首頁：home
排名：ranked
搜索：search
標(biāo)志：logo
進(jìn)度條：progress bar
默認(rèn)圖片：def_
分隔圖片：seg_
選擇：sel_
關(guān)閉：close
返回：back
編輯：eidt
內(nèi)容：content
左 ?中 ?右：left ?center ? right
提示信息：msg
個(gè)人資料：porfile
彈出：pop
刪除：delete
下載：download
登錄：login
注冊(cè)：regsiter
標(biāo)題：title
注釋：note
鏈接：link
圖片：image（img）
刷新：refresh
常用補(bǔ)充描述
頂部：Top
中間：Middle
底部：Bottom
第一：First
第二：Second
最后：Last
頁頭：Header
頁腳：Footer
三砌烁、 ?總結(jié)
關(guān)于切圖命名規(guī)范就到這里了筐喳，最后還是想和大家說，有什么不懂的函喉、不明白的地方疏唾，要多去和開發(fā)的同事請(qǐng)教和溝通，這樣才能省時(shí)省力函似，事半功倍槐脏，更加高效的完成工作。
UI妹兒|越努力撇寞，越幸運(yùn)
精選 ?| ?干貨 ?| ?經(jīng)驗(yàn) ?| ?分享 ?| ?資源
