最近很多客戶都向我們咨詢有關“響應式網頁設計(Responsive Web Desig)”的問題。下面，就讓Inspirr為大家簡單介紹一下。

網頁設計案例

什麼是響應式網頁設計?

根據WeAreSocial和Hootsuite釋出的最新統計，截至2021年1月，世界人口數量為78.3億，其中全球手機用戶數量為52.2億，相當於世界總人口的66.6%，接近三分之二。自2020年1月以來，手機用戶數量增長了1.8%(約9300萬)，而一人擁有多部移動設備的用戶數量則增長了0.9%，達到80.2億。

另外，根據App Annie的數據顯示，如今全球安卓用戶在手機上花費的時間超過4小時，也就是說過去12個月中，安卓用戶在手機累積花費了超過3.5萬億小時。

從上述數據，我們不難看出，如今的人們愈來愈離不開網絡，尤其是移動網絡。那麼，企業有如何把握商機抓住這批移動用戶量呢?關鍵在於，你的網站是否採用響應式網頁設計。

什麼是響應式網頁設計?簡單來說，響應式網頁設計就是同一個網站，為了因應不同設備或不同熒屏尺寸，在不同解析度下改變網頁的排版佈局，讓用戶能在不同裝置下正常瀏覽同一網站，並為他們提供最佳的視覺體驗。

為什麼建議企業製作網站使用響應式網頁設計?

從響應式網頁設計的含義中，我們知道響應式網頁設計最大的優點就是“方便用戶使用不同裝置瀏覽網站”，但除此之外，響應式網頁設計還有哪些優點值得企業選用?

優點一：網站版面佈局會隨著不同終端設備的熒屏大小而自動改變。

優點二：過往企業需要在不同後台管理不同版本的網站，導致工作量加倍之餘，前期製作成本與後期維護成本也加倍。如今只需要一個後台就能統籌管理所有版本的網站，使網站的日常管理與維護變得更加輕鬆方便，同時也節約網站維護的時間。

優點三：當用戶想分享網頁時，不再因為網站無法兼容其他用戶的網站裝置/瀏覽器不同，而獲得不好的瀏覽效果。

優點四：無論哪種版本的網站，響應式網頁都是採用同一URL和後台管理，能集中網站流量，提高網站SEO權重，使網站SEO優化獲得最佳化。另外，響應式網頁設計還可減少網站後台很多重複內容，並保有網站本身的連結來達到SEO最佳化。

優點五：2020年9月Google已經實行行動優先索引 (Mobile-first indexing) 算法，也就是說如果網站沒有採用響應式網頁設計，可能會對網站SEO排名不利哦!

從全球百大品牌網站參考範例

學習響應式網頁設計的實用技巧

響應式網頁設計案例一：電腦版和手機版呈現一致的風格

品牌：Gillette吉列

網頁設計案例

Gillette吉列的電腦版和手機版網站設計保持一致的視覺風格。即使用戶使用不同終端瀏覽網站也不會產生不適感，同時亦可加深用戶對品牌印象，讓人看到類似設計會聯想到自家品牌的產品。

響應式網頁設計案例二：主視覺改以文字作訊息傳達的主要方式

品牌：戴森Dyson

網頁設計案例

Dyson官網捨棄過往以圖片輪播方式，而改以文字的方式做為主視覺上的訊息傳達手法，使相關訊息更加清晰明確。同時，為避免單純使用文字會讓界面顯得過於單調，Dyson將背景影片壓在文字背後，讓整個視覺效果產生低調奢華的質感。手機版採用電腦版同樣佈局，瞬間提升閱讀時的情景感。

響應式網頁設計案例三：手機和電腦分別載入直式和橫式的情境圖

品牌：SAMSUNG

網頁設計案例

從SAMSUNG官網的原始碼可以發現，他的電腦版網站情境圖為橫式圖像，手機版則是直式圖像，這主要是因為SAMSUNG希望針對不同終端，呈現出最佳圖片尺寸，從而提供更流暢和舒適的用戶體驗。

響應式網頁設計案例四：力求主視覺設計兼容各種瀏覽裝置

品牌：TESLA

網頁設計案例

TESLA官網的首屏設計，特意選用一張將主體上下左右置中的汽車產品照，以兼容於各種無法預測尺寸的終端設備。在電腦版網頁設計中，這張圖片能為整體視覺效果增添高端氣質;而在手機版網頁設計中，則將用戶的注意力都吸引到產品上。

響應式網頁設計案例五：利用單色背景呈現最佳效果

品牌：Burger King漢堡王

網頁設計案例

無論是電腦版還是手機版，Burger King官網的首屏設計都是選用以單色背景的產品圖作為網站主視覺，這種手法恰好也適用於響應式網頁設計。另外，電腦版(左文右圖)手機版(上文下圖)的首屏佈局方式雖然略有不同，但能簡化了響應式網頁在網頁製作上的難度。另外，網站還拿掉了過去常用的多圖輪播，將「廣告訊息」以圖片方式置於首屏下呈現，使整體版面顯得更加簡約。

響應式網頁設計不僅能提高網站的用戶體驗，對提高SEO排名，增加SEO流量亦有利。因此如果你的網站還沒有採用響應式網頁設計技術，最好盡快改善這一問題，避免流失大量用戶之餘，還影響SEO成效。