設計知識！響應式導航有哪幾類設計方式？

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

以下，我列出了 7 種常見的響應式導航的設計模式，它們分別是：

置頂（或“放任自流”）頁腳錨點菜單選擇開關側(cè)滑置底徹底隱藏

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

置頂（或“放任自流”）

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

優(yōu)點

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

缺點

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

頁腳錨點

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

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

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

菜單選擇

將導航收納在一個選擇菜單的控件當中是一個不錯的方式。它避免了導航置頂所占用的屏幕空間。

優(yōu)點：

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