网站面包屑(breadcrumb)设计实例解析

发布者:4EB Studio 发布日期:2009/03/29 分类:天兔贴士, 网页设计, 设计灵感

在一个拥有很多页面的网站上，面包屑导航(breadcrumb navigation)可以大大提高用户导引的方式。换句话说，面包屑(breadcrumb)可以减少网站访问者找寻更深级别页面的步骤，并且改善了网站区块和页面的可访问性。而且面包屑(breadcrumb)还是一个有效的直观标识来告诉使用者他们当前的位置，是当前登录页面最好的上下文信息资源。

什么是面包屑(breadcrumb)?

“面包屑(breadcrumb)”是二级导航计划的一种形式，可以清楚的标明当前用户所在的网站或网络应用的位置。该术语源自《奇幻森林历险记》（Hansel and Gretel） 这篇童话故事，两个小孩子通过丢面包屑来标记回家的踪迹。和童话故事中一样，面包屑(breadcrumb)在现实应用中可以提供给用户追踪原始登陆点的方式。

Delicious.com上的面包屑(breadcrumb)

通常你可以在一些内容量极大，并且使用分级结构的网站上看到面包屑(breadcrumb)。你也可以在一些具有多重步骤的应用程序上看到它们。面包屑(breadcrumb)的结构非常简单，水平排放了一些文本链接，并且用大于号隔开(>)；这个符号标明了当前页面与相邻页面之间的层级关系。

本文，我们将探讨面包屑(breadcrumb)在网站中的使用方法以及提供一些好的案例供参考。

什么时候需要使用面包屑(breadcrumb)?

大型网站或者具有层级结构页面的网站需要使用面包屑导航(breadcrumb navigation)。最好的例子就是一个电子商务网站，这种网站的产品都会根据逻辑分类进行归组。

对于一些仅有一级结构的网站你不需要使用面包屑(breadcrumb)。一个决定是否需要使用面包屑(breadcrumb)最好的办法就是建立一个网站地图或者用图表画出网站导航结构，并且分析一下使用面包屑(breadcrumb)是否可以改善用户在分类之间的导引动作。

面包屑导航（Breadcrumb navigation）只能作为一个网站附属的特性而不能代替主导航。它是一个方便的功能，一个二级导航计划可以让用户确认他的当前位置，并且是你的网站导航的另一种表现方式。

面包屑(breadcrumb)的形式

下面介三种主要的面包屑(breadcrumb)形式。

基于位置的(Location-based)

基于位置的面包屑(breadcrumb)可以告诉用户他们当前所在的网站层级。最具代表性的就是用在具有多级别（通常大于两级）的导航中。下面的示例 (SitePoint)中，每一个文本链接的层级都大于各自右侧的文本链接。

基于属性的(Attribute-based)

基于属性的面包屑(breadcrumb)路径显示了特定页面的属性。例如，在Newegg网站中，面包屑(breadcrumb)路径显示了特定页面上项目的属性。

该页面显示了所有具有制造者为“Lian Li”这个属性的计算机，同时他们还具有“MicroATX Mini Tower”这个表单元素。

基于路径的(Path-based)

基于路径的面包屑(breadcrumb)像用户提示了他们达到特定页面的步骤。这种形式的面包屑(breadcrumb)是动态的，因为它们显示的页面是用户在到达当前页面之前已经访问过的页面。

使用面包屑(breadcrumb)的好处

使用面包屑(breadcrumb)有以下几点好处：

为用户带来方便

使用面包屑(breadcrumb)主要是为用户提供站内导航的另一种方式。通过在多级结构的网站上为所有页面提供面包屑(breadcrumb)路径，用户可以更容易的定位到高级别的页面。

减少返回高级别页面的点击数量或动作

代替使用浏览器的返回按钮或者网站的主导航返回到高级别页面，用户现在可以通过面包屑(breadcrumb)使用更少的点击到达目的地。

通常不占用屏幕空间

因为通常都是使用水平方向且不进行格式化，面包屑(breadcrumb)路径不需要占用页面很多空间。这样的好处就是他们对于内容的加载没有任何负面影响，并且如果使用得得当的话将化解其他负载。

减少跳出率

面包屑(breadcrumb)路径对于吸引首次访问者进入当前加载页面以后继续查看网站其他内容是一个非常棒的方式。例如，当一个用户通过google搜索进入到一个页面，看到一个面包屑(breadcrumb)路径的时候可能会试图点击更高级别的页面来查看相关感兴趣的文章。这样依赖，就可以减少整个网站的跳出率。

使用面包屑(breadcrumb)的常见错误

使用面包屑(breadcrumb)是意见十分简单的事情，在决定是否需要使用他们之前仅仅需要考虑几点建议。下面让我们看看需要避免的一些错误使用情况。

在不要使用的时候而使用了面包屑(breadcrumb)

最易发生的错误就是面包屑(breadcrumb)对于网站没有任何益处的时候而使用了它。

在上面的例子中，Slicethepie为使用者提供了太多的导航选择。 (1) 主导航， (2) 面包屑(breadcrumb)路径以及 (3)二级导航的位置都十分接近。面包屑(breadcrumb)在这里并没有为用户提供什么方便之处，因为二级导航已经直接显示出了下级页面。而且，点击面包屑(breadcrumb)上的二级链接 (”Music”)将把你代回到一级标签 (”Listen”)，这将错误的向你提示第一个标签会比第二个标签(”Search” 和 “Artist hall of fame”)级别高。

将面包屑(breadcrumb)作为主导航

正如前所属，使用面包屑(breadcrumb)仅仅是一种可选的导航方案。

在上面的例子中，mefeedia并没有提供主要的查看视频的导航菜单。尽管这里在页脚部分有一个文字链接导航，但是在页面主体上并没有一个导航菜单，从而使得网站其他部分的定位非常困难。

假设你通过Google直接到达了视频页面，那么可供你使用的导航仅有面包屑(breadcrumb)。也就是说如果你已经浏览了网站的其他页面并且到达了一个没有主导航菜单的页面，那么你不得不使用浏览器的“返回”按钮访问主菜单。

当页面具有多种分类的时候使用面包屑(breadcrumb)

面包屑(breadcrumb)具有一个线性结构，因此当你的页面分类种类较多的时候使用它会比较困难。决定是否需要使用面包屑(breadcrumb)通常都很大的依赖于你的网站结构设计。当一个低级别的页面具有一个以上的父级分类，那么使用面包屑(breadcrumb)是无效的，不精确的，而且会让用户非常迷糊。

面包屑(breadcrumb)导航设计考虑因素

当设计面包屑(breadcrumb)导航计划的时候，需要在大脑中牢记几点。让我们一起来看看当你设计面包屑(breadcrumb)的时候可能会遇到的问题。

应该用什么区分开链接项目？

通常被接受并且广泛认知的区分面包屑(breadcrumb)超级链接的符号就是大于号(>)。最具代表性的说，大于号用来表示层级结构，像这样的结构主分类>子分类。

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

选择使用什么样子的分隔符依赖于整个网站的美观设计以及所使用的面包屑(breadcrumb)形式。比如，基于路径的面包屑(breadcrumb)就不需要在每个链接文本之间提供层级关系，使用大于号并不能精确的传递他们之间的关系。

面包屑(breadcrumb)应该多大？

你无需让面包屑(breadcrumb)占据网页的主导位置。一个面包屑(breadcrumb)仅仅扮演用户使用助手的功能。它的尺寸只需可以传到足够的信息给用户足以，因此可以很小，或者比主导航小一些。

上图像我们显示了一个非常好的原则就是面包屑(breadcrumb)不能作为用户到达页面的时候被第一眼吸引的东西。

面包屑(breadcrumb)应该放在什么位置？

面包屑(breadcrumb)通常显示也页面的上半部分，如果导航菜单使用的是水平方向的话就在主导航菜单下方即可。

面包屑(breadcrumb)展示

我们已经讨论过了面包屑(breadcrumb)的6W(who, what, when, where, why以及how)，下面来看看一些实例。以下部分你将看到一些非常棒的网站上使用面包屑(breadcrumb)的例子。

1. 经典的基于文本的面包屑(breadcrumb)

TypePad Design Assistant

NASA

Nestle 使用的面包屑(breadcrumb)文本是页面上最小的文本，有效的体现了面包屑(breadcrumb)的谦逊而不唐突。

Marchand de Trucs

Bridge 55

Overstock.com 在它基于属性的面包屑(breadcrumb)上使用了标准的大于号，并且为产品属性使用了选择框，这样用户就无需再对它们进行筛选。

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

TechRadar UK 和 BP 使用向右的三角。

PSDTUTS 和 Martique 使用了破折号。

Mouse to Minx 使用了向右的箭头来表示页面的层级关系。

Jakob Nielsen’s Alertbox 使用了右箭头。

Target 使用了半角冒号 (:) 。

3. 超越简单的文字链接

现在的面包屑(breadcrumb)设计趋势用简单的一句话来说就是“面包屑(breadcrumb)不一定是普通的”。在下面的示例中，你将看到一些与整个网站设计风格完美结合的漂亮的面包屑(breadcrumb)样式。

Grooveshark

Yahoo! TV

IDEO

Apple Store

Coolspotters

Devlounge

LottaNZB

Pixelpoodle

guardian.co.uk

4. 多步过程的面包屑(breadcrumb)

Statement Tracker 使用了面包屑(breadcrumb)路径来标示帐号注册的步骤。

Flickr 使用面包屑(breadcrumb)来标示Flickr使用方法的单元数字。

5. 带有子导航的面包屑(breadcrumb)

下面将向你展示一些这样的面包屑(breadcrumb)样式，当用鼠标点击或者悬浮在链接上的时候会打开一个子导航面板列出一些附加属性或者位置。

MarketWatch

Profoto 具有一个独特的面包屑(breadcrumb)：点击面包屑(breadcrumb)上的链接将会在下方打开一个区块向用户显示附加的属性以供选择。

Cranfield University

Lonely Planet 同样具有一个fly-out样式的面包屑(breadcrumb)供你改变属性。

点击一个面包屑(breadcrumb)链接将会打开相应项目的页面，同时点击向下的那个按钮会打开附加的选项。

MSDN 的面包屑(breadcrumb)具有一个可以打开二级导航列表的滚动面板。

Wowhead 的面包屑(breadcrumb)具有一个多级别的二级导航

6. 具有交互功能的面包屑(breadcrumb)

Delicious 可以让你移除面包屑(breadcrumb)上面的项目来帮你快速定位书签。

7. 具有实验性的示例

Booreiland 使用了一个面包屑(breadcrumb)风格的导航计划作为主菜单，允许用户快速理解他们当前所浏览的内容。

用户交互设计师，AEN UI的Aen Tan发明了一种称为 “Tabcrumbs”的设计方式，即一个将标签和面包屑(breadcrumb)组合在一起的导航计划。

关于本文作者

Jacob Gube

是一名网页开发和设计人员，也是 Six Revisions的一名作者。如果你想和他联系的话，可以加入他的Twitter。

[原文链接]

2 Responses to “网站面包屑(breadcrumb)设计实例解析”