DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網站設計Tab標簽切換的效果制作
網站設計Tab標簽切換的效果制作
編輯:CSS進階教程     

在如今的網頁設計中,Tab標簽切換的應用已經是非常的廣泛,基本在每個網站中都有這樣的效果被應用到前台的設計中去,來完成之前無法完成的任務。所以,Tab標簽的設計也就成了一個不可小觑的工作流程,在浏覽一個網站時,看到了他們的Tab標簽制作的導航菜單效果,但卻是沒有達到該有的效果,反而增加了用戶浏覽的困惑,該站的Tab標簽效果如下圖:

那麼,通過這個效果圖,你可以確定我的當前操作狀態是在哪個標簽下嗎?Site Details還是Statistics?顯然,功能實現了,但效果失敗了。

你可以說是在Site Details標簽的激活狀態,因為,Site Details標簽的box顯然更大些,並且其背景顏色正好跟底部橫向條的顏色一致;你也可以認為當前是在Statistics標簽的激活狀態,因為乍一看,Statistics標簽跟中間的白色間隔條是很一致的;兩者皆有可能,那用戶就要迷惑了,迷惑也就導致了錯誤的體驗,降低了可用性。

Tab標簽切換的應用之所以越來越廣泛,主要是它可以有效地對頁面內容進行合理准確的導航,告之用戶他當前頁面的操作狀態。Tab標簽不僅感官上給人舒服易操作的印象,也完全跟我們日常生活中使用的文件夾標簽一樣,所以更容易讓用戶接受。

這裡分5步簡單地羅列出了制作一套完整的Tab標簽的全過程

1,將激活狀態下的標簽跟內容緊密聯系

在開始提到的那個效果中,我當前的浏覽狀態是Site Details標簽內容,但是,由於設計的疏忽導致Site Details標簽跟下面的內容產生了一個白色的間距,從而使其功能產生了歧義,效果也是失色很多。所以,激活狀態下的標簽一定要跟其對應的內容很好的結合起來。

2,確保其他標簽(未處在激活狀態的)跟當前標簽樣式的不同

要做到這一點並不難,你可以通過修改其他標簽樣式的顏色、邊框、背景等等屬性,來達到跟當前標簽的不同,從而,明確地告之用戶他當前的操作狀態。你一可以通過背景圖片的方法對其他標簽樣式進行偽3D的效果修飾,或是加深顏色制造陰影等等,方法多種多樣。

3,改變激活狀態下標簽的字體顏色

改變激活狀態下標簽的字體顏色,使其效果跟其他標簽完全不同,從而在視覺上產生強烈的反差,如此設計的好處之一就是,可以讓用戶一目了然地看清楚,除了當前狀態之外,還可以進行哪些內容的操作,方便用戶操作切換。

4,Tab標簽鏈接區域的界限跨度

將整個Tab標簽鏈接區域的寬度和高度全部進行link設置,不要只是對鏈接文本進行小區域的修飾,這樣不但降低了頁面的易操作性,而且在視覺上也是一個很大的問題。所以,在對Tab的anchor錨點進行設置時,盡量做到填充整體Tab標簽的全部區域,你可以通過對CSS樣式中的padding屬性設置實現。

5,確保每個頁面都有激活狀態的標簽

當用戶第一次進入你的網站或是某個頁面時,首先,他們將會注意下網站的Tab標簽狀態,判斷當前的Tab標簽是否和自己查找的內容一致。尤其對於通過搜索引擎進入到網站中某一頁面的用戶來說,這個功能尤其重要。頁面中適當位置的Tab標簽,就像一面旗幟,指引和引導用戶准確地進行頁面操作。
所以,在對你的網站設計Tab標簽切換的效果時,不妨參考本文為你羅列出來的幾個簡單的注意事項,把Tab標簽的操作效果設計的更合理。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved