如:red/left/big等。
2.組合命名準(zhǔn)則 :
[元素類型]-[元素作用/內(nèi)容]
如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news
3.涉及到交互行為的元素命名:
凡涉及交互行為的元素通常會(huì)有正常、懸停、點(diǎn)擊和已閱讀等不同樣式,命名可參考以下準(zhǔn)則 :
鼠標(biāo)懸停::hover 點(diǎn)擊:click 已閱讀:visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
三.Photoshop圖層結(jié)構(gòu)規(guī)范:
Photoshop圖層命名遵循樹形結(jié)構(gòu),凡某元素組成的圖層大于3層,即可形成組,所有圖層盡量防止運(yùn)用默認(rèn)命名(圖層+編號(hào))。
前幾級(jí)圖層結(jié)構(gòu)如下圖:
**級(jí)結(jié)構(gòu)圖例(醫(yī)院站點(diǎn) ):
第三級(jí)結(jié)構(gòu)圖例及效果圖比較 (醫(yī)院新聞欄目):
效果圖
圖層命名結(jié)構(gòu)
四.常用命名匯總:
頁頭:header
登錄條:loginbar
標(biāo)志:logo
側(cè)欄:sidebar
廣告條:banner
導(dǎo)航:nav
子導(dǎo)航:subNav
菜單:menu
子菜單:subMenu
下拉菜單:dropMenu
工具條: toolbar
表單:form
欄目:column
箭頭:arrow
搜索:search
搜索按鈕:btn-search
滾動(dòng)條:scroll
內(nèi)容:content
標(biāo)簽頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標(biāo)題:title
鏈接:links
頁腳:footer
服務(wù):service
熱點(diǎn):hot
新聞:news
下載:download
注冊(cè):regsiter
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權(quán):copyright
站點(diǎn)地圖: sitemap
以上命名規(guī)范僅供參考。如果大家對(duì)于Web UI設(shè)計(jì)規(guī)范有自己的見解,歡迎大家在此留言一同討論,互相學(xué)習(xí),共同進(jìn)步:)
網(wǎng)頁設(shè)計(jì)流程中推選的命名規(guī)范2,歡迎咨詢合作。