手機優先：數字說明一切
根據 Google Analytics 全球資料，目前行動裝置流量占整體網頁瀏覽的 55% 至 65%，在台灣的服務業、餐飲、美容等 B2C 行業，這個比例通常更高，常見 70-80%。
Google 在 2020 年正式將「行動版內容優先索引」（Mobile-first Indexing）列為全面標準：搜尋引擎評估你網站的排名，是以手機版的呈現為主要依據，而非桌面版。
這意味著：
- 如果你的手機版網站載入慢，你的 SEO 排名就會差
- 如果手機版內容比桌面版少，被索引到的內容就會少
- 如果手機版體驗差，用戶跳出率高，也會間接影響排名
從桌面設計再縮放的問題
傳統設計流程：先設計 1440px 的完整桌面版 → 然後想辦法「壓縮」到手機版。
這個流程的問題：
視覺元素密度過高：桌面設計中常見三欄並列的卡片、左右分欄的文字+圖片區塊——這些都需要在手機版被重新排列，而且常常垂直堆疊後顯得冗長。
文字太小或太大：桌面上 16px 的內文字，在手機螢幕的密度下可能需要略微調整。而桌面上用 80px 大字製造視覺衝擊的標題，在手機上則需要縮小到 36-40px 左右才不會溢出。
互動設計不符合觸控邏輯：桌面版的 hover 效果（滑鼠移入才展示選項）在手機上完全無法使用。下拉選單、懸浮說明框（Tooltip）、右鍵選單——這些都需要重新設計互動方式。
CTA 按鈕太小：Apple 的 Human Interface Guidelines 建議最小觸控目標為 44x44pt，Google 的 Material Design 建議 48x48dp。很多從桌面縮放的設計，按鈕會小到用戶需要精確點擊才能觸碰到。
行動優先設計的核心原則
原則一：內容優先，而非版面優先
在手機螢幕的有限空間，必須決定什麼是真正重要的。行動優先思維逼你做出優先順序選擇：
「這個資訊在手機上是必要的嗎，還是只在桌面版才有空間展示？」
這個過程通常會讓你的設計更清晰、更有焦點——即使桌面版也因此受益。
原則二：垂直滾動是自然的，水平是要避免的
手機用戶習慣向上/向下滾動。水平滾動（除了特定的輪播元素）通常讓用戶困惑。
設計時確保：
- 沒有元素在手機上因為寬度溢出導致水平捲軸出現
- 圖片使用 max-width: 100% 確保不超出容器
- 表格使用水平捲動容器或轉換為堆疊版面
原則三：點擊目標要夠大
手指的精度遠低於滑鼠游標。所有可點擊的元素（按鈕、連結、表單輸入框）都需要足夠的點擊區域。
實務標準：按鈕高度最小 44px，相鄰的可點擊元素之間要有足夠間距（至少 8px），避免誤觸。
原則四：字型大小要讓手機不自動縮放
iOS Safari 在某些情況下會自動縮放頁面，尤其是當輸入框被點擊時，如果字型大小小於 16px，就會觸發頁面自動放大。這讓用戶體驗變差。
所有表單輸入框的字型大小設定為 16px 以上，可以避免這個問題。
原則五：效能是手機體驗的關鍵
手機用戶常常使用 4G 而非 WiFi，或者在移動中使用網路不穩定的環境。
針對手機的效能優化重點：
- 圖片壓縮（使用 WebP 格式，並透過 Next.js Image 元件自動優化）
- 避免過多 JavaScript 阻礙首屏渲染
- 使用內容延遲載入（Lazy Loading）讓頁面初始載入更快
- 字型要使用子集化技術，只載入需要的字符（對中文字型尤其重要）
用 Chrome DevTools 測試你的手機版
按下 F12 打開開發者工具 → 點選工具列中的「裝置模擬」圖示（一個手機和平板的圖示）→ 選擇 iPhone 14 Pro 或 Pixel 7 等主流機型測試。
重點檢查項目：
- 字型是否清晰可讀
- 按鈕大小是否足夠
- 是否有元素溢出螢幕寬度
- 行動版導航選單是否正常運作
行動優先不是一個技術流行語，是讓你的網站對真實用戶真正有效的設計思維。