常見的七種響應(yīng)式導(dǎo)航設(shè)計(jì)模式的優(yōu)點(diǎn)和缺點(diǎn)

時(shí)間：2022-05-29 10:51:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 10:51:01 來源：網(wǎng)絡(luò)營銷

在大屏幕上，導(dǎo)航置頂或?qū)Ш骄幼笫莾煞N典型的設(shè)計(jì)模式，然而，這兩種模式在小屏幕上卻遭遇挑戰(zhàn)，在響應(yīng)式網(wǎng)頁設(shè)計(jì)日漸流行的今天，我們更有必要重新審視針對小屏幕環(huán)境下的導(dǎo)航設(shè)計(jì)模式，這些通過移動(dòng)設(shè)備訪問的頁面導(dǎo)航，必須既方便用戶快速訪問，又不能過于突出。

對此，我特意整理了以下七種常見的響應(yīng)式導(dǎo)航的設(shè)計(jì)模式，今天，就借助億企邦的平臺跟大家分享一下，這七種設(shè)計(jì)模式都各有利弊，大家在選擇導(dǎo)航設(shè)計(jì)方案時(shí)，需要根據(jù)項(xiàng)目的實(shí)際情況作出判斷。

一、置頂(或“放任自流”)

將導(dǎo)航置頂或讓導(dǎo)航隨布局任意流動(dòng)(放任自流)是一種最簡單的導(dǎo)航實(shí)現(xiàn)方式，正是由于這種易于實(shí)現(xiàn)的方式，它也成為了當(dāng)下許多響應(yīng)式網(wǎng)頁的“標(biāo)配”（具體可查看億企邦《什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)》的相關(guān)介紹）。

1、置頂?shù)膬?yōu)點(diǎn)

易于實(shí)現(xiàn)：在大屏幕和小屏幕上的實(shí)現(xiàn)方式一致。

不依賴JavaScript：這樣就最大程度上保證了兼容性，無需打破原有CSS樣式。

無需打亂內(nèi)容本來的順序：這種方式保證了它是完完全全的流體布局，無需一丁點(diǎn)的人為干預(yù)。

2、置頂?shù)娜秉c(diǎn)

占用空間：高度問題在移動(dòng)端是核心問題，“內(nèi)容優(yōu)先，導(dǎo)航其次”是典型的移動(dòng)端網(wǎng)頁體驗(yàn)，我們都期望用戶能夠以最快的速度獲取內(nèi)容，這久意味著我們需要移除導(dǎo)航以確保用戶關(guān)注的焦點(diǎn)始終保持在核心信息上，而當(dāng)導(dǎo)航高度過大，導(dǎo)致屏幕內(nèi)的核心信息無法展示的時(shí)候，就會(huì)引起用戶的疑惑，當(dāng)我們打開一個(gè)頁面時(shí)，整個(gè)屏幕都被導(dǎo)航占據(jù)，用戶無法獲取有效信息。

擴(kuò)展性差：當(dāng)你的導(dǎo)航剛好在一行內(nèi)展示時(shí)，若要再添加章節(jié)的時(shí)候會(huì)出現(xiàn)什么情況呢？如果客戶突然要求再增加一個(gè)名為“產(chǎn)品和服務(wù)”的導(dǎo)航類目呢？或者將導(dǎo)航標(biāo)題翻譯成其他語言后導(dǎo)致字符長度的變化呢？這些情況都會(huì)破壞原有的設(shè)計(jì)方案。

粗手指：導(dǎo)航全擠在一起，粗手指心急如焚，怎么點(diǎn)也點(diǎn)不到自己想要訪問的導(dǎo)航鏈，這樣就增加了誤操作的幾率(不適合小屏幕上通過手指進(jìn)行點(diǎn)擊操作，這點(diǎn)我曾在億企邦《如何通過修改CSS樣式來增強(qiáng)平板電腦的用戶體驗(yàn)》的一文中跟大家詳細(xì)的介紹過的)。

跨設(shè)備的問題：不同設(shè)備渲染的方式各異，在iPhone上很棒的頁面或許在其它平臺上表現(xiàn)得很糟糕。

二、菜單選擇

目前來說，億企邦覺得將導(dǎo)航收納在一個(gè)選擇菜單的控件當(dāng)中是一個(gè)不錯(cuò)的方式，因?yàn)樗苊饬藢?dǎo)航置頂所占用的屏幕空間。

1、菜單選擇的優(yōu)點(diǎn)

騰出了足夠的空間：一個(gè)選擇菜單無論是在橫向或縱向上都特別省空間符合用戶習(xí)慣。

相比置底的方式，億企邦覺得用戶更習(xí)慣導(dǎo)航被放置在頁面頭部容易辨認(rèn)。

下拉菜單的控件樣式十分顯眼，及其容易發(fā)現(xiàn)支持本地化的交互方式。

由于采用標(biāo)準(zhǔn)控件，使得操作十分本地化，這種本地化是指對設(shè)備自身屬性的支持，比如，在觸摸設(shè)備上能夠通過點(diǎn)擊操作，而在軌跡球上支持滾動(dòng)操作。

2、菜單選擇的缺點(diǎn)

樣式不統(tǒng)一，不同瀏覽器會(huì)呈現(xiàn)不同樣式的下拉菜單可能會(huì)讓用戶困惑。

大部分用戶只在填寫表單時(shí)才會(huì)看見下拉菜單，而將下拉菜單用作導(dǎo)航，擔(dān)心用戶一下子無法理解下拉菜單內(nèi)容的處理方式比較奇怪。

因?yàn)樵谙吕藛沃?，子?xiàng)目會(huì)自動(dòng)縮進(jìn)，這樣雖然可用，但從視覺上看十分混亂，可能會(huì)依賴瀏覽器調(diào)用JavaScript文件。

三、開關(guān)

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

1、開關(guān)的優(yōu)點(diǎn)

易于理解：相較于頁腳錨點(diǎn)突然間的跳轉(zhuǎn)，開關(guān)這種是位置不變的交互方式更容易讓用戶接受交互更優(yōu)雅(相比跳轉(zhuǎn)而言)。

拓展性強(qiáng)：你唯一要做的就是在PC端隱藏開關(guān)，在適當(dāng)?shù)臄帱c(diǎn)處顯示它，這一切的一切都能通過CSS來實(shí)現(xiàn)。

2、開關(guān)的缺點(diǎn)

動(dòng)畫可能不夠平滑：Android對于動(dòng)畫的支持一直不好，因此，可能得到你想要的效果非常依賴JavaScript效果，億企邦覺得這也正因?yàn)榇蜷_開關(guān)的動(dòng)畫需要JavaScript來實(shí)現(xiàn)，所以，它的兼容性不太好。

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

側(cè)滑是在Facebook的大力推廣下流行起來的，之所以叫抽屜源于它的交互動(dòng)效（具體可查看億企邦《移動(dòng)APP導(dǎo)航設(shè)計(jì)的10種模式》的相關(guān)介紹），當(dāng)點(diǎn)擊菜單按鈕后，導(dǎo)航模塊會(huì)像抽屜一樣從頁面邊緣滑動(dòng)出現(xiàn)。

1、側(cè)滑導(dǎo)航的優(yōu)點(diǎn)

空間充裕，因?yàn)閺倪吘壔?，這些內(nèi)容被理解為在底層或屏幕外的無限區(qū)域內(nèi)。

好看：簡潔就是美，而且動(dòng)畫效果驚艷。

2、側(cè)滑導(dǎo)航的缺點(diǎn)

小眾：與其他簡單的設(shè)計(jì)模式比起來，從側(cè)面滑動(dòng)展開導(dǎo)航欄的效果需要若干復(fù)雜的動(dòng)畫來實(shí)現(xiàn)，這樣就將一些低端設(shè)備擋在門口。因此，如果你的項(xiàng)目是面向大眾而設(shè)計(jì)的，需要謹(jǐn)慎。

適配性不好：這種模式僅適合移動(dòng)設(shè)備，在大屏幕上的表現(xiàn)并不好(也沒有必要)。

五、頁腳錨點(diǎn)

在頁面頭部只保留一個(gè)去底部的錨點(diǎn)，將導(dǎo)航放在頁腳是一種討巧的做法，它節(jié)省了頭部寶貴的空間，同時(shí)又滿足了訪問導(dǎo)航的需求。

1、頁腳錨點(diǎn)的優(yōu)點(diǎn)

容易實(shí)現(xiàn)：頁眉錨點(diǎn)，導(dǎo)航置底，沒有比這更簡單的了。

不依賴JavaScript：這意味著更少的測試和更好的瀏覽器支持CSS改動(dòng)小，由于采用了絕對或固定位置，將底部導(dǎo)航移到大屏幕的頂部簡直太容易了。

2、頁腳錨點(diǎn)的缺點(diǎn)

用戶迷惑：快速跳轉(zhuǎn)至頁腳這一動(dòng)作容易讓用戶迷惑。

缺乏優(yōu)雅：雖然這樣說很奇怪，但億企邦認(rèn)為類似開關(guān)的交互方式更性感一些。

這種采用錨點(diǎn)跳轉(zhuǎn)的方式雖然實(shí)用，但不優(yōu)雅，相比那些經(jīng)過精心設(shè)計(jì)的移動(dòng)端應(yīng)用的交互方式而言太過粗糙。

六、頁腳放置導(dǎo)航

只在頁腳放置導(dǎo)航和頁腳錨點(diǎn)類似，只是它不在頁眉放置錨點(diǎn)，這種模式的理念是內(nèi)容優(yōu)先、導(dǎo)航其次，這種方式需要用戶將頁面滑動(dòng)至底部才能看見導(dǎo)航。

1、頁腳導(dǎo)航的優(yōu)點(diǎn)

容易實(shí)現(xiàn)，兼容性(無需JavaScript)CSS改動(dòng)小，由于采用了絕對或固定位置，將底部導(dǎo)航移到大屏幕的頂部簡直太容易了。

2、頁腳導(dǎo)航的缺點(diǎn)

難以發(fā)現(xiàn)：無論在大屏或小屏上都很難發(fā)現(xiàn)頁腳會(huì)有導(dǎo)航。

難以使用：移動(dòng)端用戶需要不斷滾動(dòng)頁面至底部，才能使用頁腳導(dǎo)航，十分不便。

七、徹底隱藏

將導(dǎo)航隱藏，得到最大化的空間，這種設(shè)計(jì)模式遵循了該法則，不要懲罰那些通過移動(dòng)端訪問你網(wǎng)站的用戶。

移動(dòng)端用戶到底想得到或不想要哪些信息仍舊是個(gè)謎，移動(dòng)端用戶會(huì)做任何桌面端用戶都會(huì)做的事情，因此，僅針對移動(dòng)端用戶提供某些核心功能是很有必要的。

1、徹底隱藏的優(yōu)點(diǎn)

完美的利用有限的屏幕空間。

對于移動(dòng)端設(shè)備有很大優(yōu)勢，只用向下滑動(dòng)就能查看更多。

2、徹底隱藏的缺點(diǎn)

去掉了針對移動(dòng)端用戶的核心功能或內(nèi)容將鏈接或內(nèi)容隱藏的做法并不好，響應(yīng)式的鼓吹者認(rèn)為這種做法會(huì)導(dǎo)致移動(dòng)端頁面與桌面端形成內(nèi)容上的差異，以及體驗(yàn)上的災(zāi)難。

增加頁面額外的開銷使用命令display: none僅能在頁面上隱藏該元素，頁面的代碼、圖片或別的文件依舊在后臺下載，這最終導(dǎo)致了頁面訪問緩慢。

難以維護(hù)：兩個(gè)完全分離的導(dǎo)航體系將成為后期維護(hù)時(shí)的負(fù)擔(dān)。

可能存在迷惑：移動(dòng)端用戶向下滑動(dòng)頁面來刷新列表時(shí)，并不會(huì)意識到當(dāng)我第一次看到Facebook采用這種設(shè)計(jì)時(shí)，我還以為頁面出錯(cuò)了呢，在屏幕右側(cè)露出一些信息對于我本人而言還是很奇怪的。

億企邦點(diǎn)評：

移動(dòng)導(dǎo)航就像你真正的朋友一樣，彼此需要，但又給彼此空間，而那些假裝跟你很要好的朋友總是在你需要的時(shí)候消失(當(dāng)你需要導(dǎo)航的時(shí)候找不到)或者占據(jù)你的個(gè)人空間而讓你抓狂，因此，針對響應(yīng)式導(dǎo)航進(jìn)行設(shè)計(jì)，需要在訪問的便攜性和空間上做一個(gè)平衡。