如何正确使用面包屑导航

已发表: 2017-01-07

Breadcrumbs 将我们带回到您在幼儿园时可能读过的古老童话故事。当 Hansel 决定铺上面包屑追踪回家的路时，两个孩子 Hansel 和 Gretel 被迫离开了他们在树林里的家。虽然面包屑被森林里讨厌的小鸟吃掉了，但在故事写完很多年后，它们还是给人们留下了深刻的印象。

在网页设计中，面包屑的用途与 Hansel 的想法相似。面包屑作为网站导航中的辅助导航，帮助访问者在从一个页面转到另一个页面后放心。就像古老的童话故事一样，它有助于向用户展示他们降落的地方以及他们最后的位置。

一旦面包屑被集成到网站的层次结构中，用户就可以深入产品类别并导航回到他们开始的地方，而无需疯狂地点击“返回”按钮。

面包屑还用作图形控制元素，以帮助经验不足的访问者在电子商务网站上导航。对于此类网站，内部结构必须进行智能设计。有了面包屑，在线购物平台不仅要为访问者提供易用性，还要防止潜在客户因为迷路而放弃他们的页面。

面包屑导航

面包屑是通过确定访问者当前位置和途中访问过的地方来引导访问者的有效手段。它们用作站点层次结构中的视觉辅助。但就客户用户体验而言，面包屑可以帮助他们回答这三个问题。

我在哪里？
面包屑让用户了解他们在网站上的下落，开始他们的旅程。
我可以去哪里？
它通过建议用户下一步去哪里来帮助用户。由于结构已经摆在他们面前，用户不再需要搜索和查找类别或站点部分。
我应该去那里吗？
面包屑有助于促进更好的浏览并向用户展示内容价值。例如，如果客户登陆网页以搜索产品，他可能会找到其他可以证明与他的需求非常匹配的产品。这有助于降低网站的跳出率。

好处

减少行动

为了达到更高级别的页面，面包屑有助于减少没有。网站访问者到达那里所需的操作。访问者可以简单地使用面包屑导航返回，而不是不断地使用“返回”按钮或网站的主导航。

需要最小的空间

它只需要一条充满文本链接的水平线。通过占用最小的空间并允许网站上的其他元素呼吸，这有助于健康的网页设计结构。这也有助于提高网站的加载速度。

每个用户都知道如何操作面包屑

它易于理解，并且不需要任何技术知识即可与它们进行交互。文本解释了用户过去、现在和可以去的地方。这是每个用户都能理解的自我解释导航系统。

何时使用面包屑？

构建站点地图以显示您网站的导航结构是确定您的网站是否可以从面包屑中受益的最佳方法之一。然后，您可以通过试用和测试来分析面包屑导航是否正在帮助用户浏览您的网站内容。

当需要在类别内和清晰的线性结构中组织大量更大的内容时，最好使用面包屑导航。在大多数电子商务网站中，相同的标准用于将大量产品分组到逻辑类别中。
面包屑不能用于没有任何逻辑层次结构来对内容或产品进行分组的网站。

何时避免使用它们

在面包屑对网站结构至关重要的情况下，也存在应避免使用的情况。如果有一个网站由单层结构组成，没有任何明确的分组指示，那么它符合网站的最佳利益，以避免添加面包屑。就像我们上面提到的，图表或站点地图对于确定网站的导航架构非常有帮助。

面包屑只有在主导航支持时才有用。面包屑充当肌肉，而主要导航是将它们结合在一起的骨架。没有它们的完整移动，网站层次结构就无法有效运行。

面包屑的类型

您应该了解三种类型的面包屑：位置、路径和属性。

1. 基于位置

基于位置的面包屑用于展示网站的基本结构。它们允许用户浏览具有多个级别和全面内容路径的网站。这种类型的面包屑对于从外部来源登陆网站并输入更深层次内容的访问者非常有用。例如，如果您正在搜索特定类型的产品并单击 Google 显示的搜索结果，一旦您进入网页，您就会发现自己处于许多类别之间。面包屑将帮助您确定您的位置并导航到层次结构中的可能性。那些包含深层内容的网站非常适合基于位置的面包屑。一个理想的例子是 eBay。

2. 基于路径

这些面包屑对于网站的历史轨迹导航非常重要。基于路径的面包屑基本上显示了用户为了到达当前位置而访问的每条路径。通常，此类面包屑链接是动态生成的。虽然基于路径的插件对花费大量时间浏览网站的用户很有帮助，但它们对大多数用户来说大多是令人费解的。由于大多数访问者自行决定浏览，从一个页面移动到另一个页面。浏览器中的“返回”按钮解决了他们更改路径的大部分需求。这使得它尤其对于那些到达已经在网站深处的网站页面的访问者来说毫无用处。

3. 基于属性

电子商务网站从基于属性的面包屑中受益最多。它们有助于根据特定页面或产品列出类别。这种类型的面包屑对于鼓励用户了解产品之间的关系非常有帮助。例如，如果网站销售牛仔裤，他们将使用基于属性的面包屑来帮助客户从常规版型、修身版或紧身牛仔裤中进行导航。

面包屑导航最佳实践

在设计面包屑导航时，请务必牢记以下几点。面包屑导航是改善用户在您网站上的体验的额外帮助。

避免重复元素

如果你真的想在你的网站上添加面包屑，你最好以正确的方式来做。首先，您需要消除可能出现在面包屑路径之间的任何重复元素。可悲的是，我在许多排名靠前的网站中看到了这一点，其中相同的页面属于多个类别或显示的内容级别。这不仅会使访问者感到困惑，而且还会在您的网站上产生不良影响。

搜索引擎优化兼容性

面包屑不仅是访问者的导航控件，也是您的 SEO 实践的重要资产。您可以使用面包屑中的关键字来提高您在搜索引擎上的排名。建议您为网站类别选择 SEO 友好名称，以便搜索引擎可以轻松地在其结果中的面包屑中列出。

使用面包屑作为替代导航

虽然面包屑是帮助用户从一个点导航到另一个点的绝佳来源，但重要的是它们应该只被视为次要来源。面包屑是增强访问者可用性的额外功能，在任何情况下都不能取代网站的主要导航结构。

在面包屑导航中链接当前页面毫无意义

尽管在面包屑路径上显示访问者的当前位置是可选的，但您必须确保线性结构中显示的链接不可点击或点击。向他们展示他们当前所在页面的链接只会使访问者感到困惑。

添加分隔符

使用分隔符是一种很好的做法，可以为您的面包屑导航提供干净且可观的外观。如果用户进入更深层次，它可以防止文本过于接近，并创建易于理解和交互的动态结构。

您可以使用 › 符号来表示层次结构，因为它通常用于类别格式，例如衣服 › 衬衫 › 领衬衫等。其他符号包括箭头 (→)、直角引号 (») 和斜线 (⁄)。

介绍面包屑的大小和填充

在设计面包屑时，您必须考虑填充和目标大小。一个面包屑与另一个面包屑之间的间距必须明显，否则访问者可能无法有效地使用它们。同时，确保面包屑的大小不会影响其周围的其他元素，因此主导航不受影响。

永远不要将注意力集中在面包屑的设计上

切勿使用鲜艳的颜色或花哨的字体来表示您的面包屑。尽管面包屑路径对用户登陆页面后很重要，但它不应该是他们注意到的第一件事。为面包屑导航添加华丽可能会导致用户忽略网站的主要导航。这可能会分散用户进入页面的真正意图，并导致商店失去潜在的转换。在这方面，谷歌是最好的例子。拥有如此多级别的搜索内容，它显示了一个简单的面包屑导航路径，没有任何花哨的字体或颜色，以便用户可以轻松找到面包屑并与之交互。

应该避免哪种类型？

关于是否使用基于位置/属性的面包屑或基于路径的面包屑来显示站点层次结构，这是一个有争议的论点。根据经验，面包屑不能显示用户的历史记录，而是站点层次结构。在我们的评估和意见中，您可能不应该再为基于路径的面包屑而烦恼。一方面，它对用户体验没有帮助，因为由于不同级别之间缺乏层次结构，它可能会导致访问者混淆。这就是为什么基于位置和属性的面包屑优于基于路径的面包屑。

最后的想法

面包屑与网站上的任何其他元素一样重要。现在技术已经允许存储更多的数据、更快的互联网速度和更快的加载时间，导航可以在更高层次的层次上更全面地显示，而不会费力。在面包屑的帮助下，您的网站不仅会产生更好的用户体验，还会从客户那里产生更大的销售额。更流畅和简单的导航意味着更容易访问产品页面并减少结帐过程。