網(wǎng)頁規(guī)劃過程中引薦的命名標準

Web UI 規(guī)劃命名標準，也便是網(wǎng)站用戶界面規(guī)劃。

 

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

 

　　這套WebUI規(guī)劃命名標準總結(jié)自我的一些Web規(guī)劃經(jīng)歷和國外規(guī)劃師的命名方式引薦。

 

　　UI 規(guī)劃命名標準

 

　　一.網(wǎng)站規(guī)劃及基本框架結(jié)構(gòu):

 

　　1. Container

 

　　“container“ 便是將頁面中的所有元素包在一同的部分，這部分還能夠命名為: “wrapper“, “wrap“, “page“.

 

　　2. Header

 

　　“header” 是網(wǎng)站頁面的頭部區(qū)域，一般來講，它包括網(wǎng)站的logo和一些其他元素。這部分還能夠命名為:“page-header” (或 pageHeader).

 

　　3. Navbar

 

　　“navbar“等同于橫向的導航欄，是典型的網(wǎng)頁元素。這部分還能夠命名為:“nav”, “navigation”, “nav-wrapper”.

 

　　4. Menu

 

　　“Menu”區(qū)域包括一般的鏈接和菜單，這部分還能夠命名為: “subNav “, “l(fā)inks“，“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“.遵循良好的命名規(guī)范可以提高代碼的可讀性、可維護性，減少錯誤，并使團隊成員之間的協(xié)作更加順暢。