響應式與自适應設計(jì):設計(jì)師(shī)的(de)最佳選擇是什(shén)麽?

作爲全球先進的(de)科技巨頭，Google一直推崇響應式網頁設計(jì)，并在今年的(de)4月(yuè)21日發布了重大(dà)的(de)更新，目的(de)是提高(gāo)響應式在移動終端上(shàng)的(de)運行(xíng)效率。盡管在更新中沒有(yǒu)明(míng)确表明(míng)你(nǐ)必須使用(yòng)響應式設計(jì)。隻是簡單的(de)提示響應式設計(jì)擁有(yǒu)不錯的(de)UX和(hé)優越的(de)性能(néng)，是移動設計(jì)方面的(de)一個(gè)不錯的(de)選擇。

考慮到(dào)這一點，讓我們一起來測試一下“響應式設計(jì)”與“自适應設計(jì)”在性能(néng)和(hé)用(yòng)戶體驗上(shàng)各自的(de)利弊。

自移動終端設備全面普及後，争論最爲激烈的(de)是我們在響應式設計(jì)，自适應設計(jì)和(hé)獨立的(de)手機網站（擁有(yǒu)獨自的(de)M.URL）該做何選擇。基于本文(wén)章(zhāng)的(de)討(tǎo)論重點，我們先避開(kāi)獨立的(de)手機網站不談，因爲它似乎不太受設計(jì)師(shī)和(hé)企業(yè)的(de)歡迎，可(kě)能(néng)是因爲它必須得單獨創建的(de)原因吧(ba)。（前期的(de)開(kāi)發和(hé)後期的(de)維護成本都(dōu)很大(dà)）

兩者的(de)區别？

首先，響應式和(hé)自适應最爲關鍵的(de)區别是什(shén)麽呢？

簡而言之，響應式就相(xiàng)當于液體，它可(kě)以自動适應不同尺寸的(de)屏幕，無論你(nǐ)的(de)設備尺寸多麽奇葩。響應式使用(yòng)CSS media queries的(de)方法，根據目标設備自動改變風格如(rú)顯示類型,寬度、高(gāo)度等，這能(néng)很好解決不同屏幕尺寸的(de)顯示問題。

而自适應設計(jì)是基于斷點使用(yòng)靜态布局，一旦頁面被加載就無法再進行(xíng)自動适應，自适應會(huì)自動檢測屏幕的(de)大(dà)小(xiǎo)來加載适當的(de)工(gōng)作布局，也(yě)就是說，當你(nǐ)要采用(yòng)自适應設計(jì)網站時，你(nǐ)得一個(gè)一個(gè)設計(jì)6種常見的(de)屏幕布局。

1.320
2.480
3.760
4.960
5.1200
6.1600.

顯然，自适應設計(jì)需要做更多的(de)工(gōng)作，你(nǐ)必須至少(shǎo)設計(jì)6種常見的(de)布局。而響應式設計(jì)可(kě)以更好地(dì)适應複雜的(de)媒體設備要求，能(néng)很好地(dì)解決顯示和(hé)性能(néng)問題。

特别是後者，這幾年有(yǒu)著(zhe)諸多的(de)争議。因爲許多網站提供的(de)是完整的(de)桌面模型，即便沒有(yǒu)在移動端加載，但(dàn)也(yě)會(huì)明(míng)顯拖慢(màn)網站的(de)速度。爲了解決這一問題，我們可(kě)以用(yòng)CSS3 的(de)media queries解決方案，但(dàn)會(huì)有(yǒu)一些折衷，因爲響應式網站無法達到(dào)專門的(de)移動網站那樣快。

爲什(shén)麽使用(yòng)自适應設計(jì)？

自适應可(kě)用(yòng)于改造現有(yǒu)的(de)網站使其更好地(dì)适應移動端。這使你(nǐ)的(de)設計(jì)可(kě)控制(zhì)和(hé)開(kāi)發多個(gè)特定的(de)視圖。你(nǐ)開(kāi)發視圖的(de)數量完全取決于你(nǐ)，你(nǐ)的(de)公司和(hé)全面的(de)預算。然而，它也(yě)提供了一定量的(de)控件(jiàn)（例如(rú)在内容和(hé)布局上(shàng)），如(rú)此你(nǐ)便無須使用(yòng)響應式設計(jì)。

通常,你(nǐ)首先會(huì)設計(jì)一個(gè)低分(fēn)辨率視圖,制(zhì)定你(nǐ)自己的(de)方法确保設計(jì)不會(huì)被内容所限制(zhì)。

正如(rú)前面所提到(dào)的(de)，它那六個(gè)标準的(de)設計(jì)布局。然而，你(nǐ)可(kě)以通過查看你(nǐ)網站，分(fēn)析最爲常用(yòng)的(de)設備，然後決定這些視圖該如(rú)何設計(jì)。

如(rú)果你(nǐ)想在scratch上(shàng)從頭設計(jì)一個(gè)自适應網站也(yě)行(xíng)。從最低的(de)分(fēn)辨率開(kāi)始設計(jì)，制(zhì)定你(nǐ)自己的(de)方法。接著(zhe)你(nǐ)可(kě)以用(yòng)CSS3 的(de)media queries擴展更高(gāo)分(fēn)辨率的(de)布局視圖。當你(nǐ)設計(jì)多種分(fēn)辨率時你(nǐ)會(huì)發現，在改變窗口大(dà)小(xiǎo)的(de)時候将會(huì)“跳出”布局。

自适應網站可(kě)以用(yòng)于設計(jì)和(hé)開(kāi)發一個(gè)擁有(yǒu)多個(gè)自适應視圖的(de)網站。所以這種設計(jì)通常用(yòng)于改造網站。

爲什(shén)麽使用(yòng)響應式設計(jì)？

現在絕大(dà)多數網站都(dōu)使用(yòng)響應式設計(jì)，它适合缺乏經驗的(de)設計(jì)師(shī)和(hé)開(kāi)發人(rén)員使用(yòng)。可(kě)用(yòng)的(de)主題可(kě)以直接從CMS系統（如(rú)Wordpress，Joomla和(hé)Durpal）獲取。

相(xiàng)比自适應網站，響應式網站省去了很多的(de)控件(jiàn)，同時也(yě)省去了不少(shǎo)建立和(hé)維護的(de)功夫。響應式布局就是一種流體，在按百分(fēn)比縮放(fàng)時也(yě)能(néng)相(xiàng)當的(de)流暢。這也(yě)可(kě)能(néng)再次導緻“跳出”當你(nǐ)在調整窗口大(dà)小(xiǎo)時。如(rú)下圖，下圖現實的(de)是一個(gè)流體布局，設計(jì)師(shī)使用(yòng)百分(fēn)比縮放(fàng)時，視圖将會(huì)被自動地(dì)調整。

使用(yòng)響應式設計(jì)，你(nǐ)要記住所以的(de)布局。這當然可(kě)能(néng)會(huì)使過程混亂，并且使設計(jì)更加複雜。這就意味著(zhe)你(nǐ)應該專注于中等分(fēn)辨率的(de)視圖，然後再用(yòng)media querie調整爲更低或更高(gāo)的(de)分(fēn)辨率。

所以通常的(de)做法是，在一個(gè)新的(de)項目中使用(yòng)響應式設計(jì)，在後期的(de)改造中使用(yòng)自适應設計(jì)。

再三思考

正如(rú)前面所討(tǎo)論的(de),響應網站會(huì)在網站速度有(yǒu)所弊端(如(rú)果他(tā)們沒有(yǒu)正确地(dì)實現)。

響應式在編碼時要求也(yě)比較嚴格，以确保适應每塊訪它的(de)屏幕。然而額外的(de)工(gōng)作也(yě)是值得商討(tǎo)的(de)，因爲自适應設計(jì)要求爲每一個(gè)布局單獨開(kāi)發和(hé)維護HTML和(hé)CSS代碼。修改自适應網站也(yě)相(xiàng)當麻煩。因爲當它實現的(de)時候你(nǐ)得确保每一個(gè)功能(néng)（如(rú)SEO，内容和(hé)鏈接）能(néng)正常運行(xíng)。

當然,你(nǐ)應該也(yě)要考慮用(yòng)戶體驗。因爲響應式基本上(shàng)打亂了周圍的(de)内容以确保流暢符合設備窗口,你(nǐ)需要特别注意的(de)是視覺層次結構設計(jì),因爲它周圍的(de)内容已被打亂。

根據Amy Schade的(de)觀點，響應式設計(jì)往往會(huì)造成另外一個(gè)難題，那就是如(rú)何重組大(dà)頁面的(de)元素以适應既小(xiǎo)有(yǒu)長的(de)頁面，反之亦然。然而，單是确保元素适應頁面是遠遠不夠的(de)。爲了響應式設計(jì)更加成功，設計(jì)也(yě)必須确保屏幕的(de)分(fēn)辨率和(hé)尺寸能(néng)夠适應。

所以，無論你(nǐ)采用(yòng)哪種技術(shù)都(dōu)沒有(yǒu)捷徑可(kě)言，都(dōu)需要确保所創建的(de)網站能(néng)适應所有(yǒu)的(de)屏幕。響應式稍占優勢，你(nǐ)無須花大(dà)量的(de)時間在網站的(de)維護上(shàng)。

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

歸根結底，最重要的(de)是要考慮你(nǐ)用(yòng)戶屬于哪類群體，不管你(nǐ)采用(yòng)哪種設計(jì)方式，一旦你(nǐ)知道他(tā)們的(de)習(xí)慣，知道他(tā)們更傾向于用(yòng)什(shén)麽設備訪問該網站，你(nǐ)在設計(jì)你(nǐ)的(de)網站時該采用(yòng)哪種方式，哪種布局，想法自然會(huì)湧現出來。

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

記住這點，如(rú)果僅僅是考慮屏幕的(de)兼容問題，可(kě)以有(yǒu)把握的(de)說，那響應式設計(jì)通常是首選技術(shù)。

然而，如(rú)果客戶和(hé)公司存在預算，自适應設計(jì)可(kě)能(néng)是更好的(de)選擇。根據Catchpoint進行(xíng)的(de)一個(gè)測試，他(tā)們在Wordpress創建兩個(gè)網站，一個(gè)使用(yòng)标準的(de)WP TwentyFourteen響應式主題,另一個(gè)使用(yòng)一個(gè)名爲Wiziapp的(de)插件(jiàn)。

插件(jiàn)基于他(tā)們訪問該網站的(de)設備向用(yòng)戶提供了移動主題，還提供了高(gāo)級的(de)配置選項，這樣就可(kě)以進一步簡化整個(gè)流程。

結果加載所用(yòng)的(de)時間如(rú)下表：

還應該強調一點，這沒有(yǒu)進行(xíng)任何優化。但(dàn)這确實表明(míng)，響應式網站需要下載桌面所需的(de)東西(xī)。如(rú)此表明(míng)，主題并不能(néng)提供很好的(de)性能(néng)。

再次強調一下，media queries可(kě)以克服這個(gè)問題。至于爲什(shén)麽使用(yòng)響應式設計(jì)，上(shàng)面就是一個(gè)很好的(de)例子。然而流行(xíng)并不代表是最好的(de)。在最好的(de)東西(xī)出現之前，我們很難知道我們能(néng)做什(shén)麽，除了學習(xí)如(rú)何正确的(de)代碼規範和(hé)實現一個(gè)很好網站。

結論：

響應式設計(jì)将會(huì)保持受歡迎的(de)趨勢，這可(kě)能(néng)是因爲我們還沒有(yǒu)找到(dào)一個(gè)更好解決重大(dà)維護和(hé)适應性要求。自适應設計(jì)也(yě)還沒有(yǒu)滅亡，盡管不太受程序員的(de)待見。有(yǒu)一點是肯定的(de)，我們将會(huì)看到(dào)一些改進，完善現階段所出現的(de)問題。替代響應式設計(jì)的(de)技術(shù)也(yě)在不遠将來浮出水(shuǐ)面。