我最近在整理這個官網時,最常回頭改的不是顏色,而是手機版的節奏。桌機看起來合理的東西,到了手機常常會全部黏在一起,或者點起來很不安心。
手機版不是把桌機整份縮下去。螢幕變窄後,讀者的耐心、手指操作、視線移動和網路狀態都不一樣,版面也應該重新排。
這篇核心結論
RWD 的重點不是縮放,而是重新決定手機上先看什麼、先點什麼、哪些桌機效果應該直接簡化。
手機先看資訊順序,不是先看造型
桌機可以同時放主標、說明、圖片、側欄和多個卡片,因為視野夠大。但手機一次只能承接很少資訊,如果第一屏先塞滿裝飾和次要內容,讀者就很難知道要不要繼續往下看。
我會先把最重要的標題、摘要和行動路徑排出來,再決定圖片和補充資訊的位置。這樣手機版不是變少,而是變得更有順序。
我這輪手機版優先收斂三個地方
手機優先檢查
- 標題不能因為寬度太窄而變成不自然的碎片。
- 主要按鈕和選單要有足夠觸控面積,不靠 hover 才能理解。
- 卡片、表格和圖片要能在 390px 寬度內穩定顯示。
這些看起來基本,但很多手機版問題都從這裡開始。只要其中一項沒處理好,整頁就會變得需要猜、需要放大、需要左右滑。
有些桌機效果到了手機就該直接拿掉
桌機上的 hover、斜貼卡片、左右分欄、sticky sidebar,在手機上不一定有價值。有些效果保留下來只會增加高度、壓縮內容或造成操作混亂。這時候拿掉不是退步,而是讓手機版回到它該有的使用方式。
我會保留品牌語氣和關鍵視覺,但把不必要的互動和裝飾簡化。手機版看起來可以安靜一點,但一定要更好讀。
我的判斷方式
如果一個桌機效果在手機上不能幫助理解或操作,就不要硬留。手機版先順,品牌感才有地方成立。
常見 FAQ
FAQ
- 手機版要先設計嗎?
至少要先想手機資訊順序。即使先做桌機,也不能最後才把它縮成手機版。 - 手機版可以少放內容嗎?
可以調整呈現順序和密度,但不該把關鍵資訊藏掉,除非有明確原因。 - RWD 驗證只看瀏覽器縮放夠嗎?
不夠。要實際測常見手機寬度、觸控狀態、表格和長標題,避免只在桌機模擬時看起來正常。
結論
手機版官網不是桌機的縮小版。它需要自己的資訊順序、操作節奏和視覺取捨。當手機版先變順,桌機的設計語氣才不會在小螢幕上變成負擔。