原文：https://uxplanet.org/breadcrumbs-for-web-sites-what-when-and-how-9273dacf1960
作者：Nick Babich (2016-08-17)
阅读时间：7m38s

面包屑导航（breadcrumbs 或 breadcrumb trail）是一个二级导航系统，用于显示用户在一个网站或 web app 中的位置。这个词来源于 Hansel 和 Gretel 的童话故事，故事中的主人公通过用面包屑制造的一串踪迹找到了回家的路。

与这个童话故事一样，访问者需要知道他们在网站层次结构中的位置，以便浏览到层次结构中更高级别的内容。在本文中，我们将探讨如何在网站上使用面包屑，并讨论一些将面包屑导航应用到您自己的网站的最佳实践。

面包屑导航越来越有用

面包屑可用作有效的视觉辅助，指示用户在网站层次结构中的位置。此属性使面包屑成为用户获取上下文信息的主要来源，并帮助他们找到以下问题的答案：

• 我在哪里？面包屑告知访问者与整个网站层次结构相关的他们的位置。
• 我可以去哪里？面包屑可提高网站特定部分和页面的可寻性。网站的结构放在面包屑中比放菜单中更容易理解。
• 我应该去那里吗？面包屑传达内容价值，并鼓励浏览（例如，电子商务网站的访问者可能会访问一个产品页面，虽然该产品可能不是很匹配，但访问者可能希望浏览来自同一类别的其他产品）。反过来，这会降低网站整体的跳出率。

1. 减少操作次数

在可用性方面，面包屑减少了网站访问者为了访问更高级别的页面而需要采取的操作的次数。访问者可使用面包屑来返回更高级别的页面，而无需使用浏览器的「后退」按钮或者网站的主导航。

2. 占用最小的空间

一个紧凑的结构形式无需占用太多的页面空间，因为它只是横向的一行带有链接的文本。好处是它们在内容加载方面几乎没有负面影响。

3. 没有用户会在使用面包屑时遇到问题

人们可能会忽略这个小小的设计元素，但他们从不会误解面包屑或者在操作它们时感到困难。

何时该使用面包屑导航

确定一个网站是否会从面包屑中受益的好方法是，绘制站点地图或者表示网站导航结构的示意图，然后分析面包屑是否会提高用户在类别内和类别之间导航的能力：

• 当你有大量以严格的线性结构或者具有自定义类别的层次结构组织的内容（例如，可将其划分为可划分为更多子部分的部分）时，您应该使用面包屑。一个很好的场景是电子商务网站，其中各种各样的产品可按逻辑分为不同的类别。
• 对于不具有逻辑层次或分组的单级网站，不应使用面包屑。
  
  

面包屑导航的类型

面包屑可以基于位置、路径或属性。

1. 基于位置的面包屑

基于位置的面包屑代表着一个网站的结构。它可以帮助访问者理解和浏览网站具有多个级别（通常两个以上）的层次结构。对于从外部源（例如，搜索引擎结果页）进入网站更深层次的访问者来说，这种类型的面包屑具有非常大的支撑作用。 基于位置的面包屑导航。图片来源：marketingland

在下面的例子（来自 BestBuy）中，每一个文本链接都对应着一个比它右边的页面更高一级的页面。

来自 BestBuy 的基于位置的面包屑导航

2. 基于路径的面包屑

基于路径的面包屑（也称作「历史记录」）显示了用户访问某个特定页面的整个路径。这种类型的面包屑链接通常是动态生成的。有时候，基于路径的面包屑很有帮助，但大多数时候，它会令人感到困惑──访问者通常会漫不经心地浏览，从一个页面跳到另一个页面。这样一个曲折的路径对于用户而言，并没有太大的帮助，而且很容易由浏览器中的「后退」按钮来替代。最后，对于那些直接到达网站中深层级页面的访问者来说，历史记录是没有用的。

下面是一个基于路径的面包屑导航的链接示例，它显示了导航到目标页面的两条路径。

基于路径的面包屑导航。图片来源：Oracle

3. 基于属性的面包屑

基于属性的面包屑列出了可跳转至特定页面或最常见产品的类别──因为这种类型的面包屑对电子商务网站非常有用。这种面包屑有助于访问者理解产品之间的关系，并提供了一种不同的方式。

基于属性的面包屑导航。图片来源：marketingland
例如，在 TM Lewin 网站中，面包屑导航显示了某一个特定页面上的展示的所有项目的属性： 这个页面显示了所有的具有「Slim Fit」属性的西装。图片来源：T.M. Lewin

4. 层次结构还是历史记录？

根据经验法则，面包屑应该显示网站的层次结构，而不是用户的历史记录。因此，使用基于位置或基于属性的面包屑，而不是基于路径的面包屑。

面包屑的最佳实践

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

1. 不要使用面包屑代替主导航

面包屑导航应该被视为一个额外的功能，而不是取代有效的主导航菜单。请记住，这是一个便利功能；一个辅助导航方案；另一种可选择的在网站中导航的方式。

Apple 使用面包屑导航来支持主导航

2. 导航中不应包含当前页面的链接

面包屑导航中的最后一项（用户当前的位置）是可选的──如果要显示它，请确保它是不可点击的。由于用户已经在此页面上，所以将当前页面的链接添加到面包屑导航中不具任何意义。

3. 使用分隔符

面包屑导航中，用于分隔链接的最容易辨认的符号是「大于」符号（>）。通常，「>」符号用于表示层次结构，如「父类别 > 子类别」格式中的一样。其他可使用的符号是指向右边的箭头（→），直角引号（»）和斜杠（/）。符号的选择取决于网站的美观程度和使用的面包屑类型：

图片来源：Dribbble
图片来源：Dribbble, Oleg Frolov

4. 选择适当的尺寸和间距

在设计时请仔细考虑目标尺寸与边距。不同面包屑级别之间应该有足够的间距，否则人们使用起来可能会比较困难。但同时，面包屑又不应在页面中占据主导地位，因此它们应该不如主导航菜单突出。

5. 不要使它成为设计的焦点

不要使用花哨的字体或者鲜艳的颜色，因为这样做将失去使用面包屑导航的意义。在设计面包屑的尺寸和样式时需要遵循的一条经验法则是，它不应该是进入页面时吸引用户注意力的第一项内容。

下面例子中的面包屑导航设计得还不错，但它太引人注目了，可能会分散访问者对主导航和主要内容的注意力。 图片来源：Dribbble

Google 的面包屑导航看起来不花哨，但是用户可以轻松找到并使用它。

6. 不要在移动网站上使用面包屑

如果您在使用移动设备时觉得需要使用面包屑来进行导航，那么您供移动设备使用的网站设计可能出了什么问题。极有可能是，对于移动设备所提供的特定类型的使用与环境而言，您的网站太复杂了（嵌套太深了）。为了解决这个问题，您应该首先考虑如何使它不那么复杂，所以面包屑甚至都不是讨论的重点。

结语

面包屑所做的就是让访问者更容易在网站中进行浏览，前提是它的内容和总体结构具有意义。 这是为数不多的能够提高可用性和用户舒适度的简单方法之一。对于设计上仅占一行空间的控件来说，这已经足够了。

相关阅读：
Breadcrumbs In Web Design: Examples And Best Practices — Smashing Magazine
面包屑设计 – 腾讯CDC

---

以上翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^
感谢原文作者及所有分享想法与经验的人 ^^