關(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. 較長的單詞可取單詞的頭部幾個(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)logo   default_logo.png

如：default.png\defoult@2x.png\defauLt-568@2x.png

登錄界面（login）

登錄背景    login_bg.png 

登錄logo   login_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ù)使用按鈕)

一般   normal   btn_xxx_normal.png    

點(diǎn)擊  highlight btn_xxx_highlight.png

不能點(diǎn)擊  disabled  btn_xxx_disable.png

按下  pressed btn_xxx_pressed.png

選中  selected btn_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) 正常 normat 

按下 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

不喜歡 dilike

用戶 user

首頁 hone

排名 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