官網『我的訂單／訂單歷史頁』(Order History Page) 設計完整攻略：中小企業如何用一頁「上次買過什麼」把老客戶的下一筆單提前叫回來

做官網的老闆一天到晚在想「怎麼把新客戶拉進來」，很少人認真想過一件事：老客戶回到你網站的第一個點擊，通常不是首頁，而是登入之後直接進「我的訂單」。他要找上次買的那罐洗髮精、上次訂的那台印表機碳粉、上次幫客戶下的那張補貨單。這一頁做得好，他 30 秒完成回購；做得爛，他一氣之下改買別家、或乾脆打電話進來讓客服幫他查——你不但沒賺到，還多花人力成本。

訂單歷史頁（Order History Page，也叫 My Orders）在很多中小企業的官網上，長得就像後台管理系統直接複製出來的表格：一堆數字、一堆狀態代碼、一顆藍色連結叫「查看」。點進去又是另一堆密密麻麻的欄位。這種頁面的存在，只是「有做」，不是「有用」。這篇把它拆開來講，你會發現這一頁其實是回購率、客服負擔與客戶滿意度的三重槓桿。

Photo by Stephen Dawson on Unsplash

一、先想清楚：訪客走到這頁的時候在想什麼？

不要從資料表結構開始設計這頁，要從「客戶在什麼情境下打開它」開始想。常見情境有五種：

第一，回購——想再買一次上次那個東西，記不得名字或型號，只記得「上次買的」。第二，對帳——月底或報帳需要收據、發票、金額明細。第三，問貨——東西還沒到，想知道到底寄出了沒、寄到哪。第四，退換——買錯或不合適，想找退貨入口。第五，吵架——出貨錯了、金額扣錯了、客戶要證據吵回來。

這五種情境對應的動作完全不同：回購要「再買一次」的按鈕、對帳要下載發票、問貨要看物流、退換要一鍵開退貨單、吵架要看得到當初下單的完整快照。如果你的訂單頁只給第一種人服務（列出訂單清單），另外四種人就會通通打電話進來。這也是為什麼很多中小企業客服電話一半以上都在處理「幫我查一下訂單」——不是客戶懶，是頁面沒有幫他們把答案準備好。

二、列表頁：不是資料表，是決策清單

訂單列表最常見的錯誤，就是照著資料庫欄位排：訂單編號、下單日期、金額、狀態。這個順序客戶看不懂，因為訂單編號對客戶來說沒意義。他記得的是「上禮拜買的那個藍色的」，不是 20260913-A0071。

比較好的列表版型，每一筆訂單至少要包含五個視覺元素：下單日期（大字）、訂單裡的商品縮圖（並排 2 至 3 張）、金額、狀態徽章、以及一顆最主要的動作按鈕。商品縮圖是關鍵——客戶用「圖像記憶」找上次買的東西，比用訂單編號快十倍。有些網站甚至把最主要那件商品的名字直接放大，訂單編號縮到最小放右下角當備註，反而更貼近客戶認知。

狀態徽章要用顏色分層：處理中（黃）、已出貨（藍）、已完成（綠）、已取消（灰）、待處理／有問題（紅）。中文文字要簡短白話，「處理中」比「訂單建立中，等待撿貨」好懂。用顏色一眼就分得出哪些訂單需要動作，哪些只是紀錄。

三、「一鍵再買」按鈕：訂單頁最容易被漏掉的搖錢樹

如果整篇你只能記一件事，就記這件：每一筆已完成的訂單，旁邊一定要有一顆「再買一次」的按鈕。點下去把整張訂單裡的商品直接加到購物車，客戶只要按結帳。

這件事最重要的原因是，回購決策成本極低。一個客戶點進「我的訂單」代表他已經有回購意向，你要做的是把摩擦壓到最低。傳統流程是：想再買 → 記得型號 → 打去搜尋列 → 找不到 → 再去分類頁翻 → 找到 → 加購物車 → 結帳，中間至少五步。有了「再買一次」，變成一步。

幾個實作細節值得留意。若原本的商品已下架或缺貨，按鈕要顯示灰色並提示「其中 1 項目前無法補貨」，並列出可以加購的部分，不要整張擋掉。若品項有規格（顏色、尺寸），可以預帶上次選的規格但允許客戶進購物車再改。若客戶下的是團購或優惠組合，價格可能已經改了，要在加入購物車時清楚標示「目前售價」而非沿用歷史價，避免結帳爭議。

四、訂單詳情頁：一頁講清楚整筆交易的所有事實

點進單一訂單，客戶要看到的資訊分成四個區塊，從上到下：

1. 狀態總覽區：目前訂單走到哪，加上時間軸（下單 → 付款完成 → 撿貨中 → 已出貨 → 已到貨），完成的節點打勾、有時間戳，未完成的節點灰色。如果已出貨，直接放物流追蹤號連結，最好內嵌進度而不是另開網頁。

2. 商品明細：每項商品的縮圖、名稱、規格、數量、單價、小計。這裡也可以放單品的「再買一次」，如果客戶只想補其中一項。

3. 金額細節：小計、運費、折扣（列出用了哪些折扣碼、活動）、稅金、應付總額、實付金額。清清楚楚一項項列出來——這是對帳與客訴時的關鍵證據，不能只給一個總金額。

4. 收貨與付款資訊：收件人姓名、地址（可折疊避免版面過長）、聯絡電話、付款方式（信用卡末四碼、超商代碼、匯款帳號等，用遮罩顯示）、發票類型與載具。

另外準備兩顆按鈕永遠放在明顯位置：「下載電子發票／收據」與「聯絡客服」。發票下載直接給 PDF 檔（B2B 客戶月底報帳最需要）；聯絡客服的表單要預帶訂單編號、商品名稱、客戶身分，不要再叫他重填一次。

Photo by Iuliia Pilipeichenko on Unsplash

五、退貨與換貨入口：不要藏起來，也不要嚇到人

很多老闆下意識把「申請退貨」藏得很深，希望客戶找不到就懶得退。這個策略短期看似省了退款，長期會付出更大代價——客戶找不到就打客服電話，客服要花時間應付、還會被客戶罵；不然就直接申請信用卡爭議款（chargeback），對商家的信用評分更傷；再不然就到 Google 評論或 Facebook 抱怨，一顆一星比十筆退貨還痛。

正確做法是把退貨按鈕放在訂單詳情頁的固定位置（例如商品右側或頁尾），但清楚標示規則：可退期限剩幾天、哪些商品不可退（開封拆封類）、退貨流程幾步、退款到帳約幾天。透明反而降低來回問答，也讓真的想退的人快速走完流程。

另一個進階做法是提供「換貨」而不只是「退貨」——例如尺寸選錯的服飾，讓客戶直接選要換的尺寸，系統扣掉舊訂單、開新訂單，客戶不需要走完整個退款流程再重新下單。這對衣鞋類、體積小的商品特別有效，實務上會拉高留住率。

六、篩選與搜尋：訂單累積到 20 筆以上就是必需品

散客一年可能只有兩三筆訂單，訂單頁排一排就好。但 B2B 客戶、餐飲業備品採購、或忠誠度高的重複購買者，一年下三十、五十筆很正常。他們找上次那筆訂單就像大海撈針。

這時要提供三種篩選：時間區間、訂單狀態、商品名稱／訂單編號搜尋。時間預設「近 3 個月」，但要允許自訂區間（尤其是報帳報去年的稅要「去年整年」）。搜尋框要能搜商品名稱，不能只搜訂單編號——理由前面講過。分頁或無限捲動都可以，重點是每頁 10 筆左右不要多，避免行動裝置滑到暈。

七、空狀態設計：新客戶進來看到的第一眼

新申請帳號、還沒下過單的客戶，進到「我的訂單」看到什麼？如果是一片空白配一行小字「暫無訂單資料」，就浪費了。這一頁是新客戶對你網站的「私人空間」印象，也是把他推向第一筆訂單的機會。

好的空狀態要有一張友善的插圖、一句人話文案、以及一顆清楚的行動按鈕。例如「還沒有訂單，先來看看熱銷商品吧」，按鈕直接連到熱銷區或最近上架的商品。有些網站會在這裡放新會員限定的優惠碼，把「還沒下單」的猶豫直接踢一腳。

八、行動裝置：桌機表格搬過去等於自殺

台灣的 e-commerce 網站，訂單頁在手機上的瀏覽量普遍佔 60% 到 80%。如果你的訂單頁是把桌機的表格直接縮小，橫向捲動出六個欄位——客戶第一次滑到之後就不會再回來看第二次。

手機版的訂單列表要重新設計為「卡片式」而不是「表格式」：每筆訂單一張卡片，卡片內把最重要的三件事（日期、商品縮圖、狀態）擺明，卡片本身可整個點擊進入詳情。訂單詳情頁的分區用可折疊區塊，讓客戶可以只展開他要看的部分。物流狀態時間軸在手機上要用垂直排版，橫向的擠不下。

另外，發票下載按鈕在手機上很多客戶用不了（PDF 開啟卡卡的），最好額外提供「寄到我 Email」的選項，讓客戶回到電腦端再處理。

Photo by Roberto Cortese on Unsplash

九、幾個常見錯誤與地雷

訂單編號放太大、商品資訊縮很小。訂單編號是給後台工程師與客服用的，不是給客戶記憶用的。前端應該以商品縮圖與名稱為主，訂單編號縮到 12px 放右下角就夠了。

狀態文字用內部術語。「已建單」、「已分配」、「已 pick」這些是 WMS（倉儲管理）的用語，客戶看不懂。全部翻譯成「處理中」、「準備出貨」、「已出貨」等白話中文。

物流連結另開網頁但沒有 target="_blank"。客戶點了物流查詢，回不來就找不到訂單頁，只好從頭登入。物流連結永遠新分頁開啟。

不能重新下載發票。發票開了之後就從系統消失，客戶月底想補下載卻不行，只能寄信客服。發票 PDF 一定要保留至少 5 年（稅法要求），並隨時可下載。

訂單頁沒有 SEO noindex。這頁是登入後才看得到的私人資料，卻沒加 <meta name="robots" content="noindex,nofollow">，萬一被搜尋引擎抓到就出事了。這是技術細節但很重要。

十、可以馬上動手做的三件事

看完不做等於沒看，這裡給三個從最容易到最有效的下手點：

第一，加上「再買一次」按鈕。如果你的後端已經有訂單商品資料，前端加一顆按鈕呼叫「加入購物車」API 是幾行 code 的事，回購率提升馬上看得到。優先做這個。

第二，重寫狀態文案，並加上顏色徽章。把後台內部術語通通改成客戶看得懂的白話，用綠／黃／藍／灰／紅五種顏色標示。這件事不用改資料庫，只改前端顯示。

第三，在訂單詳情頁明顯位置放「聯絡客服」按鈕，並預帶訂單資訊。你會發現客服電話量可以降下來一大截，因為表單裡系統已經幫客戶填好一半，客戶自己送出反而更快。

訂單歷史頁看起來不起眼，卻是老客戶回訪最常打開的頁面之一。不需要花大錢重做整個網站，把上面這些細節一項一項補上，你會發現三個月後回購率、客服工時、與客戶滿意度都會有明顯改善——這比花錢投廣告拉新客戶划算太多。