網頁基礎篇：從零開始認識RWD與AWD！

網站設計

UI UX AWD RWD 網站設計
網頁基礎篇：從零開始認識RWD與AWD！
現今的時代人們大多數透過手機瀏覽企業和賣場的網站，這樣的趨勢促使新網站更注重適應手機尺寸，甚至逐漸有「手機優先」的概念。因此RWD（響應式網頁設計）與AWD（適應性網頁設計）是現今的主流趨勢，讓網站從手機打開也可以很漂亮、好閱讀！
目錄

什麼是RWD？

RWD全名「Responsive Web Design」，中文翻譯為「響應式網頁設計」。是目前最為廣泛使用的一種網頁設計的方法，讓網站能夠根據不同設備和螢幕尺寸提供最佳的呈現效果。 簡單來說，就是使用彈性的網格系統和相對單位，使網站元素的大小和位置能夠自動調整，以適應不同的螢幕大小。圖片能根據使用的螢幕大小而調整，確保圖片在不同設備上都能以最佳方式呈現。

舉例來說，一個公司的企業網站，這個網站可能包含產品信息、公司歷史以及聯絡方式。使用RWD的話，當用戶從桌面電腦轉換到平板或手機時，網站的佈局和內容會自動調整，以確保信息在不同設備上都能夠被清晰顯示。


什麼是AWD？

AWD全名「Adaptive Web Design」，中文翻譯為「適應性網頁設計」。是在RWD推出之前就有的技術，目的是根據使用者設備的特點和能力提供更適切的網頁版本。

AWD 使用伺服器端的技術來檢測訪問網站的設備，包括裝置的螢幕大小、瀏覽器版本等，這使得伺服器能夠根據這些特徵提供適當的網頁版本，確保在各種裝置下皆能有最佳的使用體驗。但也由於每個版本都是固定的，再需要維護多個版本的情況下，維護成本就會相對RWD更高。

想像一個電子商務網站，商品種類、項目眾多，該網站可能就需要一個專門針對桌面的版本，另一個針對平板，還有一個針對手機，並針對個別版本優化商品展示和購物流程，以更好地滿足特定設備的需求。


RWD與AWD的差別？

最主要的差別在於，RWD是網站上元件位置會適應螢幕大小而自動調整位置，而AWD則是針對每個裝置尺寸做獨立設計。

特點 RWD（響應式網頁設計） AWD（適應性網頁設計）
主要目標 提供在不同裝置上一致的用戶體驗 根據裝置的特點優化使用體驗
響應性 彈性佈局適應於各尺寸，元素大小和位置能夠自動調整 更依賴於伺服器端偵測，並直接載入裝置對應的元素版本（PC版或手機版）
設計靈活性 適用於各種尺寸的裝置 針對每一種裝置做客製化的設計
適用範圍 廣泛應用於不同類型的網站，特別是內容為主的網站 針對每一種裝置做客製化的設計
設計靈活性 適用於各種尺寸的裝置 針對不同裝置進行個別的設計，適合網站結構較複雜、功能性多的網站
實作難度 相對較容易實施，設計相對簡潔 相對複雜，需要更多伺服器端的處理和優化
網站性能 一次載入所有PC版以及手機版的資源，可能影響網站載入速度 根據裝置（PC版或手機版）需求載入對應的資源，網站載入速度相對較快
維護成本 單一頁面維護，成本較低 多個頁面維護，成本較高


我該選擇RWD與AWD？

當我們準備架設一個網站並選擇需要使用RWD還是AWD，我們有幾個面向可以思考：

  • 目標受眾

    如果網站主要以內容為主，而且在不同裝置上希望呈現相同的元素及使用體驗，RWD會是是一個理想的選擇。相反，如果您的網站需要針對不同裝置提供不同的內容和功能，AWD會更適合。

  • 網站類型

    網站若是以官方網站、企業形象網站等以內容為主的網站，不需要複雜的特定裝置介面優化，並且重視在不同的裝置上希望有相同的使用體驗，會推薦採用RWD的作法。但若是要製作大型的購物、社交平台或是功能導向的網站等，內容相對多量，為了讓各種裝置的受眾都有好的操作體驗，則會推薦使用AWD製作。

  • 維護預算

    AWD的開發因應所需要的裝置版本，可能相當於製作多個網站前台，除了製作時程會因此拉更長，後續維運上的成本也相較RWD更高。若是以基本的形象網站為前提，RWD的CP值最高！

選擇因素 RWD AWD
基本網站需求 ✓  
預算金額 ✓  
一致的用戶體驗 ✓  
複雜的裝置需求   ✓
對性能優化有需求   ✓
高度客製化設計   ✓

RWD與AWD哪種對SEO比較好？

是否對於SEO比較好，我們需要知道SEO的規則主要有：網站回應速度（網站效能）、使用者體驗、結構化資料、行動版網站的內容與電腦版網站相同。也就是說在所有條件都相同的情況下，網頁RWD與AWD對於網站其實沒有太大的差別。


延伸閱讀： 輕鬆了解「結構化資料」對於 SEO 優化超加分！

網站效能檢視工具 Google Pagespeed Insights

為了更有效率的優化網站，google的提供的免費工具 Google Pagespeed Insights >> 可以為網站來檢測效能。直接輸入網址就能夠看見網站網站的優化建議以及速度評分，分數90 分以上即表示良好（綠色圓圈），50 至 89 分代表需要改善（橘色方塊），低於 50 分則代表不佳（紅色三角形）。通常建議數直接維持80分以上喔！


使用者體驗檢視工具 Google Search Console

針對使用者體驗google也有提供的免費工具 Google Search Console >> 可以針對查看網站用戶的使用者體驗，內容、設計及字體大小或網站速度等都會列入評判基準，若有待改善或不良的問題也會列出，修正後可以重新提交確認是否已經修正完畢。


結論

選擇 RWD 還是 AWD 取決於具體需求，如果網站內容相對簡單可以選擇RWD，如果更重視手機端的用戶體驗和性能，並且網站資訊量相對多的話就會建議做AWD。
最終維護成本以及擴充需求也是重要的考量因素，在做決定之前，最好進行詳細的需求分析和討論。
還在思考網站需要使用的類型嗎？趕快聯繫我們諮詢吧！

文章編輯

文章編輯：Alice Zhang

圖文編輯：Amy S Chou

上一篇

 回列表

推薦文章

如果您喜歡我們的文章，歡迎分享! 有相關問題也歡迎與我們聯繫