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

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

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

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

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

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

      二、命名規(guī)則

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

        U妹舉個例子：nav_button_search_default.png

        釋義為：導航_按鈕_搜索_默認.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

     導航欄按鈕 (nav) 命名 

         nav_功能描述.png

         如：nav_menu.png\nav_menu_pre.png（同按鈕選中前后兩種狀態(tài)命名 ）

     按鈕命名（btn可重復使用按鈕)

        一般   normal   btn_xxx_normal.png

        點擊  highlight btn_xxx_highlight.png

        不能點擊  disabled  btn_xxx_disable.png

        按下  pressed btn_xxx_pressed.png

        選中  selected btn_xxx_selected.png 做為復數(shù)選擇出現(xiàn)機會不高

        btn_功能屬性或色彩均可.png

        如：btn_blue.png\btn_blue.9.png   藍色按鈕

    其他命名

       圖標 icon_xxx.png

       圖片 pic_xxx.png或是img_xxx.png

       照片 pho_xxx.png

       左側(cè)導航 命名 leftbar_功能描述.png

       如：leftbar_info.png\leftbar_info_pre.png   個人中心 

   底部選項卡按鈕（TabBar）

      命名 Tab_功能描述.png  

       如：tab_set.Png\nav_set_pre.png  設置 

   主頁命名

      命名 home_功能屬性＋描述.png

       如：home_menu_recommended.png  熱門推薦 

       ps：描述可用英文或拼間開頭字母組合等

   列表頁命名規(guī)則

      命名 List_功能屬性＋描述.png

       如：list_menu_collect.png  列表頁收藏按鈕

   UI文件命名規(guī)范常用詞

      常用狀態(tài) 

       正常 normat

       按下 pressed 

       選中 selected

       禁用 disabled

       已訪問 visited

       懸停 hover

    控件＆部件

       控件：較獨立的可操作界面元素 

        部件：描述屬于某控件一部分

        按鈕（可點） Btn

       圖標 Icon不可點、非點擊主體、圖案部件

       標記 Sign  列表

       List  菜單 Menu 

       視圖 View

       面板 Panel

       薄板 Sheet

       底部彈出菜單 欄 Bar 

       狀態(tài)欄 StatusBar

       導航欄 NaviBar

       標簽欄  TabBar

       工具欄 ToolBar

       切換開關 Switch

       滑動器 Slider

       單選框 Radio

       復選框 CheckBox

       背景 Bg

       蒙版、遮罩 Mask

       收藏 collect

       評論 comment

       廣告 ad

       時間 time

       音頻 audio

       視頻 viedio

       不喜歡 dilike

       用戶 user

       首頁 hone

       排名 ranked

       搜索 search

       標志 logo

       進度條 progress bar

       默認圖片 def_

       分隔圖片 seg_

       選擇 sel_

       關閉 close

       返回 back

       編輯 eidt

       內(nèi)容 content

       左  中  右 left  center   right

       提示信息 msg

       個人資料 porfile

       彈出 pop

       刪除 delete

       下載 download

       登錄 login

       注冊 regsiter

       標題title

       注釋 note

       鏈接 link

       圖片 image（img)

       刷新 refresh

   常用補充描述

      頂部 Top 

       中間 Middle 

       底部 Bottom 

       第一 First 

       第二 Second

       最后 Last

       頁頭 Header

       頁腳  Footer