上週有個客戶傳了一張截圖到群組裡，是用手機打開他們官網的畫面：「表格文字擠成一坨、Hero 區塊的標題被裁到只剩一半、聯絡按鈕小到要用指甲尖才按得到」。
他說：「我們做的 RWD ，手機版怎麼長這樣？」
其實這種情況我們看過太多次了。問題往往不只是工程師的 code 寫錯（對啦，有前端意識的資深工程師，收費有到會幫你順手調整一下），而是在設計階段，就埋下了地雷。設計稿在桌機上看起來精美，但沒有人想過「這個版面在 375px 的手機螢幕上會變成什麼樣子」、「稍微縮小一下，這個區塊是不是還美觀」。
就來看看，怎麼從設計端就避開這些坑，讓你的企業網站在各種裝置瀏覽下都沒有問題。
📊 手機版不是附帶的，是主戰場
根據 TWNIC 2025 年台灣網路報告，台灣的行動上網率已經到了 87.1%。全球的狀況也差不多，行動裝置流量佔了整體網路流量的 62.5%（DemandSage, 2025）。換句話說，超過一半的訪客，是用手機在看你的網站。
但手機版的體驗呢？根據 Semrush 的統計，行動版網站的跳出率大約 58%，桌機版大約 50%，差了快 10 個百分點。電商轉換率更明顯——行動版大概只有桌機的一半左右。 （當然這裡還有使用時機的差異和其他問題，這裡就先部探究）
算一下就知道這有多痛：假設你的官網每個月有 1 萬次手機訪問，跳出率多 10% 就等於每月多流失 1,000 個潛在客戶。你花了大把預算做出來的官網，問題不在流量不夠，問題在手機版體驗把人趕走了。
🎯 設計稿的「先天缺陷」
我們接手過很多企業官網改版專案，發現一個共通的問題：設計師交出來的設計稿，往往只有一個版本——1920 or 1440px 寬的桌機版。
行動版呢？「之後再說」、「工程師應該知道怎麼處理吧」。好一點的設計公司會給你 1024px 的平板、簡單的手機版本模擬，但實質上中間缺少的轉換，也不會告訴你。
這就像你請建築師設計一棟房子，他只畫了客廳的平面圖，臥室、浴室、廚房都留給工頭自己蓋。工頭當然蓋得出來，但成品八成不是你想要的樣子。
具體來說，設計稿常見的先天缺陷有幾個：
只做桌機版，沒有行動版設計稿。 工程師只好自己猜測行動版的元素排列、間距、字體大小。猜對了是運氣好，猜錯了就是你看到的那個「怪怪的」手機版。
所有數值都用固定像素標註。 設計稿上標著「容器寬 1200px、間距 60px、標題 48px」，但完全沒有說明這些數值在不同螢幕尺寸下應該怎麼變化。工程師收到的只是一張截圖，不是一套設計系統。
間距和字體大小散亂，沒有規律。 間距 17px、23px、42px、55px 到處跑，字體大小也是隨機的。沒有統一的 spacing scale（間距系統），工程師就沒辦法建立可維護的 CSS 變數，每個元素都要個別調整。
Atlassian 和 Carbon 等知名設計系統都建議用 8px 倍數來建立 spacing scale（8、16、24、32、48、64），這樣設計和開發的溝通成本可以大幅降低。
📱 手機上最容易爆的 5 個設計問題
這 5 個問題，是我們看過最多的「手機版災難」：
1. 表格在手機上變成一坨亂碼
企業官網很愛用規格對比表、價格表。桌機上一目了然，但手機螢幕能清楚顯示的大概就 2 欄。NN/g（Nielsen Norman Group）的研究也證實了這點——手機上超過 2 欄的表格，使用者幾乎沒辦法正常閱讀。
解法其實不難：手機版把表格轉換成卡片式呈現，每一列資料變成一張卡片。或者凍結第一欄，其餘欄位允許水平滑動。重點是，設計師在設計階段就該想好行動版的替代方案，不能只畫一個寬表格就交差。
2. 導航選單層層疊疊，按到崩潰
Mega menu 在桌機上用滑鼠 hover 就能展開，很直覺。但觸控裝置沒有 hover 這回事。使用者點一下，選單展開了；再點一下，是要收合選單還是進入該頁面？這個操作邏輯在觸控裝置上根本不通。
更糟的是，很多 mega menu 在手機版直接用原本的樣式硬塞，選單項目小到要瞇眼才看得到。建議行動版改用手風琴式（accordion）的展開方式，或者只保留最重要的 3-5 個項目在導航列，其餘收進漢堡選單。
＊小要訣：確認內容的取捨，不是所有 user 都想要知道你的網站全部的內容˙！
3. Hero 圖片的文字被裁成一半
桌機版的 Hero 區塊，設計師把標題文字疊在一張寬幅背景圖上，看起來很漂亮。但那張 16:9 的橫幅圖片，在直向手機螢幕上會被大幅裁切——左右兩邊直接不見。如果標題文字剛好在被裁掉的區域附近，整個標題就只剩半截。
正確做法是針對不同螢幕尺寸準備不同裁切的圖片版本——桌機用 16:9 全景，手機用 1:1 或 3:4 直向裁切，把焦點集中在主題上。或者更乾脆，行動版改成「上圖下文」的堆疊佈局，不要硬疊。
4. 按鈕小到要用指甲按
這個問題說起來有點荒謬，但真的超常見。設計師在桌機版做了一個高度 30px、間距 4px 的按鈕組，用滑鼠游標點沒問題，但手指頭的接觸面積比游標大多了。W3C 的 WCAG 2.2 無障礙規範明確建議，觸控目標最少 24×24 像素（AA 等級），理想是 44×44 像素（AAA 等級）。
別小看這個問題。手機螢幕小、操作環境分心（可能在捷運上、在排隊），使用者本來就不太有耐心慢慢瞄準按鈕。如果按鈕又小又擠，他們會直接放棄，轉換率就這樣流失了。
5. 輪播沒人在滑
很多企業官網首頁都有圖片輪播（carousel），放了五六張 banner 自動切換。但根據 Notre Dame University 針對自家網站的追蹤研究，只有約 1% 的使用者會去點那個切換按鈕，絕大多數人只看第一張就往下滑了。NN/g 的研究也指出類似趨勢。
在手機上問題更多。輪播的滑動手勢跟瀏覽器的返回手勢會打架（特別是 iOS Safari 的邊緣滑動），底下那排小圓點在觸控裝置上根本按不到。
＊小要訣：真的要用輪播，至少確保最重要的內容放在第一張，別指望使用者會往後滑。
⚠️ 設計師和工程師的「翻譯問題」
除了視覺設計本身的問題，還有一個更隱性的地雷：設計師和工程師之間的溝通落差。
最常見的狀況是「中間尺寸」被遺忘了。設計師做了桌機版（1440px）和手機版（375px），看起來兩個版本都很完美。但你拿起 iPad 橫放（1024px）打開網站一看——三欄佈局擠得歪七扭八，字跟字黏在一起，按鈕被擠到第二行。
這個尺寸不是桌機也不是手機，兩邊的設計稿都管不到它。更別提有些人使用視窗時，會縮放、並排顯示，這時候 RWD 就顯得更為重要
我們遇過客戶帶著 iPad 去參展，現場要展示官網給客戶看，結果畫面一塌糊塗。平板橫向直向切換時版面還會跳來跳去，因為設計師根本沒有想過這個情境。
再來是設計稿沒有標注「元素的彈性行為」。這個區塊是固定寬度？還是要跟著螢幕等比縮放？元素之間的間距是固定的還是平均分配的？如果設計師沒有說清楚，工程師只能憑經驗自己判斷，每種職位的理解不同，結果自然跟你想的不一樣。
✅ 怎麼從設計端就避開這些坑
講了那麼多問題，解法其實不複雜。我們在專案中會要求設計師在交稿前確認這幾件事：
至少提供兩個版本的設計稿。 桌機版（1440px）和手機版（375px），這是最低要求。如果預算允許，再加一個平板版（1024/768px）。Figma 的 breakpoint 功能可以在同一個 page 裡建立多個尺寸的 frame，設計決策在設計階段就被記錄下來，不用靠工程師猜。
間距和字體大小要有規律。 就是讓數值不要大大小小亂跳。間距統一用 8 的倍數（8、16、24、32、48、64），字體大小也限定 5-6 個等級就好。設計稿裡不要再出現 17px、23px 這種隨意的數值，工程師會感謝你的。
設計稿要標注元素的伸縮行為。 這個區塊在螢幕縮小時要跟著縮？還是固定寬度？還是到某個尺寸就換行排列？設計師在 Figma 裡用 Auto Layout 就能把這些行為設定好，工程師一看就知道怎麼做，不用猜。
表格、輪播、modal 都要有行動版替代方案。 不要只畫桌機版就交差。表格要規劃卡片式呈現、導航要規劃手風琴式展開、modal 要考慮虛擬鍵盤彈出後的版面。
觸控目標不能小於 44px。 這個最簡單，但最容易忘。特別是頁尾的連結群組、麵包屑導覽、表格裡的操作按鈕。
🔍 現在就檢查你的官網
說了這麼多，最直接的行動就是：拿起你的手機，打開自家官網，花 3 分鐘檢查這 5 個地方：
| 檢查項目 | 怎麼測 | 有問題的症狀 |
|---|---|---|
| 表格 | 找到任何一個表格頁面 | 文字擠成一團、需要左右滑動才能看完 |
| 導航選單 | 點開選單，試著進入第二層 | 按不到、選項太小、不知道怎麼收合 |
| Hero 圖片 | 看首頁最上方的大圖 | 文字被切掉、圖片重點不見了 |
| 按鈕 | 試著點「聯絡我們」或「立即諮詢」 | 要瞄準很久才按得到、容易按錯 |
| 輪播 | 看首頁有沒有自動切換的 banner | 滑不動、小圓點按不到、只看得到第一張 |
如果有 2 個以上中獎，你的官網手機版體驗可能正在流失客戶。
💡 發現問題之後，下一步該怎麼做
檢查完發現有問題，別慌。先搞清楚問題出在哪個階段，處理方式完全不同：
如果你正在規劃新網站或改版，在找設計廠商之前，先確認合約裡有這幾件事：設計稿要包含桌機版和手機版兩個版本、驗收時要用實際手機測試（不只是桌機上的模擬器）、導航選單和表格要有行動版的替代設計。這些不是加分項，是基本要求。
如果你的官網已經上線，但手機版有問題，不一定要整個砍掉重練。很多時候問題集中在幾個特定頁面或元件（表格、選單、Hero 區塊），局部修正的成本比你想像的低。先請工程師或廠商跑一次手機版的健檢，列出問題清單和優先順序，再決定修還是改版。
不確定問題有多嚴重？ 歡迎聯絡我們。我們可以幫你的官網做一次免費的 RWD 快速健檢，用實際裝置測試，告訴你哪些問題最急、修起來大概需要多少時間，讓你有具體的數字可以跟老闆報告。
下一篇我們會從 CSS 實作的角度，告訴你哪些寫法最容易讓手機版跑版，以及 px、rem、vh 這些 CSS 單位到底該怎麼選。
- TWNIC 2025 台灣網路報告 – 財團法人台灣網路資訊中心, 2025
- 54 Mobile Internet Traffic Statistics 2026 – DemandSage, 2025
- Mobile vs Desktop Usage and Trends 2025 – Semrush, 2025
- Mobile Tables – Nielsen Norman Group
- Mobile Carousels – Nielsen Norman Group
- Carousel Interaction Stats – Erik Runyon, Notre Dame University, 2013
- WCAG 2.5.8: Target Size (Minimum) – W3C, 2023
- Designing Adaptive Components Beyond Responsive Breakpoints – Stephanie Walter
- Spacing – Atlassian Design System
- Tips for Creating a Responsive Webpage in Figma Sites – Figma
註：所有數據與引述均截至 2026-03-17
