這套規範并非單純的CSS、html或JavaScript命名規範，它涉及了很多使用PhotoShop這類設計工(gōng)具進行網頁設計過程中(zhōng)的命名規範。(好久沒寫文章了，有點羅嗦，吼吼~)。首先我(wǒ)(wǒ)是出于公司幾位美工(gōng)的設計效果圖源文件沒有對圖層命名而開(kāi)始考慮總結一(yī)套的，還有一(yī)個原因就是網上大(dà)多命名規範都是關于編碼的，也就是那些css、html、js和一(yī)些
服務器端語言的，至于設計方面的命名規範實在是很少。但是畢竟設計師也是技術團隊的成員(yuán)，而且前端開(kāi)發工(gōng)程師是要使用設計師的效果圖源文件的，所以統一(yī)命名規範和設計規範對于團隊的協作和工(gōng)作效率肯定是有好處的。
這套WebUI設計命名規範總結自我(wǒ)(wǒ)的一(yī)些Web設計經驗和國外(wài)設計師的命名方式推薦。
Web UI 設計命名規範
一(yī).網站設計及基本框架結構:
1. Container
“container“ 就是将頁面中(zhōng)的所有元素包在一(yī)起的部分(fēn)，這部分(fēn)還可以命名爲: “wrapper“, “wrap“, “page“.
2. Header
“header” 是網站頁面的頭部區域，一(yī)般來講，它包含網站的logo和一(yī)些其他元素。這部分(fēn)還可以命名爲:“page-header” (或 pageHeader).
3. Navbar
“navbar“等同于橫向的導航欄，是最典型的網頁元素。這部分(fēn)還可以命名爲:“nav”, “navigation”, “nav-wrapper”.
4. Menu
“Menu”區域包含一(yī)般的鏈接和菜單，這部分(fēn)還可以命名爲: “subNav “, “links“，“sidebar-main”.
5. Main
“Main”是網站的主要區域，如果是博客的話(huà)它将包含的日志(zhì)。這部分(fēn)還可以命名爲: “content“, “main-content” (或“mainContent”)。
6. Sidebar
“Sidebar” 部分(fēn)可以包含網站的次要内容，比如最近更新内容列表、關于網站的介紹或廣告元素等…這部分(fēn)還可以命名爲: “subNav “, “side-panel“, “secondary-content“.
7. Footer
“Footer”包含網站的一(yī)些附加
信息，這部分(fēn)還可以命名爲: “copyright“.
二.需要注意的幾點: 1.盡量考慮爲元素命名其本身的作用或”用意”，達到語義化。不要使用表面形式的命名.
如:red/left/big等。
2.組合命名規則:
[元素類型]-[元素作用/内容]
如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news
3.涉及到交互行爲的元素命名:
凡涉及交互行爲的元素通常會有正常、懸停、點擊和已浏覽等不同樣式，命名可參考以下(xià)規則:
鼠标懸停:：hover 點擊：click 已浏覽：visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
三.Photoshop圖層結構規範: Photoshop圖層命名遵循樹(shù)形結構，凡某元素組成的圖層大(dà)于3層，即可形成組，所有圖層盡量避免使用默認命名(圖層+編号)。
第一(yī)級圖層結構如下(xià)圖:
第二級結構圖例(醫院網站):
第三級結構圖例及效果圖對比(醫院新聞欄目)：
效果圖
圖層命名結構
四．常用命名彙總: 頁頭:header
登錄條:loginbar
标志(zhì):logo
側欄:sidebar
廣告條:banner
導航:nav
子導航:subNav
菜單:menu
子菜單:subMenu
下(xià)拉菜單:dropMenu
工(gōng)具條: toolbar
表單:form
欄目:column
箭頭:arrow
搜索:search
搜索按鈕:btn-search
滾動條:scroll
内容:content
标簽頁:tab
文章列表:list
提示
信息:msg
小(xiǎo)技巧:tips
欄目标題:title
鏈接:links
頁腳:footer
服務:service
熱點:hot
新聞:news
下(xià)載:download
注冊:regsiter
狀态:status
按鈕:btn
投票:vote
合作夥伴:partner
版權:copyright
網站地圖: sitemap
以上命名規範僅供參考。如果大(dà)家對于Web UI設計規範有自己的見解，歡迎大(dà)家在此留言一(yī)同讨論，互相學習，共同進步:)
