響應(yīng)式建站與自適應(yīng)建站兩者的區(qū)別:設(shè)計師如何選擇?

響應(yīng)式布局等于流動網(wǎng)格布局，而自適應(yīng)布局等于使用固定分割點來進行布局。作為全球先進的科技巨頭，Google一直推崇響應(yīng)式網(wǎng)頁設(shè)計，并在15年的4月21日發(fā)布了重大的更新，目的是提高響應(yīng)式在移動終端上的運行效率。盡管在更新中沒有明確表明你必須使用響應(yīng)式設(shè)計。隨著大屏智能手機以及ipad等通訊設(shè)備的廣泛應(yīng)用，網(wǎng)站樣式風格也與時俱進，在滿足PC端計算機的瀏覽時，移動端同樣適合訪客瀏覽，只是簡單的提示響應(yīng)式設(shè)計擁有不錯的UX和優(yōu)越的性能，是移動設(shè)計方面的一個不錯的選擇。

自適應(yīng)布局給了你更多設(shè)計的空間，因為你只用考慮幾種不同的狀態(tài)。而在響應(yīng)式布局中你卻得考慮上百種不同的狀態(tài)。雖然絕大部分狀態(tài)差異較小，但仍然也算做差異。它使得把握設(shè)計最終效果變得更難，同樣讓響應(yīng)式布局更加的難以測試和預(yù)測。
但同時說難，這也算是響應(yīng)式布局美的所在。在考慮到表層級別不確定因素的過程中，你也會因此更好的掌握一些基礎(chǔ)知識。當然，要做到精確到像素級別的去預(yù)測設(shè)943*684像素視區(qū)里的樣子是很難的，但是你至少可以很輕松的確定它是能夠正常工作的，因為頁面的基本特性和布局結(jié)構(gòu)都是根據(jù)語義結(jié)構(gòu)來部署的。

作為一些企業(yè)公司和個人，他們在網(wǎng)絡(luò)營銷方面有著更加嚴格的需求，既要符合網(wǎng)站品牌形象和訪客的體驗度，又要網(wǎng)站符合搜索引擎規(guī)則，進行網(wǎng)站優(yōu)化等工作變得尤為重要，而作為作為最常用的網(wǎng)站形式，自適應(yīng)網(wǎng)站和響應(yīng)式網(wǎng)站到底有什么不同呢？

考慮到這一點，讓我們一起來測試一下“響應(yīng)式設(shè)計”與“自適應(yīng)設(shè)計”在性能和用戶體驗上各自的利弊。

自移動終端設(shè)備全面普及后，爭論最為激烈的是我們在響應(yīng)式設(shè)計，自適應(yīng)設(shè)計和獨立的手機網(wǎng)站（擁有獨自的M.URL）該做何選擇?；诒疚恼碌挠懻撝攸c，我們先避開獨立的手機網(wǎng)站不談，因為它似乎不太受設(shè)計師和企業(yè)的歡迎，可能是因為它必須得單獨創(chuàng)建的原因吧。（前期的開發(fā)和后期的維護成本都很大）

兩者的區(qū)別？

首先，響應(yīng)式和自適應(yīng)最為關(guān)鍵的區(qū)別是什么呢？

簡而言之，響應(yīng)式就相當于液體，它可以自動適應(yīng)不同尺寸的屏幕，無論你的設(shè)備尺寸多么奇葩。響應(yīng)式使用CSS media queries的方法，根據(jù)目標設(shè)備自動改變風格如顯示類型,寬度、高度等，這能很好解決不同屏幕尺寸的顯示問題。

而自適應(yīng)設(shè)計是基于斷點使用靜態(tài)布局，一旦頁面被加載就無法再進行自動適應(yīng)，自適應(yīng)會自動檢測屏幕的大小來加載適當?shù)墓ぷ鞑季?，也就是說，當你要采用自適應(yīng)設(shè)計網(wǎng)站時，你得一個一個設(shè)計6種常見的屏幕布局。

1.320
2.480
3.760
4.960
5.1200
6.1600.


顯然，自適應(yīng)設(shè)計需要做更多的工作，你必須至少設(shè)計6種常見的布局。而響應(yīng)式設(shè)計可以更好地適應(yīng)復(fù)雜的媒體設(shè)備要求，能很好地解決顯示和性能問題。

特別是后者，這幾年有著諸多的爭議。因為許多網(wǎng)站提供的是完整的桌面模型，即便沒有在移動端加載，但也會明顯拖慢網(wǎng)站的速度。為了解決這一問題，我們可以用CSS3 的media queries解決方案，但會有一些折衷，因為響應(yīng)式網(wǎng)站無法達到專門的移動網(wǎng)站那樣快。

為什么使用自適應(yīng)設(shè)計？

自適應(yīng)可用于改造現(xiàn)有的網(wǎng)站使其更好地適應(yīng)移動端。這使你的設(shè)計可控制和開發(fā)多個特定的視圖。你開發(fā)視圖的數(shù)量完全取決于你，你的公司和全面的預(yù)算。然而，它也提供了一定量的控件（例如在內(nèi)容和布局上），如此你便無須使用響應(yīng)式設(shè)計。

通常,你首先會設(shè)計一個低分辨率視圖,制定你自己的方法確保設(shè)計不會被內(nèi)容所限制。


正如前面所提到的，它那六個標準的設(shè)計布局。然而，你可以通過查看你網(wǎng)站，分析最為常用的設(shè)備，然后決定這些視圖該如何設(shè)計。

如果你想在scratch上從頭設(shè)計一個自適應(yīng)網(wǎng)站也行。從最低的分辨率開始設(shè)計，制定你自己的方法。接著你可以用CSS3 的media queries擴展更高分辨率的布局視圖。當你設(shè)計多種分辨率時你會發(fā)現(xiàn)，在改變窗口大小的時候?qū)疤觥辈季帧?br />
自適應(yīng)網(wǎng)站可以用于設(shè)計和開發(fā)一個擁有多個自適應(yīng)視圖的網(wǎng)站。所以這種設(shè)計通常用于改造網(wǎng)站。


為什么使用響應(yīng)式設(shè)計？

現(xiàn)在絕大多數(shù)網(wǎng)站都使用響應(yīng)式設(shè)計，它適合缺乏經(jīng)驗的設(shè)計師和開發(fā)人員使用?？捎玫闹黝}可以直接從CMS系統(tǒng)（如Wordpress，Joomla和Durpal）獲取。

相比自適應(yīng)網(wǎng)站，響應(yīng)式網(wǎng)站省去了很多的控件，同時也省去了不少建立和維護的功夫。響應(yīng)式布局就是一種流體，在按百分比縮放時也能相當?shù)牧鲿?。這也可能再次導(dǎo)致“跳出”當你在調(diào)整窗口大小時。如下圖，下圖現(xiàn)實的是一個流體布局，設(shè)計師使用百分比縮放時，視圖將會被自動地調(diào)整。


使用響應(yīng)式設(shè)計，你要記住所以的布局。這當然可能會使過程混亂，并且使設(shè)計更加復(fù)雜。這就意味著你應(yīng)該專注于中等分辨率的視圖，然后再用media querie調(diào)整為更低或更高的分辨率。


所以通常的做法是，在一個新的項目中使用響應(yīng)式設(shè)計，在后期的改造中使用自適應(yīng)設(shè)計。


再三思考

正如前面所討論的,響應(yīng)網(wǎng)站會在網(wǎng)站速度有所弊端(如果他們沒有正確地實現(xiàn))。


響應(yīng)式在編碼時要求也比較嚴格，以確保適應(yīng)每塊訪它的屏幕。然而額外的工作也是值得商討的，因為自適應(yīng)設(shè)計要求為每一個布局單獨開發(fā)和維護HTML和CSS代碼。修改自適應(yīng)網(wǎng)站也相當麻煩。因為當它實現(xiàn)的時候你得確保每一個功能（如SEO，內(nèi)容和鏈接）能正常運行。


當然,你應(yīng)該也要考慮用戶體驗。因為響應(yīng)式基本上打亂了周圍的內(nèi)容以確保流暢符合設(shè)備窗口,你需要特別注意的是視覺層次結(jié)構(gòu)設(shè)計,因為它周圍的內(nèi)容已被打亂。

根據(jù)Amy Schade的觀點，響應(yīng)式設(shè)計往往會造成另外一個難題，那就是如何重組大頁面的元素以適應(yīng)既小有長的頁面，反之亦然。然而，單是確保元素適應(yīng)頁面是遠遠不夠的。為了響應(yīng)式設(shè)計更加成功，設(shè)計也必須確保屏幕的分辨率和尺寸能夠適應(yīng)。

所以，無論你采用哪種技術(shù)都沒有捷徑可言，都需要確保所創(chuàng)建的網(wǎng)站能適應(yīng)所有的屏幕。響應(yīng)式稍占優(yōu)勢，你無須花大量的時間在網(wǎng)站的維護上。


哪種技術(shù)更優(yōu)越？

歸根結(jié)底，最重要的是要考慮你用戶屬于哪類群體，不管你采用哪種設(shè)計方式，一旦你知道他們的習慣，知道他們更傾向于用什么設(shè)備訪問該網(wǎng)站，你在設(shè)計你的網(wǎng)站時該采用哪種方式，哪種布局，想法自然會涌現(xiàn)出來。


很大程度上還取決你是現(xiàn)有的網(wǎng)站還是一個新項目。響應(yīng)式設(shè)計已成為首選的設(shè)計技術(shù)和思想，現(xiàn)在有1/8的網(wǎng)站采用響應(yīng)式設(shè)計（雖然這數(shù)字不及自適應(yīng)設(shè)計）。響應(yīng)式設(shè)計增長迅猛，幾乎已經(jīng)達到作為獨立移動網(wǎng)站的相同水平。


記住這點，如果僅僅是考慮屏幕的兼容問題，可以有把握的說，那響應(yīng)式設(shè)計通常是首選技術(shù)。


然而，如果客戶和公司存在預(yù)算，自適應(yīng)設(shè)計可能是更好的選擇。根據(jù)Catchpoint進行的一個測試，他們在Wordpress創(chuàng)建兩個網(wǎng)站，一個使用標準的WP TwentyFourteen響應(yīng)式主題,另一個使用一個名為Wiziapp的插件。


插件基于他們訪問該網(wǎng)站的設(shè)備向用戶提供了移動主題，還提供了高級的配置選項，這樣就可以進一步簡化整個流程。


還應(yīng)該強調(diào)一點，這沒有進行任何優(yōu)化。但這確實表明，響應(yīng)式網(wǎng)站需要下載桌面所需的東西。如此表明，主題并不能提供很好的性能。


再次強調(diào)一下，media queries可以克服這個問題。至于為什么使用響應(yīng)式設(shè)計，上面就是一個很好的例子。然而流行并不代表是最好的。在最好的東西出現(xiàn)之前，我們很難知道我們能做什么，除了學(xué)習如何正確的代碼規(guī)范和實現(xiàn)一個很好網(wǎng)站。


結(jié)論：

響應(yīng)式設(shè)計將會保持受歡迎的趨勢，這可能是因為我們還沒有找到一個更好解決重大維護和適應(yīng)性要求。自適應(yīng)設(shè)計也還沒有滅亡，盡管不太受程序員的待見。有一點是肯定的，我們將會看到一些改進，完善現(xiàn)階段所出現(xiàn)的問題。替代響應(yīng)式設(shè)計的技術(shù)也在不遠將來浮出水面。