网站面包屑(breadcrumb)例子与最佳设计（待续)

By Jacob Gube

一个网站往往有大量页面，网站面包屑(breadcrumb)导航能极大帮助用户找到自己的方向。面包屑(breadcrumb)减少了网站访问者找到高级页面的动作次数，他们提高了网站定位和导航质量，他们同时能醒目的显示用户现在处于网站内部层次的位置，使它成为所处页面背景信息的重要来源。

什么是面包屑（breadcrumb)?

面包屑（breadcrumb)或浏览路径记录(breadcrumb trail,简写为bt)是辅助导航方案的一种，他用来表明用户在当前网站的位置，这个词源于Hansel.And.Gretel（《奇幻森林历险记》）里面的故事，当他们步行穿过森林的时候他们就将面包屑留在他们去的路上以便他们可以追踪他们回家的那条路。就像故事中， 面包屑在现实世界里的应用是为用户提供回到起点的路径跟踪方式。

Breadcrumbs on Delicious.com

我们通常看到的面包屑是一个拥有大量内容的网站的多层次分类，或者是一个流程的步骤指示。它最简单的形式是由大于符号( > )分隔的横向文字链，这个符号表明页面的链接层次。

本文将探讨面包屑在网站的使用，讨论一些好的设计（应用浏览路径记录在你自己的网站）。

你何时使用面包屑？

网站浏览轨迹通常应用在大型网站和大量分级页面的网站。比如电子商务网站，它们众多的商品采用逻辑分类。

扁平结构的网站没必要采用面包屑，判断一个网站是否有必要采用面包屑，是画出网站地图和页面跳转关系图，然后分析是否有助于用户浏览。

面包屑导航是一种扩展的功能，他不能取代主导航菜单。. 他是一个方便的功能，一个辅助导航方案，它帮助用户通过另一种方式浏览您的网站。

面包屑的类型

有三种主要的类型

基于位置的
显示用户所在页面层次，通常应用于至少2级以上层次的网站，.在下面这个 SitePoint例子, 每一个文字链都比它右边的高一个层次。

基于属性的
基于属性的浏览轨迹跟踪显示了特定页面的属性。 例如, 在 Newegg, 浏览轨迹跟踪显示了特定页面的参数属性 。:

这个页面显示了所有computer cases 分类下有 厂商Lian Li（属性） 和    MicroATX Mini Tower （属性）的商品。

基于路径的
基于路径的浏览轨迹跟踪呈现给用户他们到达目标页面的步骤，动态显示用户到达目标页面之前的路径。

使用面包屑的好处

下面是使用浏览路径记录的好处：

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.

浏览路径记录的错误设计

Using breadcrumb trails is a fairly straightforward affair, and there are only a few guidelines to consider before deciding to implement them on a website. Let’s take a look at some common mistakes to avoid.

Using breadcrumbs when you don’t need to
A common mistake in implementing breadcrumbs is using them when there is no benefit.

In the above example, Slicethepie risks overwhelming users with too many navigation options. The (1) primary navigation, (2) breadcrumb trail and (3) secondary navigation are very close together. The breadcrumb trail in this application offers users no added convenience because the secondary navigation for lower-level pages sits right below it. Additionally, clicking on the second-level link in the breadcrumb trail (”Music”) takes you back to the first tab (”Listen”), which mistakenly suggests that the first tab is on a higher level than the other two (”Search” and “Artist hall of fame”).

Using breadcrumb trails as primary navigation
As stated earlier, use breadcrumbs as an optional aid to navigation.

In the above example, mefeedia does not offer a primary navigation menu for viewing videos. Though there is text link navigation in the footer section, there’s no navigation menu in the body of the pages, making it hard to navigate to other sections of the website.

If you arrive on a video page directly — say, for example, through a Google search result — the only navigation option you may have is the breadcrumb trail. Or if you’ve already been browsing a website’s pages and reach a page that does not display the primary navigation menu, you will have to hit the “Back” button in your browser to access the main menu.

Using breadcrumbs when pages have multiple categories
Breadcrumb trails have a linear structure, so using them will be difficult if your pages can’t be classified into neat categories. Deciding whether to use breadcrumbs largely depends on how you’ve designed your website hierarchy. When a lower-level page is (or can be put) in more than one parent category, breadcrumb trails are ineffective, inaccurate and confusing to the user.

面包屑导航设计考虑的问题

When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Other symbols used are arrows pointing to the right, right angle quotation marks (») and slashes (/).

The choice depends on the aesthetics of the website and the type of breadcrumb used. For example, for path-based breadcrumbs in which the links do not necessarily have a hierarchical relationship to each other, using a “greater than” symbol may not convey their relationship accurately.

How big should it be?
You don’t want your breadcrumbs to dominate the page. A breadcrumb trail functions merely as an aid to users (a convenience); its size should convey this to users and thus should at least be smaller, or less prominent, than the primary navigation menu.

A good rule of thumb to follow when sizing your breadcrumb trail is that it shouldn’t be the first item that grabs the user’s attention when arriving on a page.

Where should breadcrumbs be located?
Breadcrumb trails are usually displayed in the top half of the page, below the primary navigation menu if a horizontal menu layout is used.

面包屑展示

Now that we’ve discussed the who, what, when, where, why and hows of breadcrumb trails, we should take a look at some live examples. In the following section, you’ll find a few examples of great websites that use breadcrumb trails.

1.经典的基于文本

……

2.用其他符号代替”>”

…….

3.超越简单文字接

……….

4.多步骤流程

………….

5.多级导航

………

6.互动面包屑

……….

7.实验例子

…………..

About the Author

Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.