關(guān)于UI界面的切圖命名規(guī)范，U妹覺得關(guān)鍵是在于團(tuán)隊(duì)能夠有一個統(tǒng)一的規(guī)則，所以這里只介紹一種通用的命名規(guī)則，當(dāng)然大家也可以根據(jù)自己的實(shí)際情況去制定，這里只提供一種方法與思路，僅供參考。

      規(guī)范的命名方式可以提高開發(fā)人員的的開發(fā)效率和整個開發(fā)團(tuán)隊(duì)的友好合作。U妹覺得要盡可能用最少的字符而又能完整的表達(dá)標(biāo)識符的含義。

      一、切圖命名英文縮寫的3個原則

      1.較短的單詞可以通過去掉“元音”形成縮寫

       2.較長的單詞可去單詞的頭部幾個字母形成縮寫

       3.還有一些約定成俗的英文單詞縮寫

      二、命名規(guī)則

          模塊_類別_功能_狀態(tài).png

        U妹舉個例子：nav_button_search_default.png

        釋義為：導(dǎo)航_按鈕_搜索_默認(rèn).png

     啟動界面

        啟動圖片 default.png

         啟動logo default.png

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

  登錄界面

   登錄背景    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ī)會不高

        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   個人中心 

   底部選項(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

       滑動器 Slider

       單選框 Radio

       復(fù)選框 CheckBox

       背景 Bg

       蒙版、遮罩 Mask

       收藏 collect

       評論 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

       個人資料 porfile

       彈出 pop

       刪除 delete

       下載 download

       登錄 login

       注冊 regsiter

       標(biāo)題title

       注釋 note

       鏈接 link

       圖片 image（img)

       刷新 refresh

   常用補(bǔ)充描述

      頂部 Top 

       中間 Middle 

       底部 Bottom 

       第一 First 

       第二 Second

       最后 Last

       頁頭 Header

       頁腳  Footer