網(wǎng)頁規(guī)劃過程中引薦的命名標準 |
發(fā)布時間:2024-07-15 文章來源:本站 瀏覽次數(shù):1096 |
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é)作更加順暢。 |
|