Web UI 設(shè)計命名規(guī)范

這套WebUI設(shè)計命名規(guī)范總結(jié)自我的一些Web設(shè)計經(jīng)驗和國外設(shè)計師的命名方式推薦。 一.網(wǎng)站設(shè)計及基本框架結(jié)構(gòu): 1. Container “container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“. 2. Header “header” 是網(wǎng)站頁面的頭部區(qū)域，一般來講，它包含網(wǎng)站的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”是網(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“. 7. Footer “Footer”包含網(wǎng)站的一些附加信息，這部分還可以命名為: “copyright“. 二.需要注意的幾點: 1.盡量考慮為元素命名其本身的作用或”用意”，達到語義化。不要使用表面形式的命名. 如:red/left/big等。 2.組合命名規(guī)則: [元素類型]-[元素作用/內(nèi)容] 如:搜索按鈕: btn-search 登錄表單:form-login 新聞列表:list-news 3.涉及到交互行為的元素命名: 凡涉及交互行為的元素通常會有正常、懸停、點擊和已瀏覽等不同樣式，命名可參考以下規(guī)則: 鼠標懸停:：hover 點擊：click 已瀏覽：visited 如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited 三.Photoshop圖層結(jié)構(gòu)規(guī)范: Photoshop圖層命名遵循樹形結(jié)構(gòu)，凡某元素組成的圖層大于3層，即可形成組，所有圖層盡量避免使用默認命名(圖層+編號)。 四．常用命名匯總: 頁頭:header 登錄條:loginbar 標志:logo 側(cè)欄:sidebar 廣告條:banner 導(dǎo)航:nav 子導(dǎo)航:subNav 菜單:menu 子菜單:subMenu 下拉菜單:dropMenu 工具條: toolbar 表單:form 欄目:column 箭頭:arrow 搜索:search 搜索按鈕:btn-search 滾動條:scroll 內(nèi)容:content 標簽頁:tab 文章列表:list 提示信息:msg 小技巧:tips 欄目標題:title 鏈接:links 頁腳:footer 服務(wù):service 熱點:hot 新聞:news 下載:download 注冊:regsiter 狀態(tài):status 按鈕:btn 投票:vote 合作伙伴:partner 版權(quán):copyright 網(wǎng)站地圖: sitemap