之前有寫過一篇瀏覽器的tab設(shè)計(jì)，這回說說網(wǎng)站的tab設(shè)計(jì)。
一說到tab很自然地就想到了導(dǎo)航、信息架構(gòu)。隨著網(wǎng)站信息結(jié)構(gòu)的復(fù)雜化，選擇tab似乎是性價(jià)比最高、結(jié)構(gòu)傳遞最明確的導(dǎo)航方式。這也是其中面包屑導(dǎo)航方式衰弱的重要原因。
如果你想用tab的方式構(gòu)架你的網(wǎng)站，搞明白下面幾個(gè)問題，或許對(duì)你怎么設(shè)計(jì)會(huì)有幫助。
用tab解決什么問題？
在設(shè)計(jì)tab之前，先要搞清楚為什么用tab，每個(gè)tab下的信息到底是什么，信息之間的關(guān)系是：
信息結(jié)構(gòu)一共有多少層？
tab跟大標(biāo)題之間的關(guān)系（大標(biāo)題的作用大多是給用戶定位）
并列關(guān)系
過濾關(guān)系
是否互為同類項(xiàng)？
包含與被包含？
……
如上圖，tab1和tab2下面的信息互相之間的關(guān)系？每個(gè)tab下信息和大標(biāo)題之間的關(guān)系？只有搞清楚關(guān)系和需求，才有辦法進(jìn)行下一步設(shè)計(jì)。
tab結(jié)構(gòu)
看下面幾張圖，相信應(yīng)該能夠感受到結(jié)構(gòu)的區(qū)別了。
上圖都是選中tab4的效果，但結(jié)構(gòu)方式卻不一樣。雖然這個(gè)例子很簡(jiǎn)單，但我們?cè)趯?shí)際操作的時(shí)候，往往會(huì)比這復(fù)雜很多，比如：
tab下面需要嵌套tab，如digg的設(shè)計(jì)。
或者tab和面包屑的結(jié)合方式，（如原來junchen介紹過的）等等，
很多問題往往因?yàn)槎鄬拥男畔⒔Y(jié)構(gòu)，在tab的運(yùn)用上面，需要靈活變通。
（在研究結(jié)構(gòu)的時(shí)候，需要完全拋開交互和視覺樣式來分析）
tab的交互方式
選中的tab是否可以再操作？如果是，如何告訴用戶？
點(diǎn)擊tab的時(shí)候，刷新不刷新頁(yè)面？
tab的視覺樣式
tab長(zhǎng)得什么樣子，會(huì)很直接地影響用戶對(duì)導(dǎo)航的認(rèn)知，舉三個(gè)比較常見的例子：
當(dāng)然，視覺樣式肯定很難窮舉出來，有需求的參考一下這里。
幾點(diǎn)提示
1 tab的個(gè)數(shù)，最好遵循 7±2原則。尤其是非主導(dǎo)航區(qū)域。
2 在沒有把需求和結(jié)構(gòu)搞明白之前，切勿拘泥于tab的樣式設(shè)計(jì)。
3 在多級(jí)tab的情況下，如何精簡(jiǎn)結(jié)構(gòu)是一門學(xué)問，需要多從產(chǎn)品形態(tài)和用戶需求方面考慮，不一定需要一味的追求結(jié)構(gòu)的清晰和統(tǒng)一，造成不必要的冗余。
本文最主要的是提供設(shè)計(jì)思路，拋磚引玉，有興趣大家一起關(guān)注和分享這個(gè)話題。
粵公網(wǎng)安備 44010402000282號(hào)