价目表在网站中扮演着一个相当重要的角色，每家公司提供的产品或服务。它对设计和易用性都是一个挑战。它们必须是简单的，但同时明确区分功能和价格不同的产品和服务。

价目表应帮助用户选择最适当的产品。一个公司应认真审查其产品，并挑选最重要的功能，在其价格的计划。我们应当将访问者最感兴趣内容呈现在他们面前。经验是：你的表格中每一个不必要元素都会增加你失去潜在客户的概率，因为那会使客户更难以比较各种计划的优劣并在其中选择最好的一个。

一旦你确定了最重要的特点，继续为感兴趣的客户创造一个有更多细节的清单。用户必须知道他花钱买了个什么东西。

为了弄清怎样设计好一个价目表，让我们看一下其他设计师是从哪些方面考虑的：

设计：色彩，样式，字体，图标

易用性：如果css和js失效，它是不是依然可用

最佳做法和指导方针

设计价目表是一个复杂的工作，它要求设计师清晰精确的传达信息，展示尽可能多的特点，并尽可能的使它们简洁直观，以便于用户做出最好的选择

1. Communicate not too much and not too little

信息沟通不多不少，恰到好处

一般人可能会认为价目表中传达的产品细节多会给潜在客户带来更好的印象。但事实是，是你提供的信息越多用户就有越多的信息需要去忽略

TypePad （截图如下）使用了相当长的价格表。虽然它提供了丰富的产品细节和他们之间的差异，但这个表格很难扫描：用户需要记住每一列代表什么产品。此外，虽然该计划标题在底部被重复了，但没有价格。因此，用户滚动到顶端看每个产品的费用。

ConceptShare

这是一个简明表格的例子，注意它的第四行包含了用户和查看者两个方面，避免了不必要的第五行。

访问者理解不同产品间的差异也很重要，在很多产品既有相同之处也有不同之处的情况下，我们应该优先表现哪一方面？这就涉及到了我们的第二点原则。

2. Communicate differences, not similarities

沟通差异，而不是共性。

用视觉元素区分类似的功能（适用于所有项目）和特殊功能（适用于部分项目）往往是一个好主意 。为了实现这一目标，您可以将最鲜明的特点放在表格的上方，而留下共同特征在表格的底部。

老婆催我睡觉了……明天继续翻译

Take a look at eTribes.com’s pricing table (screenshot below). The design manages to communicate the differences effectively while conveying additional information. The choice of icons fits the overall design and supports, rather than distracts, the visitor. This is effective and user-friendly.

3. Make the price stand out

Price is the first thing users want to see when they visit a product or service website, and leaving it out is the number one design mistake on B2B and B2C websites. So, you had better make sure you show it to your visitors as quickly and as clearly as possible.

Font selection usually depends on the type of product or service offered, and it also must be consistent with the overall design. On many pricing tables, the font size of prices, titles and important headlines are larger and stronger to make them stand out. As a designer, you need to make sure that the price is given the appropriate weight, both visually and semantically.

It is also a good idea to sort pricing plans by price, from highest to lowest or vice versa. Because users scan websites in an F-shape, some designers put the cheapest offer on the left side of the table, so that users see it first. It’s in designer’s best interest to make sure that users see the most attractive offer first.

4. Use visuals sparingly

Unfortunately, many of the designs we are considering in this showcase have one major shortcoming: they use overly vibrant visuals too often and often for the wrong purpose. Designers try to make pricing plans look as attractive as possible, and, apparently, numerous green check marks and red crosses are supposed to help to achieve this effect.

And if these icons are spread widely across the table, then with each additional feature it becomes increasingly harder for visitors to read the table and identify differences between plans.

Beanstalk communicates its information effectively while avoiding the visual noise. The support of a feature is indicated by a neutral circle that doesn’t distract the eye but conveys the message. Plans that do not have a particular feature simply do not have a circle in the corresponding cell.

Planhq.com uses green check marks but not red crosses. In fact, why should crosses be used at all? If you can remove unnecessary elements from your design, you should remove them, right?

Goodbarry.com uses color to indicate the main details in the table. Notice how the font-size is used to make the different pricing plans more distinctive. Also notice how well green is used to animate the visitors into trying out the product.

So, use visuals sparingly and avoid visual noise. Feel free to use icons if you are sure they are not too vibrant and if they help a user’s understanding of the table and, more importantly, convey some information. For instance, a green check mark next to the word “Unlimited” does not convey any information.

It’s important also that icons and thumbnails be extremely useful. For instance, if a table compares physical products, then thumbnail of those products should be present.

Almost all of the pricing tables we’ve examined use different background colors to differentiate pricing plans. Designers use color theory and vivid colors to keep the visitor’s focus on the specific plan that the company wants the most sales on.

5. Illustrate the difference vividly

Some designers use illlustrations and vivid images to clearly illustrate the difference between various plans in a memorable way. Metaphors (e.g. cartoons) are used very often. For instance, if a company is offering the poll service in several various plans, you may want to use a “lightweight” box with tools for a lite version and a bigger, larger toolbox for the corporate version. In fact, that’s what wany designers do.

6. Be consistent in your design

All website elements, not only pricing tables, should be consistent with the overall design. BigFilebox.com makes the mistake of breaking this rule:

The second pricing table’s design is not consistent with the website’s whole design.

7. Don’t lose your customers

On a product or service website, pricing tables play an important role in making a successful sale. Pricing tables are the window to a product; therefore, it is important that they be usable and accessible to everyone.

Pricing tables should support not just modern Web browsers, but all forms of Web browsers, screen readers, etc. Companies can create pricing tables that are rich in features and effects, but they should make these features unobtrusive for users with browsers that do not have CSS or JavaScript enabled.

This is one example of how a pricing table should look when CSS and JavaScript is disabled:

An example of a pricing table that uses JavaScript obtrusively is on mailchimp.com:

If you go to this pricing table and click on the “View plan details…” links, you will see a JavaScript accordion effect showing hidden elements. If we disable JavaScript in our browsers, the links don’t work anymore. One solution to this problem would be to show all hidden elements when JavaScript is disabled.

Best Practices: Summary

• All elements, including pricing tables, should be consistent with the overall design of your website.
• Use background colors to visually separate different plans, but sparingly.
• Just as photographers draw attention to where they want in their images, so with price tables, make the sections that you want to draw attention to stand out.
• Use different font sizes and colors for titles and important headlines.
• Place important features at the top left of the table, according to the F-pattern