什么是自適應設計?
 
自適應設計是適應不同屏幕尺寸的用戶界面。它由多個固定布局組成,在這些布局中呈現與用戶設備最緊密相關的尺寸-無論是手機,平板電腦,計算機還是介于兩者之間的設備。
 
自適應設計與響應式設計
 
自適應設計類似于響應式設計,因為這兩個系統在呈現內容之前都會先查找設備的大小。但是,自適應設計基于固定的布局:它不是根據設備的大小來移動內容,而是為該特定設備加載特定的設計。自適應設計通常迎合六個最常見的屏幕寬度:320px,480px,760px,960px,1200px或1600px。另一方面,響應式設計基于動態布局,無論屏幕大小如何,內容都適合屏幕。

自適應設計

讓我們進一步分解一下。假設有3個單獨的設備呈現相同的網頁:臺式機,平板電腦和移動電話。
 
對于自適應設計,我們可以為每個設備創建三種不同的布局。或者,我們可以有兩種布局:一種用于移動設備,一種用于桌面/平板電腦。臺式機的分辨率可能會比平板電腦寬,但我們可以在短時間內重用它。對于響應式設計,這些設備中的每一個都將具有動態加載和顯示的設計,并且適合所有屏幕分辨率。這意味著一種設計可以滿足所有設備的需求,但外觀并不相同。并且它們可能未針對每個特定分辨率進行優化。兩種實現方式肯定都需要權衡取舍,而執行方式則取決于實際情況。
 
自適應設計的優缺點
 
自適應設計非常適合針對當前設備進行完全優化。無關緊要的數據(無論是圖像,框架還是API端點)都無濟于事。自適應設計的優點是巨大的,尤其是當您處于可以優化所有內容的位置時。
 
好處
 
自適應設計的最大優勢之一是內容是可定制的。由于它是為您的確切設備創建的,因此感覺更相關。與不是專門為該設備設計的響應站點相比,這尤其正確。讓我們看幾個例子。

自適應設計的優點

新款iPhone X,XR和XS的屏幕底部沒有物理主頁按鈕。因此,需要更大的填充區域來適應OS引入的新設計約定。自適應設計將根據新規范進行定制,并且由于您確切地知道要針對的設備,因此將其進行優化以獲得更好的性能-使其更快。

點餐臺

熟食店的自助結賬系統可在特定的觸摸屏平板電腦上運行;相同的結帳流程適用于移動用戶。使用自適應方法,您將有兩種不同的設計:一種用于移動設備,一種用于店內平板電腦。這將使您為每個用戶創建獨特的體驗。店內平板電腦可能不需要菜單,徽標,登錄或移動網站需要的帳戶。兩種解決方案都可以直接針對受眾和設備進行定制。
 
缺點
 
自適應設計的最大缺點是支持多種設計。取決于您的覆蓋面有多大,以及您必須創建多少次迭代,這可能需要一支小隊伍來提供支持。您將需要設計,構建和支持每種體驗。如果您是一支小型團隊或個人,這將是一項艱巨的任務,可能不值得解決。您還可以讓用戶擁有卡在中間的不兼容設計。例如,中型平板電腦的設計可能默認為最接近的尺寸,可以是移動顯示器或臺式機顯示器。這可能會產生奇怪的體驗,并且可能對用戶不利。(提示:為用戶提供兩種模式之間的切換可能是使用戶能夠自校正顯示的一種好方法。)
 
最后,當涉及到SEO和Google閱讀您的域時,可能存在重復內容的問題。如果您的多個網站的內容都位于m.domain.com或t.domain.com URL之類,則Google可能會懲罰您的排名,因為它正在網站上多個位置讀取相同的內容。