網站的行動版怎麼看 版面與操作

圖片來源：Pexels 免費圖庫

如果你的網站有一半以上的訪客來自手機，那麼電腦上看起來漂亮其實意義有限。行動版的問題多半不是設計不好看，而是「手指按不到」「字看不清」「表單填不完」。這些都能在十分鐘內自己檢查出來。以下整理一份可以照著走的檢視清單。

先用自己的手機走一遍

不要只看縮小的瀏覽器視窗，實際拿手機從首頁開始，照訪客的動線走到聯絡頁。

過程中把每一個卡住的地方記下來，那就是最該優先處理的清單。如果身邊有沒看過這個網站的人，請他照同一條路線走一次，會看到更多你已經習慣而忽略的問題。

版面與字級

• 內文不要小於可舒適閱讀的大小
• 行距要足夠不要擠在一起
• 左右留白不能貼邊
• 不應該需要左右滑動
• 圖片不要超出畫面

需要橫向捲動是最明顯的警訊，通常代表某個元素寬度被寫死了。

按鈕與可點區域

按鈕要夠大、彼此要有間距，避免手指一按就按到旁邊那個。

電話與地址建議做成可直接撥號與開地圖的連結，這是行動版最實用的小細節。

選單怎麼設計

層級不要太深，常用的頁面盡量放在第一層，讓人三次點擊內能到達目的地。

選單展開後要能明顯看出目前位置，並且容易關閉。關閉的方式最好不只一種，點空白處也能收起來會更順手。

表單最容易出問題

欄位數量盡量精簡，輸入類型要正確設定，讓手機自動跳出對應的鍵盤。

送出後一定要有明確的成功訊息，沒有回饋的表單會讓人重複送好幾次。

載入與圖片

行動網路不一定穩定，圖片未經處理會讓首頁開很久，跳出的人就多了。

建議把大圖壓過再上傳，並確認是否有延後載入的設定。

常見問題 QA

要另外做一個手機版網站嗎？

多數情況不需要。現在主流是同一套版面自動調整，維護也比較單純。

怎麼知道訪客用什麼裝置？

網站的流量統計工具都會分裝置類別，看一次就知道比例。

橫向捲動怎麼修？

多半是某個元素寬度固定或圖片未設定上限，逐段縮小範圍就能找到。

字級統一調大就好嗎？

不一定。標題與內文的比例也要一起調整，否則層次會亂掉。

表單欄位最少要幾個？

以能完成後續聯繫為準，其他資訊可以在實際接觸後再補問。

多久檢查一次？

改版或新增頁面之後一定要看，平時建議每季走一遍主要動線。

行動版的檢查不需要工具，拿起手機走一遍就會發現問題。這週不妨先從首頁到聯絡頁試一次。