之前有寫過一篇瀏覽器的tab設計，這回說說網站的tab設計。
一說到tab很自然地就想到了導航、信息架構。隨著網站信息結構的復雜化，選擇tab似乎是性價比最高、結構傳遞最明確的導航方式。這也是其中面包屑導航方式衰弱的重要原因。

如果你想用tab的方式構架你的網站，搞明白下面幾個問題，或許對你怎么設計會有幫助。

用tab解決什么問題？
在設計tab之前，先要搞清楚為什么用tab，每個tab下的信息到底是什么，信息之間的關系是：
信息結構一共有多少層？
tab跟大標題之間的關系（大標題的作用大多是給用戶定位）
并列關系
過濾關系
是否互為同類項？
包含與被包含？
……
如上圖，tab1和tab2下面的信息互相之間的關系？每個tab下信息和大標題之間的關系？只有搞清楚關系和需求，才有辦法進行下一步設計。

tab結構

看下面幾張圖，相信應該能夠感受到結構的區別了。

上圖都是選中tab4的效果，但結構方式卻不一樣。雖然這個例子很簡單，但我們在實際操作的時候，往往會比這復雜很多，比如：
tab下面需要嵌套tab，如digg的設計。
或者tab和面包屑的結合方式，（如原來junchen介紹過的）等等，
很多問題往往因為多層的信息結構，在tab的運用上面，需要靈活變通。
（在研究結構的時候，需要完全拋開交互和視覺樣式來分析）

tab的交互方式
選中的tab是否可以再操作？如果是，如何告訴用戶？
點擊tab的時候，刷新不刷新頁面？

tab的視覺樣式
tab長得什么樣子，會很直接地影響用戶對導航的認知，舉三個比較常見的例子：

當然，視覺樣式肯定很難窮舉出來，有需求的參考一下這里。

幾點提示
1 tab的個數，最好遵循 7±2原則。尤其是非主導航區域。
2 在沒有把需求和結構搞明白之前，切勿拘泥于tab的樣式設計。
3 在多級tab的情況下，如何精簡結構是一門學問，需要多從產品形態和用戶需求方面考慮，不一定需要一味的追求結構的清晰和統一，造成不必要的冗余。

本文最主要的是提供設計思路，拋磚引玉，有興趣大家一起關注和分享這個話題。

原文：http://uitony.com/?p=63