面包屑导航详解

关于网站上的面包屑导航很多朋友不知道为什么这么叫。顾名思义，面包屑挺巧就是琐碎的意思，一点点的形状，这就代表我们的网站导航中，那些不在主导航上，其他辅助性琐碎的导航就叫面包屑导航了。

首先我们来看看面包屑导航的作用：

1、让用户了解当前所处位置，以及当前页面在整个网站中的位置。

2、体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感

3、提供返回各个层级的快速入口，方便用户操作。

4、Google已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名称，多使用关键字，都可以实现SEO优化。面包屑路径，对于提高用户体验来说，是很有帮助的。

5、方便用户，面包屑主要用于为用户提供导航一个网站的次要方法，通过为一个大型多级网站的所有页面提供面包屑路径，用户可以更容易的定位到上一次目录，引导用户通行;

6、减少返回到上一级页面的点击或操作，不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面;

7、不用常常占用屏幕空间，因为它们通常是水平排列以及简单的样式，面包屑路径不会占用页面太多的空间。这样的好处是，从内容过载方面来说，他们几乎没有任何负面影响;

8、降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说，一个用户通过谷歌搜索到一个页面，然后看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样，从而，可以降低网站的总体跳出率。

9、有利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便。

10、面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接，提高用户体验。

什么时候应该用面包屑导航？

评价一个网站是否适合于使用面包屑导航的最好方法便是将网站的结构画出来或者以图表的形式呈现出来，然后分析使用面包屑导航是否会帮助用户更方便地切换到不同类的网页。

什么时候用：你的网站结构是严格的线性结构或者是预先分好组（类）的层级结构。比如电商网站的结构就是层级结构，包含了按类别分好组的大量商品页面。

什么时候别用：你的网站结构是单层或者不是分好组（类）的层级结构。

面包屑导航正在变得越来越实用

作为一个高效的视觉辅助工具，面包屑导航暗示了用户在网站层级结构中的位置。对用户来说，面包屑导航包含了大量的信息，可以帮助他们解答以下问题：

1、我在哪？面包屑导航明确地告诉用户他们的位置。

2、我接下来可以去哪？面包屑可以使用户更加方便地查找网页。比起放在菜单里，放在面包屑导航中的网站结构更容易被用户所理解。

3、我应该去这里吗？面包屑导航可以暗示用户网页内容的价值从而引起他们继续浏览的兴趣。比如在一个电商网站中，用户可能对当前访问的这个商品不满意，但是他还想看看同类的其他商品，这时候面包屑导航就可以告诉用户同类产品的链接。这样可以很好地降低用户的流失率。

面包屑导航具有以下优点：

减少不必要的步骤

面包屑导航最实用的一点便是可以帮助用户更快地访问上级网页，无需借助浏览器的“返回”按钮和顶级导航栏。

占用空间少

面包屑导航仅由文本和链接组成的一行内容构成，因此占用的页面空间非常小。这样的好处是当内容过载时它的功能也不会受到影响。

用户体验很好

用户可能会忽略这个小控件，但是他们从来不会误解或在使用上遇到问题。

面包屑导航的分类

面包屑导航分为基于位置的面包屑导航、基于路径的面包屑导航和基于属性的面包屑导航。

基于位置的面包屑导航

基于位置的面包屑导航可以表示网站的结构。它可以帮助用户理解并访问你的网站各个层级的内容。这种面包屑导航对于那些从外部（如搜索引擎）直接访问深层位置的用户来说尤为重要。

在下面这个例子（BestBuy网站）中，每一个链接都代表一个页面，从左至右逐级深入。

基于路径的面包屑导航

基于路径的面包屑导航展示了用户访问的完整轨迹。这种面包屑导航通常是动态生成的。有时候它们会有帮助，但是多数情况下它们会让用户感到困惑。用户通常会在各个页面之间跳来跳去，这时候记录下来的路径就会非常复杂，还不如浏览器的“返回”按钮更加实用。而且，对于从外部直接访问的用户来说基于路径的面包屑导航就完全没用了。

下图是一个基于路径的面包屑导航，展示了到达相同页面的不同路径。