購物網站設計：首頁到結帳每一頁該放什麼，加上超取、發票與退貨規定

作者｜晨星行銷　陳俊鳴執行長（網路流量操盤手・企業行銷顧問）

顧客在你的購物網站上買不買，很少是因為「網站不夠漂亮」。

更常見的情況是：他找不到想要的東西、看不出運費要多少、結帳時發現沒有他習慣的付款方式，或是填到一半被要求註冊會員——然後關掉分頁，去別家買。

購物網站設計要處理的，就是這些「卡住的瞬間」。每一頁都在回答顧客心裡的一個疑問，答得出來他就往下走，答不出來他就離開。

下面照顧客走的順序，從首頁、分類頁、商品頁、購物車一路講到結帳，再補上台灣特有的三件事：超商取貨、行動支付、電子發票，以及法規要求你一定要放在網站上的資訊。至於平台怎麼選、架站要花多少錢，站上〈購物網站怎麼架設？〉那篇已經整理過，這裡只談「蓋好之後，每一頁怎麼設計」。

購物網站設計跟一般網站設計差在哪：每一頁都要回答顧客一個疑問

一般官網的目標，是讓人留下聯絡方式；購物網站的目標，是讓人當場付錢。差這一步，設計的重點就完全不同。

想像你在捷運上用手機看到一則商品廣告，點進去。這時候腦子裡會依序冒出幾個問題：這是哪家店？東西是不是我要的那個？總共要多少錢、運費多少？不喜歡能不能退？可以超商取貨嗎？要不要註冊？

每一個問題都是一道關卡。只要其中一題網站沒回答，或答案藏得很難找，你就會先「等一下再說」——而大部分的「等一下」不會回來。

所以購物網站設計比較像規劃一條路，不是佈置一個店面。路上每個轉角都要有指示牌，顧客才不會在半路迷路。

顧客走到哪一頁	心裡在問什麼	這一頁的設計任務
首頁	這是哪家店？賣什麼？可不可信？	三秒內講清楚你是誰、主力商品、從哪裡開始逛
分類頁與商品列表	我要的東西在哪？哪個比較適合我？	分類名稱一看就懂、篩選好用、列表上就看得出差別
商品頁	是不是我要的？總共多少？不喜歡能退嗎？	照片、規格、含運總價、退換貨規則都在購買按鈕附近
購物車	到底要付多少？差多少免運？	總金額與運費在付錢前就攤開
結帳	我習慣的取貨、付款方式有沒有？要填多少？	訪客結帳、欄位精簡、超取／行動支付／電子發票選項完整
確認與完成	這筆真的成立了嗎？什麼時候到？	下單前有確認頁，完成頁與通知信講清楚下一步

這張表右邊那一欄，就是購物網站設計的驗收標準。 每一列都做到，才算把路鋪平。接著一頁一頁看。

購物網站首頁設計：讓第一次來的人三秒內知道你是誰、賣什麼

首頁最常見的錯，是把它當成資料倉庫：輪播五張活動圖、品牌故事、最新消息、所有分類、熱銷排行、IG 動態全部塞上去。看起來很豐富，第一次來的人反而找不到入口。

美國的使用者經驗研究機構 Nielsen Norman Group（以下簡稱 NN/g）研究了 49 個電商網站，結論很簡單：首頁要說清楚「你是誰」，並且露出主要商品、讓人可以馬上開始購物；過度擁擠、看不到代表性商品的首頁，受測者都逛得很吃力。這是美國的研究，但「第一眼看不懂就離開」這件事，台灣顧客不會比較有耐心。

首頁第一個畫面（還沒往下滑的那一塊）建議只放三樣東西：

• 一句話講清楚你賣什麼、賣給誰——不是「用心為您把關」這種每家都能用的話
• 主力商品或主要分類的入口，讓人一點就能開始逛
• 一個看得見的信任線索，例如「全館可超商取貨」「收到七天內可退」這種顧客在乎的承諾，或是實體門市、成立年份這類查得到的事實

首頁的任務是把人分流到對的分類或商品，不是把所有東西展示一遍。

還有一件常被忽略的事：很多顧客根本不是從首頁進來的。點廣告、點社群貼文、從搜尋結果進來的人，第一個看到的通常是商品頁或分類頁。所以首頁講的「你是誰」，在每一頁的頁首也要講得出來——Logo、一句品牌說明、聯絡方式的入口，任何一頁都要找得到。

不要假設顧客會先看過首頁，每一頁都可能是他的第一頁。

版面配色、按鈕顏色、留白這類通用的網頁設計判斷，〈網頁設計技巧〉那篇有具體標準，這裡不重複。

分類頁與商品列表設計：讓顧客找得到，也比得出差別

顧客進到分類頁，要做兩件事：找到範圍、在範圍裡比較。設計卡住的地方，通常也是這兩個。

分類名稱要讓外人看得懂。 NN/g 的同一份研究建議，分類標籤要能單獨看懂、彼此不要重疊。最常見的反例是用內部講法命名：「經典系列」「職人款」「A 區商品」——你知道那是什麼，顧客不知道。

簡單的測試方法：把分類清單拿給沒看過你商品的朋友，問他「保溫瓶會在哪一類」。他要是猶豫，就是名字取得不夠直白。

篩選與排序要好用。 商品一多，顧客靠的就是篩選：尺寸、顏色、價格區間、有沒有現貨。Baymard Institute 是專門做電商可用性測試的美國研究機構，它測試了 19 個大型電商網站的商品列表：列表可用性普通的網站，受測者放棄找商品的比例落在 67%～90%；只是稍微改善過的網站，降到 17%～33%。

這份研究的主體年代較早、受測的是歐美網站，數字不能直接套到你身上，但落差的方向值得記住：找不到就不會買，篩選做得好不好，直接決定有多少人走得到商品頁。

幾個實際的設計細節：

• 篩選之後要看得到「目前套用了哪些條件」，而且可以一鍵清除，不然顧客會以為你商品很少
• 分類頁上方先放子分類入口，再放篩選
• 商品只有十幾二十個的網站，不用硬做複雜篩選，清楚的分類加上排序就夠了

列表上就要看得出差別。 顧客不想每個商品都點進去才知道價格。NN/g 建議，列表上每個商品至少要有清楚的名稱、夠大的照片、可選的顏色或款式，以及價格；有餘力再加評價星等、「新品」「現貨」這類標籤。

列表資訊給得夠，顧客點進商品頁時已經有七八成想買；給得不夠，他只是在亂點。

商品頁設計：照片、含運總價與退換貨規則，放在購買按鈕附近

商品頁是顧客決定買不買的地方。設計上要一次回答三個問題：這是不是我要的？總共多少錢？不喜歡能不能退？

照片先回答「是不是我要的」

Baymard 的商品頁研究發現，56% 的受測者進到商品頁的第一個動作是看照片，比看標題、看文字說明還早。照片不是裝飾，是商品頁的第一段文案。

照片要回答的問題：

• 實際大小：放一張有人拿著、或擺在生活場景裡的照片，讓人看得出尺寸
• 細節：材質、接縫、內裡、按鍵，這些是線上買東西最怕落差的地方
• 用起來的樣子：衣服穿上身、收納盒裝滿東西、杯子倒了飲料

同一份研究也發現，有些資訊照片本來就表達不了，例如重量、防水程度、香味，但受測者還是會在照片裡找。解法是在照片旁或下方加一行說明文字，把照片講不出來的補上。

價格與運費要在購買按鈕旁邊

很多網站把運費藏到結帳最後一步才出現。顧客在商品頁就已經在想這件事了——Baymard 的研究指出，64% 的使用者早在商品頁就開始考慮運費。

同一份研究還抓到一個常見錯誤：有 32% 的網站只在全站頂端的橫幅寫「免運」，測試中最多有 27% 的人沒看到。

免運、運費、到貨時間，要在「加入購物車」按鈕附近再寫一次，不能只靠頁面最上方的橫幅。

退換貨規則的短版，也要在購買按鈕旁邊

顧客按下購買前，最後一個猶豫常常是「萬一不合適怎麼辦」。完整的退換貨辦法可以放在獨立頁面，但商品頁上至少要有一行短版，例如「收到商品七天內可退貨，退貨方式看這裡」，並連到完整說明。

這不只是體貼。台灣的消保法對網路購物的退貨有明確規定，哪些商品可以排除、要怎麼事先告知，後面〈退換貨與聯絡資訊〉那一節會講——商品頁正是你「事先告知」最好的位置。

評價：有就放真的，沒有就別湊

評價是很強的信任來源，造假的風險也很高。剛開站還沒有評價時，與其找人寫或自己編，不如先放查得到的東西：實體門市地址、成立年份、出貨流程照片、清楚的客服管道。

評價、體驗文與「限量倒數」這類手法在台灣的法規界線，〈行銷心理學六原則〉那篇逐條寫過，這裡不重複。

商品頁的設計重點可以濃縮成一句：讓顧客在按下按鈕之前，不需要離開這一頁去找任何答案。

購物車設計：讓顧客在付錢之前就看到總金額

購物車最重要的工作，是把「到底要付多少」攤開來。

Baymard 整理的美國線上購物者調查裡，放棄結帳的第一名原因是「額外費用太高」（運費、稅金、手續費），佔 40%；另外有 12% 是因為「事先看不到或算不出總金額」。這是美國的資料，台灣的比例不一定一樣，但「最後一步才冒出一筆費用，顧客就跑了」這種心情不分國家。

購物車頁要做到：

• 顯示商品小計、運費、折扣與總金額。運費要等選了取貨方式才確定的話，至少先寫出「超商取貨幾元、宅配幾元」
• 有免運門檻，就直接寫「再買多少就免運」，這比橫幅上一句「滿額免運」有用得多
• 數量可以直接改、商品可以直接刪，不用回到商品頁
• 加購推薦只放跟購物車內容真的相關的東西，不要一整排熱銷品把結帳按鈕擠到下面

購物車的原則只有一個：不要讓顧客到付款頁才第一次看到真正的總金額。

結帳流程設計：訪客結帳、欄位精簡，最後一定要有確認頁

結帳是整條路上最容易掉人的一段，因為顧客要開始付出了：付錢、填資料、留個資。

結帳也是多數網站最有改善空間的地方。Baymard 用一百多條準則，評比了 344 個營收前段的美國與歐洲電商網站的結帳流程：65% 的網站表現落在「普通」或更差，平均每個網站有 32 個可以改進的地方。連大型電商的結帳都還有一堆可改的地方，中小企業的購物網站更值得從這一段先檢查。

開放訪客結帳，會員放在結帳之後再邀請

強迫註冊是很典型的流失點。Baymard 2022 年調查 4,384 位美國成人，24% 在過去三個月內曾經因為網站要求建立帳號而放棄購物車；它的基準測試裡，47% 的網站沒有把「訪客結帳」做成最顯眼的選項。

很多老闆擔心：不註冊就拿不到會員名單。其實換個順序就好——先讓顧客用訪客身分買完，在完成頁再邀請他「用這筆訂單的資料一鍵加入會員，下次不用重填」。

會員是結帳之後的事，不是結帳之前的門檻。

欄位越少越好，只問出貨真正需要的

Baymard 的研究估計，理想的結帳流程大約 12～14 個表單元素（純輸入欄位 7～8 個），美國網站的平均卻是 23.48 個（欄位 14.88 個）。換句話說，多數網站可以少掉將近一半要顧客填的東西。

這在台灣還有一層法規上的意義。個人資料保護法第 5 條規定，個資的蒐集「不得逾越特定目的之必要範圍」。生日、職業、從哪裡知道這家店，這些跟出貨無關的欄位不該擋在結帳頁，等顧客成為會員、而且願意填的時候再問。

幾個欄位設計的小地方：

• 收件人跟訂購人一樣時，用一個勾選框就好，不要叫人重打一次
• 錯誤訊息要講清楚是哪一欄、錯在哪
• 已經填好的資料，不能因為一個欄位錯了就全部清空

送出前的「確認訂單」不能省

有些網站為了讓流程短一點，把確認頁拿掉，按下付款就直接成立。在台灣不建議這樣做：經濟部〈零售業等網路交易定型化契約應記載事項〉第 5 點要求，業者要在消費者訂立契約前，提供商品種類、數量、價格及其他重要事項的確認機制。依經濟部的函釋說明，在訂購流程裡讓消費者確認商品數量、付款方式、運送方式等重要事項，就算有提供確認機制。

確認頁不是多一個步驟，是讓顧客最後看一次「買了什麼、付多少、寄到哪」，也讓你自己少掉很多「我沒有要買這個」的客服爭議。

賣定期購或付費會員：自動續約的勾選框不要預設打勾

如果你的購物網站有定期配送、訂閱制或付費會員，結帳頁要特別留意一件正在改變的規定。根據中央社 2026 年 6 月的報導（聯合新聞網轉載），數位發展部數位產業署正在修正〈零售業等網路交易定型化契約應記載及不得記載事項〉，草案方向是：業者不得預設消費者同意自動續約扣款，要提供讓消費者自己手動勾選的欄位；在同意或付款前，要清楚呈現續約期間、扣款金額、扣款週期與取消方式；取消要跟訂閱一樣方便。

這份草案還沒生效。數發部 2025 年 10 月的法規命令清單把這項修正排在 2026 年再次預告、年底發布；到本文查閱日為止，沒有查到正式公告施行的消息。報導裡提到的蝦皮、酷澎、momo 會員方案是大平台，但草案適用的是透過網路跟消費者訂約的企業經營者，自己架的購物網站一樣在範圍內。

方向其實很清楚，而且現行法本來就有底線：消保法第 14 條規定，定型化契約條款沒有記載在契約中、依正常情形顯非消費者所得預見的，不構成契約內容。續約規則要放在顧客按下付款前看得到的地方，不要指望顧客自己去翻服務條款。 現在設計結帳頁，就直接照草案的方向做：不預設勾選、扣款前通知、取消入口跟訂閱入口一樣好找，之後規定上路也不用再改一次。

台灣購物網站設計的三件事：超商取貨、行動支付與電子發票

國外的結帳研究講得再好，有三件事不會告訴你，因為那是台灣特有的。

超商取貨：大多數顧客的預設選項

資策會產業情報研究所（MIC）2025 年第四季的電商消費調查（網路調查，1,068 份有效樣本）顯示，台灣消費者網購最常用的取貨方式是超商取貨，佔 75.2%，其次是宅配 54.7%、取貨櫃 27.4%，取貨櫃的使用比過去的調查有所成長。東部消費者使用超商取貨的比例更高達 91.7%。

所以在台灣，超商取貨不是加分選項，是大多數顧客預設會找的選項。結帳頁要讓它一眼看得到，商品頁、購物車也要先告訴顧客「可以超取、運費多少」。

超商取貨有一個設計細節很少人講：顧客要選取貨門市。常見做法是開一個超商的「電子地圖」讓顧客選門市，例如綠界的開發文件就是這樣設計的——顧客選完門市，系統把門市代號、名稱、地址，以及是不是離島門市傳回你的網站。這對設計有兩個意思：

• 選門市時顧客會短暫離開結帳頁，回來之後，購物車和已經填好的資料都不能掉，不然他得重填一次，很多人就放棄了
• 離島門市的運費或配送規則可能不同，結帳頁要能顯示對應的運費，不要等到出貨才發現

付款方式：行動支付已經是多數人的習慣

MIC 的行動支付調查（2024 年第三季，網路調查 5,000 份）顯示，曾經使用行動支付的國人首度超過九成（92%），經常使用的也有 84%。這是網路調查，受訪者偏向習慣上網的人——對購物網站來說，這正好就是你要面對的那群顧客。

付款方式不是越多越好，而是顧客習慣的那幾種一定要有，而且在結帳前就讓他知道有。 常見的組合是信用卡、主要的行動支付、ATM 轉帳，再看商品性質決定要不要開放超商取貨付款。

取貨付款（到超商取貨時才付錢）讓顧客最安心，但對你有一個成本：有些人下單後沒去取貨，包裹會被退回，來回的物流與處理費用要看你跟物流服務商的合約怎麼算。高單價、客製化的商品，可以考慮不開取貨付款，或只開放給一定金額以下的訂單。

電子發票：結帳頁一定會碰到的欄位

台灣顧客結帳時，會找「發票要存到哪裡」。財政部的電子發票實施作業要點規定，買受人用手機條碼這類共通性載具索取雲端發票，營業人不得拒絕；用捐贈碼指定捐贈，營業人也不得拒絕。所以結帳頁至少要有這幾個選項：

• 存到會員載具或手機條碼
• 捐贈（可以輸入捐贈碼）
• 公司用發票（填統一編號與抬頭）

發票選項不完整，不只是體驗問題，也可能直接碰到規定。 這幾個選項放在一起、預設好最多人用的那一個，顧客就不會卡在這裡。

台灣結帳三件事	顧客的期待	設計上要做到
取貨	可以超商取貨，運費先知道	超取選項顯眼；選完門市回來資料不掉；離島運費正確
付款	用自己習慣的方式付	信用卡加主要行動支付；取貨付款依商品性質決定
發票	存手機條碼、捐贈或打統編	載具、捐贈碼、統一編號三種都要有

退換貨與聯絡資訊：法規要你放的，剛好是顧客最想看的

很多人把「退換貨說明」「聯絡資訊」當成頁尾的小連結，隨便寫寫。這幾樣偏偏是購物網站最被低估的信任元素，而且在台灣是法規要求。

消費者保護法第 18 條規定，以網路等通訊方式交易時，業者要用清楚易懂的文句提供下面這些資訊，而且網路交易要讓消費者能完整查閱、儲存：

• 企業名稱、代表人、營業所地址，以及電話或電子郵件等可以迅速聯絡的方式
• 商品內容、價金、付款期日與方式、交付期日與方式
• 消費者解除契約（也就是退貨）的期限與方式
• 哪些商品依規定不適用退貨權
• 消費申訴的受理方式

再對照 NN/g 對網站可信度的研究，四個可信度因素之一就是「事前揭露」：把運費、額外費用這些跟顧客有關的資訊先講清楚；研究中，省略基本資訊的網站幾乎立刻被受測者排除。

法規要你放的資訊，跟顧客決定要不要信你時找的資訊，是同一份清單。 一次做好，合規和信任一起拿到。

客服入口：聊天機器人可以先接，但要找得到真人

聯絡方式也不是放一個表單就好。資策會 MIC 2025 年第四季的AI 客服調查（網路調查 1,068 份有效樣本）顯示，87% 的網友用過程度不一的 AI 客服，零售電商是使用比例第三高的產業（32%）；受訪者最重視的是答案正確與實用（67%）、溝通流暢與理解力（52%），以及能轉介真人（46%）。

聊天機器人可以先接，但購物網站上一定要找得到真人——顧客卡在付款失敗、包裹沒收到或想退貨的時候，最需要的是一個能處理事情的人。客服的電話或 LINE、回覆時間，最好在頁尾、商品頁與訂單完成頁都看得到。

七天退貨與例外：要事先講，例外才算數

消保法第 19 條規定，網路購物的消費者收到商品後七天內，可以退回商品或書面通知解除契約，不用說明理由、也不用負擔任何費用。

行政院訂的〈通訊交易解除權合理例外情事適用準則〉列了七種例外，例如容易腐敗或保存期限短的商品、依消費者要求客製化的商品、已拆封的個人衛生用品。但前提是業者有事先告知消費者，例外才能排除。

告知放在哪裡也有講究。行政院消保處的函釋說明，這類告知要用「清楚易懂」的文句，並建議放在消費者最容易取得資訊的明顯處；如果把告知夾在定型化契約條款裡、讓消費者難以注意，實務判決容易認定不符合「清楚易懂」。寫在服務條款裡某一條的小字，跟沒寫可能是同一件事。

換成設計上的做法：如果你賣的是生鮮、客製刻字、貼身衣物這類商品，不能只在退貨頁寫一句「本商品不適用七天鑑賞期」就算了，商品頁、購物車、結帳確認頁都要讓顧客在下單前看得到。

運費沒寫清楚，算你的

經濟部公告的〈零售業等網路交易定型化契約應記載及不得記載事項〉應記載事項第 9 點，還有一條很多人不知道：運費的計價與負擔方式要寫清楚，沒寫的話，視同由業者負擔。而依消保法第 17 條，主管機關公告的應記載事項，就算業者沒寫進自己的條款，仍然構成契約內容——也就是說，這條不是「建議」，你沒寫它照樣生效。

運費是顧客最在意的費用，也是法規上沒寫就算你的費用。 兩個理由加在一起，運費規則值得在商品頁、購物車、結帳頁各出現一次。

手機上的購物網站設計：購物流程最容易卡在哪

拇指好不好按、手機版資訊怎麼排，這些行動版的通用原則〈行動網站設計怎麼做〉那篇講得很完整。這裡只講購物流程在手機上特有的卡點。

「加入購物車」按鈕要一直看得到。 手機的商品頁很長，照片、規格、說明、評價一路往下。顧客滑到評價區決定要買了，按鈕卻在最上面。很多購物網站會把購買按鈕固定在畫面底部，滑到哪都按得到。在手機上，是購買按鈕跟著顧客走，不是顧客回頭找按鈕。

結帳頁跳出來的鍵盤要對。 手機號碼叫出數字鍵盤、電子郵件叫出有「@」的鍵盤。這些小地方決定顧客是兩分鐘填完，還是在小鍵盤上切來切去，切到放棄。

跳出去再回來，資料不能掉。 手機結帳最常見的「跳出去」有三種：選超商門市的電子地圖、跳到行動支付的 App 付款、跳到信用卡的驗證頁。每一次跳回來，網站都要記得顧客剛剛在哪一步、填了什麼，不然顧客等於要從頭再結帳一次。

這些問題在電腦上測不出來，一定要拿手機實際買一次。

不要用彈出視窗擋住商品。 一進站就跳出「加入會員領折價券」蓋住整個畫面，在手機上特別惱人，Google 對這類插頁也有規範，〈彈出式廣告什麼時候會扣分〉那篇有整理。

購物網站設計上線前的檢查表：用顧客的身分走一遍

設計好了、上線之前，最有效的驗收方式不是看設計稿，而是找一個沒看過你網站的人，用手機從廣告或搜尋結果點進來，實際買一樣東西。你在旁邊看就好，不要提示。

下面這張表可以當成那次測試的檢查清單：

階段	讓測試者自己完成這件事	卡住的話，通常是這裡沒做好
進站	說出這家店賣什麼	首頁或頁首沒講清楚你是誰
找商品	找到指定的某一類商品	分類名稱不直白、篩選不好用
看商品	說出這個商品的含運價格、能不能退	運費與退貨規則不在購買按鈕附近
購物車	說出總共要付多少、差多少免運	費用沒攤開、免運提示太遠
結帳	不註冊、用超商取貨加行動支付完成付款	強迫註冊、選門市回來資料掉了、付款方式不夠
發票	把發票存到手機條碼，或捐贈	發票選項不完整
完成	說出什麼時候會到、怎麼查訂單	完成頁與通知信沒寫下一步

再順便確認幾件測試者不一定會碰到、但法規要求的事：網站上找得到公司名稱、地址、電話或電子郵件；退貨期限與方式寫清楚；不適用七天退貨的商品，下單前就有告知；運費規則寫清楚。

這張表跑完，通常會冒出三五個「自己用很順，別人卻卡住」的地方——那就是最該先改的地方。至於轉換率怎麼算、改完之後怎麼驗證有沒有變好，屬於轉換率優化的範圍，這篇不展開。

老闆最該花力氣的，是商品、貨源、客人——那是一間店真正無法被取代的東西。網站動線這種得靠大量實作才抓得準的事，自己一頭栽進去，多半不是學不會，而是在最重要的位置上分了心。所以建議很直接：把力氣花在刀口上，購物網站的設計與動線，交給我們這些以此為專業的人。但上面那張檢查表，最好還是由你親自看一遍——委外不等於甩手不管，顧客會在哪裡猶豫，你永遠比外人清楚。

常見問題