自從伊桑·馬科特創造“響應式網頁設計”這個詞以來，已經過去了三年。這曾經是一個革命性的新想法，但現如今已經變成了一種常見的設計。響應式網頁設計（RWD）不再是一種趨勢，它是如今最好的設計表現。
我想說的是，響應式網頁設計很快就會像css和html的分離一樣明顯。這不是是否使用它的問題。這是一個你是否能正确實作它的問題。
我們生活在後PC時代。移動裝置，以及最近十分流行的可穿戴裝置變得越來越重要，我們别無選擇，隻能接受我們的網站需要為不同的螢幕分辨率提供最好的體驗這一事實。如今，越來越多的網際網路流量将來自智能手機和平闆電腦。在去年銷售的電視中，就有超過25%是具有網際網路連接配接的智能電視。是的，隻有響應式網頁設計才能讓您輕松為這些裝置及其所有者提供服務。
設計人員需要對響應式網站進行原型設計，而編碼人員必須對它們進行編碼。這就是新的現實。準備好了嗎？歡迎來到響應式設計時代。
什麼是響應式網頁設計？
響應式網頁設計當然不是一個不言自明的術語（盡管它很接近），是以我想我們需要定義它。響應式網頁設計是一種設計方法，可以讓網站響應某些裝置的螢幕分辨率。這意味着由于響應式網頁設計，設計師能夠在手機，平闆電腦，大螢幕等裝置上打開網站時自由地控制網站的外觀。
以下是一些響應式網站的截圖，可以幫助您更好地了解響應式網頁設計：
您還可以測試設計的網站的響應能力。調整視窗大小，并觀察它如何巧妙地塑造不同螢幕分辨率的體驗。
響應式網頁設計更像是一種設計理念，而不是一種單一的、定義明确的方法。響應式網頁設計是一種設計思維模式，迫使設計人員考慮不同裝置上的體驗。
響應式網頁設計面臨的挑戰
前面我們已經了解到了什麼是響應式網頁設計，現在我們讨論一下它面臨的挑戰。
響應式網頁設計要求設計人員和開發人員具有多角度設計思維過程。你必須考慮你的網站在不同裝置上實際的浏覽體驗。這通常意味着您需要完全改造界面才能使其易于使用。每個主要分辨率都必須是一個斷點，用于重塑界面。
您需要記住的一件事是，響應式網頁設計并不是要縮小所有内容來适應iPhone的螢幕。設計 響應式網站就是要提供出色、連續、跨管道的體驗。
聽起來很複雜嗎？是的！這就是我們過着艱難的生活。
想象一下，如果沒有将網頁上的部件仔細調整到較小的螢幕分辨率，每個網站最重要的元件之一可能會在移動裝置上完全亂掉，其結果将是緻命的。如果沒有正确設計導航，您的網站将在其他裝置上成為一種無法使用的體驗和痛苦的根源。
雖然我所知道的大多數響應式網站都有适應性強的導航元件，但它們通常設計得很差。像 觸摸屏裝置在導航方面有不同的要求和習慣；大螢幕會提供更多空間去實作網站清晰度等，這是你設計響應式網站時應始終牢記的事情。要設計一個連續的、跨管道的體驗，就意味着要仔細考慮每個管道、裝置是否以相同的精度提供服務。
麻煩的響應式網站導航是我想詳細讨論的事情。為了幫助你更好地了解我所說的，下面每個導航元件都已重新還原為原型。這應該可以讓您更好了解響應式解決方案的結構和含義。
在每個示例下方，您還可以找到一些連結，這些連結可讓您在設計中重用這些模式。
現在 - 讓我們處理響應式網站上使用的流行導航模式。
收縮和隐藏
我最喜歡的一個響應式網站導航的例子是“Done Done”。對于标準的1224px螢幕寬度，Done Done在頂部菜單中有一個簡單的連結清單，這裡有兩個高明的設計：一個用于“計劃&定價”的按鈕和一個單獨的“登入”連結。在這兩種情況下，“Done Done”的設計者為他們認為至關重要的導航欄提供了視覺上的差別。這可能并不是什麼特别新奇的設計，但它肯定是一項适當的設計。
對于較小的分辨率，則會像變魔術一樣。當您開始調整視窗大小時，您會注意到首先它們使導航連結變小（但仍然易于閱讀，例如在iPad Mini上），然後在720px下隐藏導航連結。在 Done Done 網站上工作的設計人員明白，他們不能繼續無限期地縮小導航中的字型大小，是以他們利用了現在流行的移動應用程式導航模式。隐藏在友善菜單中的導航連結在螢幕頂部具有固定位置。這意味着在向下滾動網站時，您可以持續通路導航。
這種政策的另一個例子是響應過程中的網站。對于較小的螢幕分辨率，它們會縮小并移動導航連結，以提供持續的導航便利性體驗。如果您在智能手機上打開該頁面，您會注意到它們“固定”了導航的位置，就像“Done Done”一樣有意思。但是，新版本的網站遇到了一個小問題。“發現”連結位于iPhone上網站的徽标下方。這時候又改怎麼做才能做得更好呢？很簡單。例如，他們可以隐藏“Done Done”樣式菜單中的連結。
最後，說說我最喜歡的例子 - Skinny Ties。這個制作精美的網站很好地處理了網站在不同的裝置上的呈現。首先，它們的頂部導航大小會根據螢幕大小進行調整（它還會稍微改變位置以建立一緻的布局）。對于較小的螢幕，設計師大膽地隐藏了購物車、搜尋和登入/注冊連結。這是一個絕佳的選擇，因為它使下拉清單功能齊全（請注意，下拉清單的内容也會根據螢幕的大小進行調整），同時節省了寶貴的空間。 Skinny Ties的響應式網站在任何地方都絕對是一個亮眼的存在，我相信無論是誰都絕對會喜歡它的。
移動和隐藏
并非每個導航都适合收縮和隐藏連結。如果導航有許多層，比如複雜的資訊結構、層層疊連的連結、或者隻是不适合使用小字型的排版，總而言之，您必須考慮這些情況下該如怎麼做。比較流行的一種做法是對中等尺寸螢幕的導航連結重新排序，并将其隐藏在較小螢幕（智能手機）的菜單中。
The Next Web 已經掌握了移動/隐藏導航連結的藝術。他們在寬螢幕上的響應式網站呈現出複雜的導航模式。兩個下拉清單‘’圖示，五個連結，隐藏的搜尋......這是一個會發生各種意外的組合，但是，The Next Web 的網頁設計師做到了。如果您将視窗大小調整為800px，您會注意到它們重新組織了整個網站的頂部。徽标已縮小到适合頂部菜單。整個“所有頻道”列都隐藏在螢幕左側的菜單中。結果很棒，這是一個清晰明了的網站，我想他們正确地使用了流行的響應式網頁設計模式（盡管菜單中的“所有頻道”在某種程度上仍然很奇怪）。
如果您将視窗大小調整為768px及以下，或者隻是在iPad / iPhone上打開它，則五個導航連結将會從螢幕上消失，這增加了整體形式的清晰度。我想吐槽的是，如果連結根本不那麼重要，為什麼它們會首先出現在更寬的螢幕上呢？看起來它似乎是整個導航中不必要的，隻是為了好看擠到網業上，也許隻是因為它适合寬螢幕呢？
在《Smashing Magazine》的網站上，已經避免了将其他資訊強制放入更寬螢幕的失敗做法 - 這是高度複雜導航的另一個例子。粉碎雜志共有三個級别的導航：
- 主要分類： 書籍， 圖書室， 活動， 工作闆
- 主題類别： 編碼， 設計， 移動， 圖形， 使用者體驗設計， 字壓
- 特定于每個主題類别的子類别
這三層導航迫使《Smashing Magazine》的設計師建立了一個複雜的響應式網站。對于最寬的螢幕Smashing Magazine使用螢幕左側的兩個導航列。大小為 1224px 及更小的螢幕在網站頂部具有“主要類别”，在一列中包含“主題類别”和“子類别”。這是菜單結構重組的合理選擇。
但是，最有趣的事情發生在較小的螢幕上。
如果您在 iPad 上以橫向視圖 （1024px） 打開 Smashing 雜志，您會注意到子類别消失了，而主題類别則被擠壓在“主要類别”下方。
最後，對于728px和更小尺寸的螢幕 - 所有導航連結都隐藏在設計精美的菜單中。在Smashing的模式中，唯一可能成為問題的事情是移動裝置上缺少菜單的固定位置。畢竟大多數使用者用移動裝置通路該網站是為了浏覽最新文章，而不是浏覽類别，不是嗎。
sony則為他們的網站創造了一個優雅的圖案。雖然1224px和400px之間的導航幾乎沒有任何變化，但它們在320px中将它們的五個導航連結精美地隐藏在螢幕右側的菜單中。此模式使網站在 iPhone 上仍然浏覽體驗極佳。我隻能說幹得漂亮。
微軟 使用與 Sony導航類似的模式。微軟設計師在螢幕右側的整潔菜單中隐藏智能手機的導航連結。不幸的是，它沒有固定的位置，而且整體上太複雜了，每個類别都有下拉清單（嘗試在iPhone上使用它真的是一場無休止滾動的噩夢）。他們是這樣辯護的：他們确實在頁腳中重複了導航連結，這有助于滾動到頁面底部，并且幫助沒有找到他們但需要查找内容的使用者。這種重複的導航連結是一種極好的模式。
全面重組
在響應式網站上導航的最後一個流行的解決方案是完全重組。規則很簡單：如果它不合适那就改掉它，是的，簡單暴力。
UXlondon使用了一個簡單而優雅的解決方案。對于寬屏裝置，導航連結是水準放置的，對于較小的裝置，它們以垂直平面重新組織連結。導航仍然可用，盡管它使用相當多的垂直空間，迫使使用者進行一些可靠的滾動以到達内容。
全面重組的另一個例子是Food Sense的網站。在寬螢幕上，導航是垂直組織的，所有連結都附有圖示。對于768px螢幕，導航将更改為垂直順序。最後，對于320px智能手機，導航會轉到頂部而不顯示圖示（這是一個不錯的選擇，可以為小螢幕帶來更清晰的資訊）。
麗晶學院的網站也有類似的導航模式。對于寬螢幕，導航整齊地放置在網站的頂部。在主要類别下方，有幾個其他連結。對于較小的裝置，主要類别被重新分組到一種兩行網格中，而其他連結則隐藏在模糊的“更多連結”按鈕下（但我覺得這并不高明，這不是你應該複制的模式...）。
那麼我們該如何設計完美的導航
如你所見，所有方法都有其缺陷和優點。總而言之，這是關于在特定裝置/裝置類型上不斷思考的特定用例。響應式設計完全緻力于多管道思維。裝置和用例的矩陣應該引導您完成設計的蜿蜒曲折。這通常意味着您将需要混合，收縮，移動，重新組織和隐藏這些設計元素以建立更好的結構。
我想說，使用者先于方法——這才是我們應該記下來的事情。
讓我們花幾分鐘時間關注一個簡單的導航模式。頂部，水準菜單，4個連結，以及一個登入/注冊連結。想象SaaS登入頁面的一個非常标準的導航設計，我已經開始從最大的螢幕尺寸（在我的情況下是1224px）設計它。一種方法是“移動優先”，但我總是發現，從最大尺寸開始到最小尺寸設計，更簡單，服務更有效率。
我的下一步是為1024px添加一個響應式節點，并指定設計在稍微窄的螢幕上應該是什麼樣子。在原型制作工具中，我從頂部菜單中添加了一個響應式斷點，指定我希望從1224px版本複制我的設計。
多虧了這個簡單的選項，我隻需要通過幾個動作将我的設計調整到更小的螢幕尺寸。我還決定縮小内容，以很好地适應我的項目的新版本。
當1024px的版本完成之後，我将為768px添加一個節點（因為這是iPad螢幕大小 - 這是一個重要的節點）。通常，這是我們開始更多地使用導航的那一刻。但是就我而言，我比不喜歡這麼做。隐藏任何連結或更改導航模型會帶來不必要的複雜性。這将會是一場繁瑣的工作，但我們應該尋找更簡單明了的方法，而不是一開始就幻想結局有多美好。
話雖如此，我隻是稍微移動了一下導航，同時我還删除了整個右列，并将其内容放在主要内容下方。這是我認為很有效的一個方法。記住，如果不是什麼重要的日子，就不要無緣無故去尋找盛開的煙花。讓你的使用者不是因為你的設計感到驚訝。相信我，使用者會驚訝于簡單解決方案的易用性。
最後，最棘手的節點 - 320px——智能手機。嘗試使導航連結變小既困難又有風險。對于移動使用者來說，最後的體驗可能是一場難以捉摸的噩夢。是以我決定激進一點。我已将導航移動到右側的經典移動菜單，并将“登入”和“建立帳戶”連結放在網站頂部 - 以便于通路（這對于普通使用者尤其重要）。
由于這個小技巧，該網站可以在小螢幕上完全使用導航功能，并且在設計的清晰度上沒有任何損失。
記住了，對于320px螢幕，這種模式非常必要的。
最後
我肯定響應式網頁設計将會繼續存在并在未來越來越流行，這絕對是現代網頁設計的主要模式之一。我真誠地希望看完本文後，您可以了解到設計一個在任何裝置都完全可導航的網站并非易事，任何螢幕尺寸設計都是令人驚歎的。