RWD 手機版

手機的操作邏輯與電腦不同

電腦有滑鼠，可以精準點擊、可以「移過去」觸發效果、螢幕夠寬可以把選單全部攤開。手機這三件事都沒有。

把電腦版的導覽邏輯直接搬到手機，最常見的結果是：選單能打開，但很難用。

漢堡選單的正確用法

三條橫線的圖示已經是手機選單的通用符號，多數使用者認得。但有幾個常見的錯誤：

把重要動作藏進選單

「聯絡我們」「立即詢價」「電話」這類行動按鈕，不應該只存在於選單裡。訪客要先點開選單、再找到項目、再點擊，中間每一步都會流失人。

建議做法：重要的行動按鈕常駐在畫面上——固定在頂部、或固定在底部。服務業尤其建議把電話常駐，這一項直接影響來電量。

選單打開後沒有明顯的關閉方式

使用者打開選單後改變主意，需要一個明確的關閉按鈕。只靠「點旁邊空白處」不夠，因為不是每個人都知道。

選單項目太多，需要捲動

如果選單打開後還要往下捲才看得完，代表主選單項目過多。應該精簡，或改用分組呈現。

下拉選單在手機上的問題

電腦上的下拉選單依賴「滑鼠移過去」觸發。手機沒有這個動作——手指只有點擊，沒有停留。

直接沿用的結果是：點一下父項目，可能直接跳頁而看不到子項目；或是要點兩次才展開，但沒有任何提示。

正確做法是改成點擊展開的收合式選單，並且父項目旁要有明確的展開圖示（箭頭或加號），讓使用者知道這裡還有下一層。

層級要更淺

電腦上三層選單勉強可用，手機上超過兩層就很難操作。這也是為什麼網站架構規劃階段就要控制層級深度，見網站選單怎麼設計。

點擊區域要夠大

手指的接觸面積遠大於滑鼠游標。點擊目標太小或太密集，就會點錯。

業界的建議大致是每個可點擊元素至少 44 到 48 像素見方，且元素之間要有足夠間距。

常見的違反情況：

• 頁尾的連結一行排五個，全部擠在一起
• 文章內文中的連結，前後行距太密
• 關閉按鈕做得很小，放在角落
• 分頁的數字按鈕排得太緊

常駐元素要小心

固定在畫面上的元素（頂部選單列、底部行動按鈕、右下角的客服圖示）很實用，但也會吃掉本來就不多的螢幕空間。

建議原則：

• 固定元素合計不要超過螢幕高度的兩成
• 頂部選單列可以做成「向下捲動時收起、向上捲動時出現」
• 注意常駐元素會不會遮住內容——尤其是頁面最底部的內容，容易被固定的底部按鈕蓋住
• 彈出視窗要有明顯且好按的關閉按鈕

手機上的搜尋功能

如果網站內容量大，手機上的搜尋比選單更常被使用——因為捲動找東西太累。

建議把搜尋圖示放在容易點到的位置，而不是藏在選單最下方。

麵包屑在手機上的處理

麵包屑對從搜尋結果直接進入內頁的訪客很重要——他們沒經過首頁，對網站結構毫無概念。

但完整的麵包屑在手機上容易斷行或超出螢幕。常見的處理方式是只顯示上一層，或把中間層級收合。重點是至少要能往上一層。

驗收時該測的五件事

1. 用實機測試，至少 iPhone 與 Android 各一支。模擬器測不出所有問題
2. 單手操作——重要按鈕是否在拇指容易觸及的範圍
3. 選單的每一層都點過——包含最深的那一層
4. 檢查固定元素有沒有遮住內容——特別是頁面最下方
5. 請沒看過這個網站的人試用——最有效的測試方法

完整的驗收項目見網站驗收怎麼做。

手機上的每一個欄位都是流失點

手機打字費力，網路可能不穩，使用者常常是在通勤、排隊、走路時填表。欄位越多，放棄的人越多——這在手機上比電腦上嚴重得多。

對多數企業網站來說，表單是主要的詢價來源。表單設計的細節，直接影響實際收到多少詢問。

欄位精簡的原則

問自己：這個欄位現在真的需要嗎

常見的多餘欄位：

• 公司統編——成交後再問就好
• 地址——除非要寄送實體物品
• 預算範圍——很多人不願意在第一次接觸就透露
• 如何得知本站——對訪客沒有價值，只對你有價值
• 重複確認欄位——再輸入一次 Email，在手機上特別惱人

判斷標準：沒有這個資訊，你就無法回覆對方嗎？ 不是的話，就不該是必填。

建議的最小組合

稱呼、聯絡方式（電話或 Email 擇一必填）、需求描述。三欄就能開始對話，其餘的在回覆時再問。

鍵盤與輸入的細節

這些是使用者不會察覺、但做了會明顯順暢的細節：

• 電話欄位要跳出數字鍵盤——不要讓使用者在注音鍵盤上找數字
• Email 欄位要跳出含 @ 的鍵盤
• 自動填入要能運作——讓瀏覽器記住的姓名、電話、Email 可以一鍵帶入
• 不要禁止貼上——有些網站為了「安全」禁止在 Email 欄位貼上，在手機上非常擾人
• 輸入框的文字大小要足夠——某些瀏覽器在字體過小時會自動放大整個頁面，造成版面跳動

驗證與錯誤提示

即時驗證，但不要太早

使用者才輸入兩個字就跳出「格式錯誤」，是很差的體驗。應該在離開該欄位後才驗證。

錯誤訊息要說清楚怎麼修

• 不好：「輸入錯誤」
• 好：「電話請輸入 10 碼數字，不需要加符號」

送出失敗時不要清空已填內容

這是最容易讓人放棄的設計。在手機上重打一次全部內容，多數人會直接離開。

錯誤位置要能一眼看到

手機螢幕短，如果錯誤欄位在畫面外，使用者會不知道發生什麼事。應該自動捲動到第一個錯誤處。

送出後要有明確回饋

常見的問題是：按了送出，畫面沒有反應，使用者不確定成功了沒，於是又按一次——結果收到兩筆重複詢問。

應該做到：

• 按下後按鈕立即變為處理中狀態，並防止重複點擊
• 成功後顯示明確的訊息，說明大概多久會回覆
• 如果會寄送確認信，也一併說明

比表單更重要的：直接聯絡的方式

對很多行業來說，訪客更想直接打電話或加 LINE，而不是填表單。這在急件、服務業、地區型業務上特別明顯。

電話要能一鍵撥出

手機上的電話號碼應該做成可點擊撥號的連結。這是投報率最高的一個小細節——很多網站的電話只是純文字，使用者必須自己記下來再撥，中間就流失了。

提供多種聯絡管道

不同年齡層與情境的偏好不同：

• 電話——急件、年長客群
• LINE——台灣使用者接受度最高的即時管道
• 表單——需要完整描述需求時
• Email——B2B 客戶習慣留下書面紀錄

建議把這些選項放在容易觸及的位置，讓訪客自己選最順手的方式。

表單一定要測到「真的收得到信」

這是驗收時最常被漏掉、後果卻最嚴重的一項。

常見的災難是：表單看起來正常送出，通知信卻進了垃圾郵件匣，或根本沒寄出。老闆以為最近生意清淡，其實是詢問沒有送達，而且不會有任何人來告訴你。

驗收與定期檢查時，請確實做這三件事：

1. 從手機實際送出一次
2. 確認指定信箱收得到
3. 確認沒有進垃圾郵件匣

如果通知信一直進垃圾桶，多半是寄件驗證沒設好，排查方式見公司信箱收不到信或被當垃圾信怎麼查。

斷點是什麼

斷點（Breakpoint）是版面切換的螢幕寬度門檻。例如寬度小於某個值時顯示單欄、超過就變成三欄——那個切換的數值就是斷點。

理解斷點的用處在於：看設計稿與驗收時，知道該檢查哪幾種寬度，而不是隨便縮一縮就當作測過了。

常見的斷點區間

實際數值各家做法不同，重點不是記住數字，而是知道至少要檢查這幾個區間。

最容易被漏掉的兩個

• 手機橫向——使用者轉個方向就會遇到，但很少被測試
• 大螢幕——內容如果沒有限制最大寬度，在寬螢幕上會被拉得很散，一行文字長到難以閱讀

設計稿階段要看什麼

多數廠商會提供電腦版與手機版兩份設計稿。確認時建議把這幾點看清楚：

一、內容的優先順序有沒有改變

電腦版並排的三個區塊，在手機上必須決定誰先誰後。這個順序是設計決策，不是技術問題，應該由您確認。

常見的錯誤是側邊欄的內容被排到最下面——如果那裡放的是聯絡資訊或重要訴求，等於被埋掉了。

二、有沒有內容在手機版消失

如果某些內容在手機版被隱藏，要問清楚原因。搜尋引擎以手機版為主要判斷依據，被隱藏的內容可能連帶損失搜尋能見度。

三、標題與文字的實際長度

設計稿常用短短的示意文字。請把真實的標題套進去看——「專業精密機械零組件加工服務」在手機上會變成幾行？版面還撐得住嗎？

四、圖片的裁切

橫幅圖片在手機上通常會被裁成接近方形。重要的人事物不要放在圖片邊緣，否則會被切掉。這一點在提供素材時就要考慮。

五、表格與長資料

超過三欄的表格在手機上很難呈現。設計稿要說明處理方式：橫向捲動、轉成卡片式、還是隱藏次要欄位。

驗收時的檢查方法

用實機，不要只用模擬器

電腦瀏覽器的手機模擬功能很方便，但測不出所有問題——特別是實際的觸控操作、字體渲染、以及某些瀏覽器的特殊行為。

建議至少準備 iPhone 與 Android 各一支實機。最省事的做法是請幾位同事各自用自己的手機開一次。

用縮放視窗做初步檢查

在電腦上把瀏覽器視窗慢慢縮窄，觀察版面在哪些寬度會重新排列。這可以快速找出明顯的破版點。

過程中特別注意：有沒有某個寬度區間版面是壞的——例如手機正常、電腦正常，但平板寬度時卡在中間變得很奇怪。

檢查清單

• 各斷點下版面都正常，沒有元素重疊或超出
• 沒有出現非預期的左右捲動
• 文字在最小螢幕上仍清楚可讀
• 圖片沒有變形或嚴重裁切
• 選單的每一層在手機上都能操作
• 表單可以完整填寫並送出
• 固定元素沒有遮住內容
• 手機橫向也正常

把測試範圍寫進驗收文件

這一點對雙方都是保障。驗收若沒有明確的測試範圍，日後任何一台特殊裝置上的顯示問題，都可能變成爭議。

合理的寫法是：支援主流瀏覽器的最新版與前一版，手機以主流機型的預設瀏覽器為測試基準，並列出實際測試過的裝置清單。

「支援所有裝置」這種寫法看似有保障，實際上無法執行也無法驗收。驗收的完整作法見網站驗收怎麼做。

上線後也要定期檢查

手機螢幕尺寸持續變化、瀏覽器每年更新。三年沒有調整的網站，會在某些新裝置上出現破版而沒人發現。

建議每季用手機實際開一次網站，走過主要頁面與表單。這件事只需要幾分鐘，但能及早發現問題。

手機版問題的特性：沒人回報

電腦版壞了，同事會說。手機版壞了，訪客通常只是默默離開——你不會收到任何回報，只會看到轉換率莫名其妙地低。

這篇整理最常見的幾種手機版問題、成因與排查方式。

一、頁面可以左右滑動

最常見也最明顯的破版。正常的手機版只該上下捲動，如果可以左右滑、右側出現空白，代表有元素超出了螢幕寬度。

常見成因

• 圖片沒有設定最大寬度——原圖比螢幕寬
• 表格太寬——欄位多的表格沒有做捲動處理
• 很長的英文或網址沒有斷行——一長串不含空格的文字會撐開版面
• 寫死的固定寬度——某個區塊指定了大於螢幕的寬度
• 嵌入的外部內容——地圖、影片、第三方元件有自己的預設寬度

怎麼找出兇手

從頁面頂端往下捲，一段一段看哪一區出現多餘的空白，通常問題就在那一段。找到後把該區塊的內容逐項移除測試，可以定位到具體元素。

二、字太小或按鈕點不到

多半是電腦版樣式直接沿用到手機造成的。手機的字級與間距需要單獨設定，不是等比例縮小。

檢查方式：把手機拿到正常閱讀距離（不要湊到眼前），看內文是否需要瞇眼。按鈕則用實際的手指點，不要用指甲。

三、固定元素遮住內容

頂部選單列、底部行動按鈕、右下角客服圖示，都可能蓋住內容。

最常出問題的兩個地方：

• 頁面最底部——最後一段內容或頁尾被固定按鈕蓋住
• 表單的送出按鈕——正好被底部固定列擋住，使用者按不到

另外，手機鍵盤跳出時會壓縮可視範圍，原本正常的版面可能突然變得擁擠。填表時要實際測試這個情況。

四、只在 iPhone 上有問題

iPhone 的 Safari 使用與其他瀏覽器不同的核心，在部分行為上有自己的表現方式。這是最需要實機測試的環境，電腦模擬不一定測得出來。

常見的差異出現在：

• 整頁高度的計算方式——與網址列的顯示隱藏有關，可能造成版面高度跳動
• 固定元素在捲動時的行為
• 表單元件的預設外觀
• 影片的自動播放限制
• 輸入框在聚焦時可能觸發頁面自動放大

處理原則：設計階段就避免依賴這些邊界行為，並在驗收時務必用實機測過。

五、手機上特別慢

手機的網路條件與運算能力都不如電腦，同一個網站在手機上通常慢得多。而使用者對慢的容忍度很低。

最常見的原因：圖片

這是最大宗。直接把手機拍的原圖上傳，一張就好幾 MB，一頁放十張就是幾十 MB。

處理方式：

• 上傳時自動壓縮與縮圖——好的後台應該做到這件事，避免問題發生在源頭
• 依螢幕提供不同尺寸——手機不需要載入電腦版的大圖
• 使用較新的圖片格式——同樣畫質下檔案更小
• 延遲載入——畫面外的圖片先不載入

其他常見原因

• 載入了過多的外掛與追蹤碼
• 字型檔案過多過大——中文字型尤其肥大
• 首頁塞了大量輪播圖，每一張都要載入
• 影片檔案沒有壓縮

六、電腦版正常，平板卡在中間很奇怪

容易被漏測的區間。成因通常是斷點設定的區間之間有空隙，或某個寬度下版面邏輯還沒切換。

檢查方式：在電腦上把瀏覽器視窗從最寬慢慢縮到最窄，全程觀察，不要只看幾個定點。

排查的順序

1. 確認範圍——所有手機都有問題，還是只有某一款？只有 iPhone 通常是瀏覽器特性問題
2. 確認頁面——全站都有，還是只有特定頁面？只有某頁多半是該頁的內容造成的
3. 確認是否與內容有關——例如某一則新聞貼了很寬的表格，把該頁撐開了
4. 清除快取再測——排除看到舊版樣式的可能
5. 換一支手機測——排除單一裝置的設定問題

回報問題時該提供的資訊

清楚的描述可以大幅加快處理速度：

• 哪一頁（附網址）
• 什麼手機、什麼瀏覽器
• 做了什麼操作
• 預期結果與實際結果
• 截圖——手機截圖最直接

「手機看起來怪怪的」需要來回確認很多次才知道問題在哪。

預防勝於排查

• 設計階段就確認手機版設計稿，見斷點與設計稿檢查
• 驗收時用實機測試，並把測試範圍寫進驗收文件
• 上線後每季用手機開一次，走過主要頁面與表單
• 後台上傳圖片時自動壓縮，從源頭避免速度問題