2025澳门开彩结果历史记录-2025澳门开彩结果-2025澳门开彩查询记录-2025澳门聚宝盆-2025澳门九点半一肖一码-2025澳门精准资料免费全览

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