Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

购物车图例:例子和最佳实践

428 views

Published on

Published in: Sports, Entertainment & Humor
  • Be the first to comment

  • Be the first to like this

购物车图例:例子和最佳实践

  1. 1. 购物车图例:例子和最佳实践 1615 个读者 om19 @ yeeyan.com 09/14/2008 双语对照 原文 字体大小 小 中 大 简介 假设你在设计一个在线商店。由于涉众只对销售量感兴趣,所以你工作的成功与否直接取决于 你是否能很好地驱动用户去点击“购买”按钮。在这种情况下,你也许会想着一些设计思路能够 将你区别于你的竞争者。最终,他们做错的可能性很高。 翻译:om19 欢迎转载,转载请注明出处。 假设你在设计一个在线商店。由于涉众只对销售量感兴趣,所以你工作的成功与否直接取决 于你是否能很好地驱动用户去点击“购买”按钮。在这种情况下,你也许会考虑一些设计思路, 这些思路能够将你区别于你的竞争者。最终,他们做错的可能性很高。 在这些有缺陷的设计中,最简单的例子之一就是错误地使用了购物车图标——一个传统的图 标,表示虚拟存放商铺里商品的存放地的图标。正确地使用该图标,虽小却强大的元素,能够 帮助用户尽可能又快又爽地购买商品。就这点而论,这是购物过程的重点,因此,在设计过程 中也要认真地考虑。 少见的购物车,一个巨大的购物袋 来自 mascot。
  2. 2. 在这篇文章里,我们展示了有吸引力的,有创造力的,用户体验好的购物车,购物袋,购 物篮——任何他们在线上商铺使用的购物车。除此之外,我们也谈到了创新的想法、设计方法 和可用性指南。 难道一个简单的文字链接不够吗? 有时候是够了的。但是,在很多情况下,够不够取决于公司或者商铺要卖什么样的产品。如 果一家公司要卖螺丝刀的话,彩色购物袋也许不是最好的图标。在这种情况下,一个明显的文 字链接可能就足够了。但是,如果是一家鞋店要想吸引客户的注意的话,最好加上点稍微更加 吸引人的设计元素。 Landsens 的购物车使用了一个简单的文字链接。这也许是一种解决方案,但可能不是最有效 的…… 但有时候,一个文字链接就够了。 在这些案例里,如何展示购物车功能归根于店铺的设计问题。购物车和结帐图标对于客户和店 主双方来讲,都是最重要的功能。这就是为什么它需要认真地考量、认真地设计。另外,如果 有更有效的方案替代枯燥的文字链接,何乐不为? 1.吸引人的购物车 设计师经常倾向于设计吸引人的购物车,尤其喜欢在标准的推车图标上使用引人注目的元 素。有趣的是,比起电脑、数码商铺来说,定位于女性购物的大多数商铺的购物车看起来更加 漂亮。目的很简单:购物车是用来激起用户购买欲望的。 许多情况下,设计师把购物车局限于它的主要功能——表示客户从网店购买的商品的虚拟存放 地。但是,在某些情况下,购物车会更不正式些。他们看起来像是现实生活中的购物车,他 们带着感情。
  3. 3. 2.购物车 可提高可用性 从可用性观点来看,最好给用户提供一个对接下来要发生的购物流程的概要。这个的最根本的 原因是让用户可以确认系统运作正常,也同时能验证他们之前与系统的交互也正常。(意指购物 车能帮助用户确认他们之前所要买的商品。) 为了达到这个目的,购物车可以结合更进一步的商铺功能。既然用户期望购物车会出现在页面 的顶部的右边,那么就有理由在购物车旁边放置一些更进一步的选项,因此,可以将整个购物 流程 以一种精简、全站内持久的显示的方式囊括在此。 举几个例子,这样也许蛮有用的: • 告诉用户购物车里有些什么 , • 表明需要至少购买多少件商品才可以下单, • 商品总共多少钱,
  4. 4. • 放置一个结帐 的链接也许可以帮助用户立即完成购物流程, • 提示可用的支付方式, • 为防止用户不清楚购物流程而提供一些帮助 一旦提供了这些信息,商铺就可以将持久的购物流程总览告诉给用户。这节省了客户许多次 鼠标点击。于是,客户可以更好地关注于挑选他们喜欢的商品,也更舒服地浏览店铺。 3.购物车 图标丰富了内容 购物车也可以用来当作一个简单的说明。设计师将购物车放到在线商铺的内容中间去而不放 在页头——比如说把购物车放在商品详情中。显然,不断的有例子说明这样贯穿整个站点的方 式是可行的。
  5. 5. 购物车丰富内容: Bigw 在标题使用了手推车图标
  6. 6. 一个“传统”的设计:购物车在“添加到购物车”链接的右边。 4.微妙地使用购物车 有时购物车被设计得很微妙,正如有时候在第一眼就能看见它。这是你在为店铺设计之前首要 考虑的。让我们看些例子,看看他们是如何完成的。 要做得微妙,购物车也应该用一些不同的颜色来强调。这样,就能将它从网站总设计中剥离 出来,同时让他们更加容易被辨别。
  7. 7. 5.创意地使用购物车 很明显,购物车并没有必要像传统的购物车的样子。从用户的观点出发,这也许不是应该采取 的最好的设计解决方案,因为它乍一看不好辨认也不能令人印象深刻。不过,有些设计师倾向 于选择创意性的做法: 一个购物车,看起来像是一个……购物栏。你也可以在里边放各种商品。 会动的购物袋 来自 Hgman
  8. 8. 6.购物车融入到 logo 中 有时候设计师会倾向于将购物车集成到商铺的 logo 中。在许多情况下,用在 logo 中的颜色也会 用在整个在线店铺的购物车图标中。 7.误用购物车 虽然购物车设计中,遵从基本原则是很容易的,但是很多(太多了)网站常常犯同样的错误 : • 购物车不可点,
  9. 9. • 购物车无法辨认, • 购物车很难找到。 虽然购物车在右边,也同时用颜色突出了,但是其他的元素相当拥挤,所以很难能够把焦点放 在购物车上。 购物车 :该放在哪儿? 传统的说,购物车都放在页面顶端的右侧。几年来由于用户在大量的在线商铺一遍又一遍地看 到这种模式,所以用户早已习惯了这种做法。但是,随着购物车区块的高度随着选择的商品数 量的增加,有时候购物车可能需要变成竖排的而是不是常见的横排。 这些情况下,购物车常常被放置到右边栏中。这两种情况,购物车都应该在所有页面保持一 致。 更多购物车 的图例 前几个月,Jason Billingsley 收集了 107 Add to Cart Buttons of the Top Online Retailers(107 个最牛 逼的在线销售的添加到购物车按钮)。这些小小的、长方形的、有时候是彩色的按钮从商品页面 链接到了购物车页面,同时,这些按钮也是你品牌的延伸。将你的“添加到购物车”图标添入一 些自己的想法是很重要的。
  10. 10. Shopping Cart Icons(购物车图标) Ro London 几年前收集的。在他的观点看来,用购物袋比购物 车要好。

×