如:red/left/big等。

　　2.組合命名準則 :

　　[元素類型]-[元素作用/內容]

　　如:搜索按鈕: btn-search

　　登錄表單:form-login

　　新聞列表:list-news

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

　　凡涉及交互行為的元素通常會有正常、懸停、點擊和已閱讀等不同樣式，命名可參考以下準則 :

　　鼠標懸停:：hover 點擊：click 已閱讀：visited

　　如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited

　　三.Photoshop圖層結構規范:

　　Photoshop圖層命名遵循樹形結構，凡某元素組成的圖層大于3層，即可形成組，所有圖層盡量防止運用默認命名(圖層+編號)。

　　前幾級圖層結構如下圖:

　　

　　**級結構圖例(醫院站點 ):

　　

　　第三級結構圖例及效果圖比較 (醫院新聞欄目)：

　　

　　效果圖

　　

　　圖層命名結構

　　四．常用命名匯總:

　　頁頭:header

　　登錄條:loginbar

　　標志:logo

　　側欄:sidebar

　　廣告條:banner

　　導航:nav

　　子導航:subNav

　　菜單:menu

　　子菜單:subMenu

　　下拉菜單:dropMenu

　　工具條: toolbar

　　表單:form

　　欄目:column

　　箭頭:arrow

　　搜索:search

　　搜索按鈕:btn-search

　　滾動條:scroll

　　內容:content

　　標簽頁:tab

　　文章列表:list

　　提示信息:msg

　　小技巧:tips

　　欄目標題:title

　　鏈接:links

　　頁腳:footer
服務:service

　　熱點:hot

　　新聞:news

　　下載:download

　　注冊:regsiter

　　狀態:status

　　按鈕:btn

　　投票:vote

　　合作伙伴:partner

　　版權:copyright

　　站點地圖: sitemap

　　以上命名規范僅供參考。如果大家對于Web UI設計規范有自己的見解，歡迎大家在此留言一同討論，互相學習，共同進步:)

網頁設計流程中推選的命名規范2，歡迎咨詢合作。

查看更多寧波網站建設網頁設計流程