響應式網站做好了行動版體驗卻沒過關：拇指、彈窗與表單的反面檢討
有響應式設計是否就代表行動版體驗已經合格
不代表。響應式設計只保證版面會依螢幕寬度重新排列，它不保證按鈕按得到、表單填得完、內容不被彈窗蓋住。行動版體驗要用一隻手、一根拇指、在走路的狀態下把任務做完才算合格。
響應式設計是指同一份網頁程式碼依裝置寬度自動調整版面的做法。它解決的是放不放得下。行動版體驗談的是用不用得順。前者是工程問題，後者是使用情境問題。
這篇文章要唱反調。過去幾年，業界把行動版友善簡化成一句有做響應式就好。我們在稽核時看到的情況是，幾乎每個網站都有響應式，卻有一大半在手機上讓人想放棄。以下五個論點，逐一反駁那句簡化的說法。
主張一：畫面縮得進去不等於拇指按得到
設計稿在電腦螢幕上審，用滑鼠點。滑鼠游標的尖端只有一個像素，拇指的接觸面則大得多。桌機上間距舒適的一排文字連結，縮到手機上變成擠在一起的五個小字，按第三個會點到第四個。
位置也有差別。單手握持時，拇指自然落在螢幕下半部。螢幕左上角與右上角最難構到。偏偏許多網站把最重要的操作放在右上角：購物車、選單、搜尋。客人得換成雙手，或者把手機往下滑一點重新握。
檢查方法不需要工具。右手單手拿手機，只用拇指，試著完成網站上最重要的那件事。過程中每一次需要調整握姿或按錯，就記一筆。我們在稽核報告裡把這個數字稱為握姿調整次數，它比任何分數都能說服老闆。
- 可點擊的元素之間留出足夠間距，相鄰連結不要緊貼
- 主要行動按鈕放在螢幕下半部，或做成貼底的固定列
- 文字連結的可點範圍用內距撐大，不要只有字本身可以點
- 收合選單裡的子項目，行高要比桌機版更寬
主張二：彈出視窗在手機上造成的傷害比桌機大得多
同一個訂閱電子報的彈窗，在桌機上佔畫面中央的一小塊，旁邊還看得到內容。到了手機上，它蓋滿整個螢幕。關閉的叉叉又小又放在角落，剛好是拇指最難按到的位置。
搜尋引擎對這類情況有明確立場。使用者從搜尋結果點進來，主要內容立刻被彈窗蓋住而難以閱讀，這種干擾式插頁可能使該頁在行動搜尋的表現受影響。法規要求的同意橫幅、年齡確認，以及只佔少量畫面且容易關閉的橫幅，屬於可以接受的範圍。
行銷主管通常會反駁：彈窗的名單蒐集效果很好。我們不否認。要調整的是出現的時機與形式。
- 進站後先讓使用者讀到內容，彈窗改在捲動到一定深度或停留一段時間後才出現
- 手機版改用貼在底部的窄橫幅，取代蓋滿全螢幕的視窗
- 關閉按鈕放大，並允許點擊視窗外的區域關閉
- 同一位使用者關閉後，設定一段期間內不再顯示
- 從搜尋結果進站的第一頁不顯示全螢幕彈窗
這五項可以在多數彈窗工具的設定頁完成，不必改程式。調整後用 GA4 比對名單數與該頁的離開情況，再決定要不要進一步放寬。
主張三：表單在手機上是另一種產品，照搬桌機欄位行不通
桌機上一頁填完的十二個欄位，在手機上變成捲三個螢幕的長征。每點一個欄位，螢幕鍵盤彈出來遮住半個畫面，使用者看不到下一欄是什麼，也看不到送出按鈕在哪裡。
工程上有幾個低成本的修正，效果立刻感覺得出來。問題在於它們不會出現在任何設計稿上，沒有人主動提，就沒有人做。
- 電話欄位叫出數字鍵盤，電子郵件欄位叫出帶有小老鼠符號的鍵盤
- 姓名、電話、地址、電子郵件欄位加上自動填入的屬性，讓瀏覽器能一鍵帶入
- 錯誤訊息顯示在出錯的欄位旁邊，不要集中在頁面最上方
- 輸入框的字級不要太小，避免部分手機在點選時自動放大畫面後回不來
- 下拉選單選項很多時，改成可以搜尋或分段選擇
- 非必要的欄位在手機版先拿掉，成交後再補問
會議上最難的一題是刪欄位。業務希望一次問清楚預算、時程、職稱、公司規模。我們會請業務主管用自己的手機，站著把表單填完一次。多數情況下，他填到第七欄就同意刪減。
主張四：固定在畫面上的浮動元件會一層一層吃掉可視範圍
手機螢幕就那麼大。上方固定的導覽列佔一截，下方固定的購買列佔一截，右下角有客服泡泡，左下角有回到頂端的按鈕，再加上一條同意橫幅。真正留給內容的空間，可能只剩畫面中間的一半。
每一個元件單獨看都有道理，各由不同部門提出，沒有人看過它們同時出現的樣子。我們的稽核會在實機上截一張首屏畫面，用色塊標出每個固定元件佔用的面積，算出內容實際可見的比例。這張圖通常不需要多做解釋。
處理原則是排優先順序。導覽列在往下捲動時自動收起、往上捲時再出現。客服泡泡與購買列擇一固定，另一個改為內嵌。浮動元件之間不可以互相遮擋，也不可以蓋住表單的送出按鈕。
主張五：字級與對比在戶外光線下才看得出問題
設計師在室內的大螢幕上調出優雅的淺灰色細字。客人在大太陽下的騎樓掏出手機，螢幕反光，淺灰色的字直接消失。
內文字級太小時，使用者得用兩指放大再左右拖動，這是行動版體驗裡最典型的失敗訊號。內文維持在不必放大就能閱讀的大小，行距放寬，段落切短。文字與背景的對比用免費的無障礙檢測工具或 Lighthouse 的無障礙項目檢查即可。
另一個常被漏掉的是表格。桌機上的規格比較表有六欄，到手機上要嘛被壓成看不清的小字，要嘛撐破版面出現橫向捲軸。手機版應該改成可以左右滑動且有明顯提示的區塊，或者拆成一項一張的卡片。
反過來說響應式設計仍然是必要的底線
唱完反調，要把話說完整。響應式設計沒有錯，它是底線。搜尋引擎以行動版內容作為索引與排名的主要依據，行動版缺少的內容等同於不存在。這條底線守住之後，才輪到本文談的五件事。
我們反對的只是把底線當成終點。驗收標準如果只寫支援各種螢幕尺寸，交付出來的就是一個放得下但用不順的網站。驗收標準應該寫成任務：用手機在兩分鐘內找到某項商品並完成詢價。
一份不需要工程師就能做的行動版自我檢查
- 用自己的手機關掉無線網路，改用行動網路開啟網站
- 單手拇指完成最主要的任務，記錄握姿調整與誤觸次數
- 從搜尋結果點進一篇文章，確認內容沒有立刻被全螢幕視窗蓋住
- 把最重要的表單從頭填到送出，注意鍵盤類型與錯誤訊息位置
- 截一張首屏畫面，標出所有固定元件佔了多少空間
- 走到戶外或窗邊，在強光下確認內文與按鈕文字仍然可讀
- 用 Lighthouse 的行動裝置模式跑一次，看無障礙與最佳做法兩個類別的提醒
這篇反面論述不適用於以下三類網站
客群幾乎都在辦公室用電腦操作的企業採購系統或後台工具，行動版只需要做到資訊查得到，不必追求單手完成複雜任務。先看 GA4 的裝置類別報表，行動流量佔比很低且轉換本來就發生在桌機，資源應該放在別處。
已經有原生應用程式承接主要交易的品牌，行動網站的角色是引導下載與提供基本資訊，檢查重點會不同。
涉及身分驗證、付款與個資蒐集的表單，欄位能不能刪減受到法規與金流規範限制。這部分要先請法務或熟悉當地規範的專業人士確認，再談體驗優化。
常見問題
網站有響應式設計還需要另外優化行動版體驗嗎？
需要。響應式只處理版面排列，按鈕間距、彈窗、表單鍵盤、固定元件遮擋與字級對比都要另外檢查，最好用實機單手操作驗證。
手機版彈出視窗會影響 SEO 嗎？
使用者從搜尋進站就被全螢幕彈窗蓋住內容，可能影響該頁在行動搜尋的表現。改用底部窄橫幅或延後出現的時機，風險較低。
怎麼免費檢查網站的行動版體驗？
用自己的手機以行動網路單手完成主要任務，再用 Lighthouse 的行動裝置模式檢查無障礙與最佳做法，並到 GA4 比較各裝置的轉換情況。
延伸閱讀：SEO 技術優化主題文章、最新新知、行銷案例