手機用戶已經是多數

Google 數據：全球超過 60% 的搜尋是從行動裝置發起的。台灣的比例更高。

這意味著你的潛在客戶，十個裡面有六個以上，第一次看到你的網站是在手機上。

但很多設計師和開發者的工作流程仍然是：先在電腦上設計一個漂亮的桌機版，然後嘗試讓它 fit 進手機螢幕。

這個順序已經過時了，也是讓手機體驗總是差一截的根本原因。

什麼是行動優先（Mobile First）設計？

行動優先設計是指：先設計手機版的使用者介面，確認它在最受限的螢幕環境下運作良好，再逐步擴展到平板和桌機的版本。

為什麼這個順序更好？因為手機版有幾個根本限制：

螢幕空間極度有限（320px 到 430px 寬）、用戶用手指操作而不是滑鼠（觸控目標需要夠大）、可能在移動中瀏覽注意力更分散、網路速度可能比桌機慢。

如果你先在這些限制下做出可以運作的設計，再「放大」到桌機就相對容易。反過來，把桌機版「縮小」進手機時，你常常會發現很多元素根本無法塞進去，只好妥協——導致手機版的體驗和桌機版完全無關。

在 CSS 中，行動優先的實作方式是：先寫基礎樣式給手機，用 min-width media query 覆蓋桌機樣式。

標準的行動優先媒體查詢範例：

手機預設：.container { width: 100%; padding: 0 16px; }

平板覆蓋（768px 以上）：max-width: 720px

桌機覆蓋（1200px 以上）：max-width: 1140px

相反地，如果你用 max-width media query，代表你是在「往小螢幕修補」，而不是「往大螢幕延伸」。

手機螢幕只能一次顯示少量資訊，所以你必須決定什麼是最重要的。

如果一個版塊在桌機有六個內容區塊，手機必須決定：哪些可以折疊？哪些必須保留？順序應該如何調整？

這個思考過程，反而幫助你釐清什麼是真正重要的資訊。

所有可點擊元素的最小觸控區域應該是 44 × 44px（Apple 的 Human Interface Guidelines 建議）。

按鈕太小、連結太密集，是手機版最常見的使用體驗問題。

手機上的最小可讀字體通常是 16px（iOS 低於這個大小會自動縮放輸入框）。正文字體不應低於 14-15px。

Google 已全面採用「行動版本優先索引」（Mobile-First Indexing），意思是 Google 主要以行動版本的內容來決定你的排名。

如果你的行動版缺少了桌機版有的重要內容，這些內容對 Google 來說等於不存在。

使用 Google 的「行動裝置相容性測試」工具，可以快速檢查你的網頁在 Google 眼中是否「行動友善」。

如果你是使用 Tailwind CSS，Tailwind 的預設就是行動優先：所有不帶前綴的 class 先套用在所有螢幕，然後用 md: 或 lg: 前綴覆蓋較大螢幕。

如果你正在規劃新網站，試試看把設計起點從「1440px 寬的設計稿」換成「390px iPhone 的設計稿」，你會發現這個改變讓很多設計決策變得更清楚，而不是更難。