2018-5-9 周周
關于UI界面的切圖命名規范，U妹覺得關鍵是在于團隊能夠有一個統一的規則，所以這里只介紹一種通用的命名規則，當然大家也可以根據自己的實際情況去制定，這里只提供一種方法與思路，僅供參考。
規范的命名方式可以提高開發人員的的開發效率和整個開發團隊的友好合作。U妹覺得要盡可能用最少的字符而又能完整的表達標識符的含義。
一、切圖命名英文縮寫的3個原則
1.較短的單詞可以通過去掉“元音”形成縮寫
2.較長的單詞可去單詞的頭部幾個字母形成縮寫
3.還有一些約定成俗的英文單詞縮寫
二、命名規則
模塊_類別_功能_狀態.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
輸入框選中狀態 login_input_pre.png
登錄按鈕 login_btn.png
登錄按鈕選中狀態 login_btn_pre.png
導航欄按鈕 (nav) 命名
nav_功能描述.png
如：nav_menu.png\nav_menu_pre.png（同按鈕選中前后兩種狀態命名 ）
按鈕命名（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 做為復數選擇出現機會不高
btn_功能屬性或色彩均可.png
如：btn_blue.png\btn_blue.9.png 藍色按鈕
其他命名
圖標 icon_xxx.png
圖片 pic_xxx.png或是img_xxx.png
照片 pho_xxx.png
左側導航 命名 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：描述可用英文或拼間開頭字母組合等
列表頁命名規則
命名 List_功能屬性＋描述.png
如：list_menu_collect.png 列表頁收藏按鈕
UI文件命名規范常用詞
常用狀態
正常 normat
按下 pressed
選中 selected
禁用 disabled
已訪問 visited
懸停 hover
控件＆部件
控件：較獨立的可操作界面元素
部件：描述屬于某控件一部分
按鈕（可點） Btn
圖標 Icon不可點、非點擊主體、圖案部件
標記 Sign 列表
List 菜單 Menu
視圖 View
面板 Panel
薄板 Sheet
底部彈出菜單 欄 Bar
狀態欄 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
內容 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