网页设计中的面包屑导航

《网页设计中的面包屑导航》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计中的面包屑导航：实例和最佳做法»Postedon:一月26,2010inResources,WebRoundupsBy:Rainbow0在一个拥有很多页面的网站上，面包屑导航(breadcrumbnavigation)可以大大提高用户导引的方式。换句话说，面包屑(breadcrumb)可以减少网站访问者找寻更深级别页面的步骤，并且改善了网站区块和页面的可访问性。而且面包屑(breadcrumb)还是一个有效的直观标识来告诉使用者他们当前的位置，是当前登录页面最好的上下文信息资源。什么是面包屑(breadcrumb)?“面包屑(breadcrumb)”是二级导航计划

2、的一种形式，可以清楚的标明当前用户所在的网站或网络应用的位置。该术语源自《奇幻森林历险记》（HanselandGretel）这篇童话故事，两个小孩子通过丢面包屑来标记回家的踪迹。和童话故事中一样，面包屑(breadcrumb)在现实应用中可以提供给用户追踪原始登陆点的方式。Delicious.com上的面包屑(breadcrumb)通常你可以在一些内容量极大，并且使用分级结构的网站上看到面包屑(breadcrumb)。你也可以在一些具有多重步骤的应用程序上看到它们。面包屑(breadcrumb)的结构非常简单，水平排放了一些文本链接，并且用大于号隔开(>)；这个符号标明了

3、当前页面与相邻页面之间的层级关系。本文，我们将探讨面包屑(breadcrumb)在网站中的使用方法以及提供一些好的案例供参考。什么时候需要使用面包屑(breadcrumb)?大型网站或者具有层级结构页面的网站需要使用面包屑导航(breadcrumbnavigation)。最好的例子就是一个电子商务网站，这种网站的产品都会根据逻辑分类进行归组。对于一些仅有一级结构的网站你不需要使用面包屑(breadcrumb)。一个决定是否需要使用面包屑(breadcrumb)最好的办法就是建立一个网站地图或者用图表画出网站导航结构，并且分析一下使用面包屑(breadcrumb)是否可以改

4、善用户在分类之间的导引动作。面包屑导航（Breadcrumbnavigation）只能作为一个网站附属的特性而不能代替主导航。它是一个方便的功能，一个二级导航计划可以让用户确认他的当前位置，并且是你的网站导航的另一种表现方式。面包屑(breadcrumb)的形式下面介三种主要的面包屑(breadcrumb)形式。基于位置的(Location-based)基于位置的面包屑(breadcrumb)可以告诉用户他们当前所在的网站层级。最具代表性的就是用在具有多级别（通常大于两级）的导航中。下面的示例(SitePoint)中，每一个文本链接的层级都大于各自右侧的文本链接。基于属性

5、的(Attribute-based)基于属性的面包屑(breadcrumb)路径显示了特定页面的属性。例如，在Newegg网站中，面包屑(breadcrumb)路径显示了特定页面上项目的属性。该页面显示了所有具有制造者为“LianLi”这个属性的计算机，同时他们还具有“MicroATXMiniTower”这个表单元素。基于路径的(Path-based)基于路径的面包屑(breadcrumb)像用户提示了他们达到特定页面的步骤。这种形式的面包屑(breadcrumb)是动态的，因为它们显示的页面是用户在到达当前页面之前已经访问过的页面。使用面包屑(breadcrumb)的好

6、处使用面包屑(breadcrumb)有以下几点好处：为用户带来方便使用面包屑(breadcrumb)主要是为用户提供站内导航的另一种方式。通过在多级结构的网站上为所有页面提供面包屑(breadcrumb)路径，用户可以更容易的定位到高级别的页面。减少返回高级别页面的点击数量或动作代替使用浏览器的返回按钮或者网站的主导航返回到高级别页面，用户现在可以通过面包屑(breadcrumb)使用更少的点击到达目的地。通常不占用屏幕空间因为通常都是使用水平方向且不进行格式化，面包屑(breadcrumb)路径不需要占用页面很多空间。这样的好处就是他们对于内容的加载没有任何负面影响，并

7、且如果使用得得当的话将化解其他负载。减少跳出率面包屑(breadcrumb)路径对于吸引首次访问者进入当前加载页面以后继续查看网站其他内容是一个非常棒的方式。例如，当一个用户通过google搜索进入到一个页面，看到一个面包屑(breadcrumb)路径的时候可能会试图点击更高级别的页面来查看相关感兴趣的文章。这样依赖，就可以减少整个网站的跳出率。使用面包屑(breadcrumb)的常见错误使用面包屑(breadcrumb)是意见十分简单的事情，在决定是否需要使用他们之前仅仅需要考虑几点建议。下面让我们看看需要避免的一些错误使用