RWD 不是縮小就好:行動版體驗檢查清單

打開你的網站分析後台看一眼流量來源,大概七成來自手機——多數台灣網站都是這個量級。但很多網站的「行動版」只做到一件事:把桌機版等比例縮小,塞進小螢幕裡。技術上這叫響應式(RWD),體驗上這叫災難:字小到要放大才能讀、按鈕小到按不準、表單填到一半想摔手機。

RWD 的重點從來不是「排版不會爆」,而是「用手指、在移動中、網路不穩的情境下,依然好用」。我們每次交付前都用真機把這份清單跑一遍——不是模擬器,是真的手機。以下是完整版。

觸控與熱區:手指不是滑鼠

可點擊區域至少 44×44 點:這是 Apple 人機介面指南的底線。文字連結太小、按鈕太窄,使用者就會按錯——按錯兩次,他就走了。
目標之間留間距:兩個按鈕貼在一起,等於邀請誤觸。刪除與確認尤其不能當鄰居。
重要操作放拇指區:單手握機時,拇指舒服搆到的是螢幕中下方。把主要行動按鈕放在頁面頂端角落,是在為難使用者的手。
不依賴 hover:手機沒有「滑鼠移過去」這回事。靠 hover 才展開的選單、才顯示的說明,在手機上就是不存在的功能。

可讀性:別讓人捏著螢幕讀字

內文字級至少 16px:小於這個尺寸,多數人得放大才能舒服閱讀。而且 iOS Safari 對小於 16px 的輸入框會自動縮放頁面,版面直接跳掉。
行長與行距:一行塞太多字讀起來累,行距太擠像一堵字牆。段落短一點,在手機上永遠是對的。
對比度:淺灰字配白底在設計稿上很優雅,在大太陽下的手機螢幕上是隱形墨水。

表單:流失率最高的一哩路

表單是行動體驗的重災區,也是最接近轉換的一步,值得單獨檢查:

欄位愈少愈好:每多一個欄位就多一批放棄的人。問自己:這個欄位現在非要不可嗎?
叫出對的鍵盤:電話欄位要跳數字鍵盤、Email 欄位要有 @ 符號的鍵盤。這是一行程式碼的事,做不做差很多。
錯誤訊息就地顯示:送出後整頁重載、填的東西全消失、只告訴你「有欄位錯誤」——這種表單每天都在謀殺轉換率。
自動填入友善:讓瀏覽器能自動帶入姓名、電話、地址。使用者在手機上打字的耐性,比你想的少得多。

行動版不是桌機版的縮圖,是另一個使用情境:單手、移動中、隨時會被打斷——為這個情境設計,才叫 RWD。

載入與效能:行動網路不會等你

圖片按需求給尺寸:在手機上載入桌機用的大圖,是最常見也最冤枉的浪費。
優先顯示主要內容:捷運上的 4G 訊號,不會給你慢慢載完再顯示的餘裕。首屏內容要最先出現。
版面不跳動:圖片與廣告沒預留空間,載入時把正要按的按鈕擠走——這正是 Core Web Vitals 在懲罰的行為,細節我們寫在網站速度就是轉換率。
彈窗克制:桌機上的優雅彈窗,在手機上常常蓋滿全螢幕、關閉鈕小到按不到。Google 對干擾式彈窗有明確的排名懲罰。

最後一關:用真機測

瀏覽器的裝置模擬器只能看排版,看不到真實的觸控手感、鍵盤行為、網路延遲。我們的交付流程規定用實際的 iPhone 與 Android 手機各跑一遍完整流程——從進站、瀏覽到送出表單。這份清單看起來瑣碎,但每一條背後都是流失掉的訪客。如果你自己用手機打開官網,跑完上面任何一節就皺了眉頭,那不是你太挑剔,是網站欠修——跟我們聊聊,或至少把這份清單交給你的開發團隊。