隨著功能的不斷增加，幾乎所有產(chǎn)品都面臨著一個(gè)棘手的問題：導(dǎo)航越來越多，如果規(guī)劃菜單層級(jí)？底層的4~5個(gè)一級(jí)菜單早已經(jīng)hold不住了，側(cè)邊欄菜單早已經(jīng)是遺棄品，這個(gè)時(shí)候，新歡tab出現(xiàn)了。

1.為什么說側(cè)邊欄菜單已經(jīng)是個(gè)遺棄品？

側(cè)邊欄菜單，也可以稱之為漢堡菜單 (Hamburger Menus) ，在默認(rèn)的狀態(tài)下，它承載的菜單內(nèi)容為不可見狀態(tài)，旨在引導(dǎo)用戶關(guān)注產(chǎn)品的核心功能，可以幫助產(chǎn)品導(dǎo)航層級(jí)較多時(shí)合理分配空間。但是，側(cè)邊欄菜單可見性較低，即無法預(yù)見菜單中的內(nèi)容，即使用戶了解其中的菜單內(nèi)容，在使用側(cè)邊欄菜單時(shí)也會(huì)遇到效率問題——需要先打開漢堡菜單才能進(jìn)行下一步操作。

目前，大部分主流產(chǎn)品不會(huì)把側(cè)邊欄菜單作為一個(gè)主要的導(dǎo)航層級(jí)使用，當(dāng)然，如果產(chǎn)品本身功能集中，頁面是功能的主要承載體，可以考慮使用側(cè)邊欄導(dǎo)航，例如“思維導(dǎo)圖”軟件。

2.移動(dòng)端的Tabs和Segment Control

tab可以看作是側(cè)邊欄菜單的替代品，它具備了可見性，可操作性（點(diǎn)擊或者滑動(dòng)切換）的特性，在底欄菜單已經(jīng)占滿之后，能很好地組織導(dǎo)航的層級(jí)。

Tabs和Segment Control都可以統(tǒng)一稱為tabs，但是兩者的出處不同，前者Tabs來自Android規(guī)范，是Material Design推薦的導(dǎo)航形式。而Segment Control（分段控件/分段選擇器/分段選擇控件）則來源于iOS規(guī)范，是iOS的原生控件之一。實(shí)際上，兩者并沒有本質(zhì)的區(qū)別，都是用于菜單導(dǎo)航的組織。

在我們了解了tab的作用和區(qū)別之后，我們也就大體掌握了它的用法，然而，真實(shí)的使用場(chǎng)景遠(yuǎn)遠(yuǎn)沒有想象中那樣美好，因?yàn)閠ab下方還可能有新的層級(jí)導(dǎo)航。以下圖中的基金檔案為例，概況、公告、持倉、行業(yè)、分紅配送等都屬于“基金檔案”的分類，而“公告”下方又細(xì)分為“全部”、“發(fā)作運(yùn)行”、“定期報(bào)告”、“其他公告”等，這時(shí)，我們可以巧妙利用Tabs和Segment Control把導(dǎo)航層級(jí)組織好，并且在視覺上有明顯的層次感區(qū)分。

另外，也有其他突發(fā)狀況，tab作為頁面中信息內(nèi)容展示切換的控件，使得大量的內(nèi)容都可以在同一屏中出現(xiàn)，當(dāng)中也涉及到Tabs和Tabs之間的組織方式，如下圖同一屏中“業(yè)績(jī)走勢(shì)”和“凈值估算”的切換，不同區(qū)間“近1月”、“近3月”、“近6月”、“近1年”、“近3年”的業(yè)績(jī)走勢(shì)曲線的切換。

3.Web端的tab

實(shí)際上，Web端的tab使用原理和移動(dòng)端基本一致，甚至tab的層級(jí)更多，以諸葛IO為例，右側(cè)主頁面用到了3個(gè)層級(jí)的tab切換，雖然tab層級(jí)較多，但在樣式上進(jìn)行了區(qū)分，使用起來毫無違和感。

結(jié)合移動(dòng)端的tab表現(xiàn)形式，在多層級(jí)tab表現(xiàn)下的列表，可以采用類似的層級(jí)處理方式，見下圖所示

看起來比較抽象？沒關(guān)系，我們可以多看一些例子，例如國民級(jí)應(yīng)用微信后臺(tái)對(duì)tab層級(jí)的處理，學(xué)會(huì)了嗎？