設計師，最主要的是創新，明銳洞察設計前沿，瞭解掌握設計趨勢。這樣才能更好的設計出更加時尚、符合時代潮流的東西。歡迎大家閱讀！更多相關資訊請關注相關欄目！
自使用者體驗設計師Ethan Marcotte在2010年提出Responsive Web Design（RWD）的名詞，即響應式網頁設計，這個概念從Responsive Architecture延伸到web設計領域，讓所有的互動設計、視覺、前端開發都開始投入到這個趨勢，或者說新的設計解決方案中。
當自己和身邊的朋友越來越多的用上了iPhone、iPad、android手機或平板，當越來越多的人都在談論這個老意識新概念的話題，當我們一直秉承的使用者體驗第一與網頁設計完美結合的時候，我也陸續整理了一些關於響應式的設計理念及方法的東西，今天就以響應式導航的設計拋磚引玉，和大家分享一下。
響應式導航的設計遵循了響應式Web設計理念，響應式Web設計(Responsive Web design)的理念是頁面的設計與開發應當根據裝置環境（螢幕尺寸、螢幕定向、系統平臺等）以及使用者行為（改變視窗大小等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、CSS media query的使用等。無論使用者正在使用pc、平板電腦，或者手機，無論是全屏顯示還是非全屏的情況，無論螢幕是橫向還是豎向，頁面都應該能夠自動切換解析度、圖片尺寸及相關指令碼功能等，以適應不同裝置。
一、情景定位
下面以三種有代表性的主流裝置螢幕尺寸：Pc、iPad、iPhone做案例解析幾種常見的導航設計。
1.簡單智慧的導航選單形式
此款選單適用於所有螢幕的一些設計，選單扁平化，留有足夠空間在各個不同的螢幕上做響應式的變化，一種簡單的設計便可以輕鬆調整。
先來看網頁開發設計公司Flip非常簡單色塊的導航，採用了由網頁文字鏈變到移動裝置的按鈕形式，規避了移動裝置操作不精準等一些弊端。
另一種常見的右側導航設計在很多網站中應用，例如：App設計團隊Create，在移動裝置上，導航橫向排列不變，Logo和導航由一行變為兩行，頁面簡潔清晰且使用者體驗一致。
2.導航選單列表形式
最常用的`一種排列形式，橫向導航在小螢幕下變為縱向排列，一列、兩列甚至是多列多行的形式，具體應實際情況而定。
先來看單列形式的案例：Forefathers Group
兩列形式：Travelorego
多行多列形式：Regent College
3.導航隱藏形式
在手機裝置上導航的另一種形式以隱藏列表的方式呈現，是對空間的有效利用，突出高優先順序內容的處理方式。
來看下Microsoft的下拉隱藏選單，通過設定圖示點選對選單做收縮或展開。經典、簡約的佈局完美適合平臺轉換。
國際標準化組織ISO網站在移動裝置預覽時也採用了隱藏選單的形式，但展開的互動形式選單欄出現在網站的底部。這樣，訪客不得不先看頭部和中間內容，迫使訪客先瀏覽完網站後再決定下一步的走向。
4.下拉選單形式
在第三種介紹中的隱藏選單的兩個案例裡，同時也採用了下拉選單的形式。使用下拉選單來組織複雜內容是一個非常方便和流行的方式,複雜的網站甚至會使用多層次的下拉選單。在較小的螢幕上，在依賴觸控反應的裝置上，下拉選單要慎用。這裡沒有懸浮效果，螢幕資源可能非常有限。預設情況下，導航選單根本就不顯示，只有當觸控到右上角指定的小圖示時，第一個內容層才會開啟。當觸控到其中一個欄目時，第二個內容層才會逐漸展開，給使用者一個非常清晰明瞭的內容導航。
來參考下面一個案例：The Copper Tree。
下拉選單的共通點是：預設情況下選單隱藏，一旦使用者需要導航連結，點選圖示選單展開，選中後選單自動消失隱藏，下一次操作時重複。好處是不會影響其他的內容頁面。
二、設計原則
舉了那麼多案例，下面我們來看看在具體的設計中我們要遵循哪些原則？
1.在響應式網頁設計中，有時候我們需要對頁面內容進行刪減，按照優先順序顯示內容，只顯示高優先順序內容是原則之一。在螢幕較小的移動裝置上應該優先考慮內容並且去移掉那些小的欄目。在頂部顯示高優先順序內容，即把最重要的內容放置在頂部。導航是否一定要出現在頁頭或者重新佈局改在頁尾都要依網站具體規劃去考慮。
2.提供清晰和友好的手指操作連結。尤其在手機裝置上，可點選操作的區塊不宜過小，引導要清晰強烈，不忽略任何一款裝置。
3.調整設計來適應可用空間，使得使用者在不同的裝置上仍保持對同一頁面相同的視覺和感覺。這也遵循我們互動設計體驗一致的原則。大家可以參考Oliver Russell網站，一個設計非常靈活的網站，在不同的螢幕解析度下保持相同的視覺和感覺。
4.需考慮大部分使用者右手點選操作，左手負責握住裝置的習慣，右側的導航列表既方便右手的點選，又可以避免被握著裝置的左手不小心觸碰到。
結束語
響應式之所以變得流行的一大原因是無論在哪，看起來都很棒。2013我們正處在移動網際網路快速發展的時代，一個網站能夠相容多個終端，而不是為每個終端做一個特定的版本，響應式設計為移動網際網路而生，Web設計也將迎來更多的響應式設計元素。
最後介紹一款響應式導航設計的外掛：Responsive Nav Plugin
針對小螢幕的可切換式導航的建立，支援觸屏事件和CSS3過渡（transitions）效果，具有非常好的效能。
