国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园

[p]在如今的網(wǎng)頁設(shè)計中，tab標(biāo)簽切換的應(yīng)用已經(jīng)是非常的廣泛，基本在每個網(wǎng)站中都有這樣的效果被應(yīng)用到前臺的設(shè)計中去，來完成之前無法完成的任務(wù)。所以，tab標(biāo)簽的設(shè)計也就成了一個不可小覷的工作流程，在瀏覽一個網(wǎng)站時，看到了他們的tab標(biāo)簽制作的導(dǎo)航菜單效果，但卻是沒有達到該有的效果，反而增加了用戶瀏覽的困惑，該站的tab標(biāo)簽效果如下圖：[/p]
[p][align=center][img]http://farm4.static.flickr.com/3022/2780749782_a70fce040f_o.png[/img][/align][/p]
[p]那么，通過這個效果圖，你可以確定我的當(dāng)前操作狀態(tài)是在哪個標(biāo)簽下嗎？site details還是statistics？顯然，功能實現(xiàn)了，但效果失敗了。[/p]
[p]你可以說是在site details標(biāo)簽的激活狀態(tài)，因為，site details標(biāo)簽的box顯然更大些，并且其背景顏色正好跟底部橫向條的顏色一致；你也可以認(rèn)為當(dāng)前是在statistics標(biāo)簽的激活狀態(tài)，因為乍一看，statistics標(biāo)簽跟中間的白色間隔條是很一致的；兩者皆有可能，那用戶就要迷惑了，迷惑也就導(dǎo)致了錯誤的體驗，降低了可用性。[/p]
[p]tab標(biāo)簽切換的應(yīng)用之所以越來越廣泛，主要是它可以有效地對頁面內(nèi)容進行合理準(zhǔn)確的導(dǎo)航，告之用戶他當(dāng)前頁面的操作狀態(tài)。tab標(biāo)簽不僅感官上給人舒服易操作的印象，也完全跟我們?nèi)粘Ｉ钪惺褂玫奈募A標(biāo)簽一樣，所以更容易讓用戶接受。[/p]
[p]這里分5步簡單地羅列出了[b]制作一套完整的tab標(biāo)簽的全過程[/b]：[/p]
[p][b]1,將激活狀態(tài)下的標(biāo)簽跟內(nèi)容緊密聯(lián)系[/b][/p]
[p]在開始提到的那個效果中，我當(dāng)前的瀏覽狀態(tài)是site details標(biāo)簽內(nèi)容，但是，由于設(shè)計的疏忽導(dǎo)致site details標(biāo)簽跟下面的內(nèi)容產(chǎn)生了一個白色的間距，從而使其功能產(chǎn)生了歧義，效果也是失色很多。所以，激活狀態(tài)下的標(biāo)簽一定要跟其對應(yīng)的內(nèi)容很好的結(jié)合起來。[/p]
[p][align=center][img]http://farm4.static.flickr.com/3107/2780749842_fea267e769_o.png[/img][/align][/p]
[p][b]2,確保其他標(biāo)簽（未處在激活狀態(tài)的）跟當(dāng)前標(biāo)簽樣式的不同[/b][/p]
[p]要做到這一點并不難，你可以通過修改其他標(biāo)簽樣式的顏色、邊框、背景等等屬性，來達到跟當(dāng)前標(biāo)簽的不同，從而，明確地告之用戶他當(dāng)前的操作狀態(tài)。你一可以通過背景圖片的方法對其他標(biāo)簽樣式進行偽3d的效果修飾，或是加深顏色制造陰影等等，方法多種多樣。[/p]
[p][align=center][img]http://farm4.static.flickr.com/3118/2780749900_19f83411ff_o.png[/img][/align][/p]
[p][b]3,改變激活狀態(tài)下標(biāo)簽的字體顏色[/b][/p]
[p]改變激活狀態(tài)下標(biāo)簽的字體顏色，使其效果跟其他標(biāo)簽完全不同，從而在視覺上產(chǎn)生強烈的反差，如此設(shè)計的好處之一就是，可以讓用戶一目了然地看清楚，除了當(dāng)前狀態(tài)之外，還可以進行哪些內(nèi)容的操作，方便用戶操作切換。[/p]
[p][align=center][img]http://farm4.static.flickr.com/3165/2780750072_6aa45b3196_o.png[/img][/align][/p]
[p][b]4,tab標(biāo)簽鏈接區(qū)域的界限跨度[/b][/p]
[p]將整個tab標(biāo)簽鏈接區(qū)域的寬度和高度全部進行l(wèi)ink設(shè)置，不要只是對鏈接文本進行小區(qū)域的修飾，這樣不但降低了頁面的易操作性，而且在視覺上也是一個很大的問題。所以，在對tab的anchor錨點進行設(shè)置時，盡量做到填充整體tab標(biāo)簽的全部區(qū)域，你可以通過對css樣式中的padding屬性設(shè)置實現(xiàn)。[/p]
[p][align=center][img]http://farm4.static.flickr.com/3164/2780750224_60173d85b4_o.png[/img][/align][/p]
[p][b]5,確保每個頁面都有激活狀態(tài)的標(biāo)簽[/b][/p]
[p]當(dāng)用戶第一次進入你的網(wǎng)站或是某個頁面時，首先，他們將會注意下網(wǎng)站的tab標(biāo)簽狀態(tài)，判斷當(dāng)前的tab標(biāo)簽是否和自己查找的內(nèi)容一致。尤其對于通過搜索引擎進入到網(wǎng)站中某一頁面的用戶來說，這個功能尤其重要。頁面中適當(dāng)位置的tab標(biāo)簽，就像一面旗幟，指引和引導(dǎo)用戶準(zhǔn)確地進行頁面操作。[br]所以，在對你的網(wǎng)站設(shè)計tab標(biāo)簽切換的效果時，不妨參考本文為你羅列出來的幾個簡單的注意事項，把tab標(biāo)簽的操作效果設(shè)計的更合理。[/p]
[p][url=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]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[/url][/p]