Web UI 規劃命名標準，也便是網站用戶界面規劃。

 

　　這套標準并非單純的CSS、html或JavaScript命名標準，它涉及了很多運用PhotoShop這類規劃東西進行網頁規劃過程中的命名標準。首要我是出于公司幾位美工的規劃效果圖源文件沒有對圖層命名而開始考慮總結一套的，還有一個原因便是網上大多命名標準都是關于編碼的，也便是那些css、html、js和一些服務器端言語的，至于規劃方面的命名標準實在是很少。但是畢竟規劃師也是技能團隊的成員，而且前端開發工程師是要運用規劃師的效果圖源文件的，所以一致命名標準和規劃標準對于團隊的協作和工作效率肯定是有優點的。

 

　　這套WebUI規劃命名標準總結自我的一些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“.遵循良好的命名規范可以提高代碼的可讀性、可維護性，減少錯誤，并使團隊成員之間的協作更加順暢。