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

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

以下，我列出了 7 種常見(jiàn)的響應(yīng)式導(dǎo)航的設(shè)計(jì)模式，它們分別是：

置頂（或“放任自流”）頁(yè)腳錨點(diǎn)菜單選擇開(kāi)關(guān)側(cè)滑置底徹底隱藏

上述每種設(shè)計(jì)模式都各有利弊，大家在選擇導(dǎo)航設(shè)計(jì)方案時(shí)，需要根據(jù)項(xiàng)目的實(shí)際情況作出判斷。

置頂（或“放任自流”）

將導(dǎo)航置頂或讓導(dǎo)航隨布局任意流動(dòng)（放任自流）是一種最簡(jiǎn)單的導(dǎo)航實(shí)現(xiàn)方式。正是由于這種易于實(shí)現(xiàn)的方式，它也成為了當(dāng)下許多響應(yīng)式網(wǎng)頁(yè)的“標(biāo)配”。

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

易于實(shí)現(xiàn)：在大屏幕和小屏幕上的實(shí)現(xiàn)方式一致不依賴 JavaScript：這樣就最大程度上保證了兼容性無(wú)需打破原有 CSS 樣式無(wú)需打亂內(nèi)容本來(lái)的順序：這種方式保證了它是完完全全的流體布局，無(wú)需一丁點(diǎn)的人為干預(yù)

缺點(diǎn)

占用空間：高度問(wèn)題在移動(dòng)端是核心問(wèn)題。Luke 在自己的書(shū)中表達(dá)的“內(nèi)容優(yōu)先，導(dǎo)航其次”是典型的移動(dòng)端網(wǎng)頁(yè)體驗(yàn)。我們都期望用戶能夠以最快的速度獲取內(nèi)容，這久意味著我們需要移除導(dǎo)航以確保用戶關(guān)注的焦點(diǎn)始終保持在核心信息上。而當(dāng)導(dǎo)航高度過(guò)大，導(dǎo)致屏幕內(nèi)的核心信息無(wú)法展示的時(shí)候，就會(huì)引起用戶的疑惑。如下圖，當(dāng)我們打開(kāi)一個(gè)頁(yè)面時(shí)，整個(gè)屏幕都被導(dǎo)航占據(jù)，用戶無(wú)法獲取有效信息。 ![置頂導(dǎo)航在小屏幕上自動(dòng)折行顯示][2]擴(kuò)展性差：當(dāng)你的導(dǎo)航剛好在一行內(nèi)展示時(shí)，若要再添加章節(jié)的時(shí)候會(huì)出現(xiàn)什么情況呢？如果客戶突然要求再增加一個(gè)名為“產(chǎn)品和服務(wù)”的導(dǎo)航類目呢？或者將導(dǎo)航標(biāo)題翻譯成其他語(yǔ)言后導(dǎo)致字符長(zhǎng)度的變化呢？這些情況都會(huì)破壞原有的設(shè)計(jì)方案。粗手指：導(dǎo)航全擠在一起，粗手指心急如焚，怎么點(diǎn)也點(diǎn)不到自己想要訪問(wèn)的導(dǎo)航鏈，這樣就增加了誤操作的幾率（不適合小屏幕上通過(guò)手指進(jìn)行點(diǎn)擊操作）跨設(shè)備的問(wèn)題：不同設(shè)備渲染的方式各異，在 iPhone 上很棒的頁(yè)面或許在其它平臺(tái)上表現(xiàn)得很糟糕。 ![不同設(shè)備上渲染的差異][3]

頁(yè)腳錨點(diǎn)

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

優(yōu)點(diǎn)： 容易實(shí)現(xiàn)：頁(yè)眉錨點(diǎn)，導(dǎo)航置底，沒(méi)有比這更簡(jiǎn)單的了！ – 不依賴 JavaScript：這意味著更少的測(cè)試和更好的瀏覽器支持 CSS 改動(dòng)�。河捎诓捎昧私^對(duì)或固定位置，將底部導(dǎo)航移到大屏幕的頂部簡(jiǎn)直太容易了

缺點(diǎn)： 用戶迷惑：快速跳轉(zhuǎn)至頁(yè)腳這一動(dòng)作容易讓用戶迷惑 缺乏優(yōu)雅：這樣說(shuō)很奇怪（譯者也有同感），但我（作者）認(rèn)為類似開(kāi)關(guān)的交互方式更性感一些。這種采用錨點(diǎn)跳轉(zhuǎn)的方式雖然實(shí)用，但不優(yōu)雅，相比那些經(jīng)過(guò)精心設(shè)計(jì)的移動(dòng)端應(yīng)用的交互方式而言太過(guò)粗糙。

菜單選擇

將導(dǎo)航收納在一個(gè)選擇菜單的控件當(dāng)中是一個(gè)不錯(cuò)的方式。它避免了導(dǎo)航置頂所占用的屏幕空間。

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

騰出了足夠的空間：一個(gè)選擇菜單無(wú)論是在橫向或縱向上都特別省空間 符合用戶習(xí)慣：相比置底的方式，用戶更習(xí)慣導(dǎo)航被放置在頁(yè)面頭部 容易辨認(rèn)：下拉菜單的控件樣式十分顯眼，及其容易發(fā)現(xiàn) 支持本地化的交互方式：由于采用標(biāo)準(zhǔn)控件，使得操作十分本地化，這種本地化是指對(duì)設(shè)備自身屬性的支持，比如，在觸摸設(shè)備上能夠通過(guò)點(diǎn)擊操作，而在軌跡球上支持滾動(dòng)操作；