文章

多數造訪來自手機，站點準備好了嗎？

依 StatCounter 近期統計，行動裝置貢獻的造訪已逾四分之三。電商與服務業往往更高，部分行業甚至突破八成五。

改版討論裡最常見的回答是「響應式早就完成了」。打開來看，多半仍是先完成電腦版再硬縮到小螢幕，等於拿少數人的場景去框住大多數訪客的感受。

響應式技術處理的是看不看得了，只算起步。對手也都具備同一套技術之後，真正拉開差距的是手機優先的思考方式：從規劃之初就以掌上用戶為中心，做出比電腦版更順的操作體驗。

下文會跨過基礎的響應式入門整理，梳理五項更進階的手機優先做法，讓小螢幕直接帶來商業成果。

手機優先與響應式並非同一件事

經營者很容易把兩者當成同一套方法。實際上起點與目標並不一致：

響應式屬於技術手段，手機優先則是設計主張。前者避免小螢幕跑版，後者追求掌上訪客的最佳路徑。當行動造訪已成主流，小螢幕版本不該是電腦版的刪減版，而是最完整也最順手的那一版。

依拇指範圍安排觸控

掌上與桌面最大的分別在於怎麼操作：前者靠拇指，後者靠游標。游標可以準到單一像素，拇指接觸面大約落在 45 到 57 像素，這個物理條件會牽動許多版面細節。

按鈕與可點範圍

Apple 介面指引把可點目標訂在至少 44×44 像素，Google Material Design 則傾向 48×48 像素。視覺尺寸與實際可點範圍可以分開：外觀維持 36 像素，內距仍把點擊區撐到 48 像素。

相鄰控制項的空隙一樣關鍵。至少留 8 像素能明顯降低誤按，刪除或付款這類高風險動作更應拉大與其他按鈕的距離。

拇指熱區怎麼放

單手握機時，拇指自然掃過的範圍呈弧形。左下與中下段最容易碰到；右上與左上則最費力。

配置可以這樣安排：

• 主要行動按鈕放在下半屏，方便拇指直接按到
• 導覽列改放底部，與 iOS、Android 原生應用的習慣一致
• 次要功能放到上方，不常用但需要時仍找得到
• 危險操作如刪除，避開容易誤觸的位置

導覽不必只靠漢堡選單

三條橫線的收合選單幾乎成了小螢幕站點的預設，但坦白說未必最理想。實務上，把項目從收合選單搬到一眼可見的標籤列後，互動往往明顯上升，因為很多人根本不會去點那個圖示，功能等於被藏起來。

底部標籤列

若主要區塊落在 三到五個，底部標籤列通常最合適。主要選項無需多按一次就看得到，而且正好落在拇指最順手的位置。Facebook、Instagram、LINE 採用同一模式，並非偶然。

混合式導覽

功能項目偏多時，可以同時使用底部標籤列與收合選單：

• 底欄放四到五個高頻入口，例如首頁、服務與案例
• 較少開啟的頁面，如介紹、隱私說明與常見問答，收進收合選單
• 搜尋做成獨立圖示，不要再塞進其他選單

導覽的點按回饋

好的掌上導覽不只是按得到，還要讓人確定按下去了。震動回饋、按下時顏色變深，再加上適度轉場，這些細節合起來才會順。

速度決定人是否留下

Google 的研究顯示，載入由 1 秒拉到 3 秒，離開比例會多出 32%；拉到 5 秒則可能暴增 90%。掌上訪客對延遲更敏感，因為行動網路往往不如固網穩定，耐心也更短。

在參考效能調校說明之外，小螢幕還有幾個要特別盯的面向：

圖像減重

圖像常常吃掉頁面體積的五到七成。掌上版本的圖像策略需要更積極：

• 改用 WebP 或 AVIF：體積可比 JPEG 少約 25% 到 35%，清晰度相近
• 準備多組尺寸：透過 srcset 讓瀏覽器挑適合該螢幕的檔案
• 非首屏延後載入：等捲到該處再抓圖
• 適度壓縮：小螢幕上八成品質與全滿品質幾乎看不出差別

先呈現首屏

先讓人看見內容，比等全部載完更要緊。可以這樣處理：

• 首屏樣式直接寫進 HTML，減少額外請求
• 延後非必要的 JavaScript，例如分析腳本與對話外掛，等頁面起來再啟動
• 提早連線即將用到的外部服務

建議門檻：最大內容繪製低於 2.5 秒、首次輸入延遲低於 100 毫秒、累計版面位移低於 0.1。

降低手機表單的阻力

表單往往決定能否成交，但在小螢幕上填寫並不好受。畫面窄、輸入慢、容易打錯，多一個不必要欄位就多一個離開的理由。

更完整的欄位策略可另讀表單精簡指南，這裡只補掌上場景特別要做的幾件事：

刪減欄位

這是最有效卻最常被略過的一步。實務觀察普遍是：欄位愈多，完成率愈差。可以這樣減：

• 姓與名合成單一姓名欄
• 用郵遞區號自動帶出縣市，少打一行
• 公司名、職稱等非必要項目改為可略過，或直接拿掉
• 可用社群帳號登入，取代整份註冊表

用對輸入類型

把 HTML 的 input type 設對，才能叫出合適的掌上鍵盤：

長表單拆段

若欄位實在刪不掉，就把長表拆成多個短步驟。每一段只留兩到三欄，並顯示進度，讓人覺得快完成，而不是還有一大串。實務上，分段表單的完成率通常高於單頁長表。

讓手機也能順利成交

掌上造訪雖已占約四分之三，不少企業的小螢幕成交率卻只有電腦版的一半。這段落差就是機會：把掌上體驗補齊，營收就有明顯上修的空間。

縮短購買與詢問流程

掌上訪客的決策路徑要盡量短：

• 點一下就能撥出：號碼加上 tel: 連結
• 點一下就能傳訊：接上即時通訊官方帳號，降低開口門檻
• 底部固定行動按鈕：滑到哪都看得到下一步
• 結帳改走行動支付：支援 Apple Pay、Google Pay 與 LINE Pay，少手打卡號

運用手機原生能力

手機不只是縮小的螢幕，還帶著電腦通常沒有的能力：

• 定位：自動判斷所在位置，帶出最近據點
• 鏡頭：允許拍照上傳，例如報修或詢問情境
• 推播：在合適時機送出優惠或進度
• 手勢：左右滑看作品，上滑展開更多內容

小螢幕上的信任訊號

畫面雖然窄，信任線索不能省。比較聰明的方式是嵌進流程，而不是再佔一塊版面：

• 在送出鈕旁放一句降低顧慮的短句，例如先了解再決定
• 服務頁用精簡的客戶標誌列，取代長篇推薦文
• 用具體數字代替長篇公司介紹，例如已協助超過五百家企業

以手機為核心的持續體驗

手機優先不是某個專案階段，而是要一直維持的設計習慣。觸控、導覽、速度、表單到成交，每一段都該用掌上訪客的角度再看一次。

不妨立刻用自己的手機走一遍站點。試著單手填完一張詢問表，記下每一處卡住的瞬間，那些位置就是該改的地方。

若想從基礎掌握整個建站流程，可先看建站入門整理。