导航在网站设计的成功中起着至关重要的作用，它会影响访问者找到他们正在寻找的信息的难易程度以及整体易用性。如今，有许多类型的网站导航可以满足您网站的审美和实际需求——从传统的水平和垂直菜单到汉堡包图标（这是移动导航的最爱）、灯箱菜单、锚链接等等。

今天我们不打算谈论导航菜单，而是许多品牌、企业和个人网站所有者正在他们的网站上实施的一种独特且方便的 UX 设计元素：面包屑。

痕迹导航与有序且具有视觉吸引力的网站菜单配对时，可以通过引导访问者浏览您的在线内容来提高设计的有效性。在本文中，我们将讨论什么是面包屑导航，在什么情况下它会使网站受益，以及将它们添加到您自己的设计中的最佳实践。

什么是痕迹导航？

痕迹导航是位于网页顶部标题正下方的辅助导航。文本链接的数字跟踪可帮助用户找到他们的方位、回溯他们的步骤并识别快捷方式。

何时应向网站添加痕迹导航？

创建 Web 站点时，应始终包含顶级页面和类别的主要导航，通常在页眉中。

即使您构建了一个单页网站，主导航链接和网站菜单也会让访问者熟悉您网站的内容，使他们能够找到部分。您并不总是需要痕迹导航，但它可以使您的用户体验受益。

您可以出于以下常见原因向您的网站添加痕迹导航：

• 您的导航比两层更深

• 如果您可以将所有类别和子类别放入主导航中而不会过度拥挤，那么您就不需要面包屑导航。将痕迹导航视为处理更深层次导航层（如子类别、产品筛选器等）的空间。

• 您启动了一个具有重大增长潜力的网站

• 即使您没有启动包含太多内容的网站，随着时间的推移，您也可能会添加更多内容。如果创建这些站点之一，您应该从头开始构建 breadcrumbs：

• 电子商务

• 内容（例如博客、杂志、报纸）

• 软件即服务

• 任何站点，包括支持中心或知识库

• 您的页面没有侧边栏链接或内部链接系统

• 如果您在内部页面上共享相关链接或类别，那么您可能不想通过痕迹导航占用额外的空间。例如，您的博客读者可能会发现在侧边栏下拉菜单上找到顶级类别很有价值。他们也可能只是希望在文章末尾看到相关链接。
  
  

痕迹导航的类型

网站在 UX 设计中通常使用两种类型的痕迹导航：

01. 基于位置的面包屑

• 基于位置的痕迹导航也称为基于层次结构的痕迹导航，它显示链接轨迹，从主页开始，到当前位置结束。

• 痕迹导航让访客知道他们正在查看对应搜索结果页面，并包含结果数量。

• 最后一项在这两个结构之间有所不同： Target 显示搜索结果页面类别，而 IKEA 显示当前页面名称：

• 首页 > 灵感

• 一般结构或多或少相同。当用户从左向右查看时，类别会缩小。这种痕迹导航样式使用户能够导航或回溯到上级类别，而不是从头开始搜索。

• 访客可能会发现以这种方式布局的类别和相关子类别很有帮助。这种面包屑导航还让他们更好地了解网站的产品，如果最初的搜索没有结果，他们会走上不同的道路。
  
  

02. 基于属性的面包屑导航

• 基于属性的痕迹导航跟踪使用户能够在当前结果没有提供正确的产品时删除筛选条件。此导航仍提供有关用户站点位置及其当前页面视图的上下文，但通常不设计为一系列分层链接。

• 基于历史记录的痕迹导航

• 从技术上讲，还有第三种基于用户当前会话路径的痕迹导航类型：基于历史记录的痕迹导航。

• 网站通常不使用它们，因为它们很少实用。客户在零售商的电子商务商店购物时可能会比较各种产品。首先，他们查看一个品牌的产品，然后查看不同尺寸或颜色的同一品牌的产品。然后他们会探索其他品牌。

• 在该会话中，他们可能会查看单个商品的 10 种或更多类型。

使用痕迹导航的好处

使用数字面包屑，网站的访问者和品牌从中受益：

增强的网站可用性

即使您使用熟悉的模式和直观的交互构建网站，内容量和网站复杂性仍然可能给一些用户带来障碍。因此，如今您通常可以在网站上找到面包屑导航。

痕迹导航使您能够设计精简的网站菜单，将额外的导航详细信息移动到每个网页的顶部。这个小型网站组件在很大程度上改善了您的用户体验：

让回溯更容易

防止用户迷路或不知所措

向用户介绍新的子类别

帮助他们更清楚地了解您的品牌所做的一切

由于受限空间会影响用户体验，因此痕迹导航还可以提高移动设备的易用性。

降低跳出率

痕迹导航创造了一种无痛的导航体验，因为访问者不必依赖主导航和浏览器的 “Back” 按钮。它还为用户提供了轻松发现更多内容的工具。如果做得好，它应该会改善访问者的页面停留时间指标并降低跳出率。

提高搜索排名

痕迹导航有助于组织具有大量内容或库存的网站。该组织使搜索引擎更容易了解网站的用途、为其内容编制索引并将其推荐用于相关搜索。

Google 甚至在搜索结果中展示了网站的面包屑导航。

使用痕迹导航的提示

除了遵循网站导航提示外，还要牢记这些其他痕迹导航创建提示：

 
1. 将面包屑放在左上角

• 虽然这不是一个硬性规定，但设计师通常会将面包屑导航放在网站的左上角，因为熟悉的用户会本能地在那里寻找它们。此外，这个地方自然会吸引新用户的眼球。

2. 表示可点击的文本

• 当您为网页设计超链接时，不要将它们设置为看起来像纯文本，因为这会使访问者几乎不可能识别可点击的文本。

3. 在面包屑之间使用分隔符

• 由于痕迹导航轨迹很小，因此不能依赖空格来明确一个痕迹导航的开始位置和结束位置。因此，请在每个链接之间放置一个符号.
  

• 网站通常使用以下两种类型：

• Dollar Shave Club 使用的  大于符号 （>）

• Chewy 使用的  正斜杠 （/）

• 虽然您通常会在网站上找到这两种样式，但任何表示层次结构或关系的符号（如箭头）都可以使用。您还可以添加特定于品牌的符号（如果有）。

4. 注意大小

• 痕迹导航不应在您的网页上占用太多空间。事实上，大多数设计人员都会将他们的面包屑导航设置为比页面文本的其余部分小一两个像素，这样它就不会分散对主要内容的注意力。

• 也就是说，请注意大小。您需要一个足够大的字体，以便每个访问者都能阅读，但又不能太大，以免使痕迹导航轨迹太长。它应该只占用页面上的一行。

5. 在移动设备上以不同的方式处理面包屑

• 长长的面包屑痕迹不适合智能手机屏幕。而且您不想强制您的移动面包屑包装，因为它会将主要内容进一步推到页面上并使用户感到沮丧。

• 通过限制移动网站上默认痕迹导航链接的数量，并调整您的设计以适应较小的屏幕，您可以拥有一个保持整洁的用户界面，即使在为访问者提供有用的辅助导航系统时也是如此。

创建您自己的电子商务网站并在此处查找有关网页设计教程的更多信息。