RWD ≠ 行動優先設計

「我們的網站有做 RWD（響應式設計）。」

很多品牌都這樣說，但 RWD 只意味著你的網站「不會在手機上看起來很破」——它不等於手機體驗好。

行動優先（Mobile First）的真正意思：

先為手機設計，再為桌機擴展。所有設計決策都先考慮手機使用情境，而不是把桌機版縮小塞到手機螢幕裡。

在台灣，2026 年的行動上網比例已超過 65%。對多數品牌來說，「大多數訪客第一次看到你的網站，是在手機上」這件事是現實。

標準 1：核心功能在拇指可及區域

拇指法則：手機使用時，拇指最容易觸及的是螢幕下半部的中央——最難觸及的是螢幕上半部兩側的角落。

實際應用：

  • 主要 CTA 按鈕放在螢幕下半部，讓拇指輕鬆觸及
  • 不要把重要操作（例如送出表單）放在螢幕最頂部
  • 導覽列可以考慮底部 Tab Bar 而非頂部 Hamburger 選單

標準 2：觸控目標夠大（至少 44×44px）

Apple Human Interface Guidelines 建議最小觸控目標為 44×44pt；Google Material Design 建議 48×48dp。

違反這個標準的常見情況：

  • 3 個icon緊靠在一起（容易點錯）
  • 行內的「了解更多」連結太小
  • 表格中的小按鈕

標準 3：關鍵資訊不需要縮放就能閱讀

最小字體：

  • 正文：16px（任何小於這個大小都會讓 iOS Safari 自動縮放）
  • 標籤、說明文字：最小 13px
  • 絕對不要有需要「捏合縮放才能讀清楚」的文字

標準 4：頁面載入時間在 3 秒以內（LTE 網路）

Google 研究：手機頁面每慢 1 秒，跳出率增加 32%。

實現 3 秒以內載入的方法：

  • 圖片使用 WebP 格式 + 懶加載（Lazy Load）
  • 使用 Next.js Image 元件自動優化
  • 避免在頁面初始載入時載入不必要的第三方腳本
  • 用 Google PageSpeed Insights 定期測試

標準 5：表單和輸入欄位針對手機優化

參考表單設計文章的原則外，特別注意：

  • 不要使用下拉選單（select 元素）作為主要的輸入方式——手機上體驗很差
  • 用 autocomplete 屬性讓瀏覽器自動填入常見資訊
  • 避免在單行寬度放兩個以上的輸入欄位

標準 6：影片和媒體不自動播放，或至少靜音自動播放

自動播放聲音的影片是手機用戶最痛恨的體驗之一，特別是在公共場合使用時。

如果你要用影片作為背景，必須靜音自動播放：

<video autoPlay muted loop playsInline />

注意 playsInline 屬性对 iOS 很重要——沒有它，iOS Safari 會預設全螢幕播放。

標準 7：Safe Area 考量（iPhone 齊劉海 / 動態島）

iPhone X 之後的機型和 Android 打孔屏幕設計，讓螢幕邊緣有特殊的「安全區域」需要考量。

在 CSS 中使用環境變數：

.navbar {
  padding-top: env(safe-area-inset-top);
}
.bottom-bar {
  padding-bottom: env(safe-area-inset-bottom);
}

標準 8：Swipe 手勢的合理運用

台灣用戶對左右滑動展示多張圖片（例如作品集輪播）已有很強的認知習慣。

但也要注意：

  • 左右滑動與瀏覽器的前進/後退手勢有衝突
  • 一個頁面中不要有多個方向相同的滑動區域
  • 永遠提供替代的非滑動操作方式

如何驗證你的手機體驗

工具：

  • Chrome DevTools 裝置模擬器
  • 實體手機測試（不同品牌、不同螢幕尺寸）
  • Google Mobile-Friendly Test
  • WebPageTest（實際網路速度測試）

最重要的事： 用你自己的手機實際操作你的整個購買流程，從首頁→了解服務→填表單→送出。感受一下有沒有任何地方讓你覺得「有點麻煩」——那就是需要改進的地方。