Zi 字媒體

如何做互聯網產品的響應式設計

2021/12/25

作為全球先進的科技巨頭，Google一直推崇響應式網頁設計，並在今年的4月21日發布了重大的更新，目的是提高響應式在移動終端上的運行效率。儘管在更新中沒有明確表明你必須使用響應式設計。只是簡單的提示響應式設計擁有不錯的UX和優越的性能，是移動設計方面的一個不錯的選擇。

考慮到這一點，讓我們一起來測試一下「響應式設計」與「自適應設計」在性能和用戶體驗上各自的利弊。

自移動終端設備全面普及后，爭論最為激烈的是我們在響應式設計，自適應設計和獨立的手機網站（擁有獨自的M.URL）該做何選擇。基於本文章的討論重點，我們先避開獨立的手機網站不談，因為它似乎不太受設計師和企業的歡迎，可能是因為它必須得單獨創建的原因吧。（前期的開發和後期的維護成本都很大）

兩者的區別？

首先，響應式和自適應最為關鍵的區別是什麼呢？

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

而自適應設計是基於斷點使用靜態布局，一旦頁面被載入就無法再進行自動適應，自適應會自動檢測屏幕的大小來載入適當的工作布局，也就是說，當你要採用自適應設計網站時，你得一個一個設計6種常見的屏幕布局。

1.320
2.480
3.760
4.960
5.1200
6.1600

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

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

為什麼使用自適應設計？

自適應可用於改造現有的網站使其更好地適應移動端。這使你的設計可控制和開發多個特定的視圖。你開發視圖的數量完全取決於你，你的公司和全面的預算。然而，它也提供了一定量的控制項（例如在內容和布局上），如此你便無須使用響應式設計。

通常,你首先會設計一個低解析度視圖,制定你自己的方法確保設計不會被內容所限制。

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

如果你想在scratch上從頭設計一個自適應網站也行。從最低的解析度開始設計，制定你自己的方法。接著你可以用CSS3 的media queries擴展更高解析度的布局視圖。當你設計多種解析度時你會發現，在改變窗口大小的時候將會「跳出」布局。

自適應網站可以用於設計和開發一個擁有多個自適應視圖的網站。所以這種設計通常用於改造網站。

為什麼使用響應式設計？

現在絕大多數網站都使用響應式設計，它適合缺乏經驗的設計師和開發人員使用。可用的主題可以直接從CMS系統（如Wordpress，Joomla和Durpal）獲取。

相比自適應網站，響應式網站省去了很多的控制項，同時也省去了不少建立和維護的功夫。響應式布局就是一種流體，在按百分比縮放時也能相當的流暢。這也可能再次導致「跳出」當你在調整窗口大小時。如下圖，下圖現實的是一個流體布局，設計師使用百分比縮放時，視圖將會被自動地調整。

使用響應式設計，你要記住所以的布局。這當然可能會使過程混亂，並且使設計更加複雜。這就意味著你應該專註於中等解析度的視圖，然後再用media querie調整為更低或更高的解析度。

所以通常的做法是，在一個新的項目中使用響應式設計，在後期的改造中使用自適應設計。

再三思考

正如前面所討論的,響應網站會在網站速度有所弊端(如果他們沒有正確地實現)。

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

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

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

所以，無論你採用哪種技術都沒有捷徑可言，都需要確保所創建的網站能適應所有的屏幕。響應式稍佔優勢，你無須花大量的時間在網站的維護上。

哪種技術更優越？

歸根結底，最重要的是要考慮你用戶屬於哪類群體，不管你採用哪種設計方式，一旦你知道他們的習慣，知道他們更傾向於用什麼設備訪問該網站，你在設計你的網站時該採用哪種方式，哪種布局，想法自然會湧現出來。

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

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

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

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

結果載入所用的時間如下表：

還應該強調一點，這沒有進行任何優化。但這確實表明，響應式網站需要下載桌面所需的東西。如此表明，主題並不能提供很好的性能。

再次強調一下，media queries可以克服這個問題。至於為什麼使用響應式設計，上面就是一個很好的例子。然而流行並不代表是最好的。在最好的東西出現之前，我們很難知道我們能做什麼，除了學習如何正確的代碼規範和實現一個很好網站。

結論：

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

去年上半年，我開始著手推動項目中響應式設計的落地。以官網優化需求為契機，主動去做了響應式的頁面設計，也說服了產品、設計和開發的相關同事一起把它上線落實。但不幸的是，由於各種方面的原因，比如，生搬硬套的PC模塊，無差異化的設計使得移動端閱讀不佳，導航兼容性有限等等原因，上線幾個月後又悄然下線。我不禁反思，項目中是否應該推行響應式？今年年初重新啟動了全站響應式項目，從產品、交互、視覺到開發，各個角色全方面參與了響應式項目，最終門戶的頁面實現全面響應式。在項目過程中有技術沉澱，也有不少的思考，也就有了以下的文字。文章的內容圍繞四個方面，響應式的概念，實踐方法，一些案例，以及一些看法。

概念

Ehan Marcotte 為A List Apart寫過一篇介紹型的文章 <響應式網頁設計> 。文中講到響應式的概念源自響應式建築設計，即房間或者空間會根據其內部人群數量和流動而變化。

最近一門新興的學科「響應式建築(responsive architecture)」開始在探討物理空間根據流動於其中的人進行響應的方法。建築師們通過把嵌入式機器人與可拉伸材料結合的方法，嘗試藝術裝置和可彎曲、伸縮和擴展的牆體結構，達到根據接近人群的情況變化的效果。運動感測器與氣候控制系統相結合，調整圍繞人們周圍的房間的溫度以及環境照明。已經有公司製造了「智能玻璃技術」，當室內人數達到一定的閥值時，它可以自動變為不透明狀態，為人們提供更多隱私保護。

Web響應式設計的概念與之也非常相似。在如今技術飛快發展的時代，一向是以快論英雄，設備和解析度日新月異，就以分類相對明晰的iPhone為例，就有多達4種的解析度和屏幕尺寸，更別提廠商蓬勃發展的安卓機領域。因此，為每種設備或者特定設備解析度制定相應的獨立版本是非常費時費力的事情。

Web響應式設計的理念，應當是，頁面可以根據用戶的設備環境，包括系統，解析度，屏幕尺寸等等因素，進行自髮式調整，提供更適合當前環境的閱讀和操作體驗，對已有和未來即將出現的新設備有一定的適應能力。

實踐

有了概念，一定要談談實現的方法。類似於響應式建築，Web頁面也有對應關鍵因素。