響應式Web設計(Responsive Web design)的理念是，頁面的設計與開發應當根據使用者行為以及裝置環境(系統平臺、螢幕尺寸、螢幕定向等)進行相應的響應和調整。響應式設計允許你在不同的平臺上，建立獨一無二的使用者體驗，與此同時，只要最少的維護工作。

已經有不少文章涉及響應式設計，這些文章幫助我們理解和解剖響應式網站設計的學習指南和教程，揭示媒體查詢的作用，與此同時，還提供一些令人興奮的響應式設計集合。

我們暫且先放開巨集觀上的響應式Web設計，把目光聚集在更具挑戰性的“響應式導航選單設計”上。桌面版提供了足夠的螢幕空間來顯示多層導航佈局，然而，螢幕越小，清晰地顯示同一個內容就越困難。這裡提供了五大法則，讓你無論在大螢幕還是小螢幕上都能輕鬆高效地設計響應式導航選單。

一.按照優先順序顯示內容

也許，這是在螢幕小的裝置上的最有效方法，根據使用者來突顯不同的內容。在什麼樣的情況下，使用者會使用移動裝置來訪問網站？他們的訪問目標是什麼？我們需要提供什麼樣的內容來滿足？下面我們例舉兩個例子， 根據內容優先順序，在移動裝置上簡化網站導航。

1.只顯示高優先順序內容

在螢幕較小的移動裝置上應該優先考慮內容並且去移掉那些小的欄目。

The Sweet Hat Club網站會為移動裝置優化內容並且重構導航選單，來代替水平顯示所有欄目（item），移動版本的導航僅僅垂直顯示幾個高優先順序的欄目，儘管Twitter和Facebook連線被移掉，但Join連線卻被升級。它並不是一個普通的文字連線，而是一個引起人們注意的彩色按鈕。

2.在頂部顯示高優先順序內容

把最重要的內容放置在頂部

Barack Obama網站把募捐和Obama選舉作為網站焦點。電腦版的主頁在頂部顯示了3條內容，其中兩條是關於參加競選的新聞。而在移動版本上，整個空間都被募捐按鈕所覆蓋，其次才是人們所關注的其他內容。關於Obama和其競選資訊則被放置在頁面最下面。

二.用創造力來處理有限的空間

這裡有一個事實，移動裝置的螢幕空間明顯比桌面版的小很多。設計師面臨的挑戰是不管螢幕尺寸來重新佈局並且找出所有相關內容。與此同時，設計應該讓顧客在視覺上和感覺上保持一致，儘管是訪問同一個網站。，

1.調整設計來適應可用空間

一個靈活的設計會讓你在不同的裝置上仍保持相同的視覺&感覺。

Oliver Russell網站最棒的工作是網站在不同的螢幕解析度下保持相同的視覺和感覺。無論是頭部還是導航選單都能夠輕鬆地重構，並且無需拋棄任何有用的資源。僅僅把不同的內容翻轉90度，允許把彩色背景擠壓的更加緊密。

2.適用於所有螢幕的一些設計

選擇一個設計，可以輕鬆地調整。

Flip網站選擇了一個非常簡單智慧的導航選單。在所有裝置上都保持乾淨的佈局和清晰的顏色，在桌面版本上，不同的內容會有不同的顏色編碼，這真是個非常聰明的做法，把簡單的文字連結轉變成按鈕。在移動裝置上，導航選單也能非常完美的工作，因為顏色區域保證了不精確的手指範圍。

三.下拉選單

使用下拉選單來組織複雜內容是一個非常方便和流行的方式。通常，複雜的網站甚至會使用多層次的下拉選單。在較小的螢幕上，不僅如此，在依賴觸控反應的裝置上，下拉選單要慎用。這裡沒有懸浮效果，螢幕資源可能非常有限。下面介紹兩個網站，它們以一種非常實用的方式、成功地在移動網站上使用下拉選單。

1.堅持使用大家都在用的結構

記住：懸浮特效在移動裝置上是不工作的。

Microsoft的新網站就是一個典型的例子，如何在小的移動裝置上安排複雜的內容。預設情況下，導航選單根本就不顯示，只有當觸控到右上角指定的小圖示時，第一個內容層才會開啟。當觸控到其中一個欄目時，第二個內容層才會逐漸展開，給使用者一個非常清晰明瞭的內容導航。

2.提供清晰和友好的手指操作連線

確保連線是足夠大的，以保證不精確的手指大小。

Starbucks網站也是一個成功漂亮的例子，如何在移動裝置上高效使用下拉選單。同樣，預設情況下選單是隱藏在小圖示後邊的。這樣就不會影響其他內容介面。一旦使用者需要使用導航來連結網站，他們只需輕輕點選那個小圖示，選單就會開啟。要保證不同條目的連線區域是足夠大來保證手指觸控面積。一旦某條被選中，選單即會自動消失。

四.給導航選單換換位置

另一種使讓你的導航選單適應小螢幕的方式是使用熟悉的結構。你需要確保用這樣的方式不被使用者混淆，但它可能是適應不同裝置的最好的方式。

1.分佈導航網站

有序地提供內容，不要同時顯示全部。

Boston Globe網站提供了大量的資訊。不僅第一個內容層，甚至第二個內容層也包含許多條目。他們的解決方案是儘可能簡單地在移動裝置上導航使用者，所以把導航拆分成兩個內容層顯示。當用戶在第一層選中某個條目後，會進入相應網站，然後在這個新網站上面會有新的下拉選單內容，這些內容是對第二層的詳細分類。

2.首先歡迎您的訪客

把導航選單放在網站底部，迫使你的訪客先瀏覽完網站後再決定下一步的走向。

Brickartist.com是一個非常有趣的例子，如何在移動裝置上重新佈局網站的導航選單。在桌面版中，有一個非常清晰和突出的導航選單。然而，在小螢幕的移動裝置上，導航選單被移到網站的底部。這樣，訪客不得不先看頭部和中間內容，然後再決定點選哪個選單。

五.放棄導航選單

你也可以完全放棄導航選單。當然，這僅僅是個選擇，如果你的網站內容不那麼複雜並且訪客可以輕鬆找到相關內容。

1.引導訪客

如果內容簡單明確，你可能不需要導航選單。

當用戶訪問桌面版的Happy Cog網站時，使用者有兩種訪問方式，一個是從導航選單中選擇一個分類進行訪問，另外一個是向下滾動來逐步檢視不同的內容。在移動裝置上，使用者只能使用第二種方式。然後針對每個內容分類，再提供更詳細的連線。

2.視覺特效

使用視覺效果來讓使用者找到他們的訪問方式。

Mobile Web Best Practices的桌面版也顯示了一個非常清晰明瞭的導航選單。每個分類除了有相應的名稱外，還會配上特定的圖示。此外，在文字下面會有更清晰的分類圖示。在移動裝置上，頂部的文字選單會消失，使用者通過使用大的圖示來對網站進行導航。該網站使用了兩種不同風格的導航，儘管如此，分類清晰、風格與圖示相一致，給使用者帶來了一定的視覺效果。