觀點 | 行動網站傻傻搞不清?RWD響應式網站 vs AWD自適應式網站

Categories 我的觀點

photo by Maliha Mannan on Unsplash

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

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

一、購物網站

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

行動網站傻傻搞不清?RWD響應式網站 vs AWD自適應式網站

來源:博客來

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

二、產品品牌網站

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

行動網站傻傻搞不清?RWD響應式網站 vs AWD自適應式網站

來源:BOSE官網

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


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

① 響應式網站設計:

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

  • 優勢:一致的介面體驗,解決了佈局上的管理以因應不同的裝置,而且有著單一URL網址能增進SEO的效果。
  • 劣勢:縮小的過程,更要考量結構上的變動。當層級和資訊量很多的時候,呈現的東西就有限。
行動網站傻傻搞不清?RWD響應式網站 vs AWD自適應式網站

來源:mytasker

② 自適應網站設計:

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

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

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

那最核心的事是什麼?

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

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


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

行動網站傻傻搞不清?RWD響應式網站 vs AWD自適應式網站

來源:Frederic Gonzalo

這需要先了解兩種網站在思考途徑上的差異:
響應式是由大到小
自適應是由小、中、大

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

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


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

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

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

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

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

無論採用那一種,共同的好處就是?

① 優化過的使用體驗:

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

② 讓使用者能專注:

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

③ 讓網站速度變快:

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


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

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

行動網站傻傻搞不清?RWD響應式網站 vs AWD自適應式網站

來源:uniqlo

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

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

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

photo by Joshua Ness on Unsplash

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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *