2018-5-9 周周
關(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.較長(zhǎng)的單詞可去單詞的頭部幾個(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.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ī)會(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è)置
主頁(yè)命名
命名 home_功能屬性+描述.png
如:home_menu_recommended.png 熱門推薦
ps:描述可用英文或拼間開頭字母組合等
列表頁(yè)命名規(guī)則
命名 List_功能屬性+描述.png
如:list_menu_collect.png 列表頁(yè)收藏按鈕
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
首頁(yè) 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
頁(yè)頭 Header
頁(yè)腳 Footer
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com