大屏幕上有兩個(gè)典型的區(qū)域適合放置導(dǎo)航：頂部和左側(cè)，但在缺少屏幕空間的手機(jī)屏幕上卻是一個(gè)有趣的挑戰(zhàn)。隨著響應(yīng)式設(shè)計(jì)越來(lái)越流行，在小尺寸屏幕上處理導(dǎo)航的各種方法越來(lái)越值得我們關(guān)注。而手機(jī)網(wǎng)站導(dǎo)航必須在快速獲取一個(gè)網(wǎng)站的信息和不可見(jiàn)性之間取得平衡。

下面是一些處理響應(yīng)式導(dǎo)航比較流行的技巧，由于下述幾種導(dǎo)航方式還沒(méi)有約定俗成的叫法，所以大家可以結(jié)合案例網(wǎng)站來(lái)理解他的實(shí)際用法：

1. 頂部導(dǎo)航
2. 頁(yè)腳錨
3. 選擇菜單
4. 切換
5. 左側(cè)導(dǎo)航彈出
6. 只有頁(yè)腳
7. 隱藏導(dǎo)航

當(dāng)然每一種方法都有優(yōu)點(diǎn)和缺點(diǎn)，在為你的項(xiàng)目選擇適合的方法時(shí)需要注意。

1.頂部導(dǎo)航或者說(shuō)“什么也不做”的方法

導(dǎo)航最容易實(shí)施的解決方案之一是保持它在頂部。由于這種方法容易實(shí)現(xiàn)，所以你可以在許多（甚至大部分）響應(yīng)式網(wǎng)站中找到它。

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

• 容易實(shí)現(xiàn)——你幾乎可以保持你大屏幕網(wǎng)站的原樣。
• 無(wú)需依賴(lài)Javascript——確保大的兼容性。
• 無(wú)需辛苦的重寫(xiě)CSS樣式。
• 沒(méi)有絆倒你的代碼順序——無(wú)需赴湯蹈火的把導(dǎo)航列表在代碼里來(lái)回轉(zhuǎn)移。他按原始順序排列。

【缺點(diǎn)】

• 高度問(wèn)題——移動(dòng)端的高度問(wèn)題。正如《盧克的書(shū)》所說(shuō)，內(nèi)容第一，導(dǎo)航第二是選的移動(dòng)網(wǎng)頁(yè)體驗(yàn)。你想要使用戶(hù)盡可能快地獲得重要的內(nèi)容。這意味著要讓導(dǎo)航移出用戶(hù)的視線(xiàn)，使他們能夠?qū)Ｗ⒂陧?yè)面上的核心信息。當(dāng)所有的核心內(nèi)容被切斷，它會(huì)被混淆：

注釋?zhuān)涸摼W(wǎng)站首屏由LOGO和導(dǎo)航構(gòu)成，點(diǎn)擊導(dǎo)航頁(yè)面切換，而導(dǎo)航一直保持在頂部，頁(yè)面之間的跳轉(zhuǎn)看起來(lái)并不差異，也沒(méi)有快速地揭開(kāi)核心內(nèi)容。

•  不易擴(kuò)充——當(dāng)你想要添加一個(gè)新的部分到你的網(wǎng)站，會(huì)發(fā)生什么？此刻導(dǎo)航整齊的排列在一行，當(dāng)你的客戶(hù)說(shuō)你需要把“產(chǎn)品和服務(wù)”添加到導(dǎo)航，會(huì)發(fā)生什么？或者當(dāng)你需要把菜單翻譯成德文時(shí)呢？
• 不易點(diǎn)擊——填鴨式的鏈接太緊密地結(jié)合在一起，很容易導(dǎo)致不必要的的間接點(diǎn)擊。
• 跨設(shè)備的問(wèn)題——在iPhone上文字可能看起來(lái)很棒，由于不同的設(shè)備呈現(xiàn)文字的方式不同，在其他平臺(tái)上看起來(lái)可能是分散的：

注釋?zhuān)涸谛∑聊簧享憫?yīng)導(dǎo)航被截?cái)喑啥嘈?/p>

【外部參考案例】

• Trent Walton個(gè)人站

http://trentwalton.com/

• Ethan Marcotte個(gè)人站

http://ethanmarcotte.com/

【資源】

• http://andmag.se/2012/01/height-matters/  高度問(wèn)題@andmag
• http://alwaystwisted.com/post.php?s=2011-02-20-dont-let-your-menu-take-over  不要讓你的菜單取代@StuRobson

2.頁(yè)腳錨

這種聰明的解決方案，保持網(wǎng)站的導(dǎo)航列表在底部，而頭部包含一個(gè)簡(jiǎn)單的錨鏈接指向頁(yè)腳導(dǎo)航。這種方法為其核心內(nèi)容清除出了很多的空間，同時(shí)仍然能夠快速獲取導(dǎo)航。

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

• 易于實(shí)現(xiàn)——簡(jiǎn)單的頂部錨點(diǎn)。導(dǎo)航列表在底部。這是相當(dāng)容易實(shí)現(xiàn)的。
• 無(wú)需依賴(lài)Javascript——這意味著更少的測(cè)試和更好的支持。
• 按比例放大需要很少的CSS工作——由于有絕對(duì)或固定定位，對(duì)于移動(dòng)頁(yè)腳導(dǎo)航到頂部變成小菜一碟。
• 單獨(dú)按鈕在頭部—— 一個(gè)簡(jiǎn)單的菜單圖標(biāo)或鏈接只占用很小的頭部空間，這樣可以為核心內(nèi)容釋放大量的空間。

【缺點(diǎn)】

• 錨點(diǎn)跳轉(zhuǎn)讓人迷失方向——快速跳轉(zhuǎn)到該網(wǎng)站的頁(yè)腳可能有點(diǎn)讓人迷失方向。
• 不優(yōu)雅——這樣說(shuō)似乎很奇怪，但一個(gè)不和諧的跳轉(zhuǎn)，雖然非常實(shí)用，但不是優(yōu)雅的交互使用。

【外部參考案例】

• 內(nèi)容雜志 網(wǎng)站（點(diǎn)擊頂部右側(cè)菜單錨點(diǎn)，頁(yè)面跳轉(zhuǎn)到底部導(dǎo)航）

http://contentsmagazine.com/

【資源】

• http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/ 一個(gè)簡(jiǎn)單的、響應(yīng)式、移動(dòng)選導(dǎo)航
• http://www.abookapart.com/products/mobile-first  《移動(dòng)第一書(shū)》

 3.選擇菜單

對(duì)于小屏幕來(lái)說(shuō)，馴服脫韁野馬的導(dǎo)航的一種方法是將一個(gè)鏈接列表，轉(zhuǎn)化為一個(gè)選擇菜單。這就避免了頂部導(dǎo)航方法提出的問(wèn)題，并且這是一個(gè)節(jié)省地方的聰明方式。

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

• 釋放了大量的空間—— 一個(gè)選擇菜單絕對(duì)比水平或垂直列表，占用少得多的空間。
• 保持在頭部交互——而不是頁(yè)腳導(dǎo)航。選擇菜單保持了頭部導(dǎo)航功能，這符合用戶(hù)的預(yù)覽習(xí)慣。
• 容易辨認(rèn)——選擇菜單貼有明確的標(biāo)簽，顯示“導(dǎo)航”或“菜單”，這非常容易辨認(rèn)。
• 使用本地控件——每個(gè)移動(dòng)瀏覽器將會(huì)用各自的方式處理選擇菜單。觸摸設(shè)備將會(huì)提升導(dǎo)航列表的觸摸友好度。

【缺點(diǎn)】

• 難以控制設(shè)計(jì)風(fēng)格——選擇菜單是設(shè)計(jì)風(fēng)格的眼中釘。每個(gè)瀏覽器處理他們都有各自的方式，通常都是笨拙的方法。它使得網(wǎng)站跨瀏覽器風(fēng)格看起來(lái)只有一半是一致的。因此，選擇菜單處境尷尬，并且確實(shí)玷污了一個(gè)原本看著不錯(cuò)的設(shè)計(jì)。
• 可能令人混淆——用戶(hù)習(xí)慣于選擇菜單在下拉表單中，但我不知道他們是否會(huì)脫離上下文去理解一個(gè)表單元素。這只是一種直覺(jué)，所以這將是有趣的試驗(yàn)。
• 處理子導(dǎo)航項(xiàng)——通過(guò)選擇菜單來(lái)處理嵌套列表可能看起來(lái)很怪異。子類(lèi)別通常用破折號(hào)縮進(jìn)處理，雖然這可能會(huì)讓人容易理解，但是卻也容易混淆，甚至有點(diǎn)難看。
• 依賴(lài)Javascript——對(duì)Javascript有依賴(lài)性。

【外部參考案例】

• Viljami Salminen 網(wǎng)站

http://viljamis.com/

【資源】

• http://tinynav.viljamis.com/  微導(dǎo)航 @viljamis
• http://css-tricks.com/convert-menu-to-dropdown/  為小屏幕把菜單轉(zhuǎn)換為下拉菜單
• http://coding.smashingmagazine.com/2012/02/13/progressive-and-responsive-navigation/  進(jìn)步和響應(yīng)式導(dǎo)航
• https://github.com/mattkersley/Responsive-Menu  響應(yīng)式導(dǎo)航

4.切換

切換類(lèi)似于頁(yè)腳錨方法，但是沒(méi)有跳轉(zhuǎn)到頁(yè)面底部的錨，而是設(shè)定一個(gè)菜單圖標(biāo)在頭部的右側(cè)，點(diǎn)擊滑動(dòng)打開(kāi)或收縮菜單。這是一個(gè)好看的方法，也比較容易實(shí)現(xiàn)。

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

• 固定位置——切換菜單的位置固定，不像頁(yè)腳錨突然跳轉(zhuǎn)，不會(huì)讓用戶(hù)失去方向感。
• 優(yōu)雅——這絕對(duì)是優(yōu)雅的方法之一。沒(méi)有尷尬的表格或頁(yè)面跳轉(zhuǎn)，只是一個(gè)平滑生動(dòng)的滑動(dòng)，或簡(jiǎn)單的顯示/隱藏。
• 易于擴(kuò)展——所以你需要做的是隱藏移動(dòng)觸發(fā)和顯示導(dǎo)航列表，當(dāng)達(dá)到適當(dāng)?shù)臄帱c(diǎn)，你就有了一個(gè)正常的大小的導(dǎo)航。這一切都可以通過(guò)CSS實(shí)現(xiàn)。

【缺點(diǎn)】

• 動(dòng)畫(huà)的表現(xiàn)——在移動(dòng)設(shè)備上無(wú)論是哪種類(lèi)型的動(dòng)畫(huà)，其結(jié)果都是多樣化的。Android對(duì)CSS動(dòng)畫(huà)的表現(xiàn)是出了名的差,所以事情可能不會(huì)那么順暢。
• 依賴(lài)Javascript——同樣這種方法有點(diǎn)依賴(lài)Javascript去觸發(fā)切換，但極小。我有一個(gè)黑莓的測(cè)試設(shè)備，不聽(tīng)任何話(huà)，但大多數(shù)瀏覽器，包括代理的瀏覽器，如Opera Mini和Dolphin Mini，能很好的處理它。

【外部參考案例】

• 星巴克網(wǎng)站

http://www.starbucks.com/

• 移動(dòng)網(wǎng)絡(luò)的實(shí)踐

http://mobilewebbestpractices.com/

【資源】

• http://jasonweaver.name/lab/flexiblenavigation/  FlexNav，一個(gè)jQuery插件用于響應(yīng)菜單
• http://filamentgroup.com/lab/responsive_design_approach_for_navigation/  用于導(dǎo)航的一種響應(yīng)的設(shè)計(jì)方案，第一部分@filamentgroup

5.左側(cè)導(dǎo)航彈出

Facebook為移動(dòng)端普及了左側(cè)導(dǎo)航，這個(gè)樣式相當(dāng)獨(dú)特。通過(guò)一個(gè)菜單圖標(biāo)來(lái)訪(fǎng)問(wèn)導(dǎo)航，導(dǎo)航從左側(cè)滑出，主體內(nèi)容移向右側(cè)。

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

• 釋放大量空間——當(dāng)你有大量的列表項(xiàng)時(shí)，其他導(dǎo)航技術(shù)展示效果都不會(huì)太好,而這種方法提供了大量的空間來(lái)展開(kāi)。我認(rèn)為這就是為什么Facebook采用這種方式。
• 美觀(guān)——這個(gè)菜單非常復(fù)雜和先進(jìn)，所以他肯定有一個(gè)令人叫絕的因素吧。
• 使用facebook帶來(lái)的慣性——Facebook 移動(dòng)端用戶(hù)已經(jīng)習(xí)慣使用這種模式，因?yàn)榫W(wǎng)頁(yè)和Facebook移動(dòng)應(yīng)用程序使用過(guò)這種導(dǎo)航。

【缺點(diǎn)】

• 高級(jí)——當(dāng)其它方法只需要修改簡(jiǎn)單的元素，而這個(gè)方法卻有很多需要移動(dòng)的部件。正如斯蒂芬妮·里格爾指出，奧巴馬的網(wǎng)站導(dǎo)航打破了一切， 除了最尖端的設(shè)備。如果你的項(xiàng)目是為一個(gè)更廣泛的受眾，而你選擇了這種方法，你要非常小心。
• 不能很好地?cái)U(kuò)展——這種方法對(duì)于移動(dòng)端是相當(dāng)獨(dú)特的，不一定能輕松地?cái)U(kuò)展到大屏幕上。您需要承擔(dān)維持小型和大屏幕兩個(gè)不同的導(dǎo)航的風(fēng)險(xiǎn)。
• 令人混淆——當(dāng)我第一次看到Facebook新的移動(dòng)端導(dǎo)航時(shí)，我竟然以為它是壞了的。在右側(cè)有一點(diǎn)內(nèi)容，這樣看上去似乎有點(diǎn)怪，但是這純屬個(gè)人喜好。

【外部參考案例】

• 維基百科

http://zh.wikipedia.org

【資源】

• http://stephanierieger.com/a-plea-for-progressive-enhancement/  一個(gè)逐步增強(qiáng)的請(qǐng)求

6. 只有頁(yè)腳

只有頁(yè)腳的導(dǎo)航類(lèi)似于頁(yè)腳錨的方法，只是沒(méi)有頭部的錨點(diǎn)。它遵循內(nèi)容第一，導(dǎo)航第二的原則，但是它要求移動(dòng)用戶(hù)一直滾到頁(yè)面底部，才能在站點(diǎn)中導(dǎo)航。

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

• 釋放頭部空間——它遵循內(nèi)容第一，導(dǎo)航第二的原則，但是...

【缺點(diǎn)】

• 難以發(fā)現(xiàn)——用戶(hù)（無(wú)論小屏幕還是大屏幕）可能很難發(fā)現(xiàn)底部有一個(gè)導(dǎo)航。
• 難以訪(fǎng)問(wèn)——移動(dòng)端用戶(hù)不得不滾動(dòng)完整個(gè)頁(yè)面直至底部（可能很長(zhǎng)）只是為了瀏覽網(wǎng)站。

【外部參考案例】

• 梨（一個(gè)開(kāi)源的Wordpress主題）

http://pea.rs/

7.隱藏導(dǎo)航

遵循這個(gè)規(guī)則：不要因?yàn)橛脩?hù)用

新聞標(biāo)題：幾種常見(jiàn)的響應(yīng)式導(dǎo)航設(shè)計(jì)模式優(yōu)劣分析
文章起源：http://www.js-pz168.com/news36/166086.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷(xiāo)推廣、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

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