很多企業把購物網站設計當成「把網站做漂亮」。
但顧客來到購物網站，是為了找到商品、確認規格與價格，然後下單。
只要其中一步卡住，畫面再好看，訂單還是會流失。
本文依顧客的購買路徑，整理購物網站設計的 7 大重點，並說明規格複雜、需要詢價的商品該怎麼設計。
重點整理
- 購物網站設計的目標，是讓顧客找到商品並順利下單。
- 設計前先確認商品怎麼賣：直接結帳、先詢價，或兩者並行。
- 結帳欄位越少越好，多數網站只需要 8 個欄位。
- 規格複雜的商品，要把業務會問的問題變成頁面上的選擇步驟。
- 標準零售用平台佈景主題即可，流程特殊時再考慮客製設計。
購物網站設計和一般網站設計有什麼不同？
形象網站的任務是介紹企業、建立信任，最後讓訪客留下聯絡方式。
購物網站多了一段交易流程。顧客要在網站上找到商品、比較規格、加入購物車，再完成付款。
因此，購物網站設計（也常稱為電商網站設計）除了品牌視覺，還要照顧每一個交易步驟。
| 項目 | 形象網站 | 購物網站 |
|---|---|---|
| 主要目標 | 介紹企業、取得詢問 | 讓顧客完成購買或詢價 |
| 主要頁面 | 首頁、關於我們、服務、案例 | 分類頁、商品頁、購物車、結帳頁 |
| 設計重點 | 訊息清楚、建立信任 | 好找、好比較、好下單 |
| 衡量方式 | 詢問數 | 訂單數、轉換率、棄單率 |
版面層級、品牌視覺、CTA 等所有網站共通的設計原則，可以參考企業網站設計的文章。本文只談購物網站特有的部分。
購物網站設計前，先確認商品怎麼賣
同樣是購物網站，賣零食和賣客製團體服，頁面設計會差很多。
動工前先回答以下 4 個問題，設計方向會清楚很多。
顧客是直接結帳，還是需要先詢價？
標準商品可以直接加入購物車結帳。
需要確認數量、材質或交期的商品，比較適合讓顧客先送出詢價，再由業務報價。
兩種流程的商品頁按鈕、表單與後續頁面都不同，要在設計前決定。
商品是標準品，還是有多規格、客製？
規格少的商品，清楚的商品圖加上購買按鈕就足夠。
規格多的商品，要先規劃規格的選擇順序、價格怎麼跟著變動，以及選錯時怎麼提醒。
顧客主要用手機還是電腦？
如果已經有網站，可以從 Google Analytics 查看訪客的裝置比例。
以手機為主的網站，商品頁、購物車與結帳都要以手機畫面優先設計。
企業採購常在電腦上比較規格，電腦版就要能清楚呈現較多的規格資訊。
主要客群是一般消費者，還是企業客戶？
一般消費者重視快速下單與優惠資訊。
企業客戶可能需要會員專屬價格、大量訂購或開立發票等流程。
這些功能怎麼規劃，可以參考電商網站功能的文章。
購物網站設計的 7 大重點
以下依顧客從進站到付款的順序，整理每一類頁面的設計重點。
1. 首頁：讓顧客快速找到入口
首頁的任務是分流，把顧客帶到他要找的分類或商品。
首屏建議放這些內容：
- 一句話說清楚品牌主要賣什麼
- 主要商品分類的入口
- 目前的主打活動或新品
- 搜尋框
輪播圖放太多張，後面幾張不容易被看到。重要的活動資訊，可以改成固定的區塊。
2. 導覽與分類：依顧客找商品的方式規劃
分類名稱要用顧客熟悉的說法，不要用公司內部的產品代號。
例如顧客想找的是「班服」，分類就不要只寫「棉質 T 恤系列」。
分類層級也不宜太深，讓顧客點 2～3 次就能看到商品。
Google 建議從選單連到分類頁，再從分類頁連到所有商品頁。分類頁如果沒有連到全部商品，Google 可能找不到部分商品。
3. 商品列表頁：篩選與排序要符合比較習慣
商品一多，顧客就需要篩選與排序。
篩選條件要依商品特性設計，例如服飾看尺寸與顏色，印刷品看尺寸與紙材。
每張商品卡片至少要有商品圖、名稱與價格。需要詢價的商品，可以標示「依規格報價」，避免顧客以為價格漏掉了。
4. 商品頁設計：規格、價格與決策資訊放在同一處
商品頁是顧客決定買不買的地方。商品頁設計要回答顧客購買前的主要疑問。
| 區塊 | 顧客想知道什麼 |
|---|---|
| 商品圖片 | 實際長什麼樣子、細節與尺寸感 |
| 名稱與價格 | 多少錢、有沒有優惠 |
| 規格選擇 | 有哪些尺寸、顏色、材質 |
| 購買按鈕 | 加入購物車或送出詢價 |
| 運送與付款 | 多久出貨、運費多少、可以怎麼付款 |
| 商品說明 | 用途、材質、保養方式 |
| 評價或案例 | 其他人買了覺得如何 |
切換規格時，價格與商品圖要同步更新。
這樣顧客不會到結帳時，才發現價格和自己想的不一樣。
5. 購物車與結帳：減少欄位與意外費用
結帳是最容易流失訂單的步驟。
Baymard Institute 針對美國網購者的研究發現，17% 的人曾因結帳流程太長或太複雜而放棄訂單。
Baymard 也估計，大型電商網站改善結帳設計後，轉換率平均可以提升 35.26%。
Baymard 的研究還指出，影響結帳體驗的主要是欄位數量，而不是步驟數量。
多數網站的結帳只需要 8 個欄位，但 2024 年的平均是 11 個。
購物車設計與結帳流程，可以從以下幾點檢查：
- 購物車列出商品、規格、數量與小計，並且可以直接修改
- 運費與手續費在結帳前就顯示，不要到最後一步才出現
- 提供訪客結帳，不強迫顧客加入會員
- 地址、發票等欄位只保留必要的項目
- 顧客常用的付款方式放在前面
6. 手機版：以單手操作設計主要流程
手機畫面小，主要操作最好單手就能完成。
- 按鈕夠大，彼此保留間距，避免誤觸
- 「加入購物車」或「送出詢價」按鈕固定在畫面下方
- 規格選項不需要橫向捲動就能看完
- 電話、數量等欄位跳出數字鍵盤
電商網頁設計通常採用 RWD，讓同一個網站自動適應手機與電腦的畫面。
7. 信任資訊：運費、退換貨、付款方式與聯絡方式
第一次上門的顧客，會先確認這家店可不可靠。
以下資訊要容易找到，最好在商品頁就能看到摘要：
- 運費與免運門檻
- 出貨與到貨時間
- 退換貨規定
- 付款方式
- 公司名稱、統一編號與聯絡方式
- 顧客評價或合作案例
規格複雜、需要詢價的商品，購物網站要怎麼設計？
多數購物網站設計的建議，都假設顧客「選好商品、加入購物車、付款」就能完成交易。
但團體服、印刷品這類商品，價格會隨數量、材質、加工方式變動，有些還要確認後才能報價。
這類網站的設計重點，是把業務原本在電話裡確認的問題，變成頁面上的選擇步驟。
以下用提昇科技的 3 個案例說明。
規格逐步選擇，避免一次給太多選項
規格很多時，把所有選項一次攤開，顧客反而不知道從哪裡開始。
比較好的做法，是依顧客做決定的順序排列，例如先選款式，再選顏色，最後填尺寸與數量。
哈摩學服提供班服、系服、社團服等團體服製作，商品有不同款式、品牌、顏色與尺寸。
提昇科技為哈摩學服建立多規格商品架構，讓顧客在單一商品頁逐步確認需要的規格。
網站上線後，每筆詢價少了 3～4 輪來回對話，店家一次就能掌握顧客的需求。
價格依規格即時計算
印刷品的價格牽涉紙材、尺寸、加工等多種條件，傳統做法是由業務逐筆報價。
玖愛印雲端印刷網的後台，可以依紙張材質、尺寸與特殊加工設定計價規則。
顧客在前台選完規格，就能立即看到報價。
價格即時出現，顧客可以自己比較不同規格的價差，不必等業務回覆。
玖愛印的網站上線至今，已累積新增超過 5,000 位顧客。
不能直接結帳時，改成詢價流程
有些商品要確認數量、交期或客製內容後才能報價，這時「加入購物車、直接付款」反而不適合。
購物網站可以把購買按鈕換成「送出詢價」。顧客選好規格後送出需求，再由業務接手報價。
哈摩學服的網站就是這樣設計。顧客送出詢價後，系統透過 LINE 自動通知服務人員，讓後續溝通能即時接上。
詢價單要帶出顧客已選的規格與數量，業務才不用從頭再問一次。
讓顧客在網頁上完成設計稿
印刷品與客製商品，常卡在顧客沒有設計軟體，或稿件格式不符合印製需求。
玖愛印導入網頁線上編輯器，讓不會使用專業設計軟體的顧客，也能在網頁上完成印刷稿。
飛捷數位印刷則讓顧客上傳稿件、自選材質與規格，並在線上付款。
針對大學商圈的論文印製需求，飛捷另外有書背編輯器，協助店員快速做出格式正確的論文封面。
目前飛捷的線上下單佔比已上升到 20%，而且還在逐步成長。
提昇科技的企業電商與線上詢價系統，就是針對規格計價、線上詢價與訂單流程設計的方案。
購物網站設計如何兼顧 SEO 與網站速度？
購物網站的頁面多、商品常更新，SEO 與速度最好在設計階段就一起規劃。
| 項目 | 設計時要注意什麼 |
|---|---|
| 商品說明 | 每個商品有自己的說明文字，不要整段沿用廠商文案 |
| 篩選網址 | 篩選條件的組合會產生大量網址，先決定哪些需要被搜尋引擎收錄 |
| 商品結構化資料 | 讓搜尋結果有機會直接顯示價格、庫存與評價 |
| 圖片與版面 | 商品圖先壓縮，並預留固定尺寸，避免載入時版面跳動 |
篩選網址如果不需要出現在搜尋結果，Google 建議直接阻止爬取，節省網站資源。
商品結構化資料的格式與欄位，可以參考 Google 的商品結構化資料說明。
速度方面，Google 以 Core Web Vitals 衡量使用者體驗。
建議主要內容在 2.5 秒內顯示、互動回應在 200 毫秒以內，版面位移分數維持在 0.1 以下。
延伸資料：web.dev：Web Vitals
套版、平台佈景主題，還是客製設計？
購物網站製作常見的設計方式有 3 種，適合的企業不同。
| 方式 | 適合 | 限制 |
|---|---|---|
| 開店平台佈景主題（SHOPLINE、Shopify 等） | 標準零售、想快速上線 | 版面與購買流程受平台限制 |
| 購物網站版型（WordPress 等套版） | 有人員可以維護網站 | 外掛多時，更新與相容性要自己顧 |
| 客製設計 | 規格計價、詢價、多語系、分潤等特殊流程 | 費用與時程較高，需要完整規劃 |
如果顧客的購買流程和一般零售一樣，平台佈景主題通常就夠用。設計預算可以優先放在商品照片與文案。
購買流程特殊時，才需要客製設計。
例如 NAPA 匹克球要同時經營國內與海外市場，網站支援繁體中文、簡體中文與英文。
NAPA 也透過 KOL 與教練推廣，網站內建折價券與分潤追蹤，後台自動計算每位推廣者的導購成效。
目前 NAPA 已和大量 KOL 合作推廣，合作對象增加後，每位推廣者的成效仍由後台自動計算。
各種方式的費用，可以參考網路開店平台費用比較與購物網站架設費用。決定委外後，也可以參考如何選擇網站架設公司。
購物網站設計常見問題
購物網站設計要多少錢？套版和客製差多少？▼
費用主要取決於建置方式、商品與規格數量、功能流程，以及是否串接金流、物流與其他系統。
使用平台佈景主題的設計費用最低，但要另外計算平台年費與交易相關費用。客製設計費用較高，適合流程特殊的企業。
各項費用的細節，可以參考購物網站架設費用多少？6大因素：完整解析企業電商網站成本。
已經用 SHOPLINE 這類平台了，還需要另外找人設計嗎？▼
不一定。平台佈景主題已經包含首頁、分類、商品頁與結帳等基本頁面，標準零售通常夠用。
想強化品牌形象時，可以請設計師調整 Banner、配色與首頁版面。但平台本身的購買流程限制，多半無法靠設計改變。
好的購物網站設計，是讓顧客順利完成下單
購物網站設計的成果，最後會反映在顧客有沒有找到商品、看懂價格，並順利完成下單或詢價。
設計前先確認商品怎麼賣，再依顧客的購買路徑逐一檢查首頁、商品頁到結帳流程，會比單純追求視覺效果更有幫助。
如果你的商品規格複雜、需要詢價，或現有平台的流程不符合實際接單方式，歡迎預約免費諮詢，和我們聊聊網站怎麼規劃。
