日韩A∨一区三区在线观看_国产AV丝袜一区二区三区性色_人妻少妇精品一区二区_国产成人双飞在线观看

新聞動態(tài) NEWS
您當(dāng)前位置:首頁 > 新聞動態(tài) > 行業(yè)資訊

網(wǎng)頁設(shè)計(jì)過程中推薦的命名規(guī)范

發(fā)布者:admin發(fā)布時(shí)間:2009/7/29 9:07:10閱讀:3795次

這套規(guī)范并非單純的CSS、html或JavaScript命名規(guī)范,它涉及了很多使用PhotoShop這類設(shè)計(jì)工具進(jìn)行網(wǎng)頁設(shè)計(jì)過程中的命名規(guī)范。(好久沒寫文章了,有點(diǎn)羅嗦,吼吼~)。首先我是出于公司幾位美工的設(shè)計(jì)效果圖源文件沒有對圖層命名而開始考慮總結(jié)一套的,還有一個(gè)原因就是網(wǎng)上大多命名規(guī)范都是關(guān)于編碼的,也就是那些css、html、js和一些服務(wù)器端語言的,至于設(shè)計(jì)方面的命名規(guī)范實(shí)在是很少。但是畢竟設(shè)計(jì)師也是技術(shù)團(tuán)隊(duì)的成員,而且前端開發(fā)工程師是要使用設(shè)計(jì)師的效果圖源文件的,所以統(tǒng)一命名規(guī)范和設(shè)計(jì)規(guī)范對于團(tuán)隊(duì)的協(xié)作和工作效率肯定是有好處的。

  這套WebUI設(shè)計(jì)命名規(guī)范總結(jié)自我的一些Web設(shè)計(jì)經(jīng)驗(yàn)和國外設(shè)計(jì)師的命名方式推薦。

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

  一.網(wǎng)站設(shè)計(jì)及基本框架結(jié)構(gòu):

  
請?zhí)砑用枋?src="http://myarticle.enet.com.cn/images/2009/0514/1242277281571.gif"


  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“.

  二.需要注意的幾點(diǎn):

  1.盡量考慮為元素命名其本身的作用或”用意”,達(dá)到語義化。不要使用表面形式的命名.

  如:red/left/big等。

  2.組合命名規(guī)則:

  [元素類型]-[元素作用/內(nèi)容]

  如:搜索按鈕: btn-search

  登錄表單:form-login

  新聞列表:list-news

  3.涉及到交互行為的元素命名:

  凡涉及交互行為的元素通常會有正常、懸停、點(diǎn)擊和已瀏覽等不同樣式,命名可參考以下規(guī)則:

  鼠標(biāo)懸停::hover 點(diǎn)擊:click 已瀏覽:visited

  如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited

 三.Photoshop圖層結(jié)構(gòu)規(guī)范:

  Photoshop圖層命名遵循樹形結(jié)構(gòu),凡某元素組成的圖層大于3層,即可形成組,所有圖層盡量避免使用默認(rèn)命名(圖層+編號)。

  第一級圖層結(jié)構(gòu)如下圖:

  
網(wǎng)頁設(shè)計(jì)


  第二級結(jié)構(gòu)圖例(醫(yī)院網(wǎng)站):

  
網(wǎng)頁設(shè)計(jì)


  第三級結(jié)構(gòu)圖例及效果圖對比(醫(yī)院新聞欄目):

  
網(wǎng)頁設(shè)計(jì)


  效果圖

  
網(wǎng)頁設(shè)計(jì)


  圖層命名結(jié)構(gòu)

  四.常用命名匯總:

  頁頭:header

  登錄條:loginbar

  標(biāo)志:logo

  側(cè)欄:sidebar

  廣告條:banner

  導(dǎo)航:nav

  子導(dǎo)航:subNav

  菜單:menu

  子菜單:subMenu

  下拉菜單:dropMenu

  工具條: toolbar

  表單:form

  欄目:column

  箭頭:arrow

  搜索:search

  搜索按鈕:btn-search

  滾動條:scroll

  內(nèi)容:content

  標(biāo)簽頁:tab

  文章列表:list

  提示信息:msg

  小技巧:tips

  欄目標(biāo)題:title

  鏈接:links

  頁腳:footer

  服務(wù):service

  熱點(diǎn):hot

  新聞:news

  下載:download

  注冊:regsiter

  狀態(tài):status

  按鈕:btn

  投票:vote

  合作伙伴:partner

  版權(quán):copyright

  網(wǎng)站地圖: sitemap

  以上命名規(guī)范僅供參考。如果大家對于Web UI設(shè)計(jì)規(guī)范有自己的見解,歡迎大家在此留言一同討論,互相學(xué)習(xí),共同進(jìn)步:)

  • CONTACT US
  • 您可以通過以下方式聯(lián)系我們
  • 售前咨詢:13762755007
    售后服務(wù):13762755007

    電子郵件:393226556@qq.com
    地址:湖南省岳陽市步行街北輔道君臨新世界C座1227

  • 服務(wù)無止境,技術(shù)永創(chuàng)新
  • 精誠合作,互利共贏
    新網(wǎng)人:專業(yè)勤奮有激情,務(wù)實(shí)守信有創(chuàng)新
  •  
  • 版權(quán)所有 © 2008-2025湖南軟視網(wǎng)絡(luò)科技有限公司
    湘ICP備14000690號-1 TQ洽談通
  • 微信掃一掃
  • 電話咨詢

  • 137 62755007