設(shè)計(jì)知識(shí)！響應(yīng)式導(dǎo)航有哪幾類設(shè)計(jì)方式？(2)

缺點(diǎn)：

樣式不統(tǒng)一：不同瀏覽器會(huì)呈現(xiàn)不同樣式的下拉菜單 可能會(huì)讓用戶困惑：大部分用戶只在填寫表單時(shí)才會(huì)看見(jiàn)下拉菜單，而將下拉菜單用作導(dǎo)航，擔(dān)心用戶一下子無(wú)法理解 下拉菜單內(nèi)容的處理方式比較奇怪：因?yàn)樵谙吕藛沃�，子�?xiàng)目會(huì)自動(dòng)縮進(jìn)，這樣雖然可用，但從視覺(jué)上看十分混亂； 可能會(huì)依賴瀏覽器調(diào)用 JavaScript

開(kāi)關(guān)

開(kāi)關(guān)的實(shí)現(xiàn)方式類似頁(yè)腳錨點(diǎn)，但不是點(diǎn)擊跳轉(zhuǎn)至頁(yè)腳，而是點(diǎn)擊后將菜單區(qū)域滑動(dòng)展開(kāi)。同樣也是比較容易實(shí)現(xiàn)的設(shè)計(jì)模式。

優(yōu)點(diǎn)：

易于理解：相較于頁(yè)腳錨點(diǎn)突然間的跳轉(zhuǎn)，開(kāi)關(guān)這種是位置不變的交互方式更容易讓用戶接受 交互更優(yōu)雅（相比跳轉(zhuǎn)而言） 拓展性強(qiáng)：你唯一要做的就是在PC端隱藏開(kāi)關(guān)，在適當(dāng)?shù)臄帱c(diǎn)處顯示它，這一切的一切都能通過(guò) CSS 來(lái)實(shí)現(xiàn)。

缺點(diǎn)：

動(dòng)畫可能不夠平滑：Android 對(duì)于動(dòng)畫的支持一直不好，因此，可能得到你想要的效果 非常依賴 JavaScript：正因?yàn)榇蜷_(kāi)開(kāi)關(guān)的動(dòng)畫需要 JavaScript 來(lái)實(shí)現(xiàn)，所以它的兼容性不太好（作者的黑莓設(shè)備就不支持）；

側(cè)滑導(dǎo)航

側(cè)滑是在 Facebook 的大力推廣下流行起來(lái)的。之所以叫抽屜源于它的交互動(dòng)效，當(dāng)點(diǎn)擊菜單按鈕后，導(dǎo)航模塊會(huì)像抽屜一樣從頁(yè)面邊緣滑動(dòng)出現(xiàn)。

優(yōu)點(diǎn)：

空間充裕：因?yàn)閺倪吘壔�，這些內(nèi)容被理解為在底層或屏幕外的無(wú)限區(qū)域內(nèi) 好看：簡(jiǎn)潔就是美，而且動(dòng)畫效果驚艷。

缺點(diǎn)：

小眾：與其他簡(jiǎn)單的設(shè)計(jì)模式比起來(lái)，從側(cè)面滑動(dòng)展開(kāi)導(dǎo)航欄的效果需要若干復(fù)雜的動(dòng)畫來(lái)實(shí)現(xiàn)，這樣就將一些低端設(shè)備擋在門口。因此，如果你的項(xiàng)目是面向大眾而設(shè)計(jì)的，需要謹(jǐn)慎。 適配性不好： 這種模式僅適合移動(dòng)設(shè)備，在大屏幕上的表現(xiàn)并不好（也沒(méi)有必要）。 可能存在迷惑：當(dāng)我（作者）第一次看到 Facebook 采用這種設(shè)計(jì)時(shí)，我還以為頁(yè)面出錯(cuò)了呢！在屏幕右側(cè)露出一些信息對(duì)于我本人而言還是很奇怪的（純屬作者個(gè)人看法）

只在頁(yè)腳放置導(dǎo)航