手機網頁設計怎麼做？掌握排版、按鈕與轉換動線的 UX 重點

手機網頁設計是什麼？先分清楚 RWD、AWD 與獨立手機版

手機網頁設計是在手機螢幕上重新安排內容、導覽、互動與轉換動線，讓使用者好讀、好點、好完成任務。RWD 只是其中一種實作方式，不等於完整的手機版網頁 UX。

手機網頁設計的核心不是縮小桌機版，而是重新安排手機任務

手機使用者的螢幕小、操作靠手指、注意力更容易被打斷。桌機版可以同時放主選單、側欄、比較表與多個 CTA，手機版卻必須決定優先順序：先讓使用者知道頁面主題，再讓他找到下一步，例如撥電話、加 LINE、送出表單、加入購物車或閱讀下一篇文章。

Alice Wang 的判斷是，很多手機版網站失敗，不是視覺不漂亮，而是把桌機資訊量硬塞進手機。手機版網頁設計應該先問一個問題：使用者現在最可能想完成哪件事？

RWD、AWD、獨立手機版網站比較表

類型	做法	優點	風險	適合網站
RWD 響應式網頁	同一網址，版面依螢幕寬度自動調整	維護較集中，SEO 管理較單純	若只縮放桌機版，手機 UX 仍會很差	企業網站、服務業網站、內容型網站、多數電商
AWD 自適應網頁	針對幾種裝置尺寸提供不同版型	可對特定裝置做更精準設計	版型與維護成本較高	流程複雜、流量大的網站
獨立手機版網站	手機使用另一套網址或頁面	可完全客製手機流程	內容同步、轉址、SEO 設定容易出錯	少數有特殊情境或舊系統限制的網站

網址與維護方式

RWD 通常使用同一網址，內容與 SEO 設定比較不容易分裂。獨立手機版若使用不同網址，就要特別檢查 canonical、轉址與內容一致性。

SEO 風險

SEO 風險不在於選 RWD 或 AWD，而在於手機版是否漏內容、速度過慢、彈窗干擾、連結難點或結構資料不一致。

適合網站類型

多數台灣企業網站與服務業網站適合從 RWD 開始，但設計時仍要用手機任務驗收，而不是只看桌機版縮小後有沒有跑版。

為什麼手機版 UX 會影響詢問率、成交率與 SEO？

手機版 UX 會影響使用者是否願意繼續閱讀、點擊 CTA、填寫表單、完成購物，也會影響搜尋引擎對頁面體驗的評估。好用的手機版網站，通常更接近真實商業結果。

手機使用者通常更急、更任務導向

手機搜尋常發生在通勤、等待、比較店家或臨時需要服務的時候。使用者不一定想完整認識品牌，他可能只想知道價格範圍、服務地區、是否能預約、電話在哪裡。這種情境下，內容再完整，如果關鍵資訊藏得太深，仍然會流失。

不好點、不好讀、不好填，會直接降低轉換

手機版 CTA 太小、電話不能直接撥打、LINE 按鈕不明顯、表單欄位太多，都會讓使用者中途放棄。尤其服務業網站，手機詢問通常比桌機更接近成交前一步，任何小摩擦都會被放大。

手機體驗也會影響搜尋引擎對頁面的評估

Google Search Central 說明，頁面體驗包含 Core Web Vitals、行動裝置顯示、安全連線、避免干擾內容的過度廣告與插頁等面向。Core Web Vitals 不是排名保證，但它們是判斷使用者體驗的重要訊號之一，可參考 Google page experience 文件。

手機網頁排版原則：讓內容在小螢幕上好讀、好掃描

手機網頁排版要以單欄、清楚層級、適合閱讀的字級與短段落為基準。手機版的目標不是塞下所有內容，而是讓使用者快速掃描並找到下一步。

優先使用單欄與清楚的內容層級

手機版最穩定的內容結構通常是單欄。標題、摘要、重點清單、CTA、補充說明要有明確順序，不要讓使用者在左右滑動、縮放或跳躍式區塊中找資訊。雙欄卡片在手機上若變得太窄，應改為上下排列。

字級、行距、段落長度要以手機閱讀為基準

手機正文不宜太小，段落也不應連續塞滿整個螢幕。實務上，每段控制在一個明確觀點，搭配小標、清單與留白，比把完整桌機文案原封不動搬上手機更有效。

首屏要讓使用者立刻知道頁面能幫他做什麼

手機首屏不該只放大圖、口號或抽象標語。企業網站首屏要回答服務是什麼、適合誰、下一步是什麼；電商頁要讓商品名稱、價格、規格入口與購買按鈕清楚可見。

不要把桌機版元素等比例縮小塞進手機

桌機版的橫向比較表、複雜選單、大型輪播、滿版橫幅，到了手機常變成閱讀負擔。正確做法是重排資訊，例如把比較表改成卡片，把長選單改成分層分類，把多個 CTA 收斂成一個主要行動。

手機導覽設計：選單、Logo、返回與頁面路徑要清楚

手機導覽設計的重點是讓使用者知道自己在哪裡、可以去哪裡、如何回到上一層。選單要短、路徑要清楚，重要任務可以放在固定導覽或固定 CTA。

主選單要縮短，不要搬完整桌機選單

手機版選單應保留主要分類與高價值頁面，例如服務、案例、方案、文章、聯絡。把桌機版所有頁面放進漢堡選單，會讓使用者打開後仍然找不到重點。

Logo 應能回首頁，返回路徑要明確

Logo 回首頁是使用者常見預期。列表頁進入詳情頁後，也要能清楚返回分類、搜尋結果或上一層。這對電商與內容型網站特別重要，因為使用者常在多個商品或文章之間比較。

重要任務可使用固定底部導覽或固定 CTA

服務業網站可把電話、LINE、預約放在底部固定區；電商可固定加入購物車或查看購物車。但固定區不能太高，也不能遮住表單送出、價格、規格選項或頁尾資訊。

避免多層選單太深，手機操作成本會快速增加

手機上的多層選單每多一層，就多一次點擊與理解成本。若分類很多，應提供搜尋、熱門分類、返回上一層與清除狀態，而不是讓使用者在三層以上選單裡迷路。

手機點擊與互動元件：按鈕、連結、表單都要適合手指操作

手機互動元件要能被手指準確點擊，並在操作後給出明確回饋。按鈕大小、點擊間距、連結辨識、錯誤提示與 hover 替代，都是手機版 UX 的基本驗收項目。

按鈕要夠大，且與其他可點擊元素保持距離

W3C WCAG 2.2 的 Target Size Minimum 建議可點擊目標至少 24 by 24 CSS pixels，或有足夠間距避免誤觸。實務上，主要 CTA 常會做得更大，因為手機不是用滑鼠精準點擊，而是用手指快速操作。

不要依賴 hover 才顯示重要資訊

桌機常用 hover 顯示選單、提示或操作按鈕，但手機沒有穩定的 hover 行為。規格、價格、庫存、錯誤訊息、表單提示、購買條件，都應直接顯示或用點擊後可預期的方式展開。

文字連結要明顯，不要只靠顏色判斷

手機螢幕亮度、戶外環境與色弱使用者都會影響辨識。文字連結應有清楚樣式，例如底線、圖示或足夠對比，不要只用淡色文字表示可點擊。

錯誤提示要出現在欄位旁邊，不能只在頁面頂部顯示

表單送出失敗時，如果錯誤訊息只出現在頁首，使用者還要回頭找哪一欄錯。手機版應在欄位附近顯示問題與修正方式，例如電話格式不正確、Email 缺少 @、必填欄位未填。

轉換導向的手機網頁設計：CTA、電話、LINE、購物車要放對位置

轉換導向的手機網頁設計，應讓 CTA 接近使用者的決策點。電話、LINE、詢價、預約、加入購物車與結帳入口，要在使用者看完關鍵資訊時自然出現。

每個頁面只保留一個主要行動目標

同一個手機頁面若同時要求使用者預約、下載、訂閱、分享、填問卷，反而會分散行動。服務頁可主打詢價或預約，商品頁可主打加入購物車，文章頁可主打閱讀下一篇或前往相關服務。

服務業優先放電話、LINE、預約或詢價

台灣服務業網站常見的手機轉換入口是電話撥打、LINE 詢問、預約表單與詢價表單。這些入口應出現在首屏、服務說明後、案例或價格資訊附近，而不是只放在頁尾。

電商優先優化加入購物車、規格選擇與結帳入口

電商手機版最容易卡在規格選擇、數量調整、優惠碼、運送方式與付款流程。設計時要讓使用者先看懂商品差異，再順利加入購物車，最後能清楚回到結帳入口。

固定底部 CTA 要有用，但不能遮住內容

固定底部 CTA 適合高轉換頁，但不是越大越好。它應避開手機瀏覽器底部控制列，保留內容可讀性，並在表單輸入、付款、彈窗出現時避免擋住操作區。

手機表單設計：減少輸入，比漂亮版面更重要

手機表單設計的優先順序是減少欄位、使用正確鍵盤、即時提示錯誤並清楚告知送出後流程。表單越像行政文件，使用者越容易放棄。

只問完成任務必須知道的資料

詢價表單通常先收姓名、聯絡方式、需求簡述即可；電商結帳則只問配送與付款必要資料。公司統編、職稱、詳細預算、完整地址若不是當下必須，就不要放在第一步。

電話、Email、數字欄位要叫出正確鍵盤

電話欄位應叫出數字鍵盤，Email 欄位應方便輸入 @ 與英文，數量與金額欄位也應使用對應輸入型態。這是小細節，但會明顯影響手機輸入流暢度。

錯誤訊息要即時、具體、可修正

錯誤提示不應只寫「格式錯誤」。較好的方式是指出問題，例如「請輸入 09 開頭的手機號碼」或「Email 需要包含 @」。看到這種提示，使用者才知道下一步怎麼修。

送出後要清楚告知下一步

送出表單後，畫面要明確顯示是否成功、多久會回覆、是否寄出確認信、是否可改用電話或 LINE。很多網站漏掉這一步，使用者會懷疑自己是否真的送出。

內容多或商品多的網站，手機版一定要重視搜尋、分類與篩選

商品多、文章多或分類深的網站，手機版一定要把站內搜尋、分類、篩選與列表資訊設計好。使用者找不到內容時，通常不會慢慢翻頁，而是直接離開。

產品多時，搜尋框要比品牌口號更容易找到

電商、課程、媒體與知識型網站，搜尋框不應藏在選單最深處。若使用者帶著明確需求進站，例如找某個產品型號、服務地區或文章主題，搜尋就是比形象文案更重要的入口。

篩選條件要可收合、可清除、可回復

手機篩選區常被做成全螢幕面板或底部抽屜。好的篩選設計要讓使用者看得到已選條件、能一鍵清除、返回列表後仍保留狀態，避免每次點進商品再返回時都要重選。

列表頁要先顯示決策資訊，不要只放漂亮圖片

商品列表至少要顯示商品名稱、價格、關鍵規格、狀態與評價或標籤；文章列表則要顯示標題、摘要、分類與日期。只放大圖會讓列表看起來乾淨，卻降低比較效率。

內容型網站要讓分類與相關文章容易被發現

內容型網站的手機版常把分類、作者、相關文章藏得太深。比較好的做法是在文章段落後提供相關主題、下一篇、同分類文章，讓使用者自然延伸閱讀。

網站類型	手機版優先設計重點	常見錯誤
企業網站	服務分類、案例、聯絡方式清楚	首屏只有形象標語，找不到服務入口
服務業網站	電話、LINE、預約、地點資訊明顯	CTA 只放頁尾，手機使用者要滑很久
電商網站	搜尋、分類、篩選、購物車、結帳順暢	規格選擇複雜，加入購物車不清楚
內容型網站	分類、站內搜尋、相關文章、閱讀體驗	文章列表只有圖片，缺少判斷資訊
活動頁	時間、地點、報名、票券資訊快速可見	視覺很滿，但報名入口不明顯

手機版效能與 Core Web Vitals：速度不是技術細節，而是 UX 的一部分

手機網站速度是 UX 的一部分，因為使用者感受到的是等多久、畫面會不會跳、點擊後有沒有反應。LCP、CLS、INP 可以協助驗收手機版體驗。

LCP：主要內容要快點出現

LCP 衡量主要內容載入速度。依 web.dev Core Web Vitals 文件，良好體驗的 LCP 目標是在頁面開始載入後 2.5 秒內發生。手機版常見問題是首屏大圖太重、伺服器回應慢、字體與 CSS 阻塞顯示。

CLS：版面不能跳動影響點擊

CLS 衡量視覺穩定性，良好目標為 0.1 以下。手機上最惱人的狀況是使用者正要點按鈕，圖片、廣告、字體或提示訊息突然載入，把按鈕推到別的位置。

INP：點了按鈕後要有即時回應

INP 衡量互動回應，良好目標為 200 毫秒以下。手機版若 JavaScript 太重、第三方追蹤碼太多、選單或篩選反應慢，使用者會覺得網站卡住，甚至重複點擊造成錯誤。

圖片、字體與第三方腳本是手機慢的常見來源

手機速度優化不只看主機，也要檢查圖片壓縮、Lazy Load、字體載入、未使用的程式碼、聊天外掛、廣告腳本與追蹤碼。設計階段就要把效能列入驗收，不要等上線後才發現首頁很慢。

手機網頁設計上線檢查清單：25 個必查項目

手機網頁設計上線前，應用清單逐項驗收版面、導覽、點擊、轉換、表單、搜尋、速度、SEO 與真機表現。只看桌機版完成度，無法保證手機版可用。

版面與閱讀檢查

項目	檢查內容
1	手機版使用單欄或容易閱讀的排列方式。
2	標題、段落、清單與 CTA 有清楚層級。
3	正文在手機上不需要縮放即可閱讀。
4	首屏能看出頁面主題、價值與下一步。
5	桌機版大型表格、輪播、橫向區塊已重新安排。

導覽與點擊檢查

6	主選單已精簡，不是完整桌機選單照搬。
7	Logo 可返回首頁。
8	返回上一層、分類或搜尋結果的路徑清楚。
9	主要按鈕大小與間距足夠，降低誤觸。
10	重要資訊不依賴 hover 才顯示。

轉換與表單檢查

11	每頁有明確主要 CTA。
12	電話、LINE、預約、詢價或購物車位置接近決策點。
13	固定底部 CTA 不遮住內容與操作區。
14	表單只保留必要欄位。
15	電話、Email、數字欄位會叫出正確鍵盤。
16	錯誤提示在欄位旁顯示，且可修正。
17	送出後有成功訊息與下一步說明。

搜尋、分類與電商流程檢查

18	內容多或商品多的網站有明顯站內搜尋。
19	分類、篩選、排序可收合、清除與保留狀態。
20	列表頁顯示足夠決策資訊，不只放圖片。
21	購物車、規格選擇、結帳入口在手機上順暢。

速度、SEO 與真機測試檢查

22	使用 PageSpeed Insights 檢查手機版 LCP、CLS、INP。
23	圖片、字體、第三方腳本已壓縮或延後載入。
24	手機版內容、標題、內部連結與結構化資料沒有漏失。
25	已用 iPhone、Android 與不同瀏覽器實測主要流程。

怎麼驗收 RWD 手機版網站？用工具加真機測試

RWD 手機版網站驗收應先用工具檢查常見尺寸與效能，再用真機測試主要任務。模擬器可以抓版面問題，但不能取代真實手機的操作感與載入感。

先用 DevTools 看常見尺寸，但不能只靠模擬器

Chrome DevTools 可快速檢查不同寬度下的版面、選單、斷點與橫向捲動問題。它適合早期除錯，但無法完整代表手指點擊、手機鍵盤、瀏覽器工具列與真實網路環境。

至少測 iPhone、Android 與不同瀏覽器

上線前應測 iPhone Safari、Android Chrome，若受眾有特定裝置也要納入。測試重點不是每個像素完全一致，而是主要任務都能完成：閱讀、搜尋、點 CTA、填表、加入購物車、送出付款或詢問。

用 PageSpeed Insights 檢查手機效能

PageSpeed Insights 可檢查手機版效能與 Core Web Vitals，並指出圖片、程式碼、字體或第三方腳本問題。Search Console 的 Core Web Vitals 報告則會依實際使用者資料分組顯示 LCP、INP、CLS 狀態。

用 Search Console 觀察行動裝置搜尋表現

上線後應在 Search Console 觀察行動裝置的曝光、點擊、排名、索引與 Core Web Vitals 狀態。若手機排名或點擊率與桌機差距過大，就要回頭檢查內容呈現、速度與轉換動線。

哪些內容不該放進本文？

手機網頁設計文章應聚焦手機版網站的 UX 原則、轉換流程、表單、速度與驗收，不應延伸成 App 設計、報價行情、完整前端教學或品牌視覺銷售頁。

不寫 App UI 設計

App 與手機網頁雖然都在手機上使用，但入口、技術、互動模式與上線流程不同。把兩者混在一起，會讓搜尋意圖變得不清楚。

不展開網站設計費用行情

費用行情會把文章帶往報價比較，偏離手機版 UX 驗收。若要談成本，也應只限於 RWD、AWD、獨立手機版在維護上的差異。

不做完整 HTML/CSS 教學

手機網頁設計需要理解前端限制，但這篇文章的任務不是教完整程式碼。Media Query 可以作為概念補充，不應變成開發教學。

不把文章寫成 Pixelcake 服務銷售頁

讀者需要的是可判斷、可驗收、可溝通的手機版設計標準。過度銷售會降低信任，也會稀釋手機版網頁 UX 的主題深度。

常見問題

手機網頁設計和 RWD 是一樣的嗎？

不完全一樣。RWD 是讓同一個網站版面依螢幕尺寸調整的實作方式，手機網頁設計則包含內容排序、導覽、按鈕、表單、CTA、速度與真機體驗。網站可以是 RWD，但手機版 UX 仍然不好。

手機版網站一定要另外做一套嗎？

多數網站不需要另外做一套獨立手機版。RWD 通常較容易維護，也較不容易造成 SEO 設定分裂。只有在舊系統限制、流程高度特殊或大型網站有明確需求時，才需要評估獨立手機版。

RWD、AWD 和獨立手機版網站該怎麼選？

一般企業網站、服務業網站與內容型網站可優先選 RWD。若需要針對特定裝置提供高度客製版型，可評估 AWD。獨立手機版適合少數有特殊流程或舊系統限制的網站，但要承擔較高維護與 SEO 風險。

手機網頁設計最重要的 UX 原則是什麼？

最重要的是讓使用者在手機上快速完成主要任務。版面要好讀，導覽要清楚，按鈕要好點，表單要少填，CTA 要接近決策點，速度要足夠快。美觀重要，但不能取代任務完成。

手機版網站會影響 SEO 嗎？

會。手機版內容是否完整、是否容易閱讀、是否有良好 Core Web Vitals、是否避免干擾性彈窗，都會影響頁面體驗。Google 也提供 Search Console 與 PageSpeed Insights 協助網站檢查行動裝置表現。

手機版 CTA 按鈕應該放在哪裡？

CTA 應放在使用者做決策的位置，例如服務說明後、價格資訊旁、案例後、商品規格附近或文章重點段落後。固定底部 CTA 可以提高可見度，但不能遮住內容、表單或結帳操作。

手機表單為什麼常常讓使用者放棄？

常見原因是欄位太多、鍵盤型態錯誤、錯誤提示不清楚、送出後沒有回饋，或表單在手機上太難點。手機表單應只問必要資料，並讓使用者知道每一步是否完成。

電商網站的手機版設計要特別注意什麼？

電商手機版要重視搜尋、分類、篩選、商品列表資訊、規格選擇、加入購物車與結帳流程。商品圖片重要，但若缺少價格、規格、庫存、評價與配送資訊，使用者很難快速做決定。

手機版網站可以放彈窗廣告嗎？

可以，但要非常克制。彈窗不應遮住主要內容、阻擋閱讀或讓關閉按鈕難以點擊。若是折扣、訂閱或提示訊息，應延後出現，並提供明顯可點的關閉方式。

RWD 尺寸要怎麼抓？

RWD 不應只抓單一手機寬度，而要檢查常見手機寬度、平板與桌機斷點。實務上可先用 DevTools 看多種 viewport，再用 iPhone、Android 真機測試閱讀、選單、表單與 CTA。

舊網站可以改成 RWD 嗎？

可以，但要先評估舊網站結構、前端程式、後台限制、內容量與 SEO 設定。有些舊站可局部改版，有些則重做會更穩。判斷標準不是能不能縮放，而是手機任務能否順利完成。

手機版網站上線前要怎麼驗收？

上線前要檢查版面、導覽、按鈕、CTA、表單、搜尋、分類、購物車、速度、SEO 與真機操作。工具可用 DevTools、PageSpeed Insights、Search Console，但最後一定要用真機跑完主要流程。