網(wǎng)站自適應(yīng)設(shè)計(jì)：打開比較適合的框架

網(wǎng)站流量正在發(fā)生變化。用戶正在從臺(tái)式機(jī)和筆記本電腦轉(zhuǎn)向使用移動(dòng)設(shè)備——智能手機(jī)現(xiàn)在占所有網(wǎng)絡(luò)流量的 52%，而傳統(tǒng)筆記本電腦和臺(tái)式機(jī)占 45%。

客戶接受功能齊全的桌面網(wǎng)站的限制但翻譯到移動(dòng)平臺(tái)的日子已經(jīng)一去不復(fù)返了。不能正確轉(zhuǎn)換為智能手機(jī)、平板電腦和其他移動(dòng)設(shè)備的網(wǎng)站將驅(qū)使訪問者訪問其他網(wǎng)站。不用說，您提供的設(shè)計(jì)可以讓您的網(wǎng)站在各種設(shè)備類型和屏幕尺寸上無縫工作，這對(duì)您的業(yè)務(wù)成功至關(guān)重要。

這也是自適應(yīng)設(shè)計(jì)發(fā)揮作用的地方，無論您的訪問者使用哪種設(shè)備，它都可以幫助您創(chuàng)造愉快的體驗(yàn)。在本指南中，我們將深入探討自適應(yīng)網(wǎng)頁設(shè)計(jì)的來龍去脈——它是什么、在哪里使用，以及它如何與響應(yīng)式網(wǎng)頁替代方案相提并論。

什么是自適應(yīng)網(wǎng)頁設(shè)計(jì)？ 

自適應(yīng)設(shè)計(jì)通過提供能夠根據(jù)屏幕尺寸進(jìn)行上下文調(diào)整的圖形用戶界面 (GUI)，幫助彌合設(shè)備和交付之間的差距。設(shè)計(jì)師創(chuàng)建多個(gè)不同尺寸的 GUI 模板——然后，當(dāng)訪問者到達(dá)您的網(wǎng)站時(shí)，將選擇并顯示最合適的尺寸以提供最佳用戶體驗(yàn) (UX)。 

基于這個(gè)定義，很明顯，自適應(yīng)網(wǎng)頁設(shè)計(jì)認(rèn)識(shí)到當(dāng)今訪問者使用的屏幕尺寸越來越多樣化——它承認(rèn)特定屏幕尺寸在移動(dòng)設(shè)備中的流行。 結(jié)果是一個(gè)最適合的框架：雖然可能有一些異常設(shè)備的屏幕尺寸不常見，無法在自適應(yīng)模型下提供最佳用戶體驗(yàn)，但絕大多數(shù)網(wǎng)站訪問者會(huì)看到根據(jù)他們的特定觀點(diǎn)量身定制的形式和功能。

適應(yīng)性的關(guān)鍵方面自適應(yīng)網(wǎng)頁設(shè)計(jì)依賴于設(shè)備屏幕尺寸的通用性來提供可用的內(nèi)容和上下文功能。通常，自適應(yīng)開發(fā)人員會(huì)為六個(gè)屏幕像素寬度創(chuàng)建固定的設(shè)計(jì)布局：320PX  480PX  760PX  960PX  1200PX  1600PX  

設(shè)計(jì)人員創(chuàng)建了這六個(gè)具有關(guān)鍵特性、鏈接和功能的 GUI 模板，以確保它們?cè)谛略L客到達(dá)時(shí)可用。當(dāng)用戶訪問您的網(wǎng)站時(shí)，會(huì)選擇最適合的尺寸并顯示在他們的設(shè)備上。

值得注意？雖然不同的尺寸會(huì)有相似的設(shè)計(jì)，但并不要求它們完全相同——根據(jù)屏幕寬度和關(guān)鍵功能，開發(fā)人員可以選擇添加、刪除或移動(dòng)關(guān)鍵功能，以確保整體體驗(yàn)保持一致（即使表單跨設(shè)計(jì)交互略有變化）。需要打個(gè)比方嗎？想想衣服尺碼。迎合盡可能廣泛的市場(chǎng)意味著創(chuàng)造一系列適合大多數(shù)客戶的標(biāo)準(zhǔn)尺寸。有些是規(guī)模兩端的異常值，而另一些則占據(jù)規(guī)模邊界之間的中間地帶。然而，通過選擇最適合的方法，公司可以適應(yīng)最廣泛的客戶需求。

響應(yīng)式設(shè)計(jì)作為自適應(yīng)設(shè)計(jì)的替代方案而出現(xiàn)，并專注于適應(yīng)任何尺寸的任何設(shè)備。受移動(dòng)設(shè)備使用快速增長的啟發(fā)，響應(yīng)式設(shè)計(jì)使用單一、固定的 GUI 布局，主動(dòng)響應(yīng)用戶屏幕尺寸。 從理論上講，這允許每個(gè)用戶按預(yù)期體驗(yàn)網(wǎng)頁或其他圖形元素——無論他們的設(shè)備大小如何。許多CMS 系統(tǒng)提供響應(yīng)式設(shè)計(jì)功能，以支持網(wǎng)站上越來越多的不同移動(dòng)設(shè)備用戶。 但是哪種方法最重要呢？讓我們分解一下每種解決方案的一些主要優(yōu)點(diǎn)和潛在缺點(diǎn)。

自適應(yīng)設(shè)計(jì)的最大好處是什么？量身定制的方法。自適應(yīng)計(jì)劃不是為了滿足用戶設(shè)備需求而擴(kuò)大或縮小桌面網(wǎng)站，而是讓開發(fā)人員為獨(dú)特的設(shè)備觀點(diǎn)創(chuàng)造最適合的體驗(yàn)。例如，寬度較小的設(shè)計(jì)可以變得更簡(jiǎn)單和流線型以適應(yīng)減小的屏幕尺寸，而更高分辨率的產(chǎn)品可以包含更多內(nèi)容和更好的控制以提供理想的用戶體驗(yàn)。自適應(yīng)設(shè)計(jì)的最佳適配特性使其不如響應(yīng)式設(shè)計(jì)替代方案靈活。開發(fā)人員必須根據(jù)標(biāo)準(zhǔn)寬度創(chuàng)建多個(gè)設(shè)計(jì)模板，但即使屏幕尺寸略微超出標(biāo)準(zhǔn)，用戶仍可能會(huì)遇到形式或功能問題。 時(shí)間也是一個(gè)問題——公司必須擁有可用的員工資源，或者愿意花錢尋求外部幫助，以識(shí)別關(guān)鍵的 GUI 元素、設(shè)計(jì)多個(gè)實(shí)例并大規(guī)模部署它們。

在響應(yīng)式設(shè)計(jì)方面，成本是一個(gè)關(guān)鍵因素。公司無需為六個(gè)單獨(dú)的網(wǎng)站模板花費(fèi)開發(fā)、測(cè)試和迭代費(fèi)用，而是可以設(shè)計(jì)一個(gè)可以按需自動(dòng)擴(kuò)展或縮小的單一版本。這也支持快速交付——響應(yīng)式解決方案可以跨站點(diǎn)后端快速部署，以提供按需調(diào)整 GUI 大小。

雖然響應(yīng)式設(shè)計(jì)應(yīng)該為用戶提供量身定制的體驗(yàn)，無論他們的設(shè)備大小如何，但CSS或HTML標(biāo)記的問題可能會(huì)導(dǎo)致響應(yīng)式屏幕尺寸出現(xiàn)問題。此外，廣告等外部元素可能無法正確加載，視覺元素可能會(huì)因屏幕尺寸不同而在屏幕上移動(dòng)。還值得注意的是，許多響應(yīng)式設(shè)計(jì)只是桌面站點(diǎn)的縮放版本，這意味著它們?cè)谝苿?dòng)設(shè)備上的加載時(shí)間可能比最適合的自適應(yīng)產(chǎn)品要長得多。