加载中…
个人资料
Richie
Richie
  • 博客等级:
  • 博客积分:0
  • 博客访问:15,760
  • 关注人气:9
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

超牛零售网站107个“加入购物车”按钮(中英文)

(2009-12-04 16:29:57)
标签:

零售网站

按钮设计

可用性

素材

矢量图

网站建设

杂谈

分类: 用户体验

超牛零售网站107个“加入购物车”按钮(中英文)

“加入购物车”按钮非常小,但每个在线购物网站都离不开它。按钮上的文字通常直接呈现在长方形的按钮控件上,有时五彩缤纷的可点击元素会将产品和购物车相联系起来,并有延伸品牌的功效。因此在购物车按钮的设计中,很重要的一点就是将你的一些想法代入到你所设计的产品中。

Add to Cart buttons – they may be small, but no online retail store can do without them. These little, rectangular, sometimes colorful clickables connect the product to the shopping cart and are an extension of your branding. It’s important to put some thought into what your “Add to Cart” icon looks like in your shopping cart.

 

我们自2006起,从各个顶级在线零售网站已经收集了超过100个“加入购物车”按钮,这些按钮会带给你一些设计的灵感。此外,我们也总结了一些针对“加入购物车”设计的可用性指南共设计者参考。好吧,实际上是111个按钮,其中的107的看上去更酷。

We’ve collected over 100 Add to Cart buttons from the top online retailers of 2006 to give you some design inspiration. And we’ve summarized some usability guidelines that you can apply to your own Add to Cart button. Ok, there are actually 111 shopping cart icons, but 107 just looked cooler.

 

超牛零售网站107个“加入购物车”按钮(中英文)

“加入购物车”按钮如何增强你的品牌

首先,“加入购物车”按钮看似是一个小细节,但它包含用户和品牌之间潜在的情感联系。你所选择的按钮样式、色彩和按钮文字都会影响这一情感联系的结果。

Urban Outfitters的手写字体按钮与其前卫和街头的风格相匹配(这有可能有损于按钮的可寻性,因为这无助于使按钮在屏幕上脱颖而出)。Northerntool的加入符号(plus sign)型图标酷似螺丝刀头。Petsmart的红色小圆球有趣且活泼,能即刻被认出。Bloomingdale的“big brown bag”图标阐述了它品牌的威望。而Polo永恒的深色海军蓝色按钮给线上和线下的品牌标识都带来了和谐的一致。

按钮文字也非常重要。“加入到购物袋”相对“加入购物车”听上去似乎更适合高端百货店,而后者可能更适合WalMart或Target。“现在预订”一致很适合目录推广品牌,但现在也适合用于在线订购。在英国,“加入购物篮”是更为普遍的术语。

How the Add To Cart Button Can Reinforce Your Branding

At first the “Add to Cart” button may seem like a minor detail, but it has the potential to create an emotional connection with your brand. Your choice of shape, color, font and button text all affect that connection.

Urban Outfitters’ felt pen lettering echoes the brand’s edgy, street persona (it may however be at the expense of findability as it does nothing to stand out on the screen). Northerntool’s plus sign icon resembles a screwdriver head. Petsmart’s little red doggie ball is fun, playful and instantly recognizable. Bloomingdale’s signature “big brown bag” icon captures its cachet. And Polo’s timeless, deep navy blue button brings harmony between its online and offline identity.

Button text is also of great importance. “Add to Shopping Bag” sounds more appropriate for high end department stores than “Add to Cart,” which is more believable for a WalMart or Target. “Order Now” may work for long time catalog brands now accommodating online orders. In the UK, “Add to Basket” is more prent terminology.

按钮设计与可用性

按钮文字

网站文案强调高可看性(scannabliity),网站文案的黄金准则是:用尽量少的文字(don’t use 5 words when three will do)。这条准则如何应用到这样一个小按钮中呢?尽管如此,我们发现15%的按钮文字比较长。Harry and David的“加入我的消费购物车”,更个人化和口语化。

“现在购买”相比“加入购物车”表达方式更有力,但可能更多的是建议用户完成购物或作出一个购买的承诺,而不是再去检查一下订单。“加入购物车”的美感在于没有强制并假设用户还要继续随便看看。如果你是一个很好的电子商务销售人员,那么你正在展示推荐购买的商品和一个“欢迎继续购物”的链接(或者你正在使用一个以Ajax实现的内嵌购物车)。

Button Design and Usability

Button Text

Web copywriting emphasizes scannabliity — perhaps the golden rule of web copywriting is don’t use 5 words when three will do. How much more should this rule apply to a small button? Nevertheless, we found 15% of the top etailers going long. Harry and David’s “Add To My Shopping Cart” — though personal — is a mouthful.

“Buy Now” may be a stronger call to action than “Add to Cart”, but may subtly suggest the user is finished shopping or is making a commitment to purchase without time to review the order. The beauty of “Add to Cart” is that it is non-committal and assumes the user is still looking around. And if you’re a good e-salesperson, you’re showing suggested products and a “continue shopping” link from view cart page (or you are using an in-line cart with Ajax’y goodness).

文字样式

一般的网页可用性设计指南推荐使用有高色彩对比度的sans-serif字体(高对比度的白字黑底或白字暗蓝底,而不是像Chadwick低对比度的蓝字蓝底)。

全大写字体在网站文案中基本不被推荐。大小写混合更有利于阅读,全小写也具有同样的可读性。我们发现45%的“加入购物车”按钮使用全大写。Walgreen的白色全大写文字,包含在含有一个带有小图标的弧度按钮上,这种设计可以吸引部分用户的视线。

Text Formatting

General web usability guidelines recommend sans-serif fonts with high contrast color selection (high-contrast white on black or dark blue rather than low-contrast like Chadwick’s blue-on-blue).

All-caps are generally discouraged in web copywriting. Mixed case is the easiest to read, although all lower case is also easy. We found 45% of “Add to Cart” buttons using all-capitals. Walgreen’s slaps white all-caps text on a light colored, tiny button with a gradient and an icon, forcing some users to squint.

 

按钮的放置布局

如果在你的产品页面提供一些有用的功能,如:收藏夹(wishlists)、放大图片、色彩转换、其他可选产品预览、发送给好友、查看购物车或结帐按钮等等,请确认“加入购物车”按钮保持醒目、明亮和对比显著。次要功能按钮在色彩上需弱化或文字上简化。

Button Placement

If you offer helpful features on your product pages like wishlists, enlarged photos, color switching, alternate product views, email to friend, size chart, view cart or check out buttons, make sure the “Add to Cart” button is obvious, bright and prominent in comparison. Less important functions can be lighter colored buttons or simple text links.

 

文字叠加(译者注:文字分两行显示)

文字叠加对链接和导航按钮设计来说并不是一个好主意。同样,也不适合“加入购物车”按钮。用户期望看到某种形式的矩形按钮,这样可以快速扫视文字页面。文字叠加需要花费用户更多的时间来辨认按钮,甚至可能造成用户的困惑。我们没有必要去重新发明轮子,坚持简单便捷的方式就好。

Stacking Text

Stacking text is not a good idea for links or navigation buttons, and the same goes for “Add to Cart” buttons. Users have come to expect some form of rectangular shape, and when quickly scanning a page, it may take longer to distinguish button from decoration, and even become frustrating. No need to reinvent the wheel, stick to the convention.

 

如何使用按钮模板?

即使不为购物车功能设计定制一个“加入购物车”按钮,你也需要选择一个符合网站主题的按钮(并不意味着必须是完全相同的颜色)。请确认选择一个设计后持续使用它。电子商务的蓬勃发展由信用驱动的,不停的变化按钮会损害用户对你的信任。

What if You Use A Button From a Template?

Even if you don’t use a custom designed “Add to Cart” button for your shopping cart, choose a button that complements your site’s theme (complements does not infer it must be the the exact same color). And make sure you pick one design and stick with it. Ecommerce thrives on trust, and random buttons erodes customer confidence.

转载至--http://www.getelastic.com/add-to-cart-buttons/

超牛零售网站107个“加入购物车”按钮(中英文)

超牛零售网站107个“加入购物车”按钮(中英文)

超牛零售网站107个“加入购物车”按钮(中英文)

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有