版面在手機上排得下，不代表在手機上好用。很多網站尺寸都對了，使用者卻還是按錯、填到一半放棄、或是等不到畫面出來就退出。差別在於行動裝置的使用情境和坐在電腦前完全不同：手指比滑鼠游標粗、經常只有一隻手能用、注意力被周遭切碎、網路品質時好時壞。這篇不談版面怎麼縮放，而是從使用者當下的處境出發，談觸控、單手操作、表單負擔與載入取捨這四件事。
使用者不是坐在桌前，而是在移動中看你的網站
把行動使用者想像成在捷運上、排隊時、走路等紅燈的空檔打開你的網站，設計判斷會變得比較準。這種情境有三個特徵：時間零碎、只有一隻手、環境會干擾閱讀。零碎時間代表使用者不會慢慢往下讀，關鍵資訊必須在最前面就出現，而不是鋪陳三段才講到重點。
環境干擾則影響對比與字級。在陽光下看手機，低對比的淺灰字幾乎讀不到；晃動中閱讀，行距太密的長段落非常吃力。行動版的內文字級不該小於電腦版，很多人反而在手機上把字縮小以求排得下，這是本末倒置。段落也要拆得比電腦版更短，一段講一件事，讓使用者中斷後回來還接得上。
觸控目標的大小與間距，決定使用者要不要按第二次
滑鼠游標的作用點只有一個像素，指尖接觸螢幕的面積則大得多，而且手指本身會擋住要按的地方，使用者是憑記憶按下去的。所以行動版的可點擊元素要留出足夠的實體面積，不能只把文字連結放大字級了事，真正該加大的是可點擊的區域範圍。
間距和大小同樣重要。兩個按鈕靠得太近，即使各自都夠大，也會頻繁誤觸；並排的取消與確認、清單裡緊鄰的編輯與刪除，都是誤觸的高風險組合，破壞性高的動作最好和常用動作分開放，或加一層確認。
拇指構得到的範圍，決定重要按鈕放哪裡
單手握著手機時，拇指能舒服碰到的區域大致集中在螢幕下半部靠近握持側，越往上方對角線的角落越吃力，得換手或把手機往下滑。手機螢幕越做越長，這個問題只會更明顯。
依這個前提配置，主要動作應該放在畫面下緣容易觸及的位置，而不是照搬電腦版擺在右上角。長頁面若只在最底部放一個行動按鈕，使用者滑到一半想聯絡就找不到，可以考慮讓主要按鈕固定在畫面下方，但要注意別遮住內容，也要讓使用者能收起它。
行動裝置上的表單，每多一個欄位就多一次放棄
在手機上填表單是件累人的事：鍵盤佔掉半個畫面、切換輸入法麻煩、打錯字要精準點回去修改。表單是整個行動體驗中最容易流失使用者的一段，值得逐項檢查。
- 刪到不能再刪：每個欄位都要能說出用途，說不出來就拿掉，非必要的資訊留到成交後再問。
- 鍵盤要對：電話、信箱、數字欄位要設定對應的輸入型態，讓系統直接叫出正確鍵盤，少一次切換就少一次放棄。
- 讓系統代勞：姓名、電話、地址欄位加上正確的自動填入屬性，使用者可以一鍵帶入，比自己打快得多。
- 標籤不要放在框內：只用框內提示文字，使用者開始輸入後就看不到欄位在問什麼，回頭檢查時只能猜。
- 錯誤要即時且就地：填完該欄就提示格式問題，訊息放在欄位旁邊，不要等到送出才把整頁的錯誤列在最上面。
下拉選單在手機上也要斟酌。選項只有兩三個時，直接排成可點選的按鈕比展開選單快；選項很多時，可輸入篩選的欄位又比長長的清單好用。至於送出按鈕，要夠大、要在鍵盤收起後仍看得到，並在送出後給明確的處理中狀態，避免使用者以為沒反應而連按。
行動網路下的取捨：什麼先載，什麼可以不載
行動網路不像辦公室的固網穩定，訊號會在移動中變差，資費也可能有限制。這代表行動版不能只是把電腦版的所有素材照搬過來再縮小顯示，必須有意識地取捨。
優先順序的原則是：使用者最需要的東西要最先出現。文字內容與主要動作按鈕應該優先呈現，裝飾性的大圖、影片背景、動畫效果都可以延後或在行動版直接省略。畫面外的圖片採用延後載入，等到使用者捲動接近時再取，可以省下不少初次載入的負擔。
另一個要留意的是版面穩定度。圖片與嵌入區塊若沒有預留空間，載入完成的瞬間會把下方內容往下推，使用者原本要按的連結突然移位，就會按到別的地方。這在網路慢的時候特別明顯，也是行動裝置上最惱人的體驗之一。測試時建議把網路切到較慢的狀態實際操作一遍，只在辦公室的無線網路下測，很多問題根本不會出現。
常見問題
手機版和電腦版的內容可以不一樣嗎？
資訊本身建議一致，呈現方式可以不同。把手機使用者當成只需要簡略版的人是常見誤判，實際上他們可能正在店門口查營業時間，需要的資訊反而更即時。比較好的做法是調整順序與層次，把行動情境下最常被查詢的內容往前放，其餘折疊起來讓有需要的人展開，而不是整段刪除。
需要另外做一個手機版的網址嗎？
絕大多數情況不需要。同一組網址、同一份內容，靠版面在不同寬度下重新排列，維護成本低很多，也不用處理兩套網址之間的對應。維護兩份頁面最常見的下場是內容不同步，電腦版改了、手機版忘了改，使用者看到的資訊互相矛盾。除非行動端要走完全不同的商業流程，否則不建議分家。
手機上的彈出視窗是不是完全不能用？
不是不能用，而是要看時機與比例。使用者一進站就跳出蓋住整個畫面的訂閱視窗，關閉鈕又小又難按，這種確實傷害體驗，也可能影響搜尋引擎對頁面的評價。若真的需要，建議等使用者看完一定比例的內容再出現、佔畫面比例不要過大、關閉區域要夠大好按，並且關掉之後短期內不要重複跳出。
怎麼知道自己的網站在手機上哪裡有問題？
最有效的方法是拿自己的手機，用單手、在戶外、開著行動網路實際走一次主要流程：找到資訊、按下按鈕、填完表單送出。過程中記下每一次按錯、每一次要換手、每一次等待。這種親身測試抓到的問題，通常比在電腦上縮小視窗檢查來得真實，也比只看報表數字更容易知道該改哪裡。
行動版體驗做得好，對搜尋排名有幫助嗎？
搜尋引擎目前主要以行動版的內容來理解和評估頁面，載入速度與版面穩定度也是被納入考量的體驗指標，所以行動端的基本體質確實會影響表現。不過要說清楚的是，這些屬於基礎門檻，做好了不代表就能排到前面，內容本身是否真的回答了搜尋者的問題，仍然是更關鍵的因素。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
加入京采 LINE 好友相關主題
下一步
如果你正在評估「行動網頁設計」相關的規劃，可以參考我們的網頁設計服務，或直接與我們聯繫，我們會依你的產業與現況給出務實的建議。