Web UI 設計命名規範

一.網站設計及基本框架結構:

1.    Container
「container「 就是將頁面中的全部元素包在一塊兒的部分，這部分還能夠命名爲: 「wrapper「, 「wrap「, 「page「.
2.    Header
「header」 是網站頁面的頭部區域，通常來說，它包含網站的logo和一些其餘元素。這部分還能夠命名爲:「page-header」 (或 pageHeader).
3.    Navbar
「navbar「等同於橫向的導航欄，是最典型的網頁元素。這部分還能夠命名爲:「nav」, 「navigation」, 「nav-wrapper」.
4.    Menu
「Menu」區域包含通常的連接和菜單，這部分還能夠命名爲: 「subNav 「, 「links「，「sidebar-main」.
5.   Main
「Main」是網站的主要區域，若是是博客的話它將包含的日誌。這部分還能夠命名爲: 「content「, 「main-content」 (或「mainContent」)。
6.   Sidebar
「Sidebar」 部分能夠包含網站的次要內容，好比最近更新內容列表、關於網站的介紹或廣告元素等…這部分還能夠命名爲: 「subNav 「, 「side-panel「, 「secondary-content「.
7.    Footer
「Footer」包含網站的一些附加信息，這部分還能夠命名爲: 「copyright「.

二.須要注意的幾點:

1.儘可能考慮爲元素命名其自己的做用或」用意」，達到語義化。不要使用表面形式的命名.
如: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設計規範有本身的看法，歡迎你們在此留言一同討論，互相學習，共同進步:)