文章

網站為何該從手機畫面開始規劃？

試著回想排隊時用手機查找附近店家的情境。點進一家評價尚可的頁面，卻遇到字級過小、按鈕難以點選、圖片遲遲不出現。多數人會立刻關閉，改看下一家。缺乏手機優先思維的網站，每天都在這樣流失可能成交的訪客。

不少經營者只在電腦前檢查官網，卻忽略大多數顧客其實透過手機瀏覽。若小螢幕體驗未被認真對待，再精緻的桌面版也難以促成行動。

多項流量調查顯示，行動裝置已佔網站造訪的七成以上。搜尋引擎自 2023 年起全面以手機版頁面作為收錄與排序的主要依據。若規劃時未把小螢幕放在第一位，閱讀體驗與搜尋能見度都會一起下滑。

手機優先設計指的是什麼？

這是一種網頁策略：先在最小的螢幕上完成核心資訊與關鍵操作，確認手機上已經清楚好用，再依序延伸到平板與桌機。

此概念可追溯至 2011 年，由設計師 Luke Wroblewski 提出。他指出，小螢幕的空間限制會迫使團隊辨認真正不可少的內容，從而做出更聚焦、更貼近使用者的決策。

落實時可掌握四項要點：

1. 資訊取捨：空間有限時，只留下最需要被看見的訊息
2. 由簡入繁：先完成基礎功能，螢幕變大再補上進階互動
3. 適合手指：每個可點元件都依觸控方式調整尺寸與間距
4. 速度優先：以行動網路條件為基準，讓頁面盡快可用

與響應式做法有何差別？

兩者常被混為一談，其實分屬不同層次。前者是規劃順序與內容取捨，後者是讓版面隨螢幕變化的實作方式。

可以這樣理解：響應式是實現手法，手機優先是規劃策略。較理想的組合，是用小螢幕思維決定內容，再用自適應技術完成各尺寸。若想了解版面隨螢幕調整的技術細節，可參閱自適應版面規劃說明。

搜尋引擎改以手機版為主的影響

當索引基準從桌面版轉向行動版，所有網站的排序邏輯都跟著改變。

索引方式如何轉變？

早期排序主要看桌面版內容。自 2019 年開始逐步改以手機版作為收錄與排名的依據，至 2023 年已全面切換完成。

對搜尋表現的實際作用

• 手機上看不到的內容不會被收錄：只放在桌面版的段落，搜尋引擎會略過
• 手機載入速度會影響排序：核心體驗指標以行動版實測為準
• 結構化標記也要在手機版完整：Schema 不能只在桌面版正確
• 手機版的站內連結同樣計入權重：被收起來且無法被讀取的導覽，可能削弱頁面之間的傳遞

因此，從手機開始規劃已不只是體驗問題，也是搜尋策略的一部分。若要進一步看搜尋友善的頁面結構，可參考搜尋友善的頁面規劃說明。

實際怎麼做？

原則確立之後，執行時可從內容、版面與觸控三方面著手。

內容：先刪再寫

小螢幕上每個像素都珍貴，內容安排可以這樣做：

• 決定先後：先問若訪客只看一句，該留下哪一句
• 縮短句子：標題控制在兩行內，段落盡量不超過三行，重點以粗體標出
• 次要資訊收合：用問答或折疊區塊收納非必要說明
• 圖片分尺寸提供：為手機準備較小但仍清楚的圖檔

版面：以直向單欄為主

手機畫面宜以單欄直排為基礎：

• 只做上下捲動：避免左右滑動才能看完內容
• 層級一眼可辨：靠字級、色彩與留白區分主次
• 不要擠滿：為了多塞資訊而壓縮行距，閱讀會變累
• 常用操作固定在易達處：導覽或主要按鈕可固定在畫面下方，方便單手點選

觸控：依照手指來設計

手指與滑鼠的操作方式不同，手機介面需要考慮：

• 可點區域要夠大：至少 44×44 像素，材料設計建議則為 48×48 像素
• 相鄰元件要留空：可點項目之間至少約 8 像素，降低誤觸
• 主要按鈕放在拇指容易碰到的位置：多半在畫面下方約三分之一
• 手勢可以輔助，但不能是唯一路徑：滑動或長按可作為加分，仍應保留明確按鈕
• 表單盡量短：減少欄位，並搭配自動填入與合適的鍵盤類型

手機版最常出現的五種問題

即便團隊有經驗，仍容易在小螢幕上踩到類似的坑。以下五類最常被忽略：

字級過小、行距太緊

內文在手機上宜至少 16 像素，行距約為字級的 1.5 倍以上。若把桌面用的 14 像素直接套到手機，讀者往往得放大才能看清。

蓋版視窗佔滿畫面

全螢幕廣告或強制彈窗會嚴重打斷閱讀。搜尋引擎也指出，這類干擾式插頁可能使排名下滑。

沒有處理載入時間

用手機的人通常更沒耐心。若超過約 3 秒仍未看到主要內容，過半訪客會離開。未壓縮的圖片與未精簡的程式碼是常見原因。效能調整的做法可參考頁面速度改善說明。

選單層級太多

手機導覽應短而清楚。超過三層容易讓人迷路。漢堡選單雖省空間，也不宜把過多功能全部藏進去。

沒考慮橫拿手機

有人會在橫向觀看影片或表格。請確認版面在橫向時仍完整、不溢出。

如何檢查成果？

頁面完成後，可用下列方式確認手機體驗是否達標。

行動裝置相容檢測

搜尋引擎提供免費檢測，可快速判斷頁面是否適合在手機上瀏覽。

頁面速度分析

這類工具會評估行動版的載入與互動表現，並給出可執行的建議。特別留意三項核心指標：

• 最大內容繪製（LCP）：主要可見區塊出現的時間，建議不超過 2.5 秒
• 互動到下一次繪製（INP）：操作後的回應速度，建議不超過 200 毫秒
• 累積版面位移（CLS）：畫面穩定程度，建議不超過 0.1

瀏覽器內建的裝置預覽

開發者工具可模擬多種螢幕寬度，方便在製作過程中即時查看。常見可測寬度包括：

• 375 像素：較小的智慧型手機
• 390 像素：近年常見的手機寬度
• 412 像素：部分較大的 Android 手機
• 768 像素：小平板直向
• 1024 像素：大平板直向

仍須用真機確認

模擬畫面無法完全取代實機。至少各用一台 iOS 與一台 Android 實際點選，檢查觸控、字體顯示與速度是否符合預期。

它已是基本要求，而非加分項

在行動流量持續增加、索引已全面以手機版為準的環境裡，忽略小螢幕等於放棄大多數潛在訪客。

從手機開始，並不代表桌面體驗要變差。先鎖定核心內容與關鍵功能，往往能讓各種尺寸都更清楚。若想從基礎原則看起，可閱讀網頁規劃入門說明。若網站仍是先做桌面再勉強縮到手機，建議盡早重排資訊架構。