晨星行銷|網路流量操盤手

辦公室裡三位工作者:前景女性指著牆上手機與桌機轉換率長條圖對男性提問響應式設計都做規範了效果還普通,坐著的男性回答規範是及格線效果要看數據,背景另一位女性拿平板走進來

響應式網站設計做得好不好:別只看畫面,用GA4跟GSC的裝置別數據驗證

作者|晨星行銷 陳俊鳴執行長(網路流量操盤手・企業行銷顧問)

如果你已經做過響應式網站設計,也知道RWD跟手機版網站不是同一件事響應式跟AWD走的是不同技術路線斷點、圖片格式、Core Web Vitals這些技術驗收項目也都確認過了,接下來要問的問題其實只有一個:它有沒有真的有用?

這篇不會再重講一次什麼是響應式設計、要怎麼做技術驗收,這些站上都已經有文章講得很清楚。這篇要講的是下一步:網站上線之後,怎麼用數據確認這筆投資有沒有真的幫到生意,而不是憑感覺覺得「應該有變好吧」。

響應式網站設計「打得開」,不代表對生意有幫助

先講一個常見的誤會。多數人驗收響應式網站設計的方式,就是拿起手機縮放螢幕,看版面會不會跑掉、按鈕點不點得到。這種檢查方式能抓出「壞掉的東西」,但抓不出「效果不好的東西」

一個網站可以完全沒有跑版、按鈕大小完全符合觸控目標規範、Google的行動裝置測試也顯示綠燈,但使用者滑進來三秒就離開,或者填表單填到一半放棄。這些問題肉眼看不出來,因為畫面本身「看起來沒問題」。

符合規範是及格線,不是保證。規範保證的是「這個網站不會讓使用者用不了」,不保證「這個網站會讓使用者想留下來、想填表單、想打電話」。這兩件事之間,還有一大段沒人去驗證。

一座藍色拱門柵欄,近側夾板蓋著綠色合格勾印章代表規範達標,柵欄另一側走廊逐漸消失在白霧中,霧裡浮著一個發光問號代表有沒有真的幫到生意還不知道
符合規範是及格線,不是保證

規範都做到了,為什麼手機版轉換率還是可能只有桌機的一半?

假設有兩家公司的網站,都通過了Google的行動裝置相容性檢查,按鈕大小都做到規範建議的48像素(大約一顆成人拇指指腹的大小,小於這個尺寸手指很容易點不準)。一家的手機版轉換率是5%,另一家只有2%。差在哪裡?

答案通常不在「規範有沒有做到」,而在「規範測不到的地方」——內容排列的順序、表單欄位的多寡、CTA按鈕出現的時機、頁面載入時使用者實際的等待感受。這些都是規範清單打勾打不出來的東西。

根據Shopify引用Contentsquare 2026年度報告的數據,電商網站桌機平均轉換率是3.4%,手機只有2%,落差接近一半。同一份資料也指出,桌機使用者在網站上停留的時間,超過手機使用者的兩倍。這是國際電商產業的整體數據,不是台灣本地或特定產業的統計,但同樣的邏輯可以拿來檢視自己的網站:光靠規範達標,沒辦法解釋轉換率的落差從哪裡來,要靠數據才看得到。

💡 小提醒

如果你的網站沒有電商轉換功能,只是形象官網或詢問表單,一樣可以套用同樣的邏輯——把「購買」換成「填表單」「打電話」「加LINE」,裝置別的落差一樣值得追蹤。

常見的誤解是「我們已經做了響應式設計,該做的都做了」。「已經做了」跟「做得有效」是兩件事,前者是一次性專案,後者需要持續驗證。舉一個常見的情況:有些企業改版時把行動版按規範重做了一輪,半年後回頭看數據才發現手機版的詢問單筆數始終沒起色,問題不是設計沒做對,是沒有人在改版之後回頭確認過,規範達標跟業績提升之間那段落差,一直沒有人去量。

夜市兩個攤位對照,左邊綠頂攤位掛著行動裝置測試合格勾勾但只有一位顧客經過沒有停下,右邊紅頂攤位同樣掛著行動裝置測試合格勾勾卻大排長龍顧客絡繹不絕
兩個網站都合格,轉換率卻能差到一倍

第一步:用Search Console的裝置別數據,找出手機版在哪裡吃虧

驗證響應式網站設計有沒有效,第一個要打開的工具不用花一毛錢——Google Search Console。

Search Console的「成效」報表可以用裝置篩選,把手機、桌機、平板的曝光次數、點擊次數、平均點閱率、平均排名分開看。如果手機版的排名跟桌機版差不多,但點閱率明顯比較低,代表問題可能出在搜尋結果的呈現或標題吸引力,不一定是設計本身的鍋;但如果手機版的排名本身就比桌機版低,通常代表Google判斷手機版的內容或體驗不如桌機版,這才真正指向設計或內容對等性的問題。Google官方文件明確要求手機版與桌機版要維持相同的文字內容、圖片、內部連結與結構化資料(一種寫在頁面背後、讓Google讀懂內容用的額外標記,使用者看不到,但會影響Google判斷手機版夠不夠完整),這也是判讀裝置別排名落差時的第一個檢查項目。

泥土路岔成兩條路,左路指向一張普通搜尋結果卡片代表排名接近點閱率低是呈現問題,右路指向兩個手機頁面外框一個完整一個內容區塊灰掉代表排名本身較低是內容對等問題
手機排名落差,先分清楚是哪一層問題

具體做法很簡單:

  1. 打開Search Console的「成效」報表
  2. 在篩選器加入「裝置」維度
  3. 分別匯出手機版與桌機版的數據,比較同一批頁面的排名與點閱率落差
  4. 進一步用「查詢」跟「頁面」兩個維度交叉比對,找出是特定關鍵字、還是特定頁面在手機版表現特別差
  5. 落差特別大的頁面,優先排進下一步要檢查的名單

這一步的重點不是找出「哪個裝置比較好」,是找出「落差特別大的頁面」,因為那些頁面最可能藏著設計或內容上的問題。

五個踏階組成的輸送帶流程圖,依序是放大鏡查看報表、漏斗篩選裝置成手機與桌機、兩個長條圖交叉比對、查詢與頁面打叉交叉比對、最後是插著小旗子的落差名單
Search Console裝置別檢查的五個步驟

⚠️ 注意

Search Console的排名數字是「平均排名」,同一個關鍵字在不同時間、不同使用者身上排名會不一樣,不要拿單一天的數字下結論,至少要看一段時間的趨勢。

第二步:用GA4拆解裝置別的參與度跟轉換率,看落差有多大

Search Console看的是「使用者有沒有點進來」,GA4看的是「使用者點進來之後做了什麼」。這兩個工具要一起看,才看得到完整的故事。

要提醒一件事:GA4已經不用「跳出率」這個指標了,改用「參與度」,邏輯是反過來的。根據Google官方說明,「互動工作階段」(工作階段就是使用者一次造訪網站,從進站到離開的整個過程)指的是符合以下任一條件的工作階段:停留超過10秒、發生了轉換事件、或至少看了兩次網頁或畫面;「參與度」就是這種工作階段占全部工作階段的比例。如果你還在用舊版Universal Analytics(GA4上一代的分析工具,2023年已經停用)的跳出率觀念去理解GA4報表,很容易看反方向——跳出率是負面指標、參與度是正面指標,兩者的邏輯是相反的,不是換個說法而已。

一條垂直鏡射線把畫面分成兩半,左邊是暗淡下沉的箭頭配哭臉代表跳出率高不好,右邊鏡射出明亮上升的箭頭配笑臉代表參與度高是好,兩支箭頭形狀相同方向相反
GA4參與度跟舊版跳出率,判讀方向相反

在GA4裡,可以這樣拆解裝置別數據:

  • 用「裝置類別」維度,比較手機、桌機、平板的參與率
  • 比較同一批轉換路徑(例如表單提交、加入購物車)在不同裝置上的轉換率
  • 如果有設定事件追蹤,可以進一步比較「點擊CTA按鈕」這類微轉換在裝置間的差異

同一個網站,手機版跟桌機版的參與度如果差距超過一到兩成,通常值得深入檢查,這不是絕對門檻,但已經足以當成優先排查的訊號。

由上而下縮小的三層漏斗平台,最上層是手機與桌機圖示代表裝置類別,中層是表單與購物車圖示代表轉換路徑,最下層是一個按鈕加點擊游標代表微轉換
GA4裝置別數據,從裝置拆到按鈕三層

💡 小提醒

資料量太小的網站(例如每個月流量不到幾千次),裝置別的數字很容易被單一使用者的行為拉高或拉低,建議至少累積2到4週的資料再下判斷,太短的區間容易被雜訊誤導。

第三步:熱圖跟工作階段錄影,抓出「規範合格但使用者還是卡住」的死角

GA4跟Search Console能告訴你「哪裡有落差」,但沒辦法告訴你「使用者具體卡在哪個按鈕」。要看到這一層,需要熱圖跟工作階段錄影工具。

這類工具裡有一個很有用的指標叫「暴怒點擊」(rage click)——使用者在短時間內對同一個位置重複點擊,但頁面完全沒有反應。這通常代表使用者以為那裡可以點,結果點了沒用,累積到一定次數就會放棄。

Microsoft Clarity官方部落格分享過一個案例,這是國外產品團隊自己的實測,不是台灣本地案例,但邏輯放諸四海皆準:他們發現Bing搜尋框附近有使用者反覆點擊卻沒有反應的情況,影響了約4%點擊搜尋框的使用者。追查原因,發現是搜尋框跟HTML表單之間的邊距設計,讓使用者點錯位置。調整邊距之後,這種「錯失點擊」幾乎消失。

這種問題,規範清單完全抓不到——搜尋框大小可能完全符合觸控目標建議尺寸,但因為周圍間距的設計問題,使用者還是點不準。這正是「規範合格但使用者卡住」的典型例子。

手機畫面裡一顆按鈕上疊著三四個半透明手指重複點擊的殘影與擴散波紋,按鈕本身毫無變化,上方有裂紋爆炸符號代表使用者反覆點擊卻沒有任何反應
暴怒點擊:同一個位置反覆點也沒用

中小企業可以用的免費或低成本工具:

  • Microsoft Clarity:微軟提供的免費熱圖與工作階段錄影工具,包含rage click、dead click(點了沒反應的死點擊)等偵測功能
  • Hotjar:有免費方案可以先試用,功能更完整但流量大時需要付費升級

先用免費工具跑一段時間,抓出明顯的卡點,真的需要更進階功能再考慮付費,不需要一開始就投入大筆預算。

兩個工具箱面板並排,左邊完全打開露出熱圖與播放錄影圖示旁邊放著打開的鎖代表完全免費,右邊多一層還鎖著的隔間裡露出更進階的多圖表儀表板代表免費試用進階再升級
熱圖工具先用免費版,進階功能再升級

三種工具各看得到什麼、看不到什麼,不能只用一種

到這裡已經講了三種工具:Search Console、GA4、熱圖與工作階段錄影。這三種工具不是三選一,是三層互補,缺一層就會有看不到的死角

會有這種分工,不是巧合。數據分析工具能看出使用者做了什麼,看不出為什麼——Nielsen Norman Group官方說明指出,數據本身要搭配進一步的研究才能被正確解讀,單獨看數字很容易誤判原因。這正是熱圖與工作階段錄影要存在的理由:Search Console跟GA4告訴你「哪裡有落差、落差多大」,熱圖告訴你「這個落差具體長什麼樣子」。

驗證方式能看出什麼看不出什麼
肉眼檢查/縮放瀏覽器版面會不會跑版使用者實際會不會卡住、轉換率有沒有變好
觸控標準等規範清單按鈕大小是否達標達標了轉換率會不會提升
Search Console裝置別數據手機版跟桌機版的排名、點閱率落差落差是哪個具體UI元件造成的
GA4裝置別數據手機版跟桌機版的參與度、轉換率落差落差發生在頁面的哪個位置
熱圖/工作階段錄影使用者卡在哪個按鈕、哪個表單欄位換掉之後有沒有真的變好,需要再驗證一次

看這張表就知道,任何一種工具單獨用,都只能回答部分問題。Search Console跟GA4告訴你「哪裡有落差」,熱圖告訴你「落差發生在哪個具體位置」,三個放在一起看,才拼得出完整的畫面。同一批裝置別數據,只看單一工具會漏掉問題的另一半,三種工具的觀察範圍互相不重疊,這也是為什麼不建議只挑一種工具就下結論。

往下延伸的階梯,放大鏡由小到大,最上層小放大鏡照著折線圖代表哪裡有落差,中層放大鏡照著有缺口的長條圖代表落差多大,最下層最大放大鏡照著特寫的按鈕點擊代表怎麼發生
三種工具各看見驗證流程的其中一層

抓到問題之後,怎麼用最小成本驗證「改了真的有變好」

找到問題只是一半,另一半是驗證改完之後真的有變好,不是憑感覺覺得「應該有比較順」。

最簡單的做法是前後比較:記錄修改前一段時間(例如2到4週)的裝置別轉換率,修改之後用同樣長度的時間再測一次,比較兩段數據的差異。這種做法不需要額外工具,只要願意花時間記錄跟比較。

如果流量夠大,可以進一步做A/B測試,同時讓一部分使用者看舊版本、一部分看新版本,直接比較兩組的轉換率差異,比前後比較更能排除「剛好那段時間市場變化」這類干擾因素。不過A/B測試需要一定的流量門檻才有統計意義,流量太小的網站硬做A/B測試,反而容易被隨機波動誤導,前後比較法通常更實際

路標立在岔路口,左路較窄通往兩張並排月曆頁一張標before一張標after代表前後比較,右路較寬通往兩個並排瀏覽器視窗畫著不同版面代表A或B測試
流量夠不夠大,決定用前後比較還是A/B測試

驗證的成本,遠低於重新設計的成本。用免費工具追蹤數據跟做前後比較,花的主要是時間,不是預算;但如果沒有驗證,直接花錢重新設計整個網站,結果可能只是換了一個一樣有問題、只是換了位置的版本。先驗證、再決定要不要改版,是比較划算的順序。

一座天秤,左邊秤盤輕輕上揚放著一個沙漏代表驗證主要花時間,右邊秤盤沉重下壓放著一疊硬幣與鈔票代表重新設計主要花預算
驗證的成本,遠低於重新設計的成本

⚠️ 注意

無論是熱圖工具還是A/B測試工具,只要涉及記錄使用者行為,都要留意個資與Cookie同意的相關規範,上線前確認隱私權政策有涵蓋這類資料蒐集。

響應式網站設計不是做一次就結束:多久該回頭看一次數據

很多人對響應式網站設計的想像是「改版時做一次,之後就不用管了」。這個想法本身就是問題所在

使用者的裝置行為會一直變,新機型上市、瀏覽器更新、作業系統改版,甚至使用者的網路環境變化,都可能讓原本沒問題的設計出現新的卡點。建議至少每季檢視一次裝置別數據,流量大或剛改版完的網站可以拉高到每月一次

檢視的重點不用每次都很複雜,可以簡化成三個問題:

  1. 手機版跟桌機版的轉換率落差,有沒有比上一季擴大?
  2. Search Console的裝置別排名,有沒有出現異常下滑?
  3. 熱圖有沒有出現新的rage click熱點?

只要這三個問題其中一個出現異常,就代表該回頭檢查了,不用等到轉換率明顯下滑才動手

一個圓形日曆迴圈上插著四支旗子代表每季檢查點,其中一支旗子旁延伸出三個警示卡片,分別畫著分岔的折線圖代表轉換率落差擴大、往下箭頭配獎章代表排名異常下滑、新出現的橘色熱點群代表新的rage click熱點
至少每季檢視一次,三個異常訊號任一出現就該提前檢查

以我們協助客戶操盤SEO與網站優化的經驗,這件事最常被忽略的原因不是不知道要做,而是沒有人固定去看——多數企業主自己沒有時間逐月盯數據,也不確定該看哪個指標;這種情況下,交給以此為專業的人固定追蹤,通常比自己硬擠時間學會每個工具的介面更划算。

常見問題

FREQUENTLY ASKED QUESTIONS

至少要累積2到4週的裝置別數據才有參考價值,流量小的網站建議拉長到一個月以上。太短的時間區間容易被單一事件或少數使用者的行為干擾,看到的可能是雜訊而不是真正的趨勢。

看「參與度」,邏輯跟跳出率相反,參與度越高代表使用者停留超過10秒、發生轉換、或至少看兩次頁面的比例越高。比較手機版跟桌機版的參與度落差,落差超過一到兩成通常值得深入檢查是不是設計出了問題。

兩種可能都有,要先確認手機版與桌機版的內容是不是真的對等,同樣的文字、圖片、結構化資料有沒有都在。如果內容確認一致,排名落差通常才會指向使用者體驗或載入速度這類設計面問題。

Microsoft Clarity是完全免費的官方工具,功能涵蓋熱圖與工作階段錄影,適合預算有限的中小企業先從這裡開始。需要更進階的分眾分析或整合功能時,再考慮Hotjar這類有免費方案、付費升級的工具。

Search Console跟GA4的裝置篩選功能,操作上不需要工程背景,主要是找到篩選器、比較數字大小的落差。真正需要判斷力的地方,是解讀「這個落差代表什麼問題」,這部分如果沒有把握,找有經驗的人一起看會比自己猜測更準確。

需要。WCAG是國際通用的無障礙網頁設計規範,簡單說就是要讓色盲、視障、使用螢幕報讀軟體的使用者也能正常操作你的網站。這些規範測的是「網站有沒有明顯的可用性問題」,不是「網站有沒有幫助轉換」。符合規範是及格線,實際成效還是要靠裝置別數據跟使用者行為紀錄來驗證。

一般建議每季檢視一次,剛改版完或流量較大的網站可以拉高到每月一次。只要手機版轉換率落差擴大、排名異常下滑、或熱圖出現新的卡點,就代表該提前檢查,不用等到問題明顯才動手。

參考資料

  • Shopify — *Mobile vs. Desktop Conversion Rates: 2026 Comparison*(英文,2026年,引用Contentsquare報告)https://www.shopify.com/blog/mobile-vs-desktop-conversion-rates
  • Microsoft Clarity Blog — *Rage clicks – what do they tell you about user behavior?*(英文,官方產品部落格)https://clarity.microsoft.com/blog/rage-clicks-user-behavior/
  • Google Search Central — *Mobile-first indexing best practices*(英文,官方文件)https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
  • Google Analytics 說明中心 — *[GA4] 參與度和跳出率*(繁體中文,官方文件)https://support.google.com/analytics/answer/12195621?hl=zh-Hant
  • Nielsen Norman Group — *In Analytics, What do the Numbers Really Mean?*(英文,UX研究機構官方頁面)https://www.nngroup.com/videos/analytics-what-do-numbers-really-mean/

ℹ️ 關於本文

本文引用的外部數據與工具說明,以查閱當日(2026年9月)版本為準,各平台的功能介面與統計方式可能持續更新,實際操作請以GA4、Search Console與各熱圖工具官方當下的說明為準。文中對轉換率落差、驗證步驟的判斷,屬一般性經驗說明,實際成效會因產業、網站規模與流量狀況而有明顯差異,不構成任何成效保證。

陳俊鳴

陳俊鳴

網路流量操盤手.企業行銷顧問

操盤SEO與網路行銷實戰逾15年,2014年創辦晨星事業有限公司(晨星行銷),從SEO網站架設、關鍵字策略到銷售漏斗與變現模式一手包辦。現為智信科技、瞻新資訊等多家企業的常年行銷顧問,也獲頒過亞洲十大卓越名師金像獎,把每一次流量成長都當成自己的事業在打。曾是馬來西亞象棋、圍棋國手,拿過亞洲盃第二名。