響應式導航設計案例解析

　　響應式導航的設計遵循了響應式Web設計理念，頁面的設計往往會根據使用者行為以及裝置環境（系統平臺、螢幕尺寸、螢幕定向等）進行相應的調整。通過同比例縮減元素尺寸、調整頁面結構佈局以及內容的優化調整等方式，使使用者在不同的平臺上有著獨一無二的使用者體驗。

　　本文收集了響應式設計網站中各種主流的導航設計趨勢，如果你想設計出更好的導航設計或者瞭解新的響應式設計潮流，那麼這篇文章不容錯過！

　　調整尺寸&定位

　　這是響應式導航設計首個步驟，也被視為最簡約的方法。目的在於設計一款永不被隱藏且能優雅的調整視窗大小。設計簡短的導航連結，讓頁面看起來更加簡潔、亮麗。

　　Fiafo就是一款典型的案例。導航連結設計居右側，當瀏覽器視窗被壓縮後，連結呈現在Logo下方，就如同一個單一的導航欄。當你調整瀏覽器尺寸後，該頁面也會隨之而更改，完全不受影響。

　　這種設計風格非常具有吸引力，因為它不需要隱藏任何連結，無需CSS3或JavaScript，頁面上任何條目都能顯示出。最大的缺點是，該導航限制了最多連結數量。

　　Paid to Exist採用了另一種設計趨勢，其連結是浮動的。當瀏覽器的尺寸縮小到最小尺寸時，該連結不會擴大到像100%寬度那樣。其採用了區塊層級設計元素，導航橫向排列不變，由一行變為兩行，頁面簡潔清晰且使用者體驗一致。

　　選單選擇樣式

　　選單選擇在響應式導航設計中，被設計師認為一種較為棘手的設計。一起來看下設計案例。

　　從Apache CouchDB的設計案例中可以看出，其設計佈局呈現細長型且容易操控，因為它是一款單頁面設計。

　　在移動裝置上使用者可能不會在意導航設計樣式。導航選單選擇並不一定要採用漂亮的解決按幹，只要它們能易於操作即可！

　　隨著響應式設計的發展趨勢，未來可能會有其他的解決方案來替代選單選擇。如果你需要一個快速的導航，且能夠用支援所有的作業系統，那麼HTML元素倒是個不錯的選擇。

　　覆蓋下拉選單

　　在響應式設計中，隱藏選單是一個非常流行的設計趨勢。這是因為它能為頁面節省更多的空間。

　　在移動裝置上，螢幕的運用是極其寶貴的，因此，你要儘可能地向使用者提供更多的空間。採用下單隱藏選單是個完美的選擇，突出高優先順序內容的處理方式。

　　Designmodo便採用了這種佈局，通過設定圖示點選對選單進行收縮或展開，列表將顯示新的下拉元素。

　　StickyGram採用了區塊級別連結，不會因調整尺寸大小而有所更改，適用於任何裝置，以最好的方式呈現在你的面前。

　　 Tilde Inc採用了模組下拉選單設計。

　　下拉選單的共通點是：預設情況下選單隱藏，一旦使用者需要導航連結，點選圖示選單展開，選中後選單自動消失隱藏，下一次操作時重複。優點是不會影響其他的頁面內容。

　　多級導航

　　當你需要多個子連結的導航選單，那麼你不得不規劃出一個完美的解決方案。 除了採用區塊層級下拉選單，你還可以選擇建立多級導航選單。

　　以SonySony公司的網站設計為例。使用者通過滾動頁面找到任何他們想要的內容。

　　頁尾連結

　　一旦使用者點選導航按鈕，它會自動跳轉到採用雜湊元素ID的頁尾。使用者可以快速訪問頁尾連結，無需手動滾動。

　　再來看下Contents Magazine設計風格，只有幾個少有的頂部導航連結。調整瀏覽器，你就會看到一個搜尋欄，並且會呈現出一些模組連結。目的是在於保持頁面佈局均勻，而無需額外的指令碼，比如jQuery。

　　隱藏滑動選單

　　這種設計趨勢在Apple Store裡經常可看到，這也是備受iOS開發者歡迎的設計風格。

　　雖然在CSS3中可建立這種效果，但請記住，不是所有瀏覽器都能支援。jQuery倒是個更加穩定的選擇，甚至還有一些免費的開源外掛可供你選擇。

　　點選檢視Sequence的設計風格。

　　英文出自：Teamtreehouse