《
網(wǎng)站分析：設(shè)計響應(yīng)式導(dǎo)航菜單的五大法則》文章地址：http://www.tfxk.com/zixun/041SAa2013.htm
我們暫且先放開宏觀上的響應(yīng)式Web設(shè)計，把目光集合在更具挑戰(zhàn)性的“響應(yīng)式導(dǎo)航菜單設(shè)計”上。桌面版提供了足夠的屏幕空間來顯示多層導(dǎo)航布局，然而，屏幕越小，清晰地顯示同一個內(nèi)容就越艱苦。這里提供了五大規(guī)律，讓你無論在大屏幕還是小屏幕上都能輕松高效地設(shè)計響應(yīng)式導(dǎo)航菜單。
把導(dǎo)航菜單放在網(wǎng)站底部，迫使你的訪客先閱讀完網(wǎng)站后再決定下一步的走向。
挑選一個設(shè)計，可以輕松地調(diào)整。
摘要：本文把眼光湊集在更具挑釁性的響應(yīng)式Web設(shè)計：響應(yīng)式導(dǎo)航菜單設(shè)計，這里提供了五大法令，讓你無論在大屏幕仍是小屏幕上都能輕松高效地設(shè)計響應(yīng)式導(dǎo)航菜單。
這里有一個事實，移動設(shè)備的屏幕空間顯明比桌面版的小良多,成都網(wǎng)站建設(shè)公司。設(shè)計師面臨的挑戰(zhàn)是不論屏幕尺寸來重新布局并且找出所有相關(guān)內(nèi)容。與此同時，設(shè)計應(yīng)該讓顧客在視覺上和感覺上保持一致，盡管是訪問統(tǒng)一個網(wǎng)站。，
三.下拉菜單
二.用發(fā)明力來處置有限的空間
一個機動的設(shè)計會讓你在不同的設(shè)備上仍堅持雷同的視覺&感到。
確保銜接是足夠大的，以保障不準確的手指大小。
一.依照優(yōu)先級顯示內(nèi)容
使用下拉菜單來組織復(fù)雜內(nèi)容是一個非常便利和風行的方式。通常，復(fù)雜的網(wǎng)站甚至?xí)褂枚鄼n次的下拉菜單。在較小的屏幕上，不僅如此，在依附觸摸反映的設(shè)備上，下拉菜單要慎用。這里不懸浮效果，屏幕資源可能非常有限。下面先容兩個網(wǎng)站，它們以一種非常適用的方式、成功地在移動網(wǎng)站上使用下拉菜單。
Starbucks網(wǎng)站也是一個勝利美麗的例子，如何在移動設(shè)備上高效使用下拉菜單。同樣，默認情況下菜單是暗藏在小圖標后邊的。這樣就不會影響其他內(nèi)容界面。一旦用戶需要使用導(dǎo)航來鏈接網(wǎng)站，他們只要微微點擊那個小圖標，菜單就會打開。要保證不同條目標連接區(qū)域是足夠大來保證手指觸摸面積。一旦某條被選中，菜單即會主動消逝。
The Sweet Hat Club網(wǎng)站會為移動設(shè)備優(yōu)化內(nèi)容并且重構(gòu)導(dǎo)航菜單，來取代程度顯示所有欄目(item)，移動版本的導(dǎo)航僅僅垂直顯示多少個高優(yōu)先級的欄目，盡管Twitter和Facebook連接被移掉，但Join連接卻被進級。它并不是一個一般的文本連接，而是一個引起人們留神的彩色按鈕。
使用視覺后果來讓用戶找到他們的拜訪方法。
在屏幕較小的移動設(shè)備上應(yīng)當優(yōu)先斟酌內(nèi)容并且去移掉那些小的欄目。
記住：懸浮殊效在移動設(shè)備上是不工作的。
2.在頂部顯示高優(yōu)先級內(nèi)容
有序地供給內(nèi)容，不要同時顯示全體。
如果內(nèi)容簡略明白，你可能不須要導(dǎo)航菜單。
Barack Obama網(wǎng)站把捐獻跟Obama選舉作為網(wǎng)站焦點。電腦版的主頁在頂部顯示了3條內(nèi)容，其中兩條是對于加入競選的消息。而在移動版本上，全部空間都被募捐按鈕所籠罩，其次才是人們所關(guān)注的其余內(nèi)容。關(guān)于Obama和其競選信息則被放置在頁面最下面。
Oliver Russell網(wǎng)站最棒的工作是網(wǎng)站在不同的屏幕辨別率下保持相同的視覺和感覺。無論是頭部還是導(dǎo)航菜單都可能輕松地重構(gòu)，并且無需擯棄任何有用的資源。僅僅把不同的內(nèi)容翻轉(zhuǎn)90度，容許把彩色背景擠壓的更加嚴密。
Boston Globe網(wǎng)站提供了大批的信息,成都最大的網(wǎng)絡(luò)公司。不僅第一個內(nèi)容層，甚至第二個內(nèi)容層也包括很多條目。他們的解決計劃是盡可能簡單地在移動設(shè)備上導(dǎo)航用戶，所以把導(dǎo)航拆分成兩個內(nèi)容層顯示。當用戶在第一層選中某個條目后，會進入相應(yīng)網(wǎng)站，然后在這個新網(wǎng)站上面會有新的下拉菜單內(nèi)容，這些內(nèi)容是對第二層的詳細分類。
興許，這是在屏幕小的設(shè)備上的最有效方式，根據(jù)用戶來突顯不同的內(nèi)容。在什么樣的情況下，用戶會使用移動設(shè)備來訪問網(wǎng)站?他們的訪問目的是什么?我們需要提供什么樣的內(nèi)容來滿意?下面我們例舉兩個例子， 根據(jù)內(nèi)容優(yōu)先級，在移動設(shè)備上簡化網(wǎng)站導(dǎo)航。
原文：
響應(yīng)式Web設(shè)計(Responsive Web design)的理念是，頁面的設(shè)計與開發(fā)應(yīng)該依據(jù)用戶行動以及設(shè)備環(huán)境(體系平臺、屏幕尺寸、屏幕定向等)進行相應(yīng)的響應(yīng)和調(diào)整。響應(yīng)式設(shè)計許可你在不同的平臺上，創(chuàng)立舉世無雙的用戶休會，與此同時，只有起碼的保護工作。
把最主要的內(nèi)容放置在頂部
1.領(lǐng)導(dǎo)訪客
1.只顯示高優(yōu)先級內(nèi)容
2.提供清晰和友愛的手指操作連接
2.實用于所有屏幕的一些設(shè)計
Microsoft的新網(wǎng)站就是一個典范的例子，如何在小的挪動裝備上部署龐雜的內(nèi)容。默認情形下，導(dǎo)航菜單基本就不顯示，只有當觸摸到右上角指定的小圖標時，第一個內(nèi)容層才會翻開。當觸摸到其中一個欄目時，第二個內(nèi)容層才會逐步開展，給用戶一個十分清楚明了的內(nèi)容導(dǎo)航。
已經(jīng)有不少文章波及響應(yīng)式設(shè)計，這些文章輔助咱們懂得和解剖響應(yīng)式網(wǎng)站設(shè)計的學(xué)習(xí)指南和教程，揭示媒體查問的作用，與此同時，還提供一些令人高興的響應(yīng)式設(shè)計聚集。
你也可以完整放棄導(dǎo)航菜單。當然，這僅僅是個抉擇，假如你的網(wǎng)站內(nèi)容不那么復(fù)雜并且訪客能夠輕松找到相干內(nèi)容。
Brickartist.com是一個非常有趣的例子，如何在移動設(shè)備上從新布局網(wǎng)站的導(dǎo)航菜單。在桌面版中，有一個異常清晰和凸起的導(dǎo)航菜單。然而,成都網(wǎng)站建設(shè)工作室，在小屏幕的移動設(shè)備上，導(dǎo)航菜單被移到網(wǎng)站的底部。這樣，訪客不得不先看頭部和旁邊內(nèi)容，而后再決議點擊哪個菜單。
2.視覺特效
五.廢棄導(dǎo)航菜單
四.給導(dǎo)航菜單換換地位
1.調(diào)劑設(shè)計來適應(yīng)可用空間
Mobile Web Best Practices的桌面版也顯示了一個無比清晰明了的導(dǎo)航菜單。每個分類除了有相應(yīng)的名稱外，還會配上特定的圖標。此外，在文本下面會有更清晰的分類圖標。在移動設(shè)備上，頂部的文字菜單會消散，用戶通過使用大的圖標來對網(wǎng)站進行導(dǎo)航。該網(wǎng)站使用了兩種不同作風的導(dǎo)航，只管如斯，分類清晰、風格與圖標相一致，給用戶帶來了必定的視覺效果。
另一種使讓你的導(dǎo)航菜單適應(yīng)小屏幕的方式是使用熟習(xí)的結(jié)構(gòu)。你需要確保用這樣的方式不被用戶混雜，但它可能是適應(yīng)不同設(shè)備的最好的方式。
Flip網(wǎng)站選擇了一個非常簡單智能的導(dǎo)航菜單。在所有設(shè)備上都保持清潔的布局和清晰的色彩，在桌面版本上，不同的內(nèi)容會有不同的顏色編碼，這真是個非常聰慧的做法，把簡單的文本鏈接改變成按鈕。在移動設(shè)備上，導(dǎo)航菜單也能非常完善的工作，由于顏色區(qū)域保證了不精確的手指范疇。
起源：CSDN
當用戶訪問桌面版的Happy Cog網(wǎng)站時，用戶有兩種訪問方式，一個是從導(dǎo)航菜單中取舍一個分類進行訪問，另外一個是向下轉(zhuǎn)動來逐漸查看不同的內(nèi)容。在移動設(shè)備上，用戶只能使用第二種方式。然后針對每個內(nèi)容分類，再提供更具體的連接。
1.保持應(yīng)用大家都在用的構(gòu)造
1.散布導(dǎo)航網(wǎng)站
2.首先歡送你的訪客
(責任編輯：網(wǎng)站建設(shè))
網(wǎng)站分析：設(shè)計響應(yīng)式導(dǎo)航菜單的五大法則相關(guān)文章