最近在思考有關(guān)Tab「極端」情況的設(shè)計(jì)。
先從Bootstrap 框架說(shuō)起靡羡。Bootstrap 頁(yè)面框架中的漢堡包導(dǎo)航方式無(wú)處不在系洛，看兩個(gè)典型的例子-->>
以上導(dǎo)航的方式，一種是剛開(kāi)始就以漢堡包折疊了起來(lái)略步，另一種則是當(dāng)頁(yè)面窄到某一數(shù)值描扯，就將菜單折疊起來(lái)變成漢堡包。講真纳像，總有一種強(qiáng)行加特技的趕腳荆烈。好端端的導(dǎo)航，卻要隱藏起來(lái)竟趾，徒增切換成本憔购。隱藏起來(lái)頁(yè)面的確會(huì)顯得更簡(jiǎn)潔，但在切換時(shí)多了一步操作岔帽，用戶更容易分心玫鸟。
再放一個(gè)在小屏幕上展開(kāi)的圖：
一展開(kāi)，全屏幕都是導(dǎo)航Tab犀勒，每個(gè)Tab 獨(dú)占一行屎飘，大概是想要上天？
是病得治贾费，Material Design 設(shè)計(jì)規(guī)范如是說(shuō)-->>Tabs - Components - Google design guidelines. 現(xiàn)在越來(lái)越多的移動(dòng)應(yīng)用拋棄了漢堡包钦购，取而代之的是垂直兩端的Tab 導(dǎo)航欄。
正如上圖所示褂萧，沒(méi)有那么寬押桃，還要霸占一行的位置→_→，順便把內(nèi)容都擠下去了导犹。于是我在思考唱凯，如果有較多的Tab，優(yōu)先考慮橫向排列谎痢，至于小屏溢出部分則可以左右切換磕昼。
用戶往往更青睞于滑動(dòng)、滾動(dòng)的操作节猿，而討厭反復(fù)點(diǎn)擊票从。幸運(yùn)的是，Angular Material 就是這么做的！當(dāng)標(biāo)簽位置超出窗口尺寸纫骑，便可以橫向滑動(dòng)進(jìn)行切換蝎亚。
順著這個(gè)思路，我做了個(gè)對(duì)應(yīng)的二級(jí)Tab 導(dǎo)航demo：
為了節(jié)省屏幕空間先馆，也可以省略兩端的方向圖標(biāo)发框。codepen 鏈接戳這里.
