電商網站,手機版才是主場

上個月一位做寵物用品的老闆傳訊息給我們：「網站改版才半年，電腦上看很漂亮，為什麼業績沒起來？」我們請他做一件事——用自己的手機、開無痕視窗、完整買一次自家的商品。他十分鐘後回訊息，只有一句：「我連超商取貨那一頁都選不下去。」他的網站不是做得不好，是沒有人在手機上真的走完過一次。而他六成以上的客人，只會在手機上見到他。

六成以上的生意在手機上，但最少人驗收手機版

先把數字擺清楚，因為這件事常被講得很模糊。

台灣的行動交易已經佔整體電商交易的六成以上。如果用 Statista Digital Market Outlook 的口徑計算，2025 年行動電商佔整體電商營收的比例超過 72%，預估 2026 年會突破 75%。兩套數字有落差是正常的，因為統計的是不同東西——一個算交易筆數，一個算營收金額——但方向完全一致：手機不是「另一個版本」，它是主場。

同時間，台灣整體零售的網路銷售額在 2025 年達到 6,716 億元，年增 2.8%。市場還在長，只是長得比前幾年慢，這代表接下來的成長更依賴「把既有流量轉成訂單」，而不是「再買更多流量」。

奇怪的是，大部分網站的製作流程完全反過來。設計稿是在 27 吋螢幕上畫的、提案是在會議室投影幕上看的、驗收是老闆在辦公室電腦上點的。手機版通常只被確認一件事：有沒有跑版。

沒跑版跟好用，差得非常遠。一個按鈕可以位置正確、顏色正確、文字正確，然後單手拿著手機時拇指就是搆不到——它在版面上完全正常，在生意上完全失效。

38% 這個數字，說明問題有多普遍

Baymard Institute 長期在做電商 UX 的基準測試，他們最新的 benchmark 有一組對照很值得記：只有 48% 的桌機版商品頁達到「不錯」以上的水準，手機版只有 38%。換個角度說，高達 62% 的領先電商網站，商品頁 UX 只有「普通或更差」。

注意兩件事。第一，這測的是「領先電商網站」，不是路邊小店，所以你不用覺得自己特別糟——這是產業的普遍狀態。第二，手機比桌機低十個百分點，而手機的流量比桌機高一倍以上。做得比較差的那一版，剛好是看的人比較多的那一版。

Nielsen Norman Group 在商品頁這題上投入更久。他們做了五輪研究、跨美國、英國、丹麥、印度、中國，實測超過 350 個電商網站，最後整理出 108 條商品頁設計準則。而這 108 條的核心其實只有一句話：在對的時間，給對的細節，深淺剛好。

這句話在手機上特別難做到，因為螢幕窄、一次只看得到一小塊。桌機可以把資訊攤開來讓人挑，手機只能排隊，而排錯順序的代價就是顧客滑不到那一段就走了。

實體店的業務員很懂這個順序。客人剛走近，他不會馬上背規格；客人摸了材質，他才說「這個是日本進口的」；客人猶豫了，他才補一句「不滿意七天可以換」。手機版商品頁該做的，就是把這套順序照抄下來。

拇指構不到的按鈕，等於沒有這個按鈕

這是手機版最物理、也最容易被忽略的一件事。

人單手拿手機的時候，拇指能輕鬆碰到的範圍大概是螢幕下半部偏中間的一塊弧形區域。螢幕越大，構不到的面積越大——現在主流手機都是六吋以上，畫面最上方那一條，等於是要換手或調整握姿才碰得到的地方。

所以有幾個東西，放錯位置就是在跟顧客收費：

• 「加入購物車」不要只放在商品圖下方。顧客往下滑看完規格跟評價之後，那顆按鈕已經滑走了。要做成底部固定的橫條，一直跟著
• 數量增減的加減號不要做太小。手機上的可點擊區域建議至少 44 像素見方，視覺上可以小，但可點範圍要大
• 規格選項（尺寸、顏色）用大色塊按鈕，不要用下拉選單。下拉選單在手機上會蓋掉半個畫面，而且看不到目前選了什麼
• 重要連結不要塞在頁尾。退換貨政策、聯絡方式如果只在最下面，手機上等於要滑兩分鐘才找得到

這幾件事的共同點是：它們在設計稿上看起來都沒問題，只有在真的用手拿著手機滑的時候才會暴露。這也是為什麼手機版一定要用手驗收，不能用滑鼠模擬。

字級與欄位，細節差很多

手機上有幾個技術細節，做錯了顧客不會抱怨，只會默默離開。

第一，內文字級不要小於 16px。這不只是好不好讀的問題——在 iPhone 的 Safari 上，如果輸入框的字級小於 16px，點下去的瞬間整個畫面會自動放大，版面當場跑掉，顧客還要自己縮回來。一次就夠煩了，結帳頁有十個欄位就是十次。

第二，輸入欄位的型別要設對。手機號碼欄位如果沒有設定成數字型別，顧客點下去跳出來的是注音鍵盤，他要自己切成數字。email 欄位沒設對，鍵盤上就不會有 @ 這個快捷鍵。這些都是幾行設定的事，但每一個都在增加放棄的機率。

第三，自動帶入要打開。姓名、電話、地址這些欄位如果有設定好對應的自動填入屬性，手機就會主動跳出「要不要幫你填」。這是最便宜的優化之一，很多網站卻因為表單是客製的而漏掉。

第四，錯誤訊息要在欄位旁邊。手機畫面小，如果錯誤訊息統一顯示在表單最上方，顧客送出之後看到紅字，還要自己找是哪一格錯了。訊息要貼著出錯的那一格，而且要說清楚錯在哪，不要只寫「格式錯誤」。

Baymard 的資料顯示，領先電商的結帳平均要走 5.1 個步驟、填 11.3 個欄位；而他們建議的理想欄位數是 12 到 14 個，實測平均卻高達 23.48 個表單元素。多出來的每一格，在電腦上只是多動一下滑鼠，在手機上是多一次切鍵盤、多一次捲動、多一次想「算了」。

超商取貨，台灣手機購物最常卡死的一關

這一關是台灣特有的，國外的 UX 研究不會告訴你，但它在本地的殺傷力非常大。

超商取貨是台灣網購最常用的取貨方式之一，而它的技術實作通常是：點下去會跳出物流商提供的門市選擇頁面，選完再導回你的網站。這個「跳出去再跳回來」的過程，在手機上有非常多可以壞掉的地方。

常見的災情有這幾種：

• 跳出去之後回不來，或是回來之後購物車空了，前面填的資料全沒了
• 門市選擇頁本身沒有做手機版，出現一個需要左右橫滑才看得完的地圖
• 在 LINE 或 Instagram 的內建瀏覽器裡直接失效。這點最要命，因為社群導購的流量幾乎全部都在內建瀏覽器裡
• 選完門市之後，畫面沒有明確顯示選到哪一間，顧客不確定有沒有成功，又點一次

驗收的方法很明確，請照這個順序測：先用 Safari 或 Chrome 測一次，再從 LINE 傳網址給自己、在 LINE 裡面點開測一次，最後從 Instagram 個人檔案的連結點進去測一次。三種環境都走完，才算測過。

很多老闆會說「這是物流商的系統，不是我們能改的」。部分是真的，但你至少能控制兩件事：一是在跳轉前先把購物車跟已填資料存好，二是跳轉失敗時給一個備援的手動輸入門市的選項。這兩件事做了，卡住的顧客至少還有路可以走。

手機版的速度，是另一個世界

速度這件事最難的地方，是老闆很難把「秒數」換算成「錢」。這裡有兩個可以直接拿來算的數字。

第一，100 毫秒的延遲，大約讓轉換率掉 7%。第二，53% 的手機使用者會放棄載入超過 3 秒的網站。

一半以上。還沒看到你的商品長什麼樣，人就走了。

而且手機的處境本來就比電腦差：網路可能是 4G、可能在捷運上、處理器比筆電慢、螢幕外還有一堆 App 在搶資源。在電腦上覺得「還好啊」的網站，在手機上常常慢一倍以上。

電商網站最容易胖的地方其實很固定，而且多半是設計階段就埋下的：

• 首頁輪播大圖。一次載五張三千像素寬的圖，手機用戶通常只看到第一張就滑走了
• 商品圖沒壓縮。轉成 WebP、寬度控制在 1200px 以內，通常可以省掉七成檔案大小，肉眼還看不出差別
• 字型載太多套。中文字型檔案很大，載兩套就是好幾百 KB，而且字型沒載完前文字會空白或跳動
• 外掛裝到爆。每個外掛都會載自己的 CSS 跟 JS，裝二十個就是二十份，手機上要一個一個解析
• 追蹤碼疊太多層。GA、Meta Pixel、LINE、各家廣告的轉換碼全開在首頁，這些全部是在跟你的商品圖搶頻寬

檢查完全免費：把網址丟進 Google PageSpeed Insights，切到手機版測。不用追求滿分，先把手機版拉到 3 秒內開始有東西看得到，這一步的投資報酬率最高。

陌生客在手機上，只看三個東西決定信不信你

手機螢幕小，顧客沒耐心逐條研究，所以信任感的建立必須更集中、更前面。

台灣消費者對第一次購買的品牌其實有一層戒心，尤其是官網，因為心裡有個預設選項：「反正蝦皮也有類似的。」要讓他留下來，你得在他想到這句話之前就把疑慮解掉。

實務上他只看三個東西：

第一，別人買過沒有。顧客評價的影響力大到超出多數人預期——有顧客評價時，高單價商品的轉換率提升可以到 3.8 倍。而且帶買家自己拍的照片最有用，素人照片的說服力遠勝精修圖。手機版要把評價區放在規格之前，不要壓在最底下。

第二，買錯了會不會很麻煩。退換貨政策要用白話寫，而且要寫在商品頁上，不是只放在單獨的一頁。一句「七天內不滿意，我們付運費換」比三百字的條文有效得多。

第三，出事找不找得到人。電話、LINE、客服時間，要在兩次點擊內找得到。很多網站把「關於我們」跟「聯絡我們」藏在頁尾最小的那一行——這是在省一塊錢賠一百塊。一個找不到人的賣家，顧客憑什麼把信用卡號交出去。

AI 工具實戰：一個下午做完手機版健檢

這一段給完整流程。你不需要懂設計、不需要會寫程式，照著跑一個下午，可以產出一份「我家網站手機版現在什麼狀況」的文件。拿去跟廠商談改版的時候，對方的報價會立刻精準很多。

第一步（30 分鐘）：把自己的流程拍下來。用手機開無痕視窗，從首頁開始，完整買一次自家商品到付款完成為止。每一步都截圖，每卡一下就多截一張。這份截圖是後面所有步驟的素材。

第二步（30 分鐘）：請 AI 拆解流程。把截圖依順序上傳給 ChatGPT、Claude 或 Gemini，用這個 prompt：

「這是我電商網站手機版購買流程的每一步截圖，依順序排列。請幫我做四件事：一、算出總共幾個步驟、總共幾個需要顧客手動輸入的欄位。二、指出哪些欄位可以刪掉、合併、或改成自動帶入，每一項說明理由。三、指出顧客第一次看到運費總額是在第幾步，評估這個時間點會不會太晚。四、整理成一張表：問題、嚴重程度、大概多難改。請不要稱讚我的設計，也不要建議我重做整個網站。」

最後那兩句限制很重要。AI 預設很愛先誇一輪、再給萬用建議，加上限制之後回答的密度會高非常多。

第三步（40 分鐘）：翻譯效能報告。把網址丟進 Google PageSpeed Insights 測手機版，報告看不懂沒關係，整頁截圖或把文字複製下來貼給 AI：

「這是我電商網站手機版的 PageSpeed Insights 報告。我不是工程師。請用白話幫我做三件事：一、先告訴我 TTFB 跟 LCP 各是多少，判斷問題比較偏主機端還是網站內容端。二、列出最該先修的三個項目，每一項說明『修了大概會快多少』跟『這是後台自己能改、還是要請工程師』。三、把這三項寫成我可以直接傳給網站廠商的訊息，語氣客氣但具體。不要建議我換主機，除非報告裡真的有支持這個結論的數據。」

第四步（40 分鐘）：拆解對手的商品頁順序。找三個賣類似東西、生意看起來不錯的網站，用手機打開它們的商品頁，把文字複製下來（只要文字，不要圖）：

「以下是三個同類商品的手機版商品頁文字。請幫我：一、把每一頁的資訊出現順序列成表格（標題、價格、賣點、規格、評價、運費、退換貨等），我要看它們分別把什麼放在最前面。二、列出三頁都有、但我可能漏掉的資訊項目。三、以一個第一次看到這個品牌的消費者角度，指出每一頁最讓人猶豫的地方各一個，並說明原因。只要指出問題，不要稱讚。」

第五步（40 分鐘）：補手機版的情境圖。手機螢幕小，圖片的重要性反而比電腦版更高。商品實拍圖一定要是真的，但「使用情境圖」可以用 AI 補。工具別選錯：

• Adobe Firefly：最適合電商。強項是「圍繞你已有的實拍圖做編輯」——換背景、延伸畫面、補光影，商品本體不會被亂改。訓練素材都經過合法授權，商用版權上最安心
• Canva Magic 系列：適合做社群圖、促銷橫幅，套版快，不用學
• Midjourney：視覺質感最頂，但不要拿來生真實商品圖。電商商品圖最重要的是準確，而它會自己「想像」細節。拿來做品牌氛圍圖、形象頁背景才對

用 Firefly 換背景的流程是：上傳去背後的實拍圖 → 選「生成背景」→ 描述場景。範例描述：

「淺木紋桌面，自然光從右上方窗戶灑入，背景是模糊的居家客廳，色調溫暖偏米白。商品置中偏右，左側留出空白以便疊放文字。光源方向與商品原本的陰影一致。輸出為正方形構圖。」

最後兩句最多人漏掉。沒交代光源方向，AI 常常給你一張商品陰影朝左、背景光卻在左邊的圖，一眼就假，反而傷信任感。沒交代構圖比例，出來的橫圖放進手機版列表又要重裁一次。

誠實講 AI 做不到的四件事。第一，它看不到你真實的後台數據，所有判斷都來自你貼給它的東西，你貼錯它就答錯。第二，它不該碰你的帳號密碼、金流 API 金鑰或顧客個資——任何要你把訂單資料整包貼進聊天視窗的做法都不要做，那是個資外洩，不是效率。第三，它生的圖一定要人眼複檢，特別是商品顏色、材質、logo 有沒有被悄悄改掉，這關過不了就不能上架。第四，它不懂你的毛利結構，所以「免運門檻要設多少」這種決定不要問它，那是你的數字，不是它的。

合理的分工是：AI 負責整理、比對、翻譯技術名詞、生草稿；人負責判斷、驗收、承擔風險。

手機版最常見的六個錯誤

第一，只在自己的電腦跟自己的手機上驗收。用公司的網路、用已經登入的帳號、用存了地址的瀏覽器，什麼問題都看不到。要用無痕視窗，當一次真正的陌生客。

第二，忘了測 LINE 跟 Instagram 的內建瀏覽器。社群導購的流量幾乎全在裡面，而內建瀏覽器對跳轉、彈窗、第三方 cookie 的處理都跟一般瀏覽器不一樣。這是台灣電商最常遺漏的一塊。

第三，首頁塞滿東西，商品頁草草了事。老闆的注意力通常都在首頁，但顧客從廣告點進來，多半直接落在商品頁。首頁是門面，商品頁才是櫃檯。

第四，商品圖東拼西湊。有的手機拍、有的原廠給、有的去背白底、有的情境圖，尺寸還不一致。手機版列表一排下來長短不一，整個網站的質感就散了，而質感直接影響信任。

第五，彈窗一進站就蓋滿畫面。電腦上的訂閱彈窗只佔中間一塊，手機上是整個螢幕。而且關閉的叉叉常常小到按不到。要做彈窗，至少等顧客滑過一半再出現。

第六，上線就當作結束。電商網站是持續調整的，不是交屋。至少每季看一次：哪些商品頁有流量沒訂單、手機版結帳哪一步掉最多人、速度有沒有變慢。

最後，一句實在話

手機版最容易被誤解的地方，是大家都把它當成「電腦版縮小」。

但從顧客的角度看，他從來不知道有兩個版本。他只有一個網站，就是他手上這一個。他在做的也不是評價你的設計，而是一連串很小的決定：要不要往下滑、要不要點進去、要不要相信、要不要把信用卡拿出來。設計的工作，就是讓這一串決定每一步都比上一步更容易一點。

所以如果你看完只想做一件事，就做這件：今天下班前，用自己的手機、開無痕視窗、完整買一次自家的商品，每卡一下就截一張圖。不用找人、不用花錢，十五分鐘。那份截圖就是你網站最誠實的健檢報告。