LINE 免費諮詢

行動電商設計指南：手機購物體驗、App 與網站怎麼選、PWA 適合誰

電子商務 閱讀約 9 分鐘網軍行銷編輯部
行動電商設計指南：手機購物體驗、App 與網站怎麼選、PWA 適合誰｜網軍行銷
文章目錄

打開自家購物網站的流量報表，多數台灣品牌會看到同一件事：手機來的訪客佔了一大半，但手機的成交率卻常常比桌機低。行動電商（m-commerce）的難處在於，顧客用一隻手、一個小螢幕、在通勤或排隊的零碎時間裡逛你的店，任何一個按不到的按鈕、打不完的表單，都會讓他直接滑走。

這篇文章整理 Nielsen Norman Group（NN/g）、Baymard Institute、web.dev 與 Google Search Central 的研究與文件，從手機購物動線、商品頁、結帳表單，一路談到「要不要做 App」「PWA 是什麼」。目的是幫你判斷資源該先投在哪裡，而不是追逐每一個新技術。

手機購物和桌機購物，到底差在哪

同樣一家店，在手機上逛起來有幾個本質上的差別：

  • 螢幕小，一次只看得到一小塊：桌機上並排的商品資訊，在手機上要上下捲動才看得完，顧客很容易漏看運費、尺寸表等關鍵資訊。
  • 用手指操作，不是用滑鼠：按鈕太小、太擠，就會按錯，按錯一次顧客就失去耐心。
  • 打字很麻煩：每多一個要輸入的欄位，就多一分放棄的可能。
  • 使用情境常被打斷：在捷運上看到一半要下車、在午休時間被叫走，購物車和瀏覽紀錄能不能保留，影響他會不會回來。

Baymard 在 2020 年針對美國與歐洲大型零售商的行動網站做評比，結果多數網站的行動體驗被評為「普通」，沒有任何一個網站達到整體「良好」的水準。連大型零售商都還有很大的改善空間，代表中小品牌只要把基本功做好，就有機會在手機體驗上贏過競爭對手。

先確定 Google 看的是哪個版本

在談設計之前，先處理影響 SEO 的基本前提。Google 已全面採用行動版優先索引，也就是主要以智慧型手機版的 Googlebot 來檢索與理解網站。Google 的文件建議，手機版與桌機版的主要內容、標題、結構化資料要一致，並指出響應式設計是最容易建置與維護的做法。

對電商來說，常見的錯誤是：為了讓手機版「看起來清爽」，把商品描述、規格表、顧客評價刪掉或藏到需要額外載入的地方。這些內容不只顧客需要，也是搜尋引擎理解商品的依據。用摺疊區塊收起來可以，直接刪除就不建議。RWD 的完整做法，可以參考行動優先與 RWD 響應式設計。

手機購物動線的設計重點

首頁與分類：讓人三秒內開始逛

手機首頁不需要塞滿所有東西，重點是讓顧客快速進入「找商品」的狀態：

  • 搜尋框放在明顯的位置，點下去就能輸入
  • 主要分類用大塊、好按的入口呈現，而不是藏在多層選單裡
  • 主視覺輪播不要太多張，也不要自動快速切換，避免顧客還沒看清楚就換掉

商品列表：篩選要好叫出、好關閉

商品列表在手機上最常見的問題是篩選。建議把「篩選」與「排序」做成固定在畫面上方或下方的按鈕，開啟後是全螢幕的篩選面板，選完要清楚顯示「已套用幾個條件」，並讓顧客一鍵清除。分類與篩選的完整設計原則，可以延伸閱讀電商分類架構與站內搜尋。

商品頁：關鍵資訊不要被擠到最下面

手機商品頁由上往下大致的優先順序是：商品圖、品名與價格、規格選擇、加入購物車按鈕，接著才是描述、規格表、評價、運送與退貨說明。實務建議：

  • 加入購物車按鈕可以在捲動時固定在畫面底部，隨時按得到
  • 規格選項（顏色、尺寸）用大顆的選擇鈕，不要用小小的下拉選單
  • 運費與出貨時間用一行字放在價格附近，不要讓顧客到結帳才發現

觸控與表單：最容易被忽略的細節

按鈕要夠大、間距要夠

NN/g 建議觸控目標的實體尺寸至少約 1 × 1 公分，並指出光靠拉大間距無法彌補按鈕本身太小的問題。Shopify 的佈景主題開發文件則建議，行動版的互動元素至少 48 × 48 px，元素之間至少保留 8 px 間距；文件也提到，WCAG 2.2 AA 級的最低標準是 24 px，而 44 px 是 WCAG 2.1 AAA 級的建議值。

落到電商頁面上，最常需要檢查的是：數量加減按鈕、顏色色票、商品卡片上的收藏愛心、購物車裡的刪除按鈕。這些元素在桌機上看起來沒問題，到了手機上常常小到需要「瞄準」才按得到。

結帳表單：讓手機少打字

web.dev 的付款與地址表單最佳做法，有幾項特別適合台灣電商參考：

  • 使用正確的輸入類型：Email 欄位用 email 類型、電話用 tel 類型，手機會自動跳出對應的鍵盤
  • 加上自動填入屬性（autocomplete），讓瀏覽器幫顧客帶入姓名、電話、地址
  • 姓名用一個欄位就好，不需要拆成姓與名
  • 即時提示錯誤，不要等按下送出才一次跳出一排紅字
  • 送出後鎖定按鈕，避免網路慢時重複下單
  • 預設允許訪客結帳，不強迫先註冊會員

在台灣，結帳頁還常有超商門市選擇、發票載具、統一編號等欄位。這些欄位應該依顧客的選擇才出現，而不是全部同時展開。結帳流程的完整優化方法，在結帳流程優化有更詳細的說明。

速度：手機網路不一定穩定

手機使用者可能在訊號不佳的地方購物。商品圖要使用適當尺寸與現代格式、延遲載入畫面外的圖片、減少不必要的第三方程式碼。Core Web Vitals 的觀念與檢測方法，可以參考Core Web Vitals 指南。

App、行動網站還是 PWA？

很多老闆會問：「我是不是應該做一個 App？」先比較三種做法的差異：

項目行動網站（RWD）原生 AppPWA（漸進式網頁應用程式）
顧客取得方式搜尋、廣告、社群連結直接打開需要到商店下載安裝用瀏覽器打開，可選擇加到主畫面
搜尋引擎能否找到可以App 內容通常無法直接被網頁搜尋可以（本質上仍是網站）
開發與維護一套網站通常需要 iOS 與 Android 兩邊維護，加上上架審核在網站上增加功能，成本介於兩者之間
適合對象所有電商的基本盤回購頻繁、會員忠誠度高、有預算長期經營的品牌已有穩定網站、想強化回訪體驗的品牌

原生 App 適合誰

原生 App 的優勢在於會員黏著度與推播能力，但前提是顧客願意下載。對多數台灣中小品牌來說，顧客一年可能只買幾次，要說服他們下載並保留一個 App 並不容易。比較務實的順序是：先把行動網站做好，等回購族群夠大、會員經營有明確策略，再評估 App。

PWA 是什麼

PWA 是運用現代網頁技術、讓網站具備部分 App 體驗的做法，例如加到主畫面、離線時顯示備援頁面。依 web.dev 的說明，可否安裝由各瀏覽器自行判斷，最基本的條件是提供 Web App Manifest。要特別留意 iOS 的差異：web.dev 指出 iOS 與 iPadOS 沒有瀏覽器自動跳出的安裝提示，使用者要從分享選單手動加入主畫面，部分功能也不支援。

web.dev 收錄了一些國外電商導入 PWA 的案例研究，但那些是個別企業的結果，不代表每個網站都能複製。對台灣品牌而言，PWA 比較適合當成「網站體驗做好之後的加分項」，而不是用來取代基本的速度與易用性優化。

行動電商檢查清單

假設你經營一家服飾品牌，可以拿自己的手機，用下面這份清單實際逛一次：

  1. 首頁三秒內能看到搜尋框或主要分類嗎？
  2. 篩選面板能輕鬆打開、套用、清除嗎？
  3. 商品頁上，價格、運費說明、規格選擇、加入購物車按鈕都在第一屏附近嗎？
  4. 尺寸、顏色選項按得準嗎？會不會誤觸隔壁選項？
  5. 結帳時，電話欄位有跳出數字鍵盤嗎？瀏覽器自動填入有作用嗎？
  6. 不註冊會員也能結帳嗎？
  7. 中途離開再回來，購物車內容還在嗎？
  8. 在 4G 訊號普通的地方，商品頁載入速度可以接受嗎？

這份清單也適合在每次改版或更換佈景主題後重新檢查一次。

常見問題

手機成交率比桌機低是正常的嗎？

很多網站都有這個現象，原因包括螢幕小、打字不便、顧客常在手機上瀏覽再到電腦下單。但差距過大通常代表手機體驗有問題，建議用 GA4 依裝置比較各步驟的流失位置，找出卡關的頁面。

已經有蝦皮賣場，還需要經營行動網站嗎？

平台賣場能帶來流量，但版面、會員資料與行銷工具受平台規則限制。品牌官網的手機體驗做好，才能承接廣告與社群導流，並累積自己的會員資料。

PWA 可以取代 App 嗎？

要看需求。PWA 能提供加到主畫面、離線備援等功能，但在 iOS 上的支援程度與原生 App 仍有差距。若你的重點是推播與深度會員功能，仍需評估原生 App。

手機版要不要把內容精簡？

版面可以精簡，內容不建議刪除。Google 以手機版內容進行索引，商品描述、規格與評價可以用摺疊區塊收納，但應保留在頁面上。

結語：先讓手機上的每一步都順手

行動電商的關鍵，不是花大錢做新技術，而是讓顧客在手機上「找得到、看得懂、按得到、打得少」。把這幾件事做好，再考慮 App 或 PWA，投資才會有效果。想從平台選擇、設計到金流物流全面規劃，可以先讀電商網站架設完整指南。

如果你的網站手機流量高、成交卻上不去，網軍行銷的網站設計服務可以協助盤點手機版的動線與介面，排出優先調整的項目。

參考資料

相關服務

電子商務網站設計好逛、好買、好管理的購物網站客製化網站設計傳遞品牌價值的精美網站
標籤：
網軍行銷
網軍行銷編輯部

網軍行銷整合數位資源、創意驅動行銷，為中小企業提供網路整合行銷與品牌解決方案。

延伸閱讀

想讓品牌被更多人看見？

告訴我們你的目標，專案經理會在一個工作天內回覆，提供免費行銷建議。

LINE 免費諮詢
LINE 諮詢申請官網補助專案
免費諮詢