還記得那些用來買雜貨的大型購(gòu)物車嗎？這些實(shí)體購(gòu)物車是推出最佳購(gòu)物車網(wǎng)站設(shè)計(jì)的靈感來源。 基本功能被改編成虛擬對(duì)應(yīng)物，使在線購(gòu)物者能夠“持有”他們正在考慮購(gòu)買的商品。使用這個(gè)在線購(gòu)物車，他們還可以查看、刪除和添加商品，然后繼續(xù)到虛擬收銀員——結(jié)賬頁(yè)面。

網(wǎng)上購(gòu)物車有更多的功能，一個(gè)合適的購(gòu)物車頁(yè)面設(shè)計(jì)可以自動(dòng)計(jì)算總成本，它可以“保存”物品，如果仍然可用，你可以稍后購(gòu)買。以下是最好的購(gòu)物車網(wǎng)站設(shè)計(jì)和購(gòu)物車創(chuàng)意，以幫助您為您的客戶提供最好的用戶體驗(yàn)。

1、當(dāng)商品添加到購(gòu)物車時(shí)通知用戶

向購(gòu)物車添加商品的確認(rèn)通常只是改變購(gòu)物車圖標(biāo)上的數(shù)字，有一種風(fēng)險(xiǎn)是，大多數(shù)網(wǎng)上買家，尤其是新買家，會(huì)錯(cuò)過這一小部分人。為了吸引買家的注意，最好使用一個(gè)次要的、更值得注意的指標(biāo)來確認(rèn)一個(gè)產(chǎn)品已經(jīng)添加到購(gòu)物車中。

一個(gè)顯示產(chǎn)品被添加到購(gòu)物車的動(dòng)畫彈出框是一個(gè)“不能錯(cuò)過”的指示器，用戶體驗(yàn)（UX）設(shè)計(jì)者鼓吹在線行為應(yīng)該反映真實(shí)世界的行為。添加一個(gè)動(dòng)畫確認(rèn)應(yīng)該會(huì)產(chǎn)生一種類似于一個(gè)人從商品店貨架上拿東西并把它放在他們的購(gòu)物車?yán)锏捏w驗(yàn)。

包括產(chǎn)品的圖像和相應(yīng)選項(xiàng)的列表，不要過度使用彈出動(dòng)畫。在靜態(tài)頁(yè)面中進(jìn)行少量的移動(dòng)會(huì)吸引注意力，但過度移動(dòng)會(huì)分散注意力，可能會(huì)惹惱客戶。

購(gòu)物車頁(yè)面設(shè)計(jì)必須考慮實(shí)時(shí)庫(kù)存，如果沒有存貨，就不應(yīng)該下訂單。在購(gòu)買過程中，你會(huì)發(fā)現(xiàn)該商品沒有庫(kù)存，這并不是一個(gè)好的用戶體驗(yàn)。

2、迷你購(gòu)物車（彈出）

網(wǎng)上購(gòu)物手推車有兩種形式，一個(gè)是一個(gè)完整的頁(yè)面購(gòu)物車，其中包含客戶交易的所有細(xì)節(jié)。另一種是“迷你”購(gòu)物車，本質(zhì)上是主購(gòu)物車頁(yè)面的圖標(biāo)或快捷方式。這個(gè)迷你購(gòu)物車通常位于側(cè)邊欄或頁(yè)面上方。

最好的購(gòu)物車網(wǎng)站設(shè)計(jì)實(shí)踐是包含兩個(gè)購(gòu)物車，因?yàn)樗鼈兪腔パa(bǔ)的。迷你購(gòu)物車應(yīng)該盡可能少地顯示相關(guān)信息，它位于頂部角落或側(cè)邊欄的原因是為了防止它影響頁(yè)面的視覺效果，同時(shí)持續(xù)提醒客戶的行為。

一個(gè)好的迷你購(gòu)物車模板顯示選定的產(chǎn)品詳細(xì)信息，通常是通過彈出窗口，然后在迷你購(gòu)物車圖標(biāo)上反映商品、數(shù)量和價(jià)格，這允許客戶在產(chǎn)品頁(yè)面上繼續(xù)購(gòu)物。它為客戶提供了一個(gè)快速查看工具來監(jiān)視他們的項(xiàng)目以及他們將要花費(fèi)多少。

3、顯示項(xiàng)目的數(shù)量

購(gòu)物車應(yīng)該總是清楚地顯示物品的數(shù)量，一次偶然的雙擊或單擊可以很容易地在客戶不知情的情況下添加另一個(gè)商品。大多數(shù)購(gòu)物者使用移動(dòng)設(shè)備，他們很容易忽略這個(gè)錯(cuò)誤。

可以想象一下，有一位客戶打電話給你們的熱線，要求處理一份“重復(fù)”的訂單。一直都在告訴你，沒有人同時(shí)訂兩個(gè)訂婚戒指。

顧客應(yīng)該能夠從他們的購(gòu)物車中查看和更新訂單數(shù)量，他們永遠(yuǎn)不能失去修改購(gòu)物車內(nèi)容的選擇，直到他們購(gòu)買過程的最后一步。

4、列出產(chǎn)品形象和細(xì)節(jié)

您的客戶在整個(gè)購(gòu)物車頁(yè)面上做出他們的最終購(gòu)買決定，這是他們?cè)诮Y(jié)賬前的最后一個(gè)步驟。購(gòu)物車的作用現(xiàn)在變得加倍重要，購(gòu)物車作為一個(gè)工具來組織購(gòu)物者的物品。但當(dāng)他們完成尋找他們想要的商品時(shí)，購(gòu)物車的唯一功能是現(xiàn)在引導(dǎo)顧客付錢。

重要的是，這個(gè)頁(yè)面提供了要購(gòu)買的物品的清晰摘要。您的購(gòu)物車設(shè)計(jì)團(tuán)隊(duì)?wèi)?yīng)該包括以下相關(guān)信息：

產(chǎn)品形象-形象應(yīng)該足夠大，以便買家識(shí)別項(xiàng)目。一個(gè)小小的縮略圖是不行的，尤其是從移動(dòng)設(shè)備上看。圖像應(yīng)該以正確的顏色顯示項(xiàng)目，使一個(gè)選項(xiàng)，以便用戶可以適當(dāng)?shù)貙彶楫a(chǎn)品。

產(chǎn)品細(xì)節(jié)-包括尺寸，顏色，價(jià)格，型號(hào)，銘文，品牌和其他重要細(xì)節(jié)值得一提。完整的產(chǎn)品描述將允許用戶區(qū)分他想要購(gòu)買的商品和其他類似的商品。

數(shù)量——我們?cè)僭趺磸?qiáng)調(diào)清楚地展示這些信息的重要性也不為過。這將影響總購(gòu)買價(jià)格，可能還會(huì)影響運(yùn)輸成本。

有了所有這些信息清楚地提供在購(gòu)物車將允許客戶審查他們的訂單之前購(gòu)買，這讓客戶有機(jī)會(huì)看到并糾正錯(cuò)誤。最后，包含一個(gè)從購(gòu)物車中的每個(gè)項(xiàng)目返回到產(chǎn)品頁(yè)面的鏈接。通過這種方式，客戶可以查看并重新閱讀整個(gè)產(chǎn)品描述。

5、允許客戶編輯購(gòu)物車中的商品

允許您的客戶在購(gòu)物車頁(yè)面上輕松編輯他們的訂單，在編輯訂單時(shí)，不應(yīng)將它們從購(gòu)物車中刪除或重定向回產(chǎn)品頁(yè)面。你應(yīng)該不惜一切代價(jià)把它們放在購(gòu)物車頁(yè)面上。

在購(gòu)物車頁(yè)面設(shè)計(jì)中，有兩種常見的方法可以做到這一點(diǎn)。一種是通過內(nèi)聯(lián)編輯，另一種是通過彈出屏幕。產(chǎn)品圖像和詳細(xì)信息應(yīng)該更新，以反映用戶所做的任何更改。

在可操作的項(xiàng)目上提供清晰的標(biāo)簽或圖標(biāo)，加號(hào)（+）或減號(hào)（-）符號(hào)是眾所周知的符號(hào)，應(yīng)該用于可視化添加或刪除項(xiàng)目。

6、正確使用優(yōu)惠券字段

優(yōu)惠券代碼字段是您在迷你購(gòu)物車附近找到的小表單框，它是客戶輸入產(chǎn)品或存儲(chǔ)特定優(yōu)惠券代碼的門戶。這些代碼通常是折扣或免費(fèi)項(xiàng)目。

設(shè)身處地為顧客著想，您正在悠閑地購(gòu)物，當(dāng)您即將結(jié)賬時(shí)，您會(huì)看到這個(gè)閃亮而空的優(yōu)惠券代碼字段。不幸的是，您沒有優(yōu)惠券代碼。你可能會(huì)說"這肯定是個(gè)錯(cuò)誤，我應(yīng)該有一個(gè)優(yōu)惠券代碼因?yàn)橘?gòu)物車頁(yè)面是要我的優(yōu)惠券代碼"

這個(gè)小小的誤解可能會(huì)導(dǎo)致您幾乎付費(fèi)的客戶尋找這個(gè)難以捉摸的代碼，一項(xiàng)搜索可能會(huì)把他們引向另一個(gè)電子商務(wù)網(wǎng)站等待的懷抱。

如果你想要放一個(gè)優(yōu)惠券代碼，這里有3個(gè)購(gòu)物車?yán)雨P(guān)于如何避免“優(yōu)惠券搜索流失”

您可以放置一個(gè)可點(diǎn)擊的鏈接，讓客戶在購(gòu)物車頁(yè)面上搜索可用的優(yōu)惠券。

在沒有優(yōu)惠券代碼的情況下，向客戶隱藏優(yōu)惠券代碼字段。

稍微隱藏或減少優(yōu)惠券字段的可見性，有優(yōu)惠券代碼的用戶會(huì)尋找表單字段，而沒有的用戶可能甚至不知道表單字段的存在。

7、顯示支付和發(fā)貨選項(xiàng)

支付選項(xiàng)-顯示所有可能的安全支付選項(xiàng)將使您的客戶的付款過程無摩擦。選擇必須以客戶可以在一個(gè)視圖中看到所有選項(xiàng)的方式顯示。這允許他們比較和選擇最優(yōu)的選擇。您還可以添加支付安全印章，以及在您的支付選項(xiàng)旁邊放置圖標(biāo)。

運(yùn)輸成本-購(gòu)物車應(yīng)該能夠計(jì)算這個(gè)成本基于交付地點(diǎn)。如果客戶是回頭客，運(yùn)費(fèi)應(yīng)該基于列出的默認(rèn)送貨地址。

8、顯示總成本

說到錢的問題，重要的是讓顧客對(duì)他們的購(gòu)買感到放心。以下是最佳購(gòu)物車網(wǎng)站設(shè)計(jì)的黃金法則

一切費(fèi)用必須清楚地寫下來

不應(yīng)該有隱性成本

任何具有貨幣價(jià)值的東西——小成本、稅收、運(yùn)輸成本，最后是總成本——都必須在購(gòu)物車中有自己的項(xiàng)目。

在客戶進(jìn)入結(jié)帳頁(yè)面之前，他們必須能夠看到他們將支付多少錢以及這筆金額的細(xì)目。數(shù)字和貨幣值應(yīng)該對(duì)齊，有適當(dāng)?shù)拈g距，即使從移動(dòng)設(shè)備上觀看，視覺上也容易閱讀。有些設(shè)計(jì)將所有值放在一個(gè)表中。

9、交叉銷售或向上銷售

交叉銷售或向上銷售發(fā)生在許多業(yè)務(wù)和不同的形式，它本質(zhì)上是為消費(fèi)者提供一個(gè)購(gòu)買額外產(chǎn)品的機(jī)會(huì)，這些產(chǎn)品要么是對(duì)他們當(dāng)前購(gòu)買的商品的贊美，要么是提升他們當(dāng)前的購(gòu)買。

簡(jiǎn)單的一句話“你要配薯?xiàng)l嗎？”這是一個(gè)成功的例子，它幫助麥當(dāng)勞賣出了不計(jì)其數(shù)的薯?xiàng)l。當(dāng)你決定買更多的薯?xiàng)l時(shí)，那些精明的營(yíng)銷人員甚至?xí)鲆粋€(gè)“大號(hào)”的推銷。

早在2006年，亞馬遜就報(bào)告稱其35%的收入來自向上銷售和交叉銷售。10多年過去了，這種商業(yè)策略仍然是一個(gè)強(qiáng)有力的收入來源。大多數(shù)電子商務(wù)網(wǎng)站都采用了這種方法，并取得了普遍的積極效果。

平均而言，交叉銷售和向上銷售占電子商務(wù)銷售增長(zhǎng)的10% - 30%。您可以通過推薦個(gè)性化產(chǎn)品或顯示其他客戶購(gòu)買的商品來最大化購(gòu)物車頁(yè)面。這也是最好的銷售機(jī)會(huì)，因?yàn)槟阌幸粋€(gè)付費(fèi)客戶的全部注意力。

10、在按鈕上指定對(duì)動(dòng)作（CTA）的調(diào)用

當(dāng)您的客戶到達(dá)購(gòu)物車頁(yè)面時(shí)，應(yīng)該只顯示兩個(gè)對(duì)動(dòng)作的調(diào)用（CTA）。一個(gè)是“繼續(xù)購(gòu)物”，另一個(gè)是“結(jié)賬”。

將CTAs放在可點(diǎn)擊的按鈕上，可以讓它們與頁(yè)面的其他部分截然不同。以下是設(shè)計(jì)購(gòu)物車CTA按鈕時(shí)要遵循的基本指導(dǎo)原則。

它需要上色，最好不是白色、灰色或黑色，它應(yīng)該是一種引人注目的顏色。

它需要從背景中脫穎而出

它必須放在最顯眼的地方

它需要吸引顧客的注意力

您最好希望他們單擊Checkout CTA，這樣就必須比Continue Shopping CTA更突出顯示這一點(diǎn)，它必須是購(gòu)物車頁(yè)面中最大膽和最大的元素。

這必須位于購(gòu)物車頁(yè)面的右上角和右下角，根據(jù)購(gòu)物車頁(yè)面設(shè)計(jì)，它也可以放在左邊，但大多數(shù)購(gòu)物車示例將它們放在右邊。

簽出CTA應(yīng)該清楚地指示當(dāng)單擊或激活該按鈕時(shí)將發(fā)生什么。用戶必須清楚他們將要購(gòu)買和支付物品。不要使用令人困惑的標(biāo)簽，不管它們聽起來有多酷。簡(jiǎn)單而傳統(tǒng)的“立即付款”或“繼續(xù)付款”就可以了。

11、添加一個(gè)評(píng)論頁(yè)面

始終包括一個(gè)回顧頁(yè)，以顯示訂單摘要。這個(gè)特性給了客戶最后一次機(jī)會(huì)來檢查和驗(yàn)證他們是否購(gòu)買了預(yù)期的商品，然后他們?cè)俪兄Z支付過程。

在評(píng)審頁(yè)面上，您應(yīng)該再次包含關(guān)于產(chǎn)品的所有信息。它類似于完整購(gòu)物車頁(yè)面上的表格視圖。審查頁(yè)面還應(yīng)該包含客戶的個(gè)人、運(yùn)輸和支付信息。

最佳的購(gòu)物車網(wǎng)站設(shè)計(jì)實(shí)踐允許客戶取消或改變他們的訂單。他們還可以通過單擊Continue Shopping CTA添加商品。如果一切順利，這將使您的客戶有信心繼續(xù)進(jìn)行結(jié)帳過程。

12、添加一個(gè)感謝頁(yè)面

有效的購(gòu)物車網(wǎng)站設(shè)計(jì)總是包括一個(gè)感謝頁(yè)，此頁(yè)面應(yīng)包含確認(rèn)訂單已發(fā)送且正在處理的說明。包括重要的信息，如訂單跟蹤號(hào)碼和誰在延遲交貨時(shí)聯(lián)系。

這也是一個(gè)向你的客戶表示感謝和加強(qiáng)你的聯(lián)系的機(jī)會(huì)，首先要給對(duì)方一個(gè)溫暖的私人信息?？紤]一下這個(gè)問題，如果可能的話，添加一個(gè)個(gè)人簽名。

你也可以提供這些前面提到的優(yōu)惠券代碼在這里作為感謝信息的一部分，你甚至可以把頂級(jí)銷售項(xiàng)目的鏈接作為你的向上銷售努力的一部分。

遵循這些技巧，就可以得到最好的購(gòu)物車網(wǎng)站設(shè)計(jì)。擁有一個(gè)高效的、以客戶為中心的購(gòu)物車頁(yè)面，會(huì)給你在電子商務(wù)領(lǐng)域取得成功的最大機(jī)會(huì)。如果您需要進(jìn)一步幫助您的購(gòu)物車或網(wǎng)站設(shè)計(jì)，我們將很高興幫助您。請(qǐng)給我們發(fā)郵件或打電話，所有信息都列在我們的聯(lián)系頁(yè)面上。