對網頁視覺設計效果的常見誤解（二）

　　7. Footer

 

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

 

　　二.需要注意的幾點:

 

　　1.盡量考慮為元素命名其本身的效果或”意圖”，達到語義化。不要運用外表形式的命名. 如:red/left/big等。

 

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

 

　　[元素類型]-[元素效果/內容]

 

　　如:查找按鈕: btn-search

 

　　登錄表單:form-login

 

　　新聞列表:list-news

 

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

 

　　凡觸及交互行為的元素通常會有正常、懸停、點擊和已閱讀等不同樣式，命名可參考以下規(guī)矩:

 

　　鼠標懸停:：hover 點擊：click 已閱讀：visited

 

　　如:查找按鈕: btn-search、btn-search-hover、btn-search-visited

 

三.Photoshop圖層結構規(guī)范:

 

　　Photoshop圖層命名遵從樹形結構，凡某元素組成的圖層大于3層，即可形成組，所有圖層盡量防止運用默認命名(圖層+編號)。

 

　　第一級圖層結構如下圖:

 

　　第二級結構圖例(醫(yī)院網站):

 

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

 

　　四．常用命名匯總:

 

　　頁頭:header　登錄條:loginbar　標志:logo　側欄:sidebar　廣告條:banner　導航:nav　子導航:subNav　菜單:menu　子菜單:subMenu　下拉菜單:dropMenu　工具條: toolbar　表單:form　欄目:column　箭頭:arrow　查找:search　查找按鈕:btn-search　滾動條:scroll　內容:content　標簽頁:tab　文章列表:list　提示信息:msg　小技巧:tips　欄目標題:title　鏈接:links　頁腳:footer　服務:service　熱門:hot　新聞:news　下載:download　注冊:regsiter　狀況:status　按鈕:btn　投票:vote　合作伙伴:partner　版權:copyright　網站地圖: sitemap

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