- A+
響應式和自適應設計 方法之間的差異突出了我們作為網絡和應用程序設計人員的重要選擇。選擇洞察力可以使您能夠以更好的目標，目標和結果來規劃和執行您的設計。
隨著移動設備的普及和多樣化，作為設計師我們需要迎合各種屏幕尺寸。這是每個網絡和應用程序設計師目前面臨的挑戰。從巨型企業監視器到智能監視器，用戶可以通過多種方式在線訪問信息。希望彌合設備之間差距的設計人員有兩種設計選擇：自適應站點或響應站點。
響應式設計
響應式設計一詞首先由網頁設計師和開發人員在他的“ 響應式網頁設計”一書中創造。響應式設計通過調整設計元素的位置以適應可用空間來響應瀏覽器寬度的變化。
響應式網站根據可用的瀏覽器空間顯示內容。如果您在桌面上打開響應式站點，然后更改瀏覽器窗口的大小，則內容將動態移動以便為瀏覽器窗口優化自身(至少在理論上)。在手機上，這個過程是自動的; 該站點檢查可用空間，然后以理想的方式呈現自己。
響應式設計很簡單。因為它是流動的，這意味著用戶可以訪問您的在線世界，并在手持設備上享受與在大型顯示器上一樣多的享受。為此，響應式設計 需要對網站進行非常好的概念化，并對最終用戶的需求和需求有深入的了解!
自適應網頁設計
自適應網頁設計是由網頁設計師亞倫·古斯塔夫森在其著作“ 自適應網頁設計：利用漸進增強創造豐富經驗”一書中于2011年推出的。它也被稱為網站的漸進增強。
響應式設計依賴于改變設計模式以適應可用的不動產，自適應設計具有多種固定布局尺寸。當站點檢測到可用空間時，它會選擇最適合屏幕的布局。因此，當您在桌面上打開瀏覽器時，該站點會為該桌面屏幕選擇最佳布局; 調整瀏覽器大小對設計沒有影響。
有些網站很快就采用了自適應設計。亞馬遜，美國今天，Apple和Abou將自己配置為移動優化網站?？纯催@些。請注意，使用自適應設計在移動網站上顯示的布局可能與桌面版本不同。然而，這是因為設計師為手機屏幕選擇了不同的布局，而不是讓設計嘗試重新排列。
在自適應設計中，為六種最常見的屏幕寬度開發六種設計是正常的; 320,480,760,960,1200和1600像素。
獨立移動設計
還可以選擇創建僅限移動設備的網站(這些網站通常使用“m?！鼻熬Y在瀏覽器的URL欄中表示)。這個選項曾經是一個很好的方法。設計人員將為移動設備創建網站，為專用格式調整元素和布局。Google向移動網站提供了搜索引擎排名，但今天對自適應和響應式網站提供了相同的偏好。
創建一個單獨的站點(而不是使用不同的設計或采用可更改的設計)的最大缺點是，它需要大量的維護，以保持網站的兩個版本是同質的。由于沒有特別的激勵，最近的移動設計已經失寵了。它似乎不太可能很快卷土重來。
在響應式和自適應設計之間進行選擇
響應式設計是比較容易和花費更少的工作來實現。它在每個屏幕尺寸上對您的設計的控制較少，但它是目前創建新網站的首選方法。這也可能與大多數內容管理系統(CMS)(如WordPress，Joomla等)可用的大量廉價模板有關 - 畢竟，誰想要重新發明輪子?
響應式設計人員創建單一設計以在所有屏幕上使用，并且通常將在分辨率的中間開始，并使用媒體查詢來確定將對分辨率比例的較低和較高端進行哪些調整。這往往會讓用戶感到高興，因為這種熟悉的網頁設計似乎可以保證轉換到任何設備的屏幕。均勻性和無縫性是提供良好用戶體驗的關鍵考慮因素。
重要的是要密切關注 響應式設計項目的視覺層次結構 ; 當你的元素在屏幕上移動時，你想嘗試保持這個。這意味著需要對許多不同設備進行大量測試，以確保您正在交付貨物。如果場地的設計相對簡單，它將在設備屏幕上很好地平移，像液體一樣從容器流到容器。
SEO是使用響應式設計的另一個重要論據。使用響應式設計的網站(即具有為所有設備提供服務的URL的網站)目前對搜索引擎更友好。
響應式設計似乎有一個強有力的使用案例。好吧，它可能; 但請注意以下幾點：
由于您的網站將在設備之間“流動”，并根據屏幕尺寸進行調整，因此您添加的任何廣告都可能無法適應該空間。突然間，使用響應式設計提供的“捷徑”可能需要一些重新思考和工作。
下載時間因桌面和移動設備而異。圖像的靈活性是一個重要的考慮因素。在家中或辦公室的大屏幕上快速通過的大型設計需要更多時間(和數據)才能顯示在您的手機上。對于移動版本，較小的預覽可能會更好嗎?
自適應設計將(理論上)根據用戶用于界面的任何設備確保最佳用戶體驗。與響應式設計不同，屏幕從桌面設計“流動”到更小的設備，自適應設計提供量身定制的解決方案。顧名思義，它們適應用戶的態勢需求和能力。作為設計師，我們可以通過使設計觸摸友好，向用戶展示我們在移動設備上的需求。同時，我們也可以為桌面用戶做同樣的事情。我們從網站的最低分辨率版本開始，一直工作到最高。六種設計是當前的標準，但根據用戶的數據，您可以使用更少的設計。
自適應設計的優勢在于它感覺與現代用戶體驗更相關，而響應式設計則表現出更加以桌面為中心的方法(其他設備的需求處于次要的，幾乎被動的地方)。作為用戶，我們的智能設備可以滿足您的需求。我們希望我們的設備能夠了解我們正在經歷的事情。我們來看一個字面上的例子; 如果您駕車穿過長長的隧道，您是否寧愿擁有 適應環境并調整亮度的GPS屏幕?基于上下文的性能和可用性 令人放心，同時確認您的智能設備足夠智能以適應并且更加有用。
您還可以設計為自適應設計優化相關用戶界面的廣告。因為您正在設計不同的分辨率(即不同的視野)，所以您可以訪問用戶的特定需求。例如，智能手機中傳感器的完全復雜性使得公司(和我們的設計師)能夠比以往更多地了解我們的用戶。用戶經常光顧最喜歡的商店，餐館，健身房等 - 通過在那里登記，他/她創建簡檔。從此(行為定位，也稱為個性化)，我們可以設計精細調整的廣告。
另一個優勢 - 研究表明，擁有自適應網站的公司通常會在速度測試中表現出色，這是一家擁有響應式網站的公司。這也不是一個小差別; 自適應站點通常比響應站點快2-3倍，并為用戶提供相當少的數據以提供用戶體驗。
自適應設計有一些強大的優勢。然而，在設計最佳用戶體驗和提供最佳解決方案的游戲中，我們必須記住，我們必須花時間來檢查我們的選項和用戶的現實。
自適應設計存在缺點。首先，它通常比創建響應式設計要多得多。出于這個原因，大多數自適應設計用于改造現有站點，以允許它們在多個設備上使用。那么，似乎第一項業務是通過允許傳統網站覆蓋更多設備來使傳統網站更新。
其次，自適應設計可以使用戶“處于中間”。平板電腦或上網本用戶可能會“懸掛”，因為設計師只能滿足桌面和智能手機用戶的需求。因此，提供一個允許用戶在版本之間切換的鏈接非常重要。
最后，雖然搜索引擎機器人通過點擊進行篩選和排序以區分您的“.com”網站和“m .com”網站的情況越來越好，但接受現狀是明智的。大多數搜索引擎仍然不會在多個URL上平等地排列相同的內容。這意味著要注意自適應設計可能會讓你回到SEO。
因此，雖然目前對響應式設計有一定的偏好，但如果您有預算，請不要忽視自適應設計。谷歌喜歡加載速度快的網站，用戶也是如此。
現代網頁設計為我們提供了三種選擇：響應式，自適應式和獨立式設計，盡管獨立式已經廢棄。
響應式設計允許設計人員根據可用的瀏覽器空間顯示內容。這樣可以實現站點在桌面上顯示的內容與手持設備上顯示的內容之間的一致性。響應式設計是“傳統”選項，并且仍然是迄今為止更受歡迎的方法。
優點缺點
統一和無縫=良好的用戶體驗。
豐富的模板使用。
SEO友好。
通常更容易實現
減少屏幕尺寸設計控制。
元素可以四處移動
廣告丟失在屏幕上。
移動下載時間更長。
自適應設計于2011年開發，更多涉及設計師有幾種固定的布局尺寸。它提供了“一體式延伸到所有”方法的替代方案。
優點缺點
允許設計人員為適當的設備構建最佳UX。
移動設備可以感知用戶的環境。
設計人員可以根據智能設備的用戶數據優化廣告。
創造勞動密集型 - 大多數適應性設計都在改造傳統網站，使其更容易獲取。
平板電腦和上網本在站點配置方面可能會出現問題，這些配置趨向于面向智能手機或桌面。
挑戰搜索引擎優化 - 搜索引擎無法欣賞多個網站上的相同內容。
在響應和自適應設計之間進行選擇需要仔細考慮。雖然它可能是謹慎的做法是堅持一個響應式設計為方便起見(節省成本，提高搜索引擎優化，并保持用戶的內容與設備之間的無縫體驗)，這是至關重要的檢查兩種設計的優劣完全。自適應設計可以更好地滿足用戶在現場的不同需求; 因此，掌握變化的脈搏至關重要。
我們可能最好將這些變化視為進化。查爾斯達爾文指出，生存的物種中的個體不是最強壯或最聰明的，而是最適應變化的物種。鑒于此，我們只考慮恐龍。
想想您的產品或服務。它是否在特定設置中訪問用戶?您可以使用什么來保持他們的信息和參與?請記住，不只是移動設備越來越智能化。在我們的家庭和辦公室，我們擁有的不僅僅是傳統臺式機?，F在，各種智能設備都能感知并響應環境，從時鐘和加熱器到構成“物聯網”的大量設備。這是一個充滿智慧物體的時代。我們必須越來越多地考慮到這種智能。
