2018-5-9 周周
關(guān)于UI界面的切圖命名規(guī)范,U妹覺得關(guān)鍵是在于團(tuán)隊能夠有一個統(tǒng)一的規(guī)則,所以這里只介紹一種通用的命名規(guī)則,當(dāng)然大家也可以根據(jù)自己的實際情況去制定,這里只提供一種方法與思路,僅供參考。
規(guī)范的命名方式可以提高開發(fā)人員的的開發(fā)效率和整個開發(fā)團(tuán)隊的友好合作。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
點擊 highlight btn_xxx_highlight.png
不能點擊 disabled btn_xxx_disable.png
按下 pressed btn_xxx_pressed.png
選中 selected btn_xxx_selected.png 做為復(fù)數(shù)選擇出現(xiàn)機會不高
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 個人中心
底部選項卡按鈕(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
控件&部件
控件:較獨立的可操作界面元素
部件:描述屬于某控件一部分
按鈕(可點) Btn
圖標(biāo) Icon不可點、非點擊主體、圖案部件
標(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
時間 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
常用補充描述
頂部 Top
中間 Middle
底部 Bottom
第一 First
第二 Second
最后 Last
頁頭 Header
頁腳 Footer
藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com