面包屑导航：最佳做法和示例

面包屑导航通常在设计和开发过程中被忽略。 有些人可能认为它是不必要的，而另一些人可能觉得它的价值太大了。 事实是，面包屑导航将显着提高网站的可用性。

面包屑为用户提供了另一种导航方法，使他们可以看到他们在网站层次结构中所处的位置，并且可以减少导航到网站更高级别所需的步骤数。

本文概述了当今使用的不同类型的面包屑导航，它们为何必不可少以及如何最好地在网上实现。 这里还包括30多个示例，这些示例说明了今天如何在线使用面包屑 。

请记住，虽然面包屑导航可能不会建立或破坏网站，但它会通过增加网站的整体可用性和功能为用户带来更多好处。

面包屑类型

路径

基于路径的面包屑指示步骤或路径； 用户已经进入了网站的当前页面。 此外，用户将看到指向他们先前访问过的页面的链接，以访问当前页面。

在三种面包屑导航中，基于路径的面包屑导航在网上最不流行。 原因是，基于路径的面包屑导航提供了与浏览器上的“前进”和“后退”按钮相似的功能。

对于大多数网站，基于位置和基于属性的面包屑导航提供了更好的功能。

位置

基于位置的面包屑向用户指示当前页面在网站层次结构中所处的位置。

这种面包屑导航最常见于深度或内容超过两个级别的网站。

在进一步进入网站时，将为用户提供指向页面或类别的链接，这些页面或类别充当当前正在查看的页面的“父级”或上级。 例如，用户可能在“讲话”页面上。

但是，“我们做什么”页面是“说”页面的父项，而“主页”页面是“我们做什么”页面的父项。

属性

基于属性的面包屑向用户指示归因于网站内当前页面的属性或类别。

通常在电子商务网站上可以看到，产品不仅可以归为一类，还可以归为特定属性。

例如，可以将车辆归类为SUV，然后具有黑色属性并在2016年发布。

为什么要使用面包屑？

极好的可用性

面包屑提供了一种额外的方式，使用户可以轻松浏览网站。 如果用户从另一个来源登陆到您网站的内部页面上，则面包屑将使用户确切地看到他们在网站层次结构中所处的位置。

还使用户有机会在任何给定时间轻松升级到更高级别的网站。

容易回溯

主要导航并非设计为向后跟随面包屑。 由于回溯在网上非常流行，因此提供一些额外的帮助可能会很长的路要走。

消除额外的点击

面包屑允许用户从网站的上一层跳到下一层，而无需使用浏览器上的“前进”或“后退”按钮。 此外，面包屑消除了用户持续使用主导航的需求。

显示用户层次结构

网站的主要导航不会反映网站中每个页面的层次结构。 为用户提供面包屑将使他们能够看到网站中页面的层次结构。

视觉上令人愉悦

面包屑不仅为用户提供了更多的可用性，而且他们这样做也不会占用页面上太多的空间。 面包屑易于在您的网站的视觉设计中实现，并为用户带来极大的好处。

提供其他H = help

某些用户完全可能不了解网站的主要导航是如何工作的，并且在某些情况下，用户甚至可能不知道他们在寻找什么。

为用户提供面包屑将使他们能够看到网站的整体进度和结构，从而使他们能够更好地浏览网站。

较低的跳出率

通常，面包屑将提供比主导航更详细的导航。 这样，将为用户提供有关如何浏览网站的更多选项。 让他们快速回溯网站中的几个级别将降低跳出率。

引起兴趣

当用户登陆网站的内部页面时，很可能他们已经在感兴趣的页面上了。 面包屑可能会提供指向其他页面和用户也感兴趣的信息的链接，而无需使它们从第一个方框开始。

面包屑最佳做法

在页面顶部使用面包屑

面包屑最常见和本能的放置在页面顶部。 这允许用户以简单的方式找到面包屑并相应地使用它们。

始终使用面包屑

如果您决定使用面包屑，请确保在整个网站上使用它们。 在某些页面上为用户提供面包屑，而在其他页面上不会仅使它们感到困惑和沮丧。

面包屑应温和降解

面包屑应始终从首页开始，然后降级到当前页面。 这样，您的面包屑需要一次从最高级别到最低级别。

适当化面包屑

您希望看到面包屑； 但是，您不希望它们成为焦点。 您还想使面包屑不是页面主要内容的一部分，而只是页面的附加支持。 寻找一个令人愉悦的媒介，使您的面包屑引人注目，但又不要太过分。

清晰地分类页面

如果您的网页分为两个或多个类别，则可能不希望在网站上使用面包屑。 试图将页面放在两个或多个类别下可能只会产生不清楚的面包屑并使用户困惑。 确保您的网站具有组织化的层次结构，并通过面包屑进行相应显示。

分隔每个级别

确保用户可以区分每个面包屑级别之间的差异。 级别之间最常见的分隔符大于character > 。

其他合适的分隔符包括右双角引号 �?» ， 斜杠 /和箭头 ��? 。 如果使用纯文本字符，则只能使用一个。

选出当前页面

在面包屑列表的最后一项上使用其他样式，以确保它是当前正在查看的页面。 您可以通过使项目变为粗体 ，更改其颜色或强调它来实现此目的。

不要将当前页面链接

无需将面包屑列表的最后一项链接为链接，因为它是当前正在查看的页面。 在此处创建链接只会使用户感到困惑，尤其是当用户单击链接并且不会将其带到新页面时。

不要将面包屑用作页面标题

将面包屑列表的最后一项用作当前页面的标题无效。 如果您选择使用面包屑，请同时添加页面标题。

面包屑不能替代主要导航

面包屑仅用作主要导航的支持，切勿完全取代主要导航。 在使用面包屑导航之前，您应始终为用户提供主导航，以便用户可以从中导航网站。

面包屑的例子

编者注：这篇文章是Shay Howe为Hongkiat.com撰写的。 Shay Howe是一位专业的网络和用户界面设计师，目前居住在伊利诺伊州芝加哥。 他在letscounthedays的自己的博客中撰写有关Web设计的文章。

翻译自: https://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/