9面包屑提示和示例使您的网站更容易导航

在童话故事中汉塞尔和格莱特，两个孩子滴在树林里的面包屑找到他们回家的路。

如今，您可能不会遇到太多丢失的木质体验，但我愿意打赌，您在设计不良的网站上感到沮丧地迷失方向。

在网站设计中，面包屑导航是一种向用户展示他们的位置以及它们如何到达那里的方式（类似于Hansel的面包屑）。它还可以帮助用户快速找到更高级别的页面，如果它们从搜索或深链接登陆网站。

什么是面包屑导航？

面包屑导航是用户在网站上可视化其位置的一种方式。它是一个辅助导航栏，通常显示为水平文本链接，由“大于”符号（>）分隔。面包屑导航提高了登陆页面的可辨能力，并帮助用户更快地达到更高级别的页面，如果它们最初从搜索或深链接找到您的网站。

尼尔森诺曼集团联合创始人Jakob Nielsen一直在自1995年以来推荐面包屑导航，并对他们产生了强烈的一点：“所有面包屑所做的就是让用户在网站上移动，假设其内容和整体结构是有意义的。这对于在设计中只占用一行的东西是足够的贡献。“

如果您的业务的网站是多层的，您可能会考虑实现填充导航，以使您的网站更易于导航。但是，就像任何设计元素一样，有一种正确和错误的方式。在这里，我们将浏览九个提示和示例，以确保您为用户创建最有效的宽面包导航。

面包屑导航提示和示例

1.如果您的网站结构有意义，只能使用面包屑导航。

面包屑导航具有线性结构，因此如果您的网站的层次结构有意义，您只想使用它。如果您有从不同的着陆页面访问的较低级别页面，则使用Breadcrumb Navigation将仅混淆读取器，读者仍然将继续访问不同起点的同一页面。此外，如果您的网站相对简单，只有几页，您可能不需要面包屑导航。

2.不要让你的面包屑导航太大。

您的面包屑导航是主导航栏的辅助工具，因此页面上不应该太大或太突出。例如，开启DHL的网站，他们的主要导航栏大型且可识别，具有“CARKEX”的“包裹和电子商务”“物流”等列。它们的面包卷导航是下面的较小部分，“DHL GLOBAL |>物流|>货物|>货物运输”。您不希望您的用户将面包屑导航误认为是主要导航栏。

3.在面包屑导航中包含完整的导航路径。

我谷歌入“伊龙大学无学会”到达这个着陆页，但是埃龙很聪明，包括完整的导航路径，包括“家庭”和“录取”。如果您留出某些级别，您将使用户混淆，面包屑路径不会感到有帮助。即使用户没有在主页上开始，您也希望从一开始就把它们提供一种简单的方法来探索您的网站。

4.从最高级别到最低的进展。

重要的是您的面包屑导航读取右侧读取，最接近左侧的链接是您的主页，以及右边的最接近的链接是用户的当前页面。Nielsen Norman Group的一项研究找到用户花费80％的时间查看页面的左半部分和20％查看右半部分，为左右设计制作强大的案例。此外，最接近左侧的链接将显示为链的开头，因此您希望它成为您的最高级别页面。