對網(wǎng)頁視覺設(shè)計(jì)效果的常見誤解（二）

　　7. Footer

 

　　“Footer”包含網(wǎng)站的一些附加信息，這部分還能夠命名為: “copyright“.

 

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

 

　　1.盡量考慮為元素命名其本身的效果或”意圖”，達(dá)到語義化。不要運(yùn)用外表形式的命名. 如: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層，即可形成組，所有圖層盡量防止運(yùn)用默認(rèn)命名(圖層+編號)。

 

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

 

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

 

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

 

　　四．常用命名匯總:

 

　　頁頭: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　熱門:hot　新聞:news　下載:download　注冊:regsiter　狀況:status　按鈕:btn　投票:vote　合作伙伴:partner　版權(quán):copyright　網(wǎng)站地圖: sitemap

只有正確認(rèn)識其價(jià)值和作用，才能充分發(fā)揮網(wǎng)頁視覺設(shè)計(jì)在提升用戶體驗(yàn)、促進(jìn)業(yè)務(wù)發(fā)展方面的重要作用。