響應式與自適應：如何選擇正確的設計方法

就在幾年前，設計師可以建立一個單一的僵硬的網站版本，然後就結束了。現在已經不是這樣了。現在，他們需要考慮到無數的智慧手機、可穿戴裝置、平板電腦和其他智慧裝置–你也一樣。

這對電商企業來說尤其如此。大多數品牌不能再專注於單一的裝置。超過58%的網際網路流量來自於移動裝置，而桌面裝置佔40%。接近60%的電商銷售是通過移動裝置完成的。

移動流量的份額只會不斷增長，這意味著設計師也必須迎合不同的使用者需求和瀏覽風格。一個移動使用者沒有那麼多耐心–他們希望網站內容是咬合的，易於處理。另一方面，PC使用者通常準備花更多時間研究一個具體的報價。

問題是，你如何確保你的設計在任何螢幕上看起來都很好，並涵蓋各種使用者需求？響應式設計是唯一的方法嗎？在某些情況下，自適應設計不是一個更好的選擇嗎？響應式設計和自適應設計到底有什麼不同？

1. 響應式設計與自適應設計：有什麼區別？
2. 響應式網頁設計的優點和缺點
3. 響應式設計：例子和使用案例
4. 自適應網頁設計的優點和缺點
5. 自適應設計：例子和使用案例
6. 如何在響應式設計和自適應設計之間做出選擇
7. 如何判斷一個網站是響應式的還是自適應的？

響應式設計與自適應設計：有什麼區別？

在我們進一步討論之前，我們應該定義我們正在處理的問題。

響應式設計使你的內容對使用者的螢幕尺寸做出反應並進行相應的調整。通過響應式設計，你建立了一個單一的佈局，並使其各個元素具有靈活性，以確保它們能在不同的螢幕上正常顯示。

把響應式設計想象成一套規則，告訴你的內容如何表現。你可以使用CSS媒體查詢來指定目標裝置型別並設定斷點，也就是螢幕的最大或最小寬度等條件。斷點決定了你的佈局何時應該改變。

反過來，自適應設計意味著你的內容會適應使用者的裝置引數，但卻是以一種預先確定的方式。你有不是一個而是多個現成的佈局，以考慮到不同的螢幕尺寸、方向等等。你可以根據使用者的裝置型別來決定你的內容如何在使用者的瀏覽器中顯示。

簡而言之，對於響應式設計，你決定了你的內容應該如何反應，而對於適應式設計，你也決定了最終的結果。無論你選擇哪一種，你都能為智慧手機和桌面使用者創造一個流暢、無縫的體驗。而這反過來也會提高你的搜尋引擎排名。

這個並排的比較將幫助你瞭解響應式設計和自適應設計之間的關鍵區別。

這兩種方法都是絕對可行的；它們可以幫助你遵循常見的網頁設計原則，建立一個客戶友好的網站。響應式設計與適應式設計的主要區別在於它們的執行方式。

響應式網頁設計的優點和缺點

讓我們從響應式設計的優點開始。

• 你不需要高階編碼技能。 如果你使用像Squarespace這樣的拖放式網站建設工具，你最終會得到一個預設的響應式網站。你也可以很容易地找到輕量級的、完全可定製的、響應式的WordPress主題。
• 響應式設計是王道。 它已經變得非常普遍，幾乎每個使用者體驗設計師都熟悉它。Bootstrap，最流行的CSS框架，大多用於設計響應式、移動優先的網站。
• 你可以最大限度地利用可用的螢幕空間。 響應式佈局給你更多的控制權，讓你更有效地管理留白空間。因此，你的設計將永遠不會顯得雜亂無章或空洞無物。
• 它更實惠。 如前所述，你可以使用無程式碼工具自己建立一個基本的響應式網站。或者，你可以僱用一個自由職業者或機構，即使你的預算有限。看看我們值得信賴的機構客戶名單，找到一個可靠的合作伙伴。
• 響應式頁面需要更少的維護。 即使市場上有一個新的小工具，每個人突然都在使用它，有了響應式網站，你就不用擔心了。你可能需要做一些改變，但你不必重新設計你的整個佈局。
• 響應式設計意味著快速的交付。 一個版面的設計時間比六個版面的設計時間要短，這意味著你的新網站可以在幾天內啟動和執行。

現在說說響應式設計的缺點。

• 你創造的目標體驗較少。 當你試圖考慮到所有現有的裝置時，你不可避免地失去了某種程度的個性化。
• 響應式設計需要大量的計劃和實驗。 這不是一個放手的方法–你仍然需要在上線之前在各種視口尺寸上測試你的設計。分配一些時間來修復不一致的地方，因為它們不可避免地會出現。

響應式設計：示例和使用案例

響應式設計的使用案例似乎是無窮無盡的，因為響應式設計是多麼的通用和平易近人。任何個人和商業網站都可以從響應式和靈活性中受益，正如你從這裡描述的例子中看到的那樣。

這個來自龍舌蘭酒品牌Los Sundays的響應式設計，在PC和手機上看起來同樣令人驚歎。設計師巧妙地確定了不同視口的內容的優先次序，並確保排版保持大膽但不失穩重。

來自洛杉磯的一個響應式設計案例  (Source: The Responsive)

催眠的視差效果只有在更大的螢幕上才能看到–因此也能欣賞到。在這裡，當使用者從智慧手機上訪問該頁面時，可以得到一個美觀而快速的輕量級體驗。

下一個例子也可以說是來自Slam Jam，一家線上服裝店。一旦你切換到螢幕較小的裝置上，該網站就會順利地轉變。產品以兩列顯示，而不是四列，選單移到底部，使搜尋欄更容易進入。旋轉木馬使使用者能夠發現新的產品，而不必放大或縮小。

一個來自Slam Jam的響應式網站  (Source: The Responsive)

我們的下一個例子取自Here Design，證明了充滿內容和特效的響應式頁面也能以合理的速度載入，並在任何裝置上看起來都很好。即使在小螢幕上，這個頁面也感覺同樣和諧，而且動畫的顯示沒有任何尷尬的延遲、故障或不一致。

來自Here Design的一個響應式頁面  (Source: The Responsive)

自適應網頁設計的優點和缺點

先別急著下結論–有很多成功的企業利用自適應設計，並在此過程中茁壯成長。

自適應設計有多種優點：

• 自適應的網站通常是快速的。 載入時間對SEO、使用者體驗和轉換率至關重要，而拉動一個光滑的專用頁面版本需要更少的時間。將自適應設計與快速管理的主機相結合，你會得到一個閃電般的網站。
• 這是一個量身定做的高精度方法。 你可以完全控制你的佈局的外觀和感覺，因為它是靜態的。你是決定針對哪些裝置的人。這使你能夠為你的使用者設計更加個性化的體驗，並考慮到他們的喜好。
• 你可以更容易地整合廣告。 當你知道周圍元素的確切尺寸和比例時，配置廣告更容易。
• 自適應設計對改造現有網站很有用。 你可以建立單獨的手機和平板電腦版本，並保持你的主網站版本不變。
• 你可以調整個別模板，而不是重新編碼整個網站或頁面。 當你的設計是由單獨的靜態佈局組成時，對你的設計進行修改就不那麼痛苦了，特別是當你需要修復一個小問題時。

你也應該意識到自適應設計的缺點：

• 你不能保證你的設計會按預期顯示。 如果你的訪客使用的是你沒有考慮到的裝置呢？在這種情況下，結果將更難預測。
• 自適應網站更昂貴。 你需要一個開發人員團隊來設計和支援你的網站，這意味著更高的設定費和運營費用。同時，網頁設計師的平均工資約為5.7萬美元，他們的工資率可高達11.4萬美元。
• 它不太受歡迎。 你很難找到關於自適應設計的直觀的學習材料和最新的指南。由於響應式設計風靡一時，大多數網頁設計課程都以它為重點。
• 設計單獨的體驗是很麻煩的，而且是勞動密集型的。 每個佈局都必須是畫素級的，所以，自然而然地，你的設計師會花更多的時間來處理和測試它們。
• 它對初學者並不友好。 大多數流行的視覺化網站建設者給你提供了建立統一的響應式設計的工具，但你很少能找到一個簡單的服務，讓你建立獨立的移動、PC和平板電腦版本。這是因為自適應設計需要更多的專業知識和技能。

自適應設計：例子和用例

對於目標受眾喜歡使用移動應用程式購物的電子商務企業來說，自適應網站可能是一個更好的選擇。這些企業旨在為他們的受眾創造高度有針對性的體驗，因為他們已經收集了足夠的資料來了解他們的購物習慣和偏好，而且他們希望鼓勵下載應用程式。

要看世界上訪問量最大的自適應網站，只需前往亞馬遜。從臺式電腦上看，你會得到一個很好的體驗。主頁相對繁忙，但並不壓抑，而且你可以立即找到你要找的東西。

來自亞馬遜的一個自適應網站例子

然而，如果你試圖調整你的瀏覽器視窗的大小，會發生以下情況。

瀏覽器視窗大幅調整後，亞馬遜網站的外觀如何？

你只能看到桌面內容的一小部分，因為這種不常見的瀏覽器寬度沒有被考慮在內。

這種做法會傷害亞馬遜嗎？絲毫沒有。它的銷售額近年來翻了兩番，因為它的移動網站版本和應用程式都提供了非常直接、快速和方便的購物體驗。

像亞馬遜這樣大的公司可以拋棄 “一刀切 “的做法，對其網站設計稍加保守，以保持其熟悉和即時訪問全球數百萬客戶，包括老年人和有視力問題的使用者。

另外，如果你仔細觀察，亞馬遜的網站是部分響應的–根據視口的不同，它有額外的和現有的元素被新增或被拿走。

瑞安航空，一家受歡迎的歐洲低成本航空公司，也有一個自適應的網站，使預訂廉價航班變得輕而易舉。它的介面看起來略顯保守，但並不落伍，它在Pingdom速度測試工具上的得分是82/100，這是一個不錯的結果。

瑞安航空的自適應網站

擁有一個有點僵硬的網站並不能阻止該航空公司一次又一次地打破流量記錄，因為大多數旅客更喜歡從桌面裝置或使用瑞安航空的移動應用程式預訂航班。

對這個網站做太多的改變，意味著讓已經習慣了當前外觀的使用者感到困惑。瑞安航空沒有換成更時髦的響應式版本，而是有意選擇保留其網站設計，而是專注於保持其票價儘可能低。

如何在響應式設計與自適應設計之間做出選擇

僅僅因為一種方法比另一種方法更普遍，並不意味著你必須要採用它。不要忽視大局–你的主要目標是使你的網站直觀、可訪問、有吸引力，並且在視覺上有凝聚力。要做到這一點，你需要採取一個整體的方法，並轉向網頁設計的最佳實踐。

按照這些步驟來確定哪種設計策略對你最有效。

1. 首先考慮你的目標受眾和他們的需求。 請記住，使用者的意圖並不是基於他們所使用的裝置。進行使用者研究，瞭解現實生活中的使用者如何與你的介面互動。為特定的裝置優化設計對你來說有意義嗎？
2. 專注於你的特定使用案例。 例如，如果你銷售現代藝術印刷品，你應該專注於為你的使用者創造完美的桌面體驗，因為他們想在購買任何東西之前在大螢幕上看一看這些印刷品。
3. 不要過分追求移動優先的方法。 為了消除使用者旅程中的所有可能的摩擦，很容易過度簡化移動佈局，並將同樣的邏輯應用於桌面版本。然而，一個普通的、帶有漢堡包選單的單欄設計，在桌面螢幕上很可能顯得過於沉悶。
4. 評估你的資源和限制。 在你考慮投資自適應佈局之前，要弄清楚你的預算、當前的需求和長期目標。對你的品牌來說，擁有一個最先進的網站，即使在超大型的智慧電視上看起來也非常棒，這一點至關重要嗎？或者你只需要一個可靠的主力軍來向你現有的觀眾銷售產品–一個無論如何都會向你購買的觀眾？
5. 讓你的載入速度成為優先事項。 商業網站可能有也可能沒有點綴，但它們必須快速載入以避免跳出率的增加。 如果一個網站的載入時間超過6秒，超過一半的使用者會放棄該網站。
6. 執行競爭者分析。很有可能，你的主要競爭對手已經進行了使用者研究，並且已經全部弄清楚了。不要只是複製他們的方法；相反，試著分析他們正在迎合哪些使用者群以及為什麼。

響應式設計不再是一種趨勢–它正逐漸成為網頁設計的黃金標準，它的少數缺點很快就會成為過去。

例如，Webflow，一個視覺化網站建設者，通過自動優化上傳的圖片，使響應式網頁的速度提高了10倍，這解決了響應式網站的一個主要問題：其載入速度。

有可能使用兩個世界的最佳方案–結合響應式和自適應策略來解決不同的搜尋行為。這樣一來，自適應佈局可以有媒體查詢，而響應式網站可以包括自適應元素。可以說，響應式與自適應式的兩難選擇已經不再那麼重要了–理想的網站設計是兩者的巧妙融合。

如何判斷一個網站是響應式的還是自適應的？

首先，看看當你從臺式電腦上調整瀏覽器視窗大小時會發生什麼。一個響應式網站會根據你的視口大小進行無縫調整–你會立即注意到它是多麼靈活。

一個自適應的網站不會改變，直到你達到某個斷點或切換到另一個裝置。在此之前，它的一些內容將被隱藏，而不是調整大小，你必須拖動水平滾動條才能看到它。

另外，你可以通過點選Windows上的CTRL + U或Mac上的Option + Command + U，在主頁原始碼中尋找媒體查詢。你也可以在頁面上點選右鍵，從下拉選單中選擇 “檢視頁面原始碼”。

檢視網站在各種螢幕上的表現的一個簡單方法是用谷歌瀏覽器裝置模式模擬移動裝置。開啟你想測試的網站，在Windows上按CTRL + Shift + I，或在Mac上按Command + Option + I來開啟開發者工具。

小結

你可能聽說過，搜尋引擎會優先考慮響應式網站，只是因為它們是

響應式。這並不完全正確。一個自適應的網站可以和一個響應式的網站一樣對搜尋引擎友好。谷歌確實說過，它更喜歡提供積極使用者體驗的移動友好型網站，但它並不限制你只用一種方法來實現這一點。

有許多方法可以使你的網站在移動端完美無缺地工作。例如，你可以嘗試WordPress的移動外掛–你甚至不需要成為一個編碼員來使用其中的一些外掛。如果你有開發人員的技能，確保使用我們的WordPress暫存環境，在網站上線前以無壓力的方式測試你的網站變化。

有一些移動外掛可以把你的WordPress網站變成一個應用程式，這是一個提供量身定做的體驗的絕佳方式，而不需要在一個全新的自適應網站上花費巨資。如果你已經有了移動網站，你可以用WP Mobile Menu這樣的外掛大幅改善它們的外觀和可用性。

無論你選擇哪種方法，請記住，跨平臺設計要求你為你的使用者創造極快的體驗，無論他們何時或如何訪問你的資源。 選擇正確的主機是成功的一半–它可以使你的網站在預設情況下更快、更安全，而且你不必擔心計劃外的停機或低頻寬。