你的廣告費有七成花在手機用戶身上
打開你的 Google Ads 後台，看一下裝置報表。如果你的產業不是什麼特殊的 B2B 軟體，手機流量占比大概在 65% 到 80% 之間。
這代表什麼？你每花 100 塊廣告費，有 70 塊是花在手機用戶身上。
但是很多人做 Landing Page 的時候，還是坐在 27 吋螢幕前面設計，做完之後拿手機看一眼「嗯，好像還行」，就上線了。然後看著轉換率數據發愁——桌機版轉換率 5%，手機版只有 1.8%。
問題不在你的產品或文案，而是你的頁面在 6 吋螢幕上根本不能用。
手機用戶的行為模式跟桌機用戶完全不同。他們用拇指操作、在捷運上滑手機、注意力可能只有 3 秒鐘、網路訊號可能不穩定。你不是在「縮小」桌機版頁面，你是在設計一個完全不同的使用體驗。
這篇會把手機版 Landing Page 的每個設計細節拆開來看，讓你搞清楚哪些地方可能正在趕走你的訪客。
首屏決勝：3 秒內說清楚你是誰
手機螢幕就這麼大，首屏（不用滑動就看得到的範圍）能放的東西非常有限。
桌機版的首屏可以放一個大標題、一段副標題、一張圖片、三個利益點圖標、加上一個 CTA 按鈕。手機版？你大概只能放標題加按鈕。
首屏一定要包含的元素：
一個簡潔有力的主標題，讓訪客在 3 秒內知道「這個頁面是關於什麼的」「對我有什麼好處」。
一個明確的 CTA 按鈕，告訴他下一步該做什麼。
就這樣。副標題可以有，但如果放了副標題會把 CTA 按鈕推到首屏以下，那就砍掉副標題。
很多人喜歡在首屏放一張漂亮的全版背景圖。在桌機上可能很有氣勢，但在手機上，這張圖會佔掉大半個螢幕，真正重要的文字和按鈕反而被擠下去了。
手機首屏的背景圖要嘛不放，要嘛用很淡的、不搶視覺焦點的圖。 主角永遠是你的標題和按鈕。
拇指友善：所有互動元素都要夠大
手機上的互動全靠拇指。拇指不像滑鼠游標，它又粗又不精準。
Apple 的人機介面設計指南建議，可點擊元素的最小尺寸是 44 x 44 點（大約 7mm x 7mm）。Google 的 Material Design 建議是 48 x 48 dp。
這不只是按鈕的大小，還包括：
連結文字之間的間距
如果兩個連結離太近，用戶很容易按到隔壁的那個。連結之間至少留 8px 的間距。
表單輸入框的高度
輸入框高度建議至少 44px。很多模板的預設輸入框高度只有 36px，在手機上看起來擠得要命，手指按上去也不太準確。
關閉按鈕和選單按鈕
如果頁面有彈出視窗（Modal），關閉按鈕（那個小小的 X）一定要做大一點。很多彈出視窗的關閉按鈕只有 20px，在手機上幾乎不可能一次按到。
底部固定 CTA
一個很有效的做法是把 CTA 按鈕固定在螢幕底部，不管用戶滑到哪裡都看得到。這個按鈕要佔滿整個螢幕寬度，高度至少 48px。用戶隨時想行動都不用回到頁面頂部去找按鈕。
但要注意一件事：固定底部按鈕會佔掉一些螢幕空間。如果你的內容已經很擠了，可以設定成「往下滑的時候才出現」，往上滑（回去看內容）的時候自動隱藏。
字體和排版：不要讓人瞇眼
手機螢幕小，字體大小的選擇直接影響閱讀體驗。
內文字體至少 16px
很多人覺得手機螢幕解析度高，小字也看得清楚。技術上沒錯，但閱讀體驗是另一回事。16px 是 iOS Safari 和 Android Chrome 不會自動縮放頁面的最低字體大小。低於 16px，有些瀏覽器會自動放大頁面，導致版面跑掉。
標題字體 24-32px
手機上的標題不需要像桌機版那麼大，但也不能太小。24px 到 32px 之間通常是一個好的範圍。如果標題太長，在手機上會斷成三四行，看起來不太好，所以手機版的標題盡量控制在兩行以內。
行高 1.5 到 1.8 倍
手機閱讀的距離比桌機近，但螢幕寬度窄，所以行距要比桌機版更寬鬆一些。行高設在 1.5 到 1.8 倍之間，讀起來比較舒服。
段落之間的間距要明顯
桌機上段落間距用 16px 可能夠了，手機上建議加到 24px 以上。因為螢幕窄、文字密度高，段落之間的呼吸空間需要更大，不然整個頁面看起來就是一大塊密密麻麻的文字。
不要用居中對齊的長段落
短標題居中對齊沒問題，但如果一整段文字都居中對齊，在手機上讀起來會非常痛苦。因為每一行的起始位置都不一樣，眼睛要不斷重新定位。長段落一律靠左對齊。
圖片和視覺：輕量是王道
圖片是影響手機版 Landing Page 載入速度的最大因素。
使用 WebP 格式
WebP 比 JPEG 小 25-35%，品質幾乎看不出差別。2026 年了，所有主流瀏覽器都支援 WebP，沒有理由不用。
設定正確的圖片尺寸
不要用一張 2400px 寬的圖片，然後靠 CSS 縮小到 375px 顯示。瀏覽器還是會下載那張 2400px 的原圖，浪費流量和時間。用 srcset 屬性提供不同尺寸的圖片，讓瀏覽器根據螢幕寬度選擇適合的版本。
延遲載入（Lazy Loading）
首屏以下的圖片都應該設定 loading="lazy"。用戶滑到那個位置的時候再載入，不用一開始就把所有圖片都下載完。
考慮用 SVG 取代點陣圖
圖示、圖表、裝飾性圖案這些元素，用 SVG 格式會比 PNG 小很多，而且在任何螢幕解析度下都不會模糊。
影片要謹慎
自動播放的影片在手機上會吃掉大量流量和電池。如果一定要放影片，不要自動播放，給一個播放按鈕讓用戶自己決定。更好的做法是放一張影片縮圖，點擊之後才載入影片。
表單極簡化：每少一個欄位多一個客戶
手機上填表單的痛苦程度是桌機的三倍。鍵盤佔掉半個螢幕、打字速度慢、容易按錯。所以手機版的表單要比桌機版更加精簡。
欄位數量砍到最低
桌機版也許可以忍受 5 個欄位，手機版最好控制在 3 個以內。姓名、Email、一個核心問題，就夠了。
善用手機鍵盤類型
Email 欄位用 type="email"，手機會自動顯示有 @ 符號的鍵盤。電話欄位用 type="tel"，會跳出數字鍵盤。這些小細節省掉的每一次按鍵切換，都在降低放棄率。
啟用自動填入
在表單欄位加上正確的 autocomplete 屬性（name、email、tel），瀏覽器就會提供自動填入的選項。用戶點一下就填完整張表單，比什麼都有效。
不要用下拉選單
手機上的下拉選單體驗很差，要滾動找選項，選完之後又跳回來。如果選項在 5 個以內，用按鈕式的單選（Radio Button 或 Segmented Control）取代下拉選單。
鍵盤不能擋住送出按鈕
用戶填完最後一個欄位，手機鍵盤還開著，如果送出按鈕剛好被鍵盤擋住，他就得先關掉鍵盤再按按鈕。這個額外的步驟會讓一部分人直接放棄。解決方法是讓表單在鍵盤彈出時自動捲動到適當位置。
載入速度：3 秒是生死線
Google 的數據顯示，手機網頁載入時間每增加 1 秒，轉換率就下降約 20%。如果你的頁面載入超過 3 秒，超過一半的訪客會在看到內容之前就離開。
幾個直接有效的加速方法：
壓縮 CSS 和 JavaScript
把沒用到的 CSS 規則和 JavaScript 函式庫移除。很多 Landing Page 用了整個 Bootstrap 框架，但實際上只用到了柵格系統和按鈕的樣式，其他 90% 的 CSS 都是多餘的。
使用 CDN
把靜態資源（圖片、CSS、JS）放到 CDN 上。CDN 會從離用戶最近的節點傳送檔案，台灣用戶可能從香港或東京的節點取得資源，比從美國的伺服器快好幾倍。
減少 HTTP 請求
每一個外部檔案（CSS、JS、圖片、字型）都是一次 HTTP 請求。減少檔案數量可以明顯加快載入速度。把多個小 CSS 檔案合併成一個，把小圖示換成 SVG inline 或 icon font。
字型最佳化
中文字型檔案通常很大（一個完整的 Noto Sans TC 可能超過 10MB）。用 font-display: swap 讓頁面先用系統字型顯示，字型檔載入完成之後再替換。或者更乾脆一點，直接用系統字型，省掉字型載入的時間。
用 Google PageSpeed Insights 測試
輸入你的 Landing Page 網址，選手機版，它會告訴你具體有哪些問題需要修正，還會按照影響程度排序。90 分以上算合格，80 分以下就需要認真處理了。
手勢和捲動：順著拇指的方向設計
手機用戶最自然的動作是上下滑動。頁面的資訊架構應該順著這個方向來安排。
垂直佈局優先
桌機版常見的「左右分欄」佈局在手機上要變成「上下堆疊」。左邊的圖片疊到上面，右邊的文字疊到下面（或反過來）。不要試圖在手機上維持左右分欄，6 吋螢幕塞不下。
避免水平捲動
除了產品圖片的輪播之外，手機頁面不應該出現水平捲動。如果你的表格太寬，在手機上可以用卡片式的呈現取代。如果你的步驟流程圖是橫向的，改成縱向。
善用摺疊（Accordion）
FAQ 區塊或功能細節說明，用摺疊式設計讓用戶點開自己有興趣的內容。這樣可以減少頁面長度，同時保留完整的資訊量。
「回到頂部」按鈕
如果頁面很長，在捲動一段距離之後顯示一個「回到頂部」的小按鈕。不是每個用戶都知道可以點狀態列回到頂部（在 iPhone 上可以），這個按鈕能幫助他們快速回到首屏的 CTA。
避免彈出視窗
手機上的彈出視窗（Pop-up）體驗非常差。整個螢幕被佔住，關閉按鈕又小又難按，Google 也會因為干擾性的彈出視窗降低你的 SEO 排名。如果一定要用，至少等用戶在頁面停留超過 30 秒、或滑過 50% 的內容之後再觸發。
測試、測試、再測試
做完手機版 Landing Page 之後，不要只用 Chrome 的開發者工具看一看就算了。
在真實裝置上測試
至少拿一支 iPhone 和一支 Android 手機測試。Chrome DevTools 的模擬器不能完全還原真實裝置的行為——觸控事件的反應、鍵盤彈出時的畫面變化、Safari 底部工具列的遮擋，這些都只有在真機上才看得出來。
用各種網路速度測試
把手機切到 4G 或甚至 3G 的狀態，看看頁面載入需要多久。你辦公室的 WiFi 速度可能是 500Mbps，但你的用戶可能在地下室用微弱的 4G 訊號開你的頁面。
請不熟悉你產品的人操作
你自己太熟悉自己的頁面，很多問題你不會發現。找一個完全沒看過這個頁面的人，給他手機，讓他嘗試完成目標動作（填表單、點按鈕），然後在旁邊觀察他在哪裡卡住。
用分析工具追蹤手機版數據
在 GA4 裡面把桌機和手機的數據分開看。關注手機版的跳出率、平均停留時間、轉換率。如果手機版的跳出率比桌機版高出 20% 以上，頁面體驗一定有問題。
很多人花了大量時間在廣告文案和出價策略上，卻忽略了一個最基本的事實——大部分用戶是在手機上看到你的頁面。如果頁面在手機上的體驗不好，再好的廣告也沒用。好消息是，手機版的優化往往不需要重新設計整個頁面。調整字體大小、精簡表單、壓縮圖片、固定 CTA 按鈕——這些改動都不大，但對轉換率的影響可能是翻倍的。
如果你的團隊缺乏網站技術實作的能力，找有經驗的團隊來協助手機版的優化，確保響應式設計在各種裝置上都正確呈現，是最有效率的做法。
