假設(shè)你在設(shè)計一個在線商店。由于涉眾只對銷售量感興趣，所以你工作的成功與否直接取決于你是否能很好地驅(qū)動用戶去點擊“購買”按鈕。在這種情況下，你也許會考慮一些設(shè)計思路，這些思路能夠?qū)⒛銋^(qū)別于你的競爭者。最終，他們做錯的可能性很高。

在這些有缺陷的設(shè)計中，最簡單的例子之一就是錯誤地使用了購物車圖標(biāo)——一個傳統(tǒng)的圖標(biāo)，表示虛擬存放商鋪里商品的存放地的圖標(biāo)。正確地使用該圖標(biāo)，雖小卻強大的元素，能夠幫助用戶盡可能又快又爽地購買商品。就這點而論，這是購物過程的重點，因此，在設(shè)計過程中也要認(rèn)真地考慮。

少見的購物車，一個巨大的購物袋 來自mascot。

在這篇文章里，我們展示了有吸引力的，有創(chuàng)造力的，用戶體驗好的購物車，購物袋，購物籃——任何他們在線上商鋪使用的購物車。除此之外，我們也談到了創(chuàng)新的想法、設(shè)計方法和可用性指南。

難道一個簡單的文字鏈接不夠嗎？

有時候是夠了的。但是，在很多情況下，夠不夠取決于公司或者商鋪要賣什么樣的產(chǎn)品。如果一家公司要賣螺絲刀的話，彩色購物袋也許不是最好的圖標(biāo)。在這種情況下，一個明顯的文字鏈接可能就足夠了。但是，如果是一家鞋店要想吸引客戶的注意的話，最好加上點稍微更加吸引人的設(shè)計元素。

Landsens的購物車使用了一個簡單的文字鏈接。這也許是一種解決方案，但可能不是最有效的……

但有時候，一個文字鏈接就夠了。

在這些案例里，如何展示購物車功能歸根于店鋪的設(shè)計問題。購物車和結(jié)帳圖標(biāo)對于客戶和店主雙方來講，都是最重要的功能。這就是為什么它需要認(rèn)真地考量、認(rèn)真地設(shè)計。另外，如果有更有效的方案替代枯燥的文字鏈接，何樂不為？

1.吸引人的購物車

設(shè)計師經(jīng)常傾向于設(shè)計吸引人的購物車，尤其喜歡在標(biāo)準(zhǔn)的推車圖標(biāo)上使用引人注目的元素。有趣的是，比起電腦、數(shù)碼商鋪來說，定位于女性購物的大多數(shù)商鋪的購物車看起來更加漂亮。目的很簡單：購物車是用來激起用戶購買欲望的。

許多情況下，設(shè)計師把購物車局限于它的主要功能——表示客戶從網(wǎng)店購買的商品的虛擬存放地。但是，在某些情況下，購物車會更不正式些。他們看起來像是現(xiàn)實生活中的購物車，他們帶著感情。

2.購物車可提高可用性

從可用性觀點來看，最好給用戶提供一個對接下來要發(fā)生的購物流程的概要。這個的最根本的原因是讓用戶可以確認(rèn)系統(tǒng)運作正常，也同時能驗證他們之前與系統(tǒng)的交互也正常。(意指購物車能幫助用戶確認(rèn)他們之前所要買的商品。)

為了達(dá)到這個目的，購物車可以結(jié)合更進(jìn)一步的商鋪功能。既然用戶期望購物車會出現(xiàn)在頁面的頂部的右邊，那么就有理由在購物車旁邊放置一些更進(jìn)一步的選項，因此，可以將整個購物流程以一種精簡、全站內(nèi)持久的顯示的方式囊括在此。

舉幾個例子，這樣也許蠻有用的：

• 告訴用戶購物車里有些什么，
• 表明需要至少購買多少件商品才可以下單，

  

• 商品總共多少錢，

  

• 放置一個結(jié)帳的鏈接也許可以幫助用戶立即完成購物流程，

  

• 提示可用的支付方式，

  

• 為防止用戶不清楚購物流程而提供一些幫助

  

一旦提供了這些信息，商鋪就可以將持久的購物流程總覽告訴給用戶。這節(jié)省了客戶許多次鼠標(biāo)點擊。于是，客戶可以更好地關(guān)注于挑選他們喜歡的商品，也更舒服地瀏覽店鋪。

3.購物車圖標(biāo)豐富了內(nèi)容

購物車也可以用來當(dāng)作一個簡單的說明。設(shè)計師將購物車放到在線商鋪的內(nèi)容中間去而不放在頁頭——比如說把購物車放在商品詳情中。顯然，不斷的有例子說明這樣貫穿整個站點的方式是可行的。

購物車豐富內(nèi)容: Bigw 在標(biāo)題使用了手推車圖標(biāo)

一個“傳統(tǒng)”的設(shè)計：購物車在“添加到購物車”鏈接的右邊。

4.微妙地使用購物車

有時購物車被設(shè)計得很微妙，正如有時候在第一眼就能看見它。這是你在為店鋪設(shè)計之前首要考慮的。讓我們看些例子，看看他們是如何完成的。

要做得微妙，購物車也應(yīng)該用一些不同的顏色來強調(diào)。這樣，就能將它從網(wǎng)站總設(shè)計中剝離出來，同時讓他們更加容易被辨別。

5.創(chuàng)意地使用購物車

很明顯，購物車并沒有必要像傳統(tǒng)的購物車的樣子。從用戶的觀點出發(fā)，這也許不是應(yīng)該采取的最好的設(shè)計解決方案，因為它乍一看不好辨認(rèn)也不能令人印象深刻。不過，有些設(shè)計師傾向于選擇創(chuàng)意性的做法：

一個購物車，看起來像是一個……購物欄。你也可以在里邊放各種商品。

會動的購物袋 來自 Hgman

6.購物車融入到logo中

有時候設(shè)計師會傾向于將購物車集成到商鋪的logo中。在許多情況下，用在logo中的顏色也會用在整個在線店鋪的購物車圖標(biāo)中。

7.誤用購物車

雖然購物車設(shè)計中，遵從基本原則是很容易的，但是很多(太多了)網(wǎng)站常常犯同樣的錯誤：

• 購物車不可點，

  

• 購物車無法辨認(rèn)，

  

• 購物車很難找到。

  
  雖然購物車在右邊，也同時用顏色突出了，但是其他的元素相當(dāng)擁擠，所以很難能夠把焦點放在購物車上。

購物車：該放在哪兒？

傳統(tǒng)的說，購物車都放在頁面頂端的右側(cè)。幾年來由于用戶在大量的在線商鋪一遍又一遍地看到這種模式，所以用戶早已習(xí)慣了這種做法。但是，隨著購物車區(qū)塊的高度隨著選擇的商品數(shù)量的增加，有時候購物車可能需要變成豎排的而是不是常見的橫排。

這些情況下，購物車常常被放置到右邊欄中。這兩種情況，購物車都應(yīng)該在所有頁面保持一致。

更多購物車的圖例

前幾個月，Jason Billingsley收集了 107 Add to Cart Buttons of the Top Online Retailers(107個最牛逼的在線銷售的添加到購物車按鈕)。這些小小的、長方形的、有時候是彩色的按鈕從商品頁面鏈接到了購物車頁面，同時，這些按鈕也是你品牌的延伸。將你的“添加到購物車”圖標(biāo)添入一些自己的想法是很重要的。

Shopping Cart Icons(購物車圖標(biāo)) Ro London幾年前收集的。在他的觀點看來，用購物袋比購物車要好。