BLOG 日誌內(nèi)其實(shí)已經(jīng)介紹過(guò)許多 RWD 網(wǎng)站設(shè)計(jì)的訣竅，像是表格與 RWD 的愛(ài)恨情仇，Youtube 嵌入影片 ifram 的 RWD 調(diào)整方式，都是現(xiàn)代網(wǎng)站必須的。不過(guò)！就是這個(gè) but ，到底我們是從原始人的觀點(diǎn)（網(wǎng)路世界五到十年應(yīng)該算是夠原始了吧？），真的所有的 Responsive Web Design 都符合行動(dòng)優(yōu)先（Mobile First）的思維嗎？

看看一些數(shù)據(jù)，為何行動(dòng)裝置上的瀏覽如此重要：

圖片出自 We Are Social

行動(dòng)裝置上網(wǎng)的佔(zhàn)比，早在 2016 年超過(guò)電腦，2017年調(diào)查也顯示，臺(tái)灣使用手機(jī)購(gòu)物，也超過(guò)了用電腦購(gòu)物的人（嘿，這一定是所有廠商最想看到的使用者行為吧）。上圖的 We Are Social 每季度的報(bào)告，再再告訴我們，用手機(jī)上網(wǎng)的使用者已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)使用電腦的使用者了。

Responsive Web Design 的概念真的萬(wàn)用？

Responsive Web Design 的概念就是將網(wǎng)站內(nèi)容視作「水」一般，放到不同的容器（解析度），就會(huì)呈現(xiàn)不同的樣子。但假使我今天只是要喝口水，有人卻用澡盆幫你裝過(guò)來(lái)，將會(huì)是做何感想？

所以企業(yè)們要考量自己的網(wǎng)站的使用者型態(tài)，來(lái)決定網(wǎng)頁(yè)內(nèi)容和設(shè)計(jì)。舉例來(lái)說(shuō)，今天你是間 B2B 公司，使用者主要瀏覽你網(wǎng)站的時(shí)間集中在白天下午的上班時(shí)段，也多是用筆電、桌上型電腦來(lái)瀏覽，那麼 RWD 的設(shè)置，就可以符合網(wǎng)站內(nèi)可能大量資料、規(guī)格的呈現(xiàn)，且在電腦相對(duì)大螢?zāi)簧系玫阶钸m體驗(yàn)。

但今天換做一個(gè)親子內(nèi)容網(wǎng)站，多數(shù)使用者可能使用平板、手機(jī)在晚上時(shí)段瀏覽，且使用者年齡可能多為 8-15 歲（雖然此項(xiàng)數(shù)據(jù)不容易在流量分析軟體看出來(lái)）。那麼以網(wǎng)頁(yè)為前提的網(wǎng)站設(shè)計(jì)，即便是做的很好的 RWD 也不見(jiàn)得可以讓使用這在手機(jī)這類(lèi)的行動(dòng)裝置上，得到最好的體驗(yàn)。

另外，為了配合美觀和設(shè)計(jì)，部分文章或是其摘要，也會(huì)有建議的字?jǐn)?shù)限制，可說(shuō)網(wǎng)站規(guī)劃中，內(nèi)容架構(gòu)、設(shè)計(jì)、最終文案需要看做一體來(lái)執(zhí)行，會(huì)達(dá)到最好的成效。

行動(dòng)優(yōu)先的思維不可缺少

想要在行動(dòng)裝置上，得到最好的體驗(yàn)，就得劃破原來(lái)的框架，在設(shè)計(jì)最初，就啟用行動(dòng)優(yōu)先（Mobile First）的思維，讓我們看一下這兩者差異：

這兩種設(shè)計(jì)思維是完全不一樣的，目前來(lái)說(shuō)，仍是個(gè)有利弊，但以「行動(dòng)優(yōu)先」來(lái)設(shè)計(jì)，仍是未來(lái)設(shè)計(jì)的大趨勢(shì)（畢竟竟是往人潮多的地方走），就讓我們來(lái)看看兩者有何優(yōu)劣？

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) Responsive Web Design

優(yōu)勢(shì)：
－資訊量龐大的網(wǎng)站，且呈現(xiàn)許多結(jié)構(gòu)化資料，商品細(xì)節(jié)等
－可以具備較多動(dòng)態(tài)效果、互動(dòng)性設(shè)計(jì)選擇較廣泛
－SEO 架構(gòu)較符合搜尋引擎喜好
－網(wǎng)頁(yè)設(shè)計(jì)成本相對(duì)低廉，已經(jīng)具備許多預(yù)設(shè)好模版

缺點(diǎn)：
－對(duì)手機(jī)、平板體驗(yàn)，僅能做到「次好」的
－對(duì)於多變的手機(jī)觸控操作方式、手機(jī)版廣告，需要花費(fèi)心力重新布局、設(shè)計(jì)

整體來(lái)說(shuō)，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)身為跨時(shí)代的解決方案，時(shí)值今日還是非常管用的，許多 WordPress 模版也都有一定程度的響應(yīng)式設(shè)計(jì)，但隨著裝置推陳出新，新的解析度，新的手機(jī)操作方式，都為網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)新的風(fēng)潮。

以電腦版本的 RWD 設(shè)計(jì)下，還是很適合承載大量資訊，像是規(guī)格表、比較表格、影片、特殊動(dòng)畫(huà)等等。在 RWD 概念下，有些電腦上才有的互動(dòng)/動(dòng)畫(huà)效果，也多傾向手機(jī)不顯示。

行動(dòng)優(yōu)先設(shè)計(jì) Mobile First Design

優(yōu)勢(shì)：
－較開(kāi)發(fā)一個(gè)手機(jī) App 便宜
－專(zhuān)為手機(jī)操作流程優(yōu)化，完整的手機(jī)、平板體驗(yàn)
－未來(lái)趨勢(shì)潮流（某些類(lèi)型網(wǎng)站主要群眾超過(guò) 75% 使用行動(dòng)裝置瀏覽）

缺點(diǎn)：
－不適合承載資訊量龐大的網(wǎng)站
－使用電腦的體驗(yàn)，需要花心力完善

其實(shí)多數(shù)網(wǎng)頁(yè)使用 RWD 設(shè)計(jì)，在瀏覽上也絕無(wú)問(wèn)題，但許多研究顯示，人們使用手機(jī)、電腦的目的和時(shí)間、時(shí)段，差距仍存在著，用行動(dòng)優(yōu)先的思考模式，就是試圖去做到像是：網(wǎng)頁(yè)類(lèi) App 體驗(yàn)、更快的讀取速度（也就是為何 Google 要推行 AMP 網(wǎng)頁(yè)）、更大的字體、每次滑動(dòng)都可以輕易看到行動(dòng)呼籲（Call to Action）等等。

想要在人們通勤時(shí)、上廁所、睡前都抓住人們的眼球？從行動(dòng)優(yōu)先這樣的概念發(fā)起，準(zhǔn)不會(huì)錯(cuò)！

趨勢(shì)和內(nèi)容決定你的網(wǎng)頁(yè)設(shè)計(jì)方式

過(guò)去，行動(dòng)網(wǎng)站的 SEO 可能不被如 Google 這類(lèi)的搜尋網(wǎng)站所喜愛(ài)，自 2016 年以降，Google 不斷提昇行動(dòng)搜尋的重要性，包含 Google 搜尋在手機(jī)上的成果，到近期使用率越來(lái)越高的語(yǔ)音輸入、十月份正式進(jìn)入臺(tái)灣的 Google 語(yǔ)音助理，這早已不再是行動(dòng)優(yōu)先設(shè)計(jì)的劣勢(shì)。

圖片來(lái)源：資策會(huì)於 2018 年作的調(diào)查

雖然做到極致的 Responsive Design 應(yīng)該也可以在行動(dòng)裝置上也有 98% 的體驗(yàn)，但就如同所有設(shè)計(jì)一般，早期階段的框架和觀點(diǎn)，往往決定了後續(xù)的成品。若還停留在從「電腦網(wǎng)頁(yè)」調(diào)整「手機(jī)版適用頁(yè)面」，勢(shì)必侷限住許多僅能在手機(jī)上完成的操作方式。

但是要如何選擇「行動(dòng)優(yōu)先」亦或「響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)」呢？遵循你的使用者足跡就沒(méi)錯(cuò)了！

以 80/20 法則來(lái)說(shuō)，若八成的目標(biāo)群眾都是用桌上型裝置瀏覽，當(dāng)然可以使用 RWD 的設(shè)置，反而言之，當(dāng)有八成的使用者以行動(dòng)裝置瀏覽網(wǎng)頁(yè)，行動(dòng)優(yōu)先的設(shè)計(jì)就是必要的。

但當(dāng)使用者差不多的時(shí)候怎麼辦呢？預(yù)測(cè)潮流就是你決定的重要指標(biāo)。

從 2011 的每天 0.8 小時(shí)行動(dòng)裝置使用時(shí)間，到了隔年即增長(zhǎng)至每天 1.6 小時(shí)。 2017 已經(jīng)來(lái)到了 4 個(gè)小時(shí)左右，是為超過(guò)兩倍的成長(zhǎng)。

雖然手機(jī)使用時(shí)間大幅增加，但研究顯示，人們使用電腦的時(shí)間，其實(shí)與過(guò)去差不了多少，代表手機(jī)使用時(shí)間可能是吃掉其他休閒，像是閱讀、睡前的時(shí)間等等，當(dāng)人們使用電腦時(shí)，多數(shù)還事許多有目的性的活動(dòng)。

那麼，瀏覽網(wǎng)頁(yè)的方式，廣告擺設(shè)的內(nèi)容、位置是不是就可以因此分開(kāi)？我睡前滑手機(jī)的時(shí)候，肯定不想看到推廣我 CRM 系統(tǒng)的廣告；上班時(shí)間找新聞資訊網(wǎng)，也不可能點(diǎn)擊昨晚逛網(wǎng)拍看過(guò)的衣服和玩具……聰明有電商頭腦如你，想必已經(jīng)知道該怎麼做了吧？

延伸閱讀

? CTK BLOG 有關(guān) RWD 的文章

? 數(shù)位時(shí)代文章：行動(dòng)上網(wǎng)成主流，網(wǎng)站內(nèi)容轉(zhuǎn)向行動(dòng)優(yōu)先

? 架站平臺(tái)這麼多，該怎麼選？