最近在思考有關(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 鏈接戳這里.