自適應網頁教學

在這個以行動優先(Mobile First)的年代，有極大部份的消費者，是透過手機連上企業的網站，而以手機上的網站就目前的趨勢來說，有分兩種：響應式網站(Responsive Website Design，簡稱RWD)及自適應網站(Adaptive Web Design，簡稱AWD)。

那對於企業來說，到底該採用那一種呢？我們先來看看實際的情境。

一、購物網站

若在手機上、在電腦上，同樣在Google輸入「思考 書」，Google搜尋結果給的都是一樣的建議，但我點進去看的頁面，卻有很大的不同。

若要說出有什麼最大的不同，是在電腦上，映入眼簾的是這書的頁面，多了非常多的廣告活動。但手機上的頁面就只有書而已。

二、產品品牌網站

Google搜尋「耳機」，在搜尋結果中，找到BOSE 耳機的推薦，點進頁面後，在手機上與電腦上，是一致的視覺介面。

兩者在頁面上的排版元素，基本上是一樣的，只是在電腦版是以Z字型的方式來展開(有興趣的人歡迎用電腦和手機來打開此頁)。

響應式、自適應到底有什麼不同？

① 響應式網站設計：

是上面第二個Bose官網的案例。英文為Responsive Website Design，又稱RWD網站。會依瑩幕大小自己很”流暢地”縮放，至多會有5~6種尺寸大小的分別，這是目前最常見的網頁設計方式，也是趨勢。

1. 優勢：一致的介面體驗，解決了佈局上的管理以因應不同的裝置，而且有著單一URL網址能增進SEO的效果。
2. 劣勢：縮小的過程，更要考量結構上的變動。當層級和資訊量很多的時候，呈現的東西就有限。

② 自適應網站設計：

是上面第一個博客來網站的案例。英文為Adaptive Web Design，又稱AWD網站。只針對電腦、平板、手機三種尺寸來分別，最強調Mobile-First 行動優先，在響應式網站還沒如此盛行的時候(大約是2014年左右)，主要以此種技術為大。

1. 優勢：專門為手機而設計，充分優化了功能。
2. 劣勢：維護要花2倍工，無法完全符合到各種瑩幕大小，所以在一定範圍內還是要有一點響應式的設計。而因為有三種尺寸的網站，在網址上就會需要做特別的管理，比較常見的是在手機上有多一個 m.xxxx.com 開頭的網域，看起來就會有好多個網站。

無論採用響應式或自適應的方式來做，對企業來說，在手機上有個網站這件事的意義是：去除雜訊，留下最核心的事，彰顯出價值，才能引進效益。

那最核心的事是什麼？

對我來說就是這企業的主要業務，書店就是賣書、旅行社就是賣行程、美妝店就是美妝品、3C量販就是3C品、美甲就是美甲服務…等。是偏向企業所提供的產品和服務本身，而在網站上那些廣告、促銷活動，都是附加價值。

因為若產品/服務本身不夠吸引人，那人們也不會再多去看廣告和促銷活動，廣告可以激發人對產品/服務的興趣，促銷活動則是增強這個興趣，但會不會下單購買，最終還是取決於產品/服務，能給消費者帶來什麼好處或解決什麼問題。

那這兩種技術在規劃上，要怎麼來思考？

這需要先了解兩種網站在思考途徑上的差異：

響應式是由大到小

自適應是由小、中、大

所以對響應式的網站來說，怎麼在由大到小的縮放過程中，精粹出只讓使用者做那一個動作。因為總不可能在書店網站裡，透過手機觀看一堆書展主題，這樣頭會昏的，而是要讓使用者快速找到書，加入購物車下單購買才是。

而以自適應來說，由於是從小、中、大，分別來思考，依每種大小來思考什麼是最精簡的核心了，讓這個核心透過不同大小來呈現，我認為要讓這核心以多元的風貌來呈現，才能增加說服力。

了解怎麼思考後，要怎麼選擇採用那一種呢？

➜ 若網站的資訊量很大，並想使用者做很多事

選擇AWD自適應式網站佳，因能客製化手機上的使用體驗。像是網路書店、購物商城…等。

➜ 若網站資訊量沒那麼多，也只希望使用者做很少事

選擇RWD響應式方式佳，因維護起來最方便，也能讓視覺上有一致的體驗。像是品牌官網、小型的購物商城。

無論採用那一種，共同的好處就是？

① 優化過的使用體驗：

才不會讓使用者想做動作的時候，不知道點去那裡，就懵了。

② 讓使用者能專注：

一次只能做一件事，這才能讓使用者盡快達成你希望他做的事。

③ 讓網站速度變快：

這關乎到網站的程式設計上，能否在2~3秒內讓使用者打開網頁，有數據說明當2秒內還無法打開網頁，會有47%的人心生不滿。

現在有許多公司會把facebook就當成官網，因為facebook本身就能因應各種裝置去適應。

而在國外現在一個名詞「Progressive Web」也正興起，它稱為漸進式網頁，這是一種新的響應式網頁的設計，它的特色在於，讓在手機上瀏覽的網頁，長的就像 APP一樣，有點像這樣。

原本APP就大多數而言，就是因應在手機上能最方便使用為設計宗旨，所以讓網頁長的像APP那樣的話，更能符合使用者在手機上的瀏覽方式。

無論是最強調Mobile-First的AWD自適應設計，或是RWD的響應式設計，還是正在崛起的漸進式網頁，最終的目的就是，讓使用者在手機上瀏覽方便，然後引導至企業希望使用者最終達成的行為。

若是企業有許多項希望使用者在手機中的網站上達成的事，那我就會去思考，對企業來說那一項是最重要而且最能帶來效益的事，若不找到核心的話，那使用者只會對企業給的諸多選項而感到迷惑。

以終為始來思考，更能完善地去思考要怎麼慢慢來引導，去舖一條好走的路，而不是一條擁有許多小叉路的路，因為人很容易遇到叉路就分心，對定力不高的人就想去遊玩一下，這樣只會加長走到終點的時間，同時也可能因為走上叉路就回不來了。

若是您喜歡我的文章，歡迎按下👏「拍手」給我支持，或是➕「Follow」我，您的拍手和Follow都是我提供更多文章給您的動力哦！也歡迎🗣留言回饋給我，對這篇文章的想法哦，讓我們一起交流討論。謝謝看到這裡的您，感恩！

碧華國小程式開發研究室

• 列印
• Email

• Web-Design
• RWD

Responsive Web Design 入門

• 深入淺出RWD自適應網頁設計
• Responsive Web Design 響應式網頁設計
• 響應式網頁教學
• 響應式網頁設計(RWD)概述
• 響應式網頁設計 Responsive Web Design by Henry Lin
• Responsive Web Design
• HTML5行動網頁開發實踐
• Web前端性能優化 2014
• Responsive Web Design [rebuild as design]

Bootstrap

• 網頁設計 - Bootstrap前端框架

Responsive Web Design 進階議題

• Responsive websites with Joomla 3 & Bootstrap
• Responsive Web Design 的能與不能
• 設計師你 RWD 了沒
• RWD常見設計模式
• RWD不是你想的那樣
• 企劃人需要理解的響應式網頁設計眉角
• Web Design 設計過程與合作經驗分享
• HTML5行動網頁開發實踐
• Web前端性能優化 2014

• 您目前位置： 
• 首頁
  
• 網頁設計
  
• 響應式網頁設計(RWD) 教學簡報

主選單

• 首頁
  • 程式語言
  • 網頁設計
    • 前端語言
      • JavaScript
      • JavaScript Framework
        • AngularJS
      • HTML & CSS
      • JavaScript Library
        • jQuery
      • WebComponets
    • 後端語言
      • ASP.NET
      • PHP
      • ASP
      • Node.js
      • PHP Framework
  • 軟體工程
    • 物件導向程式設計
    • 開發工具
    • 版本控制
    • 設計模式
  • 網站管理
    • 資料庫
  • 專題
    • 電腦繪圖
    • 電腦視覺

登入

帳號

密碼

記得我

• 註冊
• 忘記您的帳號？
• 忘記您的密碼？