小编：面包屑导航是网页设计中非常重要的一个组成部分，虽然看起来短小精悍，但它的作用却非同小可。那么你知道面包屑导航都有哪些分类，分别的作用是什么吗？面包屑应该在什么时候使用？什么？你还不知道什么是面包屑？那还不赶紧来看看这篇文章扫扫盲~

如果你非常熟悉汉塞尔(Hansel)和格莱特(Gretel)的故事，你就会知道他们用面包屑在沿途作为标记这样就可以再次找到回家的路。对于这两个孩子来说这种方式并没有起到很好的效果，因为鸟把面包屑给吃掉了，但是在网页设计中这种方法却很有效。当然，在面包屑导航中并没有真正的面包屑(或者鸟，就此而言)，但是你要了解它的由来。

面包屑组成了一种二级导航的方式，它的作用有点像进度条。你会经常发现它就在主导航的下面。

一些网页设计师认为面包屑导航没有提升用户体验，而且它可能并不适合所有的网站。然而，在有些情况下它是非常有用的。

应该在什么时候使用面包屑？

你可能在很多曾经访问过的网站上看到过面包屑导航。你可以在Best Buy网站上

以及亚马逊网站上看到面包屑。

通过面包屑你可以跟踪页面的层级结构，所以你很清楚地知道在这个网站的结构中自己处于哪个位置。它就像你在商场或者大楼里面看到的站点地图，地图上用“你在这里”来标志你现在所在的位置。如果你愿意，接下来可以沿着方向走到出口。

在单层的建筑中，所有的东西都尽收眼底，很显然你不需要使用像那样的地图。对网站来说也是一样。只有当你的网站是以层级来排布且有三个或者更多层级时，你才会需要面包屑导航。在面包屑导航最简单的形式中，导航链接水平放置，并被“>”符号分隔开，表明当前页面的层级与它前面的那个链接相关。它的目的就是防止你的用户在网站中迷路。

例如，假如一个用户通过搜索到达了一个他并不想去的页面，这个页面在你的网站中所处的层级很深，面包屑导航可以帮助他们找到回到主页面的路。他们只需要简单地不停点击他们想回到的那个层级的链接，就可以回到主页面。

面包屑的类型

在大多数大型的电子商务类型的网站上你会发现有三种主要的面包屑导航类型。即基于位置的，基于属性的和基于路径的。

1.基于位置的导航

基于位置的导航向用户表明在这个网站的结构中他们处在哪里，通常一个导航至少有两个层级。第一级永远是主页面，最后的是当前页面，它是不可点击的。

面包屑非常有用，它不仅可以帮助用户找到正确的路，而且能给搜索引擎技术提供与页面内容有关的信息，让索引变得更加容易。

2.基于属性的导航

这种类型的导航展示了页面上一个特定的事物的属性而非它的位置。它是基于链接上的元数据，它们可以分成许多不同的路径，因此给用户提供了接下来要去哪里的选择。这种导航通常运用在电商网站中，因为它的描述性让购买者能够更容易地找到想要的商品。属性是在垂直方向上分开排列的。

你可以根据你提供的产品，将基于位置的导航和基于属性的导航结合起来。基于位置的导航是可点击的，而基于属性的导航不可点击，但是你可以点击“X”来移除这个属性。

例如，你可能在寻找长袖的男士休闲衬衫，结果到了一个短袖衬衫的页面。这时你可以点击“短袖”属性上的“X”并选择“长袖”。

然而，由于基于属性的导航有太多的选项，内容上的重复会导致搜索引擎索引起来比较困难。

3.基于路径的导航

这种类型的导航更像是历史轨迹，所以它的作用更像是后退按钮而不是导航栏。它会跟踪用户到达一个特定的页面经过的步骤。如果是出于导航的目的不推荐使用这种方式，因为并不是很有用。它甚至会让进入到网站中层级较深的页面中的用户感到迷惑。

使用面包屑的好处

对于一些网站来说，面包屑如果使用恰当的话将会非常有用。它使用户不需要经过很多环步骤就能很方便地到达更高的层级。它减少了用户到达一个特定的页面所需要点击的次数，使用户不再在网站上不断跳跃。它甚至不需要占据很多空间，所以如果合适的话没有理由不使用它。

使用面包屑的一些建议

深度——就像文章开篇就提到的，只有当网站的层级超过三个的时候才应使用面包屑。

主页面——你的主页面应该永远是第一级，因为主页是你所有重要的目录包括关于和联系的页面所在的地方。

符号——推荐使用，尽管并不是必须的。用“>”来分割链接而不是“/”，因为“>”表明了方向。

位置——运用变化的文本表明用户所在的位置，尽管它通常处于导航链上的最后一环。使用一个不可点击的文本标签并加粗。

结论

面包屑导航并不适用于所有的情况，但是对于许多有着复杂的结构和产品的大型网站来说，将会对用户有很大的帮助。另外，它还可以帮助搜素引擎优化这一点也很不错。

原文作者：Vincent Sevilla

登录收藏