面包屑导航（或面包屑追踪）作为辅助导航系统，它可以告诉用户它在网站或网络应用程序中的位置。这个词来源于汉斯和格雷特的童话故事，主人公把他的包扔在路上，形成了一条路，引导他回到自己的家。

面包屑导航，作为一种有效的视觉辅助，可以告诉用户它在网站层次结构中的位置。此功能是用户上下文信息的重要来源，可以帮助用户找到以下问题的答案：

我在哪里？告诉用户他们在整个站点层次结构中的位置。在适用性方面，breadcrumb导航减少了用户应该访问上一页的次数。除了使用browser Back按钮或网站的主导航返回上一页之外，用户还可以使用breadcrumb导航。

结构紧凑，不占用太多页面空间，面包屑导航是一种水平文本连接。其优点是，如果内容过载，其负面影响非常小。人们可能不在乎这个小小的设计元素，但没有人不懂面包屑导航，也没有人不能使用面包屑导航。

一个测试网站是否会受益于breadcrumb导航的好方法是建立网站导航结构图或图表，然后分析breadcrumb导航是否能帮助用户提高在相同或不同目录下的导航能力。面包屑导航按位置、路径和属性可分为三类。位置面包屑导航反映了网站的结构。它可以帮助用户了解网站的层次结构，并在多级（通常超过两级）网站中导航。如果用户从其他地方（如搜索引擎结果）链接到网站的深层页面，这对他们非常有用。

在下面的百思买案例中，每个文本链接都可以指向一个页面，从右到左，从网站的当前页面指向上一个页面。路径面包屑（也称为“历史跟踪”）显示用户浏览到特定页面的所有页面路径。这种面包屑导航链接通常是动态生成的。

有时候路径面包屑很有用，但大多数时候它们会让人困惑，因为用户可以非常随意地从一个页面跳到另一个页面。这种不规则的浏览路径对用户帮助不大，但很容易被浏览器的“后退”按钮所取代。此外，如果用户直接进入网站的深层页面，路径breadcrumb是无用的。

下面是显示到目标页的两条路径的路径breadcrumbs示例。属性breadcrumbs对于电子商务网站很有用，这些网站按特定页面或更常见的产品类别对大量页面进行分类。这种面包屑导航可以帮助用户了解各种产品之间的关系，也提供了另一种导航方式。

例如，在tmlewin网站上，breadcrumb导航显示特定web产品的属性。breadcrumb导航的经验法则是显示站点层次结构，而不是用户的浏览历史。因此，建议使用位置breadcrumb导航或属性breadcrumb导航，而不是路径breadcrumb导航。

设计面包屑导航时，请记住以下几点：

面包屑导航应该是一个附加功能，不能直接取代原来有用的主导航菜单。记住面包屑导航是一种方便的功能，辅助导航手段和网站导航的另一种方法。面包屑导航的一项（用户的当前位置）不必显示-如果要显示，请确保它不能被单击或操作。因为用户已经在当前页面上，所以不必向breadcrumb导航添加链接。

分隔各级面包屑导航链接的最显著的符号是大于号（）。通常，大于号（）用于引用层次结构，如父目录和子目录。其他可以使用的符号是右箭头（？）、双书名（？）和斜线（/）。

选择哪个符号取决于网站的设计美学和使用的面包屑导航类型。在设计中应仔细考虑目标尺寸和内边距。在breadcrumb导航中，各个级别的单词之间应该有足够的空间，否则用户可能会发现很难使用。同时，面包屑导航不能控制页面，因此它不能比主导航菜单更重要。

不要使用花哨的字体或华丽的颜色，因为它会很吵，毕竟面包屑导航的主要目的不是这个。在确定面包屑导航的大小和样式时，经验法则是确保用户进入页面后的一个焦点不是面包屑导航。

下图中的breadcrumb导航设计不错，但有点花哨，可能会分散用户对主导航和页面主要内容的注意力。谷歌的面包屑导航一点也不花哨，但用户可以很容易地使用和定位它。

如果需要浏览移动设备上的面包屑，可能会发现它出现故障。在手机上使用面包屑导航和相应的操作环境方面，可能的原因是网站太复杂（网站层次太深）。要解决这个问题，请考虑如何简化，然后就不需要breadcrumb导航了。