【 UI/UX 】RWD / AWD / PWA 網站最佳選擇? - Medium

響應式網站(Responsive Website Design，簡稱RWD); 自適應網站(Adaptive Web Design，簡稱AWD); 漸進式網頁(Progressive Web Apps，簡稱PWA). GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinYACHEN【UI/UX】RWD/AWD/PWA網站最佳選擇?Responsivevs.Adaptivevs.ProgressiveWebDesign人力銀行UI/UX設計師徵才必備條件「熟悉ResponsiveWebDesign(RWD)響應式網頁與MobileWeb網頁製作」，設計人員和開發人員需要製作能夠滿足所有瀏覽器和屏幕尺寸的解決方案，以滿足越來越苛刻的用戶需求！RWD的核心是透過CSS(mediaqueries)的控制，讓同一份網頁能「回應不同的裝置尺寸，呈現出適當的佈局」，同時什麼時候應該變化網頁佈局Breakpoint，簡單來說，一個內容像水一樣，能流動、裝載在不同裝置內。

細分為以下三種響應式網站(ResponsiveWebsiteDesign，簡稱RWD)自適應網站(AdaptiveWebDesign，簡稱AWD)漸進式網頁(ProgressiveWebApps，簡稱PWA)Breakpoints透過網站行動友善測試你的網站。

何謂響應式設計RWD/自適應設計AWD?mytasker響應式網頁適合資訊固定、品牌形象強的網站。

如：Dribbble、Disney、Bootstrap…等不管在哪個裝置下內容都塞好塞滿，所需維護成本低，SEO排名更前面，來自谷歌爸爸的解說：「不管裝置如何都使用相同的URL，但會根據服務器對用戶瀏覽器的了解為不同的裝置，生成不同版本的HTML，所以搜索排行高」，缺點則是，不同設備上的佈局有限，而且比自適應性網站慢。

The10BestResponsiveWebsitesGoodresponsivewebsites(Googleresult)自適應網頁適合網站資訊量大。

如：購物平台、迪卡儂、紐約時報、淘寶…等以手機為優先(mobilefirst下圖)的設計概念，並針對每個用戶進行不同裝置佈局優化，並且比響應式網站快兩到三倍，易於跟踪用戶分析，製作耗時、不易維護、搜索引擎不友好，需要仔細的流量分析以優化用戶體驗。

The5BestAdaptiveWebsitesAmazonAppleAvenue32USATodayAbout.comFROONTMobileorDesktopfirstProgressiveWeb漸進式網頁，新勢力入侵ProgressiveWebApplication(PWA)是一種新式的網路應用程式概念，最早是在2015年被提出，並且在次年的GoogleI/O大會上列入重點開發項目，如今Google成為PWA的主要推手之一，也與Magento緊密合作，推動PWA在電商領域上的應用，同時Google也維護相當多有關於PWA的研究與參考資料，有興趣的朋友可以前往他們的官方網站參考看看。

轉自Astralweb星巴克PWA能夠以離線模式運行，從而使客戶能夠瀏覽菜單，並將商品添加到購物車中，而這一切都無需持續連線Internet。

上網後，可以直接查看特價格並下達食物和飲料訂單。

UberPWA在使汽車預訂在低速網絡上可行，引入超輕量級的Web應用程序中，當Uber用戶在於低網速狀況下。

依舊能在2G網絡加載，大多數PWA都可在沒有網絡連接的情況下瀏覽之前加載的頁面。

12BestProgressiveWebApps(PWAs)in2020StarbucksHousing.comDigikalaFlipboardSoundslice2048GameMakeMyTripUberPadpiperPinterestYummlySpotify文章撰寫：亞宸現任迪卡儂網頁設計師，喜歡美的事物、喜歡酒。

希望大家多多運動，上迪卡儂買全套運動用品，身體健康、一生平安。

不定期在Medium分享所有感興趣的話題。

喜歡這篇文章的朋友，「拍手👏」給鼓勵，超喜歡可以拍到50個喔。

更多相關文章...moreMorefromYACHENSeniorProductdesignerandhasbeenleadingprojectsandteamsforthelast3.I’mespeciallypassionateaboutdesigningsolutionsthatprovideequityandaccessibleforall.ReadmorefromYACHENAboutHelpTermsPrivacyGettheMediumappGetstarted亞宸202FollowersPortfolio：http://bacchuspirit.com/portfolio.htmlFollowHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable