香港手機上網嘅真實數據
先睇數據，了解點解 Mobile First 唔係口號而係必須：
- 香港智能手機普及率超過 90%，全球前列
- 超過 80% 嘅網頁瀏覽來自手機（Statcounter 2025 數據）
- 超過 70% 嘅 Google 搜尋來自手機
- 電商交易有超過 75% 喺手機完成
- 平均每人每日用手機上網超過 4 小時
更關鍵嘅係 Google 自 2019 年起實行 mobile-first indexing——Google 用手機版網站嚟決定搜尋排名。如果你嘅網站手機體驗差，唔單止流失用戶，連搜尋排名都會跌。
| 指標 | 桌面 | 手機 |
|---|---|---|
| 流量佔比 | ~18% | ~82% |
| 平均停留時間 | 較長 | 較短（耐心低） |
| 轉換率（未優化） | 3-5% | 1-2% |
| 轉換率（優化後） | 4-6% | 3-5% |
| 放棄率 | ~40% | ~60% |
甚麼是 Mobile First？唔係「縮細個網站」咁簡單
好多人誤解 Mobile First 係「將桌面網站縮細嚟睇」。正好相反——Mobile First 係由手機體驗出發設計，再向桌面擴展。呢個順序顛倒咗傳統設計思維。
Luke Wroblewski 喺 2009 年提出 Mobile First 嘅三個理由，到今日依然成立：
- 手機限制 force 你 focus——細屏幕、慢網速、有限輸入，迫使你砍掉次要功能，保留核心
- 手機有獨特能力——GPS、camera、accelerometer、touch、push notification，桌面冇
- 手機係增長最快嘅平台——而家已經係主流
Mobile First 唔係淨係設計順序，而係一種思維——「用戶最想喺手機做到乜？」係所有決策嘅起點。
響應式設計（RWD）vs 自適應設計（Adaptive）
兩者都係令網站喺唔同設備顯示得好，但做法唔同：
| 比較項 | 響應式 RWD | 自適應 Adaptive |
|---|---|---|
| 原理 | 一套代碼，CSS media query 自動調整 | 偵測設備，送出唔同版本 |
| 維護 | 一套代碼，維護簡單 | 多個版本，維護複雜 |
| 效能 | 載入相同資源（可能浪費） | 可針對設備優化載入 |
| SEO | Google 推薦，無重複內容問題 | 要處理 URL 同 redirect |
| 開發成本 | 中 | 高 |
| 適合 | 絕大多數網站 | 大型、複雜、效能要求極高 |
99% 嘅香港中小企網站應該用響應式設計。除非你係大型電商或者新聞網站，否則 adaptive 嘅複雜度唔值得。
手機 UI/UX 最佳實踐
以下係我哋做手機設計嘅鐵律，每條都來自實戰經驗：
- 觸控目標至少 44×44px——Apple 同 Google 嘅建議，細過呢個尺寸容易撳錯
- 按鈕之間留足夠空間——防止肥手指撳錯隔離
- 主要 action 放拇指可及區——屏幕底部 1/3 係最易撳到嘅位
- 表單最少化——每多一個欄位，轉換率跌 5-10%。用自動填、social login、地址自動完成
- 數字鍵盤自動彈出——電話、信用卡欄位用
inputmode="numeric" - 固定 header 高度——避免 iOS Safari 工具列伸縮令 layout 跳
- 避免 hover 依賴——手機冇 hover，menu 要改為 click 或者 swipe
- 字體最少 16px——細過 16px 會觸發 iOS 自動放大，體驗差
- 對比度足夠——WCAG AA 標準，方便陽光下睇
- loading state 清晰——手機網絡唔穩，每個 action 都要有 feedback
一個常見嘅錯誤：將桌面嘅多層 mega menu 直接搬到手機，結果要展開三四層先搵到嘢。手機應該用 flat menu、search bar、或者 tab 分類。
手機速度優化：3 秒定律
Google 研究顯示，如果網頁載入超過 3 秒，53% 嘅手機用戶會離開。香港雖然 5G 普及，但好多用戶喺地鐵、商場訊號唔穩，速度依然關鍵。
優化重點：
- 圖片優化——用 WebP/AVIF 格式、lazy load、響應式 srcset（細屏幕載細圖）
- 減少 JavaScript——手機 CPU 慢過桌面好多，過多 JS 會卡
- 用 CDN——Cloudflare、CloudFront 等令全球存取都快
- critical CSS inline——首屏樣式直接嵌入 HTML，唔使等外部 CSS
- 預載關鍵資源——
preconnect、preload提前連接 - 伺服器響應快——TTFB（Time to First Byte）要喺 200ms 內
- 避免重定向——每個 redirect 加幾百毫秒
目標指標：LCP（Largest Contentful Paint）少於 2.5 秒、CLS（Cumulative Layout Shift）少於 0.1、INP（Interaction to Next Paint）少於 200ms。呢啲係 Google Core Web Vitals，直接影響排名。
手機 SEO：mobile-first indexing 點樣應對
Google 用手機版網站嚟決定排名，所以手機 SEO 唔係附加而係核心：
- 內容一致性——唔好喺手機版刪減內容（例如隱藏長文），Google 會當你冇呢啲內容
- 結構化數據——兩個版本都要有 schema.org 標記
- meta 標籤——title、description 手機版要簡短（屏幕細）但包含關鍵字
- 本地 SEO——手機搜尋好多係本地意圖，Google Business Profile、地圖、營業時間要完善
- 頁面體驗——Core Web Vitals 係排名因素，手機版要過關
- 避免彈窗——手機全屏彈窗（interstitial）會被 Google 懲罰
- AMP 已死——唔使再考慮 AMP，做好響應式就夠
手機轉換率優化（MCO）
手機轉換率通常低過桌面，但通過優化可以大幅收窄差距。關鍵策略：
- 簡化結賬流程——guest checkout、一步結賬、減少欄位
- 數字錢包——Apple Pay、Google Pay、PayMe 一撳付款，唔使填信用卡
- 大按鈕、清晰 CTA——「加入購物車」、「立即購買」要明顯、拇指可及
- sticky 加入購物車 bar——瀏覽產品時底部固定一個購買 bar
- 信任信號——SSL 標誌、退貨政策、客評要喺結賬頁顯示
- 進度指示——多步結賬要顯示「第 2 步 / 共 3 步」
- 錯誤提示清晰——表單錯誤要即時、具體、顯示喺欄位旁邊
常見手機設計錯誤（避雷指南）
我哋審計過幾百個香港網站，以下係最常見嘅問題：
- 文字太細——12-14px 字體喺手機極難睇，最少 16px
- 按鈕太近——相鄰按鈕冇足夠空間，撳錯率高
- 彈窗轟炸——入站即彈窗、離開彈窗、滾動彈窗，令用戶極反感
- 自動播放影片——消耗數據、嚇親用戶、拖慢速度
- 複雜表格——手機填表格好痛苦，要大幅簡化
- 下載 PDF——手機睇 PDF 體驗差，內容應該用 HTML 呈現
- Flash 元素——手機唔支援 Flash，仲有網站用緊（應該全部淘汰）
- 橫向滾動——內容超出屏幕要左右掃，極差體驗
- 載入無提示——撳咗冇反應，用戶以為壞咗又撳多次
- fixed header 太高——佔咗成個屏幕嘅 1/4，內容空間太少
必備測試工具
做完設計唔代表好，要實際測試。以下工具我哋每日都用：
| 工具 | 用途 | 費用 |
|---|---|---|
| Google PageSpeed Insights | 測試速度同 Core Web Vitals | 免費 |
| Google Mobile-Friendly Test | 檢查手機友善度 | 免費 |
| Chrome DevTools Device Mode | 模擬各種手機屏幕 | 免費 |
| Lighthouse | 全面 audit（SEO、a11y、效能） | 免費 |
| BrowserStack | 真實設備跨瀏覽器測試 | 付費 |
| Hotjar | heat map 睇用戶點樣用 | 免費/付費 |
最後亦最重要嘅測試：搵真實用戶（最好係你目標客群嘅年齡層）用佢哋自己嘅手機試用。開發者用慣自己嘅網站，睇唔到新手嘅困惑。