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

如果你想用tab的方式構(gòu)架你的網(wǎng)站，搞明白下面幾個問題，或許對你怎么設(shè)計會有幫助。

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

tab結(jié)構(gòu)

看下面幾張圖，相信應(yīng)該能夠感受到結(jié)構(gòu)的區(qū)別了。

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

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

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

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

幾點提示
1 tab的個數(shù)，最好遵循 7±2原則。尤其是非主導(dǎo)航區(qū)域。
2 在沒有把需求和結(jié)構(gòu)搞明白之前，切勿拘泥于tab的樣式設(shè)計。
3 在多級tab的情況下，如何精簡結(jié)構(gòu)是一門學(xué)問，需要多從產(chǎn)品形態(tài)和用戶需求方面考慮，不一定需要一味的追求結(jié)構(gòu)的清晰和統(tǒng)一，造成不必要的冗余。

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

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