電商網站設計，漂亮卻不賣

很多老闆找人做電商網站，第一句話都是「幫我做得漂亮一點」。漂亮當然重要，但做了十幾年網站，我們看過太多版面美得像作品集、訂單卻零零落落的店。問題幾乎都不在好不好看，而在客人從進站到結帳那一整條路順不順。這篇我們把電商網站設計拆成第一印象、商品頁、結帳、手機、平台選擇五塊，每一塊都用實際數據告訴你錢漏在哪，最後再教你用 AI 工具自己生出能賣的商品圖。

電商網站最貴的誤會：以為漂亮就會賣

把電商網站想成一間實體店就懂了。店面裝潢得再美，如果動線繞來繞去、結帳要排很久、店員問東問西，客人一樣會放下籃子走人。網路上更殘酷，因為客人離開不用尷尬，手指一滑就去別家了。

台灣中小企業最常見的劇本是這樣：花了不少預算做一個視覺很有設計感的網站，上線後流量也有進來，但訂單就是衝不起來。老闆第一個念頭往往是「是不是不夠漂亮」，於是再砸錢改版、換風格，結果訂單還是一樣。因為真正的破口從來不在美感，而在「客人想買的時候，你有沒有讓他順順地把錢付掉」。

電商網站設計的核心，其實是一條龍的動線設計：從第一眼看到首頁、被某個商品吸引、點進商品頁、加入購物車、到最後刷卡完成。這一整條路上每多一個卡點，就多漏掉一批人。下面我們一站一站拆給你看。

客人決定留不留，只花 0.05 秒

先講一個會顛覆很多人想像的研究。根據一份被廣泛引用的學術研究，使用者只要 50 毫秒（0.05 秒）就會對一個網站形成第一印象，決定喜不喜歡、要不要留下來。Google 後來用自家研究證實了這個數字，甚至發現有些判斷在 17 毫秒內就發生了——比你眨一次眼還快。

更關鍵的是 Google 那份研究的結論：人們最喜歡的，是「視覺簡單、而且看起來很熟悉」的設計。版面太複雜，就算內容再好，第一眼也會被覺得比較不美；版型太前衛、跟一般電商長得完全不一樣，反而會讓人覺得陌生、不太敢買。換句話說，硬要做得很「特別」常常是反效果。

對電商網站設計的啟示很實際：首頁不要塞滿花俏特效和滿版動畫，主視覺要乾淨、商品要一眼看得到、購買按鈕要明顯。圓角卡片、留白、清楚的層次，這些看起來樸素的東西，反而最符合人腦覺得「這家店看起來正常、可以信」的直覺。漂亮要為「好懂」服務，不是為了炫技。

真正讓訂單流掉的，是結帳這一關

講完第一印象，來看最痛的數字。根據彙整了近 50 份研究的 Baymard Institute 統計，電商購物車的平均放棄率高達 70.19%——也就是說，每 10 個把商品加進購物車的人，大約有 7 個最後沒結帳就走了。這不是你一家店的問題，是整個產業的常態。

那他們為什麼走？Baymard 把原因拆開來看，結果很值得每個老闆記住。排第一、而且連續六年都是第一的原因是「意料之外的額外費用」——運費、稅金、手續費這些到了結帳最後一步才跳出來，大約 48% 的人因此放棄。第二類是「不信任這個網站，不敢把信用卡資料給它」，約佔 25%。第三類是「結帳流程太長太麻煩」，約佔 22%。

注意，這三項裡有兩項是設計就能解決的。運費別藏到最後一秒，在商品頁或購物車就先講清楚「滿多少免運」「運費多少」，客人有心理準備就不會在最後一步翻臉。信任問題則靠把金流標章、退換貨政策、客服聯絡方式放在看得到的地方來緩解。剩下那 43% 的「只是逛逛、還沒打算買」，這部分確實很難救，所以 Baymard 也直說，就算把結帳優化到極致，放棄率的合理下限大概也就在 55% 到 60%。重點是把「本來會買、卻被你勸退」的那群人救回來。

結帳頁每多一個欄位，就多漏一批人

結帳流程「太長太麻煩」這件事，可以講得更具體。Baymard 的研究發現，美國電商結帳流程平均要填 14.88 個欄位，但真正優化過的結帳，只需要 7 到 8 個欄位就夠了。多出來的那一倍，全是在勸退客人。

數字更狠的是這個：研究指出，欄位數一旦超過 6 個，每多一個欄位，放棄率就統計性地增加約 3.1%；超過第 8 個之後，每多一欄，完成率還會再掉 4 到 6%。也就是說，那個「順便問一下生日」「再填個公司抬頭」的欄位，看起來無傷大雅，其實每一個都在偷走你的訂單。

Baymard 也估算，光是把結帳的可用性問題修好，平均能讓轉換率提升多達 35.26%。把這幾點當成檢查清單，你可以自己對照一下結帳頁：

• 欄位砍到剩必要的：姓名、收件地址、電話、付款資訊，能不問就不問。生日、性別、公司抬頭這些非必要的，拿掉或設成選填。
• 讓人不用註冊就能買：強迫先註冊會員是大忌，提供「訪客結帳」，買完再順手問要不要加入會員。
• 費用提早講清楚：運費、稅、手續費在進結帳前就攤開，別等到最後一步才跳。
• 步驟和進度看得到：用「第 1 步 / 第 2 步」的進度條，讓客人知道還有多遠，焦慮感會降很多。

把結帳頁少一個步驟、少一個欄位，棄單率就跟著降——這是整個電商網站設計裡，CP 值最高的一塊。

商品頁沒做好，再多流量都是過路客

客人會不會把東西加進購物車，幾乎都在商品頁決定。這一頁要回答的，是客人心裡那幾個沒講出口的問題：這東西長什麼樣、別人買過覺得如何、出問題能不能退。

先講信任。研究顯示，70% 的線上購物者在下單前會主動找「信任訊號」，而把這些訊號放對位置，轉換率最多能提升 20%。所謂信任訊號，就是顧客評價、星等、退換貨保證、安全付款標章、真實的客服資訊這些東西。其中評價的威力特別大：有 65.9% 的人下單前會看評價，而且評價累積到 50 則以上的商品，轉換率會比沒評價的高出 37%。所以與其把版面做得很美卻空空蕩蕩，不如想辦法讓買過的客人留下評價、再把評價清楚地擺在商品頁上。

再來是商品圖。商品圖是線上購物唯一能「摸」到商品的方式，糊、暗、角度怪的圖會直接讓人關掉。多角度的照片、能看清材質細節的特寫、加上實際使用情境的圖，會讓客人更敢按下購買。研究也指出，商品頁加上影片，轉換率可以再提升約 40%。如果你沒有預算請攝影棚，後面那段 AI 工具實戰會教你怎麼補。

手機沒顧好，等於關掉七成的店

很多老闆改版時還是盯著電腦螢幕在看，但你的客人早就不是了。到 2025 年，行動裝置（手機）預計佔了所有電商銷售的 72.9%——也就是說，每 10 筆訂單裡有 7 筆是在手機上發生的。如果你的網站手機版做得不好，等於把七成的生意拒之門外。

手機版最常被忽略的有幾點。第一是速度：53% 的行動訪客只要網站超過 3 秒沒載入完就直接離開，所以圖片一定要壓縮、首頁別塞太多特效。第二是按鈕和欄位的大小：用大拇指點得到的按鈕、夠大的輸入框，比在電腦上重要十倍。第三是結帳要支援手機常用的付款方式，像 Apple Pay、Google Pay、行動支付這些能一鍵帶入資料的選項，能省掉手機上最痛苦的「打字填表」環節。

檢查方法很簡單：拿你自己的手機，從頭到尾買一次自己的商品。哪裡要放大才點得到、哪裡載很久、哪裡要打一堆字，你親身走一遍，比看任何報告都清楚。

自己架還是上平台？SHOPLINE、Cyberbiz、91APP 怎麼挑

聊到這裡，很多老闆會問：那我到底該自己架一個電商網站，還是直接上開店平台？這沒有標準答案，要看你的規模和需求。先快速說一下台灣幾個主流平台的定位。

SHOPLINE（2013 年在香港成立、2015 年進台灣）功能完整、行銷工具強，年繳方案約 NT$2,917 起、另抽成約 0.3–0.8%，比較適合已經有一定品牌規模、資源較足的商家。CYBERBIZ（2014 年台灣本土）主打高性價比與智慧倉儲、OMO 線上線下整合，訂閱費相對親民，很多剛起步的中小企業和個人賣家會選它。91APP（2013 年）強項是幫品牌做專屬 APP、強化回購，通過 SOC 2 資安驗證，但採專人報價、門檻較高，瞄準的是中大型零售品牌。

那什麼時候適合自己架（例如用 WordPress + WooCommerce）？如果你很在意網站的獨特性、想做品牌官網與商城合一、想要完全掌握 SEO 與版面、長期算下來不想一直被平台抽成，自架的彈性和擁有權是平台給不了的。代價是你要自己顧主機、資安和維護。反過來，如果你想快速上線、商品數不多、希望有人把金流物流串好，平台會讓你省下很多前期力氣。

實務上的判斷順序是：先看你的階段。剛起步、想低成本試水溫，用平台快速開張；等品牌做起來、流量穩定、開始在意被抽成和想要自己的官網長相時，再考慮自架或混搭。別一開始就追求最複雜的架構，也別等網站卡死了才想搬家。

AI 工具實戰：用 AI 生出能賣的商品圖

商品圖很重要，但不是每個中小企業都請得起攝影棚。好消息是，現在用 AI 工具，不會拍照也能生出像樣的情境圖。這裡給你一套可以照做的流程。

第一步，用 AI 生出「情境背景」，而不是直接生整張商品。這點很關鍵。像 Midjourney 這類工具拿來生氛圍、生背景場景很強，但拿來生你「實際的商品」會出包——logo 會融掉、標籤文字會跑掉、材質和比例會跑掉，因為它是用想像力在畫，不是在複製你的真品。所以正確用法是：讓 AI 生出漂亮的背景情境，再把你自己拍的商品「合」進去。

舉個例子，假設你賣手工香氛蠟燭，可以丟給 Midjourney 這樣一段 prompt：

「一張溫暖的居家情境照，木質桌面、柔和的晨光從窗邊灑進來，旁邊有乾燥花和一本書，留白構圖，淺景深，適合放產品的中央空位，攝影感、自然光、高質感 –ar 4:5」

生出乾淨的背景後，再用專門做商品合成的工具（例如 Claid.ai、SCENE4 這類），把你實拍的蠟燭放進那個場景、自動處理光影，就能得到一張背景高級、商品又準確的情境圖。比起直接叫 Midjourney 生蠟燭，這樣做出來的圖商品細節是對的，可以直接上架。

第二步，用 ChatGPT 或 Claude 寫商品文案。把商品的賣點、材質、適合的對象丟給它，請它寫成「一句吸睛標題 + 三個賣點 + 一段情境描述」。例如：「我賣的是大豆蠟手工香氛蠟燭，主打天然、燃燒時間長、適合送禮，請幫我寫商品頁文案，語氣溫暖白話、不要浮誇形容詞。」它會給你好幾個版本讓你挑，再自己改成品牌的口吻。

不過要誠實提醒：AI 給的是初稿，不是成品。生出來的情境圖要檢查商品有沒有變形、顏色對不對；文案要核對材質、規格、價格這些事實有沒有被它寫錯。AI 幫你把 80% 的力氣省下來，但最後那 20% 的把關，還是得是懂商品的人。真要拿去當主圖、做整個品牌的視覺系統，建議還是找專業團隊把調性統一。

開電商網站最常踩的幾個雷

最後整理幾個老闆最常犯、也最容易避開的錯。一是「只顧漂亮，不顧動線」——版面美但找不到購買按鈕、結帳繞一大圈，再美都沒用。二是「運費藏到最後才講」——這是放棄率第一名的原因，48% 的人因此走人，提早講清楚就能救回一大批。

三是「結帳欄位問太多」——超過 6 個欄位，每多一個就漏一批，能砍就砍。四是「商品頁空空、沒評價沒情境圖」——客人沒辦法判斷值不值得買，自然不敢下單。五是「只在電腦上看網站」——七成生意在手機上，手機版才是主場。

把這五個雷對照一下自己的網站，大概就知道你的訂單現在漏在哪了。電商網站設計不是一次做完就結束，而是一條可以持續微調、每調一次就多賺一點的動線。

漂亮，要為「賣」服務

說到底，一個好的電商網站不是比誰版面炫，而是比誰能讓客人「順順地把錢付掉」。第一印象要簡單好懂、商品頁要有信任訊號和好圖、結帳要短、手機要順——這幾塊顧好了，同樣的流量就能換到更多訂單。漂亮當然要，但漂亮要為「賣」服務。

如果你正打算開一個電商網站，或現有的網站流量有進來、訂單卻一直衝不起來，歡迎找戀戀設計聊聊。我們會先幫你把首頁、商品頁、結帳這幾條動線走一遍，找出真正在漏單的地方再給建議，免費諮詢點這裡。