如:red/left/big等。
2.組合命名準則 :
[元素類型]-[元素作用/內容]
如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news
3.涉及到交互行為的元素命名:
凡涉及交互行為的元素通常會有正常、懸停、點擊和已閱讀等不同樣式,命名可參考以下準則 :
鼠標懸停::hover 點擊:click 已閱讀:visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
三.Photoshop圖層結構規(guī)范:
Photoshop圖層命名遵循樹形結構,凡某元素組成的圖層大于3層,即可形成組,所有圖層盡量防止運用默認命名(圖層+編號)。
前幾級圖層結構如下圖:
**級結構圖例(醫(yī)院站點 ):
第三級結構圖例及效果圖比較 (醫(yī)院新聞欄目):
效果圖
圖層命名結構
四.常用命名匯總:
頁頭: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
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權:copyright
站點地圖: sitemap
以上命名規(guī)范僅供參考。如果大家對于Web UI設計規(guī)范有自己的見解,歡迎大家在此留言一同討論,互相學習,共同進步:)
網(wǎng)頁設計流程中推選的命名規(guī)范2,歡迎咨詢合作。