隨著功能的不斷增加喜命，幾乎所有產(chǎn)品都面臨著一個(gè)棘手的問(wèn)題：導(dǎo)航越來(lái)越多沟沙，如果規(guī)劃菜單層級(jí)？底層的4~5個(gè)一級(jí)菜單早已經(jīng)hold不住了壁榕，側(cè)邊欄菜單早已經(jīng)是遺棄品矛紫，這個(gè)時(shí)候，新歡tab出現(xiàn)了牌里。
1.為什么說(shuō)側(cè)邊欄菜單已經(jīng)是個(gè)遺棄品颊咬？
側(cè)邊欄菜單，也可以稱之為漢堡菜單 (Hamburger Menus) 牡辽，在默認(rèn)的狀態(tài)下喳篇，它承載的菜單內(nèi)容為不可見(jiàn)狀態(tài)，旨在引導(dǎo)用戶關(guān)注產(chǎn)品的核心功能态辛，可以幫助產(chǎn)品導(dǎo)航層級(jí)較多時(shí)合理分配空間麸澜。但是，側(cè)邊欄菜單可見(jiàn)性較低奏黑，即無(wú)法預(yù)見(jiàn)菜單中的內(nèi)容炊邦，即使用戶了解其中的菜單內(nèi)容，在使用側(cè)邊欄菜單時(shí)也會(huì)遇到效率問(wèn)題——需要先打開(kāi)漢堡菜單才能進(jìn)行下一步操作攀涵。
目前铣耘，大部分主流產(chǎn)品不會(huì)把側(cè)邊欄菜單作為一個(gè)主要的導(dǎo)航層級(jí)使用，當(dāng)然以故，如果產(chǎn)品本身功能集中蜗细，頁(yè)面是功能的主要承載體，可以考慮使用側(cè)邊欄導(dǎo)航怒详，例如“思維導(dǎo)圖”軟件炉媒。
2.移動(dòng)端的Tabs和Segment Control
tab可以看作是側(cè)邊欄菜單的替代品，它具備了可見(jiàn)性昆烁，可操作性（點(diǎn)擊或者滑動(dòng)切換）的特性吊骤，在底欄菜單已經(jīng)占滿之后，能很好地組織導(dǎo)航的層級(jí)静尼。
Tabs和Segment Control都可以統(tǒng)一稱為tabs白粉，但是兩者的出處不同传泊，前者Tabs來(lái)自Android規(guī)范，是Material Design推薦的導(dǎo)航形式鸭巴。而Segment Control（分段控件/分段選擇器/分段選擇控件）則來(lái)源于iOS規(guī)范眷细，是iOS的原生控件之一。實(shí)際上鹃祖，兩者并沒(méi)有本質(zhì)的區(qū)別溪椎，都是用于菜單導(dǎo)航的組織。
在我們了解了tab的作用和區(qū)別之后恬口，我們也就大體掌握了它的用法校读，然而，真實(shí)的使用場(chǎng)景遠(yuǎn)遠(yuǎn)沒(méi)有想象中那樣美好祖能，因?yàn)閠ab下方還可能有新的層級(jí)導(dǎo)航歉秫。以下圖中的基金檔案為例，概況芯杀、公告端考、持倉(cāng)雅潭、行業(yè)揭厚、分紅配送等都屬于“基金檔案”的分類，而“公告”下方又細(xì)分為“全部”扶供、“發(fā)作運(yùn)行”筛圆、“定期報(bào)告”、“其他公告”等椿浓，這時(shí)太援，我們可以巧妙利用Tabs和Segment Control把導(dǎo)航層級(jí)組織好，并且在視覺(jué)上有明顯的層次感區(qū)分扳碍。
另外提岔，也有其他突發(fā)狀況，tab作為頁(yè)面中信息內(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è)主頁(yè)面用到了3個(gè)層級(jí)的tab切換勉抓，雖然tab層級(jí)較多走孽，但在樣式上進(jìn)行了區(qū)分，使用起來(lái)毫無(wú)違和感琳状。
結(jié)合移動(dòng)端的tab表現(xiàn)形式磕瓷，在多層級(jí)tab表現(xiàn)下的列表，可以采用類似的層級(jí)處理方式念逞，見(jiàn)下圖所示
看起來(lái)比較抽象困食？沒(méi)關(guān)系，我們可以多看一些例子翎承，例如國(guó)民級(jí)應(yīng)用微信后臺(tái)對(duì)tab層級(jí)的處理硕盹，學(xué)會(huì)了嗎？
