注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

白___传递正能量

欢迎光临!

 
 
 

日志

 
 

价目表:实例和最佳策略  

2010-05-08 13:11:03|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
作者:Gy?rgy Fekete
原文链接: Pricing Tables: Examples And Best Practices
译者:UCD翻译小组, Lanx

Gy?rgy Fekete 版权所有(Article copyright by Gy?rgy Fekete)


对于任何提供产品或者服务的公司来说价目表都扮演着重要的角色。不论从它的设计还是可用性角度来讲,实现起来都是个挑战。价目表必须在力求简明的同时体现出不同产品或服务间特性的差异。

价目表必须有助于用户做出自己的最佳选择。公司应该精心考量他们的系列商品,挑选商品中最具竞争力的特性展现在价目表上。我们应该只 给用户呈现他们会感兴趣的东西:可选的特性、项目和价格。展示的原则就是:为了避免用户在比对商品和从中选出最优方案的过程中遇到困难,务必去掉价目表上 任何的非必要元素,从而减少流失潜在顾客的机率。

一旦你确定了商品的最主要特点,继续深入为那些关注某项特定指标的用户创建一个更为详细的功能列表。用户需要知道自己把钱花在什么样的商品上,而这个商品到底包含哪些重要的标准。

为了给如何设计和展现价目表打下一个良好的基础,让我们一起来看看别的设计师的一些作品,然后按照下列标准来分析它们:
设计:色彩、风格、字体、图标。
可用性:在CSS和JavaScript无法成功加载的情况下它是否还可用?

最佳策略和方针

设计价目表是个讲究技巧的工作。它要求设计师将信息清晰准确地传达出来。尽可能地将产品的特性直观地展现给用户以使他作出最满意的选择。

1.传达的恰到好处

我们想当然的会以为特性描述面面俱到的列表能够为潜在用户构建起良好的商品印象。而实际上,你给出的信息越多,要求用户消化吸收的也就越多。

TypePad (如下截屏)为用户提供了冗长的价目表。尽管它提供了详尽的信息使得用户能够对比出商品之间的差异,但是用户根本无法一目了然,他们不得不记住哪一列对应 到哪一个商品。此外,尽管商品名称在列表底部尚有显示,但价格却只在列表开头出现。因此用户在浏览到表格下方的时候不得已还得重新滚动到列表开头查看商品 价格。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

相比之下ConceptShare就是个简明易用的典型。注意:列表第四行合并了两项(用户和评审者),从而避免不必要的第五行出现。这是个美观且信息充足的价目表。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

重复一遍,关键在于你的用户能清楚的知道各个商品之间的差异。传达的信息不多不少,恰到好处。 假设一个潜在用户来到你的商店并希望知道两个商品间的差异,你肯定不会首先向他介绍它们彼此类似的特性,不是吗?告诉用户他们想知道的,他们会感谢你的。 同时也引出了我想说的第二点。

2.传递不同点,而不是相似点

不要关注于展现备选商品的相似点,而要传达出它们之间的不用。在视觉效果上区分出备选商品的相同特性和不同特性是个好办法。为了做到这点,你可以将区别较大的特性放在列表的顶部而相同特性放在底部。

看看eTribes.com 的价目表(以下截屏)。这样的设计有效地传达了商品的不同点及共同点。所选的图标也在符合整体设计风格的同时有助于用户理解商品的各项特性,有效且友好。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER


3.突出商品价格

当用户访问产品或服务网站时,他们最先想了解的就是价格问题。而忽视对价格信息的设计是B2B和B2C网站存在的首要通病。要尽量确保你们所显示的商品价格能迅速和清晰地被用户看到。

字体的选择往往取决于所提供的产品或服务的类型,同时还要遵循整个设计的风格一致性。在很多价目表中商品的价格,名称,特点会被设计的更大以使其突出。作为设计师,你要确保价格在视觉上和逻辑上都有适当的重要性。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

以价格对商品进行排序也是个好办法,从高到低或从低到高。因为用户会以"F"形视线浏览网站,一些设计者将最廉价的商品放在列表左侧,以使用户第一眼就能看到。设计者最关注的应该就是确保用户看到最吸引人的信息。

4.精简视觉元素

很遗憾,在我们展示的大多数案例中都存在一个同样的缺点:他们过于频繁和不恰当的使用过分鲜艳的视觉元素。设计师希望价目表尽可能的吸引人一些,看起来,大量绿勾勾和红叉叉似乎有一些帮助。

可一旦这些图标布满整个列表,就很容易将用户的目光吸引到图标上来,从而阻碍用户阅读商品之间的具体差异。Beanstalk 在避开视觉元素干扰的情况下有效地传达了他们的信息。用浅色的圆点表示这一产品支持某项特性,不过分抢眼又能传达好信息。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

Planhq.com只用了绿色的勾选框而没用红叉号。实际上,红叉号的确不是必须的,既然如此,就该果断的将它排除在外。
价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

Goodbarry.com 用颜色来强调列表中的关键细节。同时,请注意他们是如何运用字号大小来凸显推荐商品的。此外他们还很好的应用了绿色按钮来吸引用户体验他们的产品。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

精简视觉元素,避免视觉噪音。如果你确信那些图标不至于太过花哨,而且的确能给用户传达出有用的信息,那么就尽管使用它们。如果它只是个摆设那你还是不用为妙。

每一个图标或缩略图的存在都必须有其明确的理由。例如,价目表比对的是一些实物产品,那么就有理由将它们的缩略图展示出来。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

5.生动地图解差异

一些设计师利用插画和生动的图像来清晰地展现商品的差异,诸如卡通形象之类的比拟手段经常被应用。例如,一个公司提供不同档次的问卷调查服务,你就可以用一个“轻薄的”工具箱代表精简版,用更大、更厚实的工具箱代表企业版。事实上,这是设计师的常用手法。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

6.保持设计的一致性

网站上包括价目表在内的所有元素,都要保持统一的风格。BigFilebox.com 就在这点上犯了个错误。

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

以下是个过度应用JavaScript的案例,mailchimp.com:价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

看到这个价目表时你要再点击一个“查看详细信息...”的链接才能用JavaScript展开那些隐藏在下面的信息。如果我们禁用浏览器上的 JavaScript,那这个链接就无法打开了。解决的办法之一就是在JavaScript被禁用的时候让这些信息显示出来。(译注:我倒是觉得会禁用 JS的人自然知道如何打开,难道他们不用任何的动态页面吗?GMail?Facebook?恐龙自己喜欢灭绝就不要阻止他们吧。)

价目表案例库

横向排列还是纵向布局?作为设计师到底应该怎么选择?尽管当前主流的设计还是纵向分栏布局。但其实不管怎么显示,其目的都是为了清楚地传达出商品特色。

ActionThis

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

Squarespace
价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

Tickspot

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

Litmusapp.com

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

Goodbarry.com

价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER价目表:实例和最佳策略 - 白- - 万能布袋大叔 - SUMP SUMP-PAPER

/*。。。。。 等  还有很多这里就不发了*/


你还可以从Christian Watson’s 的案例库里找到更多的价目表。
最佳策略:总结
包括价目表在内的所有元素,都要与网站的整体设计风格保持统一。
有节制地应用不同的背景颜色来区分不同的商品。
就像摄影师会将焦点聚集在他想表达的对象上,在价目表中也要尽可能地突出你想让别人关注的部分。
用不同的色彩和字号来区分主次商品。
遵循用户浏览网页的"F"形视线模式,将主要特性置于列表左上方。
在设计价目表时有节制地使用CSS和JavaScript。
商品的价格要始终可见。
假使你的产品特性太多以至于无法在一屏显示完,最好将商品的名称,价格和主要特点分别在列表的顶部和底部都显示出来。
必须明确表述商品价格所属的币种,因为像"$"这样的标志既可以代表美元,也可以代表加币和澳元。


关于作者

Gy?rgy Fekete 是一位有五年web设计和开发经验的web开发人员。是罗马尼亚一家名为Primal Skill Ltd. 的Web设计开发工作室的创办人。他还会在博客上发表一些关于创业,商业,设计和开发等方面的文章: blog.primalskill.com..

来源:http://www.smashingmagazine.com/2008/10/13/pricing-tables-showcase-examples-and-best-practices/

原文:http://www.smashingmagazine.com/2008/10/13/pricing-tables-showcase-examples-and-best-practices/

  评论这张
 
阅读(204)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017