在如今的網(wǎng)頁(yè)設(shè)計(jì)中，tab標(biāo)簽切換的應(yīng)用已經(jīng)是非常的廣泛，基本在每個(gè)網(wǎng)站中都有這樣的效果被應(yīng)用到前臺(tái)的設(shè)計(jì)中去，來(lái)完成之前無(wú)法完成的任務(wù)。所以，tab標(biāo)簽的設(shè)計(jì)也就成了一個(gè)不可小覷的工作流程，在瀏覽一個(gè)網(wǎng)站時(shí)，看到了他們的tab標(biāo)簽制作的導(dǎo)航菜單效果，但卻是沒(méi)有達(dá)到該有的效果，反而增加了用戶瀏覽的困惑，該站的tab標(biāo)簽效果如下圖：

[align=center][/align]

那么，通過(guò)這個(gè)效果圖，你可以確定我的當(dāng)前操作狀態(tài)是在哪個(gè)標(biāo)簽下嗎？site details還是statistics？顯然，功能實(shí)現(xiàn)了，但效果失敗了。

你可以說(shuō)是在site details標(biāo)簽的激活狀態(tài)，因?yàn)?，site details標(biāo)簽的box顯然更大些，并且其背景顏色正好跟底部橫向條的顏色一致；你也可以認(rèn)為當(dāng)前是在statistics標(biāo)簽的激活狀態(tài)，因?yàn)檎б豢?，statistics標(biāo)簽跟中間的白色間隔條是很一致的；兩者皆有可能，那用戶就要迷惑了，迷惑也就導(dǎo)致了錯(cuò)誤的體驗(yàn)，降低了可用性。

tab標(biāo)簽切換的應(yīng)用之所以越來(lái)越廣泛，主要是它可以有效地對(duì)頁(yè)面內(nèi)容進(jìn)行合理準(zhǔn)確的導(dǎo)航，告之用戶他當(dāng)前頁(yè)面的操作狀態(tài)。tab標(biāo)簽不僅感官上給人舒服易操作的印象，也完全跟我們?nèi)粘Ｉ钪惺褂玫奈募A標(biāo)簽一樣，所以更容易讓用戶接受。

這里分5步簡(jiǎn)單地羅列出了制作一套完整的tab標(biāo)簽的全過(guò)程：

1,將激活狀態(tài)下的標(biāo)簽跟內(nèi)容緊密聯(lián)系

在開始提到的那個(gè)效果中，我當(dāng)前的瀏覽狀態(tài)是site details標(biāo)簽內(nèi)容，但是，由于設(shè)計(jì)的疏忽導(dǎo)致site details標(biāo)簽跟下面的內(nèi)容產(chǎn)生了一個(gè)白色的間距，從而使其功能產(chǎn)生了歧義，效果也是失色很多。所以，激活狀態(tài)下的標(biāo)簽一定要跟其對(duì)應(yīng)的內(nèi)容很好的結(jié)合起來(lái)。

[align=center][/align]

2,確保其他標(biāo)簽（未處在激活狀態(tài)的）跟當(dāng)前標(biāo)簽樣式的不同

要做到這一點(diǎn)并不難，你可以通過(guò)修改其他標(biāo)簽樣式的顏色、邊框、背景等等屬性，來(lái)達(dá)到跟當(dāng)前標(biāo)簽的不同，從而，明確地告之用戶他當(dāng)前的操作狀態(tài)。你一可以通過(guò)背景圖片的方法對(duì)其他標(biāo)簽樣式進(jìn)行偽3d的效果修飾，或是加深顏色制造陰影等等，方法多種多樣。

[align=center][/align]

3,改變激活狀態(tài)下標(biāo)簽的字體顏色

改變激活狀態(tài)下標(biāo)簽的字體顏色，使其效果跟其他標(biāo)簽完全不同，從而在視覺(jué)上產(chǎn)生強(qiáng)烈的反差，如此設(shè)計(jì)的好處之一就是，可以讓用戶一目了然地看清楚，除了當(dāng)前狀態(tài)之外，還可以進(jìn)行哪些內(nèi)容的操作，方便用戶操作切換。

[align=center][/align]

4,tab標(biāo)簽鏈接區(qū)域的界限跨度

將整個(gè)tab標(biāo)簽鏈接區(qū)域的寬度和高度全部進(jìn)行l(wèi)ink設(shè)置，不要只是對(duì)鏈接文本進(jìn)行小區(qū)域的修飾，這樣不但降低了頁(yè)面的易操作性，而且在視覺(jué)上也是一個(gè)很大的問(wèn)題。所以，在對(duì)tab的anchor錨點(diǎn)進(jìn)行設(shè)置時(shí)，盡量做到填充整體tab標(biāo)簽的全部區(qū)域，你可以通過(guò)對(duì)css樣式中的padding屬性設(shè)置實(shí)現(xiàn)。

[align=center][/align]

5,確保每個(gè)頁(yè)面都有激活狀態(tài)的標(biāo)簽

當(dāng)用戶第一次進(jìn)入你的網(wǎng)站或是某個(gè)頁(yè)面時(shí)，首先，他們將會(huì)注意下網(wǎng)站的tab標(biāo)簽狀態(tài)，判斷當(dāng)前的tab標(biāo)簽是否和自己查找的內(nèi)容一致。尤其對(duì)于通過(guò)搜索引擎進(jìn)入到網(wǎng)站中某一頁(yè)面的用戶來(lái)說(shuō)，這個(gè)功能尤其重要。頁(yè)面中適當(dāng)位置的tab標(biāo)簽，就像一面旗幟，指引和引導(dǎo)用戶準(zhǔn)確地進(jìn)行頁(yè)面操作。
所以，在對(duì)你的網(wǎng)站設(shè)計(jì)tab標(biāo)簽切換的效果時(shí)，不妨參考本文為你羅列出來(lái)的幾個(gè)簡(jiǎn)單的注意事項(xiàng)，把tab標(biāo)簽的操作效果設(shè)計(jì)的更合理。

http://bbon.cn/2008/08/5%e6%ad%a5%e5%88%b6%e4%bd%9c%e5%ae%8c%e6%95%b4%e7%9a%84tab%e6%a0%87%e7%ad%be%e5%af%bc%e8%88%aa%e8%8f%9c%e5%8d%95.html