先認識一個數字：你的訪客在哪裡？
打開你网站的 Google Analytics 或 Search Console，看「裝置類型」的數據分布。
如果你是台灣一般消費者或中小企業的品牌，手機流量通常佔 60-80%。部分偏年輕客群的品牌甚至超過 85%。
但如果你的網站是先做桌面版、再做手機版，那你花了 100% 的設計時間，卻讓 60-80% 的訪客用一個「二次設計」的版本在瀏覽。
這是一個結構性的倒置。
什麼是「行動優先設計」（Mobile-First Design）？
行動優先設計不是「手機版網站」，而是一種設計順序上的決策：
傳統順序： 設計桌面版 → 縮小成手機版（通常是隱藏一些元素、調整字體大小）
行動優先順序： 設計手機版 → 擴展到桌面版（在空間更大的桌面版加入更多細節、排版變化）
為什麼這個順序重要？
因為限制會強迫你做重要的決策。
手機螢幕只有 375-430px 寬，你沒有辦法放所有東西。強迫你問：「這個頁面最重要的一件事是什麼？」「訪客最需要在一眼看到的是什麼？」
如果你先設計桌面版，這些問題就被推遲了——桌面版空間大，可以把很多「也許有用」的元素都塞進去。等到要做手機版，才發現很多東西在小螢幕上根本不能用，只好隱藏掉。
被隱藏的那些東西，通常說明了你在桌面版其實也不需要它們。
台灣網站最常犯的手機版設計錯誤
1. 文字太小，密度太高
問題：把桌面版的段落文字直接縮小顯示，行距沒有調整。
手機版建議：
- 正文字體至少 16px（
text-base以上） - 行高至少 1.65 倍（
leading-relaxed） - 段落之間的間距要比桌面版更大，不是更小
原因：手機螢幕距離眼睛更近，密集的文字在視覺上更疲勞。
2. CTA 按鈕太小、點擊區域不夠
問題：按鈕高度 32px，用手指難以準確點擊。
Apple Human Interface Guidelines 建議最小點擊目標 44x44px，Google 建議 48x48px。
修正：至少 h-12（48px），寬度要讓手指可以輕鬆點擊，不要讓文字按鈕緊緊夾在兩側。
3. 導覽列塞太多項目
問題：桌面版有六七個頂部導覽項目，手機版用漢堡選單展開後還是六七個，而且沒有調整樣式，每個項目仍然是網頁尺寸的小字和間距。
修正：手機版 hamburger menu 展開後：
- 每個選項高度至少 56px
- 字體大小至少 18px
- 主要項目和次要項目要有視覺層次區分
4. 表單元素不友善
問題：輸入框太小、label 和輸入框靠太近、keypad 未指定類型。
修正：
- 輸入框至少
h-11（44px） - 適當的
type屬性（type="email"在 iOS 會顯示 @ 和 .com 快捷鍵，type="tel"會顯示數字鍵盤） - Label 和輸入框之間足夠的空間
- 考慮
autocomplete屬性讓用戶不需要重新輸入
5. 圖片尺寸和排版問題
問題：橫向並排的兩欄或三欄圖文卡片，在手機版垂直堆疊後，圖片佔比失衡，文字被圖片壓縮。
修正：在手機版，如果是圖文卡片，考慮調整圖片高度（不要固定比例，而是設定最大高度）；或者手機版改為純文字+小縮略圖的排列方式。
6. Hover 效果沒有手機觸控版本
問題：桌面版很多互動效果是 hover（滑過），但手機沒有 hover，只有 tap。
有些按鈕或連結在桌面版滑過才顯示說明文字，手機用戶完全看不到這個資訊。
修正：任何重要的視覺反饋，都要有 tap（:active 或 :focus）的版本。隱藏在 hover 背後的關鍵資訊要改成始終可見。
如何自我測試你的手機版設計是否合格
- 真機測試，不只是 DevTools 模擬：瀏覽器的手機模擬模式不能代替真實裝置，尤其是 iOS Safari 和 Chrome Android 的行為有差異。
- 用拇指測試：把網站交給你的長輩或不熟悉使用介面的朋友，讓他們完成「找到你的聯絡方式」的任務。
- PageSpeed Insights 的行動端評分：這個工具不只看速度，也包含 CLS（版面配置偏移）等使用者體驗指標。
- Google Search Console 的「行動裝置可用性」報告：會列出具體的手機版問題。
行動優先不只是設計，也是效能
最後一個重點：行動優先設計也意味著效能優先。
手機用戶經常在 4G/LTE 環境下瀏覽，不是穩定的光纖寬頻。大型圖片、未優化的 JavaScript 在手機上的感受比桌面版更明顯。
Core Web Vitals 的 LCP（最大內容繪製）和 CLS（版面位移），Google 用手機版的數據來評估。意思是：如果你的手機版效能不好，你的 SEO 排名也會受影響。
行動優先不是選擇，它是你與訪客建立關係的第一個接觸點。