手機版常見的 5 個設計錯誤

現在大多數人用手機瀏覽網站。電腦版看起來很漂亮，手機上卻難以閱讀或操作，訪客會直接離開。以下整理手機版網站最常見的 5 個設計錯誤，以及怎麼避免。

錯誤 1：字太小，要放大才看得清楚

電腦版的字級直接縮到手機上，會小得讀不清楚。內文字級在手機上要夠大、行距要適度，不需要訪客用兩指放大。

怎麼改： 手機版另外設定字級，並在真實的手機上確認閱讀是否舒適。

錯誤 2：按鈕和連結太小、太靠近

手指比滑鼠游標粗得多。按鈕太小或擠在一起，很容易誤觸，讓人覺得很煩。

怎麼改： 按鈕與連結要有足夠的大小與間距，常用的功能（例如撥打電話、聯絡）放在容易點到的位置。

錯誤 3：版面左右捲動或內容被切掉

圖片、表格或固定寬度的元素超出螢幕，造成左右捲動，或內容被截掉。

怎麼改： 使用能隨螢幕寬度調整的版面設定，並實際測試不同尺寸的手機，確認沒有橫向捲動。

錯誤 4：圖片太大，載入很慢

直接放入電腦用的大圖，在手機上的行動網路下，需要很長時間才能載入。

怎麼改： 圖片縮到合適的尺寸並壓縮，不在第一畫面的圖片使用延遲載入。

錯誤 5：選單與表單難以操作

手機上的選單項目太多、展開後遮住畫面，或表單欄位太小、要填很多欄位，都會讓人放棄。

怎麼改：

• 選單要簡單，容易展開與關閉。
• 表單欄位要夠大，電話與信箱等欄位使用對應的鍵盤。
• 必填欄位越少越好。

其他容易被忽略的細節

• 彈出視窗：在手機上遮住內容、關閉按鈕太小，會讓人很不舒服。
• 影片與嵌入內容：要能隨螢幕縮放。
• 聯絡方式：電話、地址可以一鍵撥打與導航。
• 橫向與直向：兩種方向的顯示都要檢查。

怎麼檢查手機版？

• 用自己的手機實際操作每一頁，不要只用電腦縮小視窗。
• 請朋友用不同品牌、不同尺寸的手機測試。
• 使用 Google 提供的檢測工具，查看速度與使用體驗。
• 在 Search Console 查看行動裝置相關的問題報告。

手機版的載入速度也很重要，可以搭配網站速度優化一起檢查；更完整的觀念，可以看RWD 響應式網頁設計。

手機版不是電腦版縮小，而是要從手機使用者的角度重新設計。

延伸閱讀

了解我們的做法：服務項目 →

想檢查你的網站手機版？歡迎和我們聊聊。