您当前的位置: 首页 » HTML/XHTML/XML编程 » 107个顶级在线零售网站的“加入购物车”按钮
107个顶级在线零售网站的“加入购物车”按钮
论坛链接
“加入购物车”按钮非常小，但每个在线购物网站都离不开它。按钮上的文字通常直接呈现在长方形的按钮控件上，有时五彩缤纷的可点击元素会将产品和购物车相联系起来，并有延伸品牌的功效。因此在购物车按钮的设计中，很重要的一点就是将你的一些想法代入到你所设计的产品中。
我们自2006起，从各个顶级在线零售网站已经收集了超过100个“加入购物车”按钮，这些按钮会带给你一些设计的灵感。此外，我们也总结了一些针对“加入购物车”设计的可用性指南共设计者参考。好吧，实际上是111个按钮，其中的107的看上去更酷。
（译者注：这里省略了这些按钮的图片，原文是里并不是一张整图，帖过来工作量太大，不帖也不影响对文章含义的理解，有兴趣的读者可去原文查看。）
以下是一些统计，百分比看上去更直观。
按钮文字：
加入购物车 58.0%
加入背包 9.8%
加入到购物袋 9.8%
加入到购物篮 6.3%
加入到消费购物车 4.5%
购买 2.7%
现在购买 1.8%
将商品加入到购物车 1.8%
将商品加入到背包 0.9%
加入我的背包 0.9%
加入我的便当 0.9%
加入我的消费购物车 0.9%
现在预订 0.9%
按钮图片
没有 48.2%
箭头 17.9%
购物车 14.3%
消费背包 7.1%
加入符号 5.4%
组合 4.5%
独特的设计 1.8%
“加入购物车”按钮如何增强你的品牌
首先，“加入购物车”按钮看似是一个小细节，但它包含用户和品牌之间潜在的情感联系。你所选择的按钮样式、色彩和按钮文字都会影响这一情感联系的结果。
Urban Outfitters的手写字体按钮与其前卫和街头的风格相匹配（这有可能有损于按钮的可寻性，因为这无助于使按钮在屏幕上脱颖而出）。Northerntool的加入符号（plus sign）型图标酷似螺丝刀头。Petsmart的红色小圆球有趣且活泼，能即刻被认出。Bloomingdale的“big brown bag”图标阐述了它品牌的威望。而Polo永恒的深色海军蓝色按钮给线上和线下的品牌标识都带来了和谐的一致。
按钮文字也非常重要。“加入到购物袋”相对“加入购物车”听上去似乎更适合高端百货店，而后者可能更适合WalMart或Target。“现在预订”一致很适合目录推广品牌，但现在也适合用于在线订购。在英国，“加入购物篮”是更为普遍的术语。
按钮设计与可用性
按钮文字
网站文案强调高可看性（scannabliity），网站文案的黄金准则是：用尽量少的文字（don’t use 5 words when three will do）。这条准则如何应用到这样一个小按钮中呢？尽管如此，我们发现15%的按钮文字比较长。Harry and David的“加入我的消费购物车”，更个人化和口语化。
“现在购买”相比“加入购物车”表达方式更有力，但可能更多的是建议用户完成购物或作出一个购买的承诺，而不是再去检查一下订单。“加入购物车”的美感在于没有强制并假设用户还要继续随便看看。如果你是一个很好的电子商务销售人员，那么你正在展示推荐购买的商品和一个“欢迎继续购物”的链接（或者你正在使用一个以Ajax实现的内嵌购物车）。
文字样式
一般的网页可用性设计指南推荐使用有高色彩对比度的sans-serif字体（高对比度的白字黑底或白字暗蓝底，而不是像Chadwick低对比度的蓝字蓝底）。
全大写字体在网站文案中基本不被推荐。大小写混合更有利于阅读，全小写也具有同样的可读性。我们发现45%的“加入购物车”按钮使用全大写。Walgreen的白色全大写文字，包含在含有一个带有小图标的弧度按钮上，这种设计可以吸引部分用户的视线。
按钮的放置布局
如果在你的产品页面提供一些有用的功能，如：收藏夹（wishlists）、放大图片、色彩转换、其他可选产品预览、发送给好友、查看购物车或结帐按钮等等，请确认“加入购物车”按钮保持醒目、明亮和对比显著。次要功能按钮在色彩上需弱化或文字上简化。
文字叠加（译者注：文字分两行显示）
文字叠加对链接和导航按钮设计来说并不是一个好主意。同样，也不适合“加入购物车”按钮。用户期望看到某种形式的矩形按钮，这样可以快速扫视文字页面。文字叠加需要花费用户更多的时间来辨认按钮，甚至可能造成用户的困惑。我们没有必要去重新发明轮子，坚持简单便捷的方式就好。
如何使用按钮模板？
即使不为购物车功能设计定制一个“加入购物车”按钮，你也需要选择一个符合网站主题的按钮（并不意味着必须是完全相同的颜色）。请确认选择一个设计后持续使用它。电子商务的蓬勃发展由信用驱动的，不停的变化按钮会损害用户对你的信任。
我们自2006起，从各个顶级在线零售网站已经收集了超过100个“加入购物车”按钮，这些按钮会带给你一些设计的灵感。此外，我们也总结了一些针对“加入购物车”设计的可用性指南共设计者参考。好吧，实际上是111个按钮，其中的107的看上去更酷。
（译者注：这里省略了这些按钮的图片，原文是里并不是一张整图，帖过来工作量太大，不帖也不影响对文章含义的理解，有兴趣的读者可去原文查看。）
以下是一些统计，百分比看上去更直观。
按钮文字：
加入购物车 58.0%
加入背包 9.8%
加入到购物袋 9.8%
加入到购物篮 6.3%
加入到消费购物车 4.5%
购买 2.7%
现在购买 1.8%
将商品加入到购物车 1.8%
将商品加入到背包 0.9%
加入我的背包 0.9%
加入我的便当 0.9%
加入我的消费购物车 0.9%
现在预订 0.9%
按钮图片
没有 48.2%
箭头 17.9%
购物车 14.3%
消费背包 7.1%
加入符号 5.4%
组合 4.5%
独特的设计 1.8%
“加入购物车”按钮如何增强你的品牌
首先，“加入购物车”按钮看似是一个小细节，但它包含用户和品牌之间潜在的情感联系。你所选择的按钮样式、色彩和按钮文字都会影响这一情感联系的结果。
Urban Outfitters的手写字体按钮与其前卫和街头的风格相匹配（这有可能有损于按钮的可寻性，因为这无助于使按钮在屏幕上脱颖而出）。Northerntool的加入符号（plus sign）型图标酷似螺丝刀头。Petsmart的红色小圆球有趣且活泼，能即刻被认出。Bloomingdale的“big brown bag”图标阐述了它品牌的威望。而Polo永恒的深色海军蓝色按钮给线上和线下的品牌标识都带来了和谐的一致。
按钮文字也非常重要。“加入到购物袋”相对“加入购物车”听上去似乎更适合高端百货店，而后者可能更适合WalMart或Target。“现在预订”一致很适合目录推广品牌，但现在也适合用于在线订购。在英国，“加入购物篮”是更为普遍的术语。
按钮设计与可用性
按钮文字
网站文案强调高可看性（scannabliity），网站文案的黄金准则是：用尽量少的文字（don’t use 5 words when three will do）。这条准则如何应用到这样一个小按钮中呢？尽管如此，我们发现15%的按钮文字比较长。Harry and David的“加入我的消费购物车”，更个人化和口语化。
“现在购买”相比“加入购物车”表达方式更有力，但可能更多的是建议用户完成购物或作出一个购买的承诺，而不是再去检查一下订单。“加入购物车”的美感在于没有强制并假设用户还要继续随便看看。如果你是一个很好的电子商务销售人员，那么你正在展示推荐购买的商品和一个“欢迎继续购物”的链接（或者你正在使用一个以Ajax实现的内嵌购物车）。
文字样式
一般的网页可用性设计指南推荐使用有高色彩对比度的sans-serif字体（高对比度的白字黑底或白字暗蓝底，而不是像Chadwick低对比度的蓝字蓝底）。
全大写字体在网站文案中基本不被推荐。大小写混合更有利于阅读，全小写也具有同样的可读性。我们发现45%的“加入购物车”按钮使用全大写。Walgreen的白色全大写文字，包含在含有一个带有小图标的弧度按钮上，这种设计可以吸引部分用户的视线。
按钮的放置布局
如果在你的产品页面提供一些有用的功能，如：收藏夹（wishlists）、放大图片、色彩转换、其他可选产品预览、发送给好友、查看购物车或结帐按钮等等，请确认“加入购物车”按钮保持醒目、明亮和对比显著。次要功能按钮在色彩上需弱化或文字上简化。
文字叠加（译者注：文字分两行显示）
文字叠加对链接和导航按钮设计来说并不是一个好主意。同样，也不适合“加入购物车”按钮。用户期望看到某种形式的矩形按钮，这样可以快速扫视文字页面。文字叠加需要花费用户更多的时间来辨认按钮，甚至可能造成用户的困惑。我们没有必要去重新发明轮子，坚持简单便捷的方式就好。
如何使用按钮模板？
即使不为购物车功能设计定制一个“加入购物车”按钮，你也需要选择一个符合网站主题的按钮（并不意味着必须是完全相同的颜色）。请确认选择一个设计后持续使用它。电子商务的蓬勃发展由信用驱动的，不停的变化按钮会损害用户对你的信任。