如:red/left/big等。

　　2.組合命名準(zhǔn)則 :

　　[元素類型]-[元素作用/內(nèi)容]

　　如:搜索按鈕: btn-search

　　登錄表單:form-login

　　新聞列表:list-news

　　3.涉及到交互行為的元素命名:

　　凡涉及交互行為的元素通常會有正常、懸停、點(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)命名(圖層+編號)。

　　前幾級圖層結(jié)構(gòu)如下圖:

　　

　　**級結(jié)構(gòu)圖例(醫(yī)院站點(diǎn) ):

　　

　　第三級結(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

　　滾動條:scroll

　　內(nèi)容:content

　　標(biāo)簽頁:tab

　　文章列表:list

　　提示信息:msg

　　小技巧:tips

　　欄目標(biāo)題:title

　　鏈接:links

　　頁腳:footer
服務(wù):service

　　熱點(diǎn):hot

　　新聞:news

　　下載:download

　　注冊:regsiter

　　狀態(tài):status

　　按鈕:btn

　　投票:vote

　　合作伙伴:partner

　　版權(quán):copyright

　　站點(diǎn)地圖: sitemap

　　以上命名規(guī)范僅供參考。如果大家對于Web UI設(shè)計(jì)規(guī)范有自己的見解，歡迎大家在此留言一同討論，互相學(xué)習(xí)，共同進(jìn)步:)

網(wǎng)頁設(shè)計(jì)流程中推選的命名規(guī)范2，歡迎咨詢合作。

查看更多寧波網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)流程