“加入購物車”按鈕非常小，但每個(gè)在線購物網(wǎng)站都離不開它。按鈕上的文字通常直接呈現(xiàn)在長方形的按鈕控件上，有時(shí)五彩繽紛的可點(diǎn)擊元素會(huì)將產(chǎn)品和購物車相聯(lián)系起來，并有延伸品牌的功效。因此在購物車按鈕的設(shè)計(jì)中，很重要的一點(diǎn)就是將你的一些想法代入到你所設(shè)計(jì)的產(chǎn)品中。

我們自2006起，從各個(gè)頂級(jí)在線零售網(wǎng)站已經(jīng)收集了超過100個(gè)“加入購物車”按鈕，這些按鈕會(huì)帶給你一些設(shè)計(jì)的靈感。此外，我們也總結(jié)了一些針對(duì)“加入購物車”設(shè)計(jì)的可用性指南共設(shè)計(jì)者參考。好吧，實(shí)際上是111個(gè)按鈕，其中的107的看上去更酷。

（譯者注：這里省略了這些按鈕的圖片，原文是里并不是一張整圖，帖過來工作量太大，不帖也不影響對(duì)文章含義的理解，有興趣的讀者可去原文查看。）

以下是一些統(tǒng)計(jì)，百分比看上去更直觀。

按鈕文字：

加入購物車                          58.0%

加入背包                              9.8%

加入到購物袋                           9.8%

加入到購物籃                           6.3%

加入到消費(fèi)購物車                      4.5%

購買                                   2.7%

現(xiàn)在購買                              1.8%

將商品加入到購物車                 1.8%

將商品加入到背包                    0.9%

加入我的背包                         0.9%

加入我的便當(dāng)                         0.9%

加入我的消費(fèi)購物車                 0.9%

現(xiàn)在預(yù)訂                              0.9%

按鈕圖片

沒有                                  48.2%

箭頭                                  17.9%

購物車                               14.3%

消費(fèi)背包                              7.1%

加入符號(hào)                              5.4%

組合                                   4.5%

獨(dú)特的設(shè)計(jì)                           1.8%

“加入購物車”按鈕如何增強(qiáng)你的品牌

首先，“加入購物車”按鈕看似是一個(gè)小細(xì)節(jié)，但它包含用戶和品牌之間潛在的情感聯(lián)系。你所選擇的按鈕樣式、色彩和按鈕文字都會(huì)影響這一情感聯(lián)系的結(jié)果。

Urban Outfitters的手寫字體按鈕與其前衛(wèi)和街頭的風(fēng)格相匹配（這有可能有損于按鈕的可尋性，因?yàn)檫@無助于使按鈕在屏幕上脫穎而出）。Northerntool的加入符號(hào)（plus sign）型圖標(biāo)酷似螺絲刀頭。Petsmart的紅色小圓球有趣且活潑，能即刻被認(rèn)出。Bloomingdale的“big brown bag”圖標(biāo)闡述了它品牌的威望。而Polo永恒的深色海軍藍(lán)色按鈕給線上和線下的品牌標(biāo)識(shí)都帶來了和諧的一致。

按鈕文字也非常重要�！凹尤氲劫徫锎�”相對(duì)“加入購物車”聽上去似乎更適合高端百貨店，而后者可能更適合WalMart或Target。“現(xiàn)在預(yù)訂”一致很適合目錄推廣品牌，但現(xiàn)在也適合用于在線訂購。在英國，“加入購物籃”是更為普遍的術(shù)語。

按鈕設(shè)計(jì)與可用性

按鈕文字

網(wǎng)站文案強(qiáng)調(diào)高可看性（scannabliity），網(wǎng)站文案的黃金準(zhǔn)則是：用盡量少的文字（don’t use 5 words when three will do）。這條準(zhǔn)則如何應(yīng)用到這樣一個(gè)小按鈕中呢？盡管如此，我們發(fā)現(xiàn)15%的按鈕文字比較長。Harry and David的“加入我的消費(fèi)購物車”，更個(gè)人化和口語化。

“現(xiàn)在購買”相比“加入購物車”表達(dá)方式更有力，但可能更多的是建議用戶完成購物或作出一個(gè)購買的承諾，而不是再去檢查一下訂單�！凹尤胭徫镘嚒钡拿栏性谟跊]有強(qiáng)制并假設(shè)用戶還要繼續(xù)隨便看看。如果你是一個(gè)很好的電子商務(wù)銷售人員，那么你正在展示推薦購買的商品和一個(gè)“歡迎繼續(xù)購物”的鏈接（或者你正在使用一個(gè)以Ajax實(shí)現(xiàn)的內(nèi)嵌購物車）。

文字樣式

一般的網(wǎng)頁可用性設(shè)計(jì)指南推薦使用有高色彩對(duì)比度的sans-serif字體（高對(duì)比度的白字黑底或白字暗藍(lán)底，而不是像Chadwick低對(duì)比度的藍(lán)字藍(lán)底）。

全大寫字體在網(wǎng)站文案中基本不被推薦。大小寫混合更有利于閱讀，全小寫也具有同樣的可讀性。我們發(fā)現(xiàn)45%的“加入購物車”按鈕使用全大寫。Walgreen的白色全大寫文字，包含在含有一個(gè)帶有小圖標(biāo)的弧度按鈕上，這種設(shè)計(jì)可以吸引部分用戶的視線。

按鈕的放置布局

如果在你的產(chǎn)品頁面提供一些有用的功能，如：收藏夾（wishlists）、放大圖片、色彩轉(zhuǎn)換、其他可選產(chǎn)品預(yù)覽、發(fā)送給好友、查看購物車或結(jié)帳按鈕等等，請(qǐng)確認(rèn)“加入購物車”按鈕保持醒目、明亮和對(duì)比顯著。次要功能按鈕在色彩上需弱化或文字上簡化。[Page]

文字疊加（譯者注：文字分兩行顯示）

文字疊加對(duì)鏈接和導(dǎo)航按鈕設(shè)計(jì)來說并不是一個(gè)好主意。同樣，也不適合“加入購物車”按鈕。用戶期望看到某種形式的矩形按鈕，這樣可以快速掃視文字頁面。文字疊加需要花費(fèi)用戶更多的時(shí)間來辨認(rèn)按鈕，甚至可能造成用戶的困惑。我們沒有必要去重新發(fā)明輪子，堅(jiān)持簡單便捷的方式就好。

如何使用按鈕模板？

即使不為購物車功能設(shè)計(jì)定制一個(gè)“加入購物車”按鈕，你也需要選擇一個(gè)符合網(wǎng)站主題的按鈕（并不意味著必須是完全相同的顏色）。請(qǐng)確認(rèn)選擇一個(gè)設(shè)計(jì)后持續(xù)使用它。電子商務(wù)的蓬勃發(fā)展由信用驅(qū)動(dòng)的，不停的變化按鈕會(huì)損害用戶對(duì)你的信任。