更近工作實(shí)在是繁忙，所以好久沒有更新自己的博客了，實(shí)在是對不起各位讀者。今天好不容易閑下來半天，所以和大家分享一下我之前總結(jié)的一套Web UI 設(shè)計命名規(guī)范，也就是站點(diǎn)用戶界面設(shè)計(俗稱網(wǎng)頁設(shè)計)命名規(guī)范。
這套規(guī)范并非單純的CSS、html或JavaScript命名規(guī)范，它涉及了很多運(yùn)用 Photoshop這類設(shè)計工具執(zhí)行 網(wǎng)頁設(shè)計流程中的命名規(guī)范。(好久沒寫文章了，有點(diǎn)羅嗦，吼吼~)。首先我是出于公司幾位美工的設(shè)計效果圖源文件沒有對圖層命名而開始考慮總結(jié)一套的，還有一個原由就是網(wǎng)上大多命名規(guī)范都是關(guān)于編碼的，也就是那些css、html、js和一些服務(wù)器端語言的，至于設(shè)計方面的命名規(guī)范實(shí)在是很少。但是畢竟設(shè)計師也是技能團(tuán)隊的成員，而且前端開發(fā)工程師是要運(yùn)用設(shè)計師的效果圖源文件的，所以統(tǒng)一命名規(guī)范和設(shè)計規(guī)范對于團(tuán)隊的協(xié)作和工作效率肯定是有優(yōu)點(diǎn)的。
這套WebUI設(shè)計命名規(guī)范總結(jié)自我的一些Web設(shè)計體會和國外設(shè)計師的命名形式推選。
Web UI 設(shè)計命名規(guī)范
一.站點(diǎn)設(shè)計及基本框架結(jié)構(gòu):
1. Container
“container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.
2. Header
“header” 是站點(diǎn)頁面的頭部區(qū)域，一般來講，它包含站點(diǎn)的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).
3. Navbar
“navbar“等同于橫向的導(dǎo)航欄，是更典型的網(wǎng)頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.
4. Menu
“Menu”區(qū)域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “l(fā)inks“，“sidebar-main”.
5. Main
“Main”是站點(diǎn)的主要區(qū)域，如果是博客的話它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。
6. Sidebar
“Sidebar” 部分可以包含站點(diǎn)的次要內(nèi)容，比如更近更新內(nèi)容列表、關(guān)于站點(diǎn)的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.
7. Footer
“Footer”包含站點(diǎn)的一些附加信息，這部分還可以命名為: “copyright“.
二.須要留心的幾點(diǎn):
1.盡量考慮為元素命名其本身的作用或”用意”，達(dá)到語義化。不要運(yùn)用表面形式的命名.
網(wǎng)頁設(shè)計流程中推選的命名規(guī)范1，希望對您有參考價值。
查看更多寧波網(wǎng)站制作網(wǎng)頁設(shè)計流程
