武林網(wǎng)(www.survivalescaperooms.com)文章簡介：這套WebUI設(shè)計(jì)命名規(guī)范總結(jié)自我的一些Web設(shè)計(jì)經(jīng)驗(yàn)和國外設(shè)計(jì)師的命名方式推薦。

這套規(guī)范并非單純的CSS、html或JavaScript命名規(guī)范，它涉及了很多使用PhotoShop這類設(shè)計(jì)工具進(jìn)行網(wǎng)頁設(shè)計(jì)過程中的命名規(guī)范。(好久沒寫文章了，有點(diǎn)羅嗦，吼吼~)。首先我是出于公司幾位美工的設(shè)計(jì)效果圖源文件沒有對圖層命名而開始考慮總結(jié)一套的，還有一個(gè)原因就是網(wǎng)上大多命名規(guī)范都是關(guān)于編碼的，也就是那些css、html、js和一些服務(wù)器端語言的，至于設(shè)計(jì)方面的命名規(guī)范實(shí)在是很少。但是畢竟設(shè)計(jì)師也是技術(shù)團(tuán)隊(duì)的成員，而且前端開發(fā)工程師是要使用設(shè)計(jì)師的效果圖源文件的，所以統(tǒng)一命名規(guī)范和設(shè)計(jì)規(guī)范對于團(tuán)隊(duì)的協(xié)作和工作效率肯定是有好處的。

這套WebUI設(shè)計(jì)命名規(guī)范總結(jié)自我的一些Web設(shè)計(jì)經(jīng)驗(yàn)和國外設(shè)計(jì)師的命名方式推薦。

一.網(wǎng)站設(shè)計(jì)及基本框架結(jié)構(gòu):

1.    Container
“container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.
2.    Header
“header” 是網(wǎng)站頁面的頭部區(qū)域，一般來講，它包含網(wǎng)站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).
3.    Navbar
“navbar“等同于橫向的導(dǎo)航欄，是最典型的網(wǎng)頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.
4.    Menu
“Menu”區(qū)域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “links“，“sidebar-main”.
5.   Main
“Main”是網(wǎng)站的主要區(qū)域，如果是博客的話它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。
6.   Sidebar
“Sidebar” 部分可以包含網(wǎng)站的次要內(nèi)容，比如最近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.
7.    Footer
“Footer”包含網(wǎng)站的一些附加信息，這部分還可以命名為: “copyright“.

二.需要注意的幾點(diǎn):

1.盡量考慮為元素命名其本身的作用或”用意”，達(dá)到語義化。不要使用表面形式的命名.
如:red/left/big等。

2.組合命名規(guī)則:
[元素類型]-[元素作用/內(nèi)容]
如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news

3.涉及到交互行為的元素命名:
凡涉及交互行為的元素通常會(huì)有正常、懸停、點(diǎn)擊和已瀏覽等不同樣式，命名可參考以下規(guī)則:
鼠標(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層，即可形成組，所有圖層盡量避免使用默認(rèn)命名(圖層+編號)。

第一級圖層結(jié)構(gòu)如下圖:

第二級結(jié)構(gòu)圖例(醫(yī)院網(wǎng)站):

第三級結(jié)構(gòu)圖例及效果圖對比(醫(yī)院新聞欄目)：

四．常用命名匯總:

頁頭: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
注冊:regsiter
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權(quán):copyright
網(wǎng)站地圖: sitemap

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