響應式導航的設計模式

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

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

1. 置頂（或“放任自流”）
2. 頁腳錨點
3. 菜單選擇
4. 開關
5. 側(cè)滑
6. 置底
7. 徹底隱藏

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

置頂（或“放任自流”）

![置頂（或“放任自流”）的案例][3]

將導航置頂或讓導航隨布局任意流動（放任自流）是一種最簡單的導航實現(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]

案例

* [Yiibu][4]

* [Trent Walton][5]

* [Tim Kadlec][6]

* [Ethan Marcotte][7]

* Brad Frost Web

相關資料

Height Matters by @andmag Don’t Let Your Menu Take Over by @StuRobson

頁腳錨點

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

優(yōu)點： 容易實現(xiàn)：頁眉錨點，導航置底，沒有比這更簡單的了！ – 不依賴

JavaScript：這意味著更少的測試和更好的瀏覽器支持 CSS

改動小：由于采用了絕對或固定位置，將底部導航移到大屏幕的頂部簡直太容易了

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

案例

Grey Goose Contents Magazine Bagcheck (I know it’s not responsive, but it’s where the technique was popularized)

相關資料

A Simple, Responsive, Mobile First Navigation Mobile First Book

菜單選擇

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

優(yōu)點 騰出了足夠的空間：一個選擇菜單無論是在橫向或縱向上都特別省空間

符合用戶習慣：相比置底的方式，用戶更習慣導航被放置在頁面頭部

容易辨認：下拉菜單的控件樣式十分顯眼，及其容易發(fā)現(xiàn) 支持本地化的交互方式：由于采用標準控件，使得操作十分本地化，這種本地化是指對設備自身屬性的支持，比如，在觸摸設備上能夠通過點擊操作，而在軌跡球上支持滾動操作；

缺點 樣式不統(tǒng)一：不同瀏覽器會呈現(xiàn)不同樣式的下拉菜單 可能會讓用戶困惑：大部分用戶只在填寫表單時才會看見下拉菜單，而將下拉菜單用作導航，擔心用戶一下子無法理解 下拉菜單內(nèi)容的處理方式比較奇怪：因為在下拉菜單中，子項目會自動縮進，這樣雖然可用，但從視覺上看十分混亂； 可能會依賴瀏覽器調(diào)用 JavaScript

案例： TinyNav by @viljamis Convert a Menu to a Dropdown for Small Screens Progressive and Responsive Navigation Responsive Menu

相關資料： Viljami Salminen Retreats 4 Geeks Five Simple Steps Performance Marketing Awards

開關

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

優(yōu)點

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

缺點 動畫可能不夠平滑：Android 對于動畫的支持一直不好，因此，可能得到你想要的效果 非常依賴 JavaScript：正因為打開開關的動畫需要 JavaScript

來實現(xiàn)，所以它的兼容性不太好（作者的黑莓設備就不支持）；

案例 Starbucks Mobile Web Best Practices Twitter Bootstrap

相關資源 FlexNav A Responsive Design Approach for Navigation, Part 1 by@filamentgroup

側(cè)滑導航

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

優(yōu)點 空間充裕：因為從邊緣滑出，這些內(nèi)容被理解為在底層或屏幕外的無限區(qū)域內(nèi) 好看：簡潔就是美，而且動畫效果驚艷

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

案例 Barack Obama

相關資料 A Plea for Progressive Enhancement

只在頁腳放置導航

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

優(yōu)點： 容易實現(xiàn) 兼容性（無需 JavaScript） CSS 改動小：由于采用了絕對或固定位置，將底部導航移到大屏幕的頂部簡直太容易了

缺點： 難以發(fā)現(xiàn)：無論在大屏或小屏上都很難發(fā)現(xiàn)頁腳會有導航； 難以使用：移動端用戶需要不斷滾動頁面至底部，才能使用頁腳導航，十分不便

相關案例： Pears Fray

徹底隱藏

將導航隱藏，得到大化的空間

這種設計模式遵循了該法則：不要懲罰那些通過移動端訪問你網(wǎng)站的用戶。 移動端用戶到底想得到或不想要哪些信息仍舊是個謎。移動端用戶會做任何桌面端用戶都會做的事情，因此，僅針對移動端用戶提供某些核心功能是很有必要的。

優(yōu)點： 屌爆了（原文 Sexy as hell 求大神信達雅的翻譯）

好的利用有限的屏幕空間

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

缺點： 去掉了針對移動端用戶的核心功能或內(nèi)容 將鏈接或內(nèi)容隱藏的做法并不好。響應式的鼓吹者認為這種做法會導致移動端頁面與桌面端形成內(nèi)容上的差異，以及體驗上的災難。

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

難以維護 兩個完全分離的導航體系將成為后期維護時的負擔

可能存在迷惑 移動端用戶向下滑動頁面來刷新列表時，并不會意識到 當我（作者）第一次看到 Facebook 采用這種設計時，我還以為頁面出錯了呢！在屏幕右側(cè)露出一些信息對于我本人而言還是很奇怪的（純屬作者個人看法）

相關案例： Authentic Jobs rourkery.com A previous version of the Obama responsive sit 相關資源： Media Query and Asset Tests

結(jié)語

移動導航就像你真正的朋友一樣：彼此需要，但又給彼此空間；而那些假裝跟你很要好的朋友總是在你需要的時候消失（當你需要導航的時候找不到）或者占據(jù)你的個人空間而讓你抓狂（比如：擦，從我床上滾下去）；因此，針對響應式導航進行設計，需要在訪問的便攜性和空間上做一個平衡。

當前文章：響應式導航的設計模式
文章出自：http://www.bm7419.com/news42/161642.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、做網(wǎng)站、外貿(mào)網(wǎng)站建設、域名注冊、App開發(fā)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)