RWD響應式網站 vs AWD自適應式網站,設計師的最佳選擇是什麼?

Time:2020/01/01

RWD響應式網站設計 vs AWD自適應式網站設計

成為我們作為網站設計師和UI、UX設計師的重要選擇。

有見識的選擇可以使您以更好的目標,目的和結果來計劃和執行設計。

隨著移動設備的普及和多樣性,作為設計師,我們需要迎合各種屏幕尺寸。

這是每個網絡和應用程序設計師當前面臨的挑戰。

 

Google一直建議使用自適應網頁設計(RWD),尤其是在2015年4月21日發布了重大更新後,該網站將移動設備友好型網站的排名提高了。

但是,它在更新中並未指定您必須使用響應式設計,只是指定了可在移動設備上訪問的網站,並具有良好的用戶體驗和性能。

考慮到這一點,讓我們在性能和用戶體驗方面考察自適應與響應式設計的優缺點。

自適應Web設計(AWD)還是獨立的移動網站(具有自己的網址)。

 

RWD響應式網頁設計

(英語:Responsive web design,通常縮寫為RWD),

是一種網頁設計的技術做法,該設計可使網站設計在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。

對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,

使用此種設計方式將更易於維護網頁。 此概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出。

 

採用 RWD 網站設計的網站使用CSS3 Media queries,即一種對 @media 規則的擴充,

以及串流的基於比例的網格和自適應大小的圖像以適應不同大小的裝置:

串流網格概念要求頁面元素使用相對單位如百分比或字型排印學調整大小,而不是絕對的單位如像素或點。

靈活的圖像也以相對單位調整大小(最大到 100%),以防止它們顯示在包含它們的元素外面。

Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則,最常用的是瀏覽器的寬度。

回應式網頁設計變得更加重要,因為移動流量現在占網際網路流量的一半以上。

因此,Google宣布行動裝置時代的到來(Mobilegeddon)(2015年4月21日),並開始提高移動友好的網站設計的評級,如果搜尋是被從一個行動裝置發起。

 

AWD自適應式網站

(英語:Adaptive Web Design,通常縮寫為AWD)
手機、桌機網址,可以做到完全一樣。

不同的裝置開啟時,會先判定裝置是哪一種,來給予不同的 CSS,進而改變排版。

所以也可能會有不同的 HTML 文本、CSS、JavaScript 檔案。

 

自適應和響應設計之間有何區別?

那麼首先, RWD 和 AWD 設計之間的主要區別是什麼?

簡而言之,無論目標設備是什麼,響應都是流暢的,並適應屏幕的大小。

響應式使用CSS媒體查詢來根據目標設備更改樣式,例如顯示類型,寬度,高度等,

並且站點只需要其中之一就可以適應不同的屏幕。

另一方面,AWD設計使用基於斷點的靜態佈局,這些斷點在最初加載時不會響應。

AWD可檢測螢幕尺寸並為其加載適當的排列,通常,會針對六個常見螢幕寬度設計一個RWD切換數據:

  • 320
  • 480
  • 760
  • 960
  • 1200
  • 1600

從表面上看,AWD設計似乎需要更多的工作,因為您必須設計至少六個寬度的建置。

 

那為什麼還有人要使用AWD自適應設計?

AWD對改造現有的網站很有用,以使其對移動設備更加友好。

因為這可以讓公司針對特定的螢幕寬度尺寸進行開發,像是公司的網站主要客戶為手機使用者,

AWD可以針對手機的內容與排版特別製作、優化成對於手機裝置使用者最好的介面排版。

如前所述,設計六種寬度尺寸的規範是標準的。

但是,可以透過網站的數據分析,例如GA來查看最常用裝置,並為這些裝置進行設計來做出更明智的決定。

 

 

聯絡我們

電話:(02)8663-9590

專員:0983-316-190

信箱:shg4c209@gmail.com

臺北市文山區辛亥路四段128之11號9樓

(週一至週五 上午9:30~12:00 下午1:00~6:30)