2026 電商趨勢報告:AI 搜尋時代的品牌致勝策略索取報告

電商設計· 2026年7月15日

Shopify 手機版怎麼驗收?

Shopify 手機版驗收要用真實裝置完成導覽、搜尋、變體、表單、購物車與結帳,不只縮放瀏覽器。這篇提供觸控、軟體鍵盤、固定元素、效能、無障礙和金物流測試清單。

Tenten 編輯部 · 電商洞察

手機版驗收不能只把桌面瀏覽器縮到 390px。真實裝置有瀏覽器工具列、安全區、軟體鍵盤、觸控、慢網路和不同效能。固定購買列在桌面模擬正常,鍵盤開啟後可能遮住地址欄;hover 能顯示的內容,在手機則完全沒有入口。

建立裝置矩陣,以實際流量為主,至少涵蓋 iOS Safari、Android Chrome、小螢幕與較舊常見裝置。

先走完整交易旅程

從首頁或廣告落地頁進入,使用 menu、搜尋和 filter 找商品,查看圖片與尺寸,選 variant、加入購物車、套用折扣、登入或訪客結帳、選物流與付款,再完成訂單。接著測訂單通知、返回商店、取消或退款入口。

每一步記錄預期、實際、裝置、OS、瀏覽器、網路和版本。只說「手機看過」不能重現問題。

檢查觸控與固定元素

按鈕、close、色票、carousel dots 和 filter chips 要有足夠 target 與 spacing。WCAG 2.2 新增 Target Size (Minimum) 與 Focus Not Obscured 等準則,可作為檢查依據。觸控不應依賴精準拖曳,drag 功能提供點按替代。

Announcement、header、chat、cookie banner、sticky add-to-cart 和 bottom navigation 同時出現時,計算剩餘 viewport。任何固定元素都不能遮住表單錯誤、CTA 或 focus。

軟體鍵盤和表單

測搜尋、email、電話、地址、折扣和付款欄位。使用合適 input type、autocomplete 與 label;鍵盤 Next 能依序移動,錯誤以文字說明並靠近欄位。送出失敗後保留已輸入資料,焦點移到錯誤摘要或第一個錯誤。

中英文輸入法都要測,autocomplete 不應蓋住結果或按鈕。OTP 與登入不能要求使用者解記憶謎題或重複輸入已提供資訊。

導覽、modal 與返回

Menu、filter、尺寸表、圖片放大和 cart drawer 開啟時鎖定背景,焦點留在 overlay,Escape 或清楚 close 能關閉。瀏覽器上一頁應回到原集合位置、filter 和選定 variant,不能每次回頁首。

Deep link、分享與重新整理也要保留必要狀態。不要把關鍵選擇只存在 JavaScript memory。

圖片與效能

確認手機取得適合寬度的 responsive image,首屏 LCP 圖不 lazy load,頁面下方素材才延遲。測慢速網路和 cache cold load,觀察 layout shift、skeleton、按鈕可用時間和第三方 App。

實驗室工具找線索,正式站用 field data 觀察 LCP、INP、CLS。若需要定位,可依 Shopify 網站速度診斷逐層檢查。

金物流與外部跳轉

台灣金流、3D 驗證、超商選店、電子發票和第三方登入可能開新視窗、iframe 或外部 App。測返回後 cart 和 session 是否保留、錯誤是否能復原,以及使用者是否知道目前在哪個服務。付款成功不能因返回頁失敗而重複送單。

輔助技術與裝置設定

用鍵盤、VoiceOver 或 TalkBack 走商品選擇和表單;放大文字、粗體字、減少動態與高對比設定也要抽查。Landscape 和 200% zoom 時內容可 reflow,不靠水平捲動完成主要任務。

測試中斷與恢復

手機購物常被來電、切換 App、鎖屏或網路變動中斷。將商店切到背景後回來,確認 variant、cart、表單和付款狀態沒有重複或遺失。弱網斷線時顯示可理解錯誤與重試,不要讓使用者連續點按造成重複加入或送單。

也要測分享 link、從 LINE 或 Instagram 內建瀏覽器開啟,以及切到外部金流再返回。In-app browser 的 cookie、popup 和下載行為可能不同,若不支援需提供清楚轉到系統瀏覽器的方式。

發布後以裝置分群監看

比較 iOS、Android、瀏覽器版本和 viewport 的錯誤、Core Web Vitals、cart 與 checkout。某裝置樣本少時不要過度解讀,但交易阻斷即使人數少也要優先重現。客服回報保留裝置與時間,方便對照 deployment 和第三方事故。

將阻斷付款、資料錯誤、操作障礙和視覺差異分級,每次修正回原旅程重測。完整驗收可和 Shopify 專案驗收共用案例,並保留真機證據。

想把這些方法用在你的品牌上?

預約免費諮詢