面包屑导航详解

⾯包屑导航详解
关于⽹站上的⾯包屑导航很多朋友不知道为什么这么叫。

顾名思义，⾯包屑挺巧就是琐碎的意思，⼀点点的形状，这就代表我们的⽹站导航中，那些不在主导航上，其他辅助性琐碎的导航就叫⾯包屑导航了。

⾸先我们来看看⾯包屑导航的作⽤：
1、让⽤户了解当前所处位置，以及当前页⾯在整个⽹站中的位置。

2、体现了⽹站的架构层级，能够帮助⽤户快速学习和了解⽹站内容和组织⽅式，从⽽形成很好的位置感
3、提供返回各个层级的快速⼊⼝，⽅便⽤户操作。

4、Google已经将⾯包屑导航整合到搜索结果⾥⾯，因此优化⾯包屑导航每个层级的名称，多使⽤关键字，都可以实现SEO优化。

⾯包屑路径，对于提⾼⽤户体验来说，是很有帮助的。

5、⽅便⽤户，⾯包屑主要⽤于为⽤户提供导航⼀个⽹站的次要⽅法，通过为⼀个⼤型多级⽹站的所有页⾯提供⾯包屑路径，⽤户可以更容易的定位到上⼀次⽬录，引导⽤户通⾏;
6、减少返回到上⼀级页⾯的点击或操作，不⽤使⽤浏览器的“返回”按钮或⽹站的主要导航来返回到上⼀级页⾯;
7、不⽤常常占⽤屏幕空间，因为它们通常是⽔平排列以及简单的样式，⾯包屑路径不会占⽤页⾯太多的空间。

这样的好处是，从内容过载⽅⾯来说，他们⼏乎没有任何负⾯影响;
8、降低跳出率，⾯包屑路径会是⼀个诱惑⾸次访问者在进⼊⼀个页⾯后去浏览这个⽹站的⾮常好的⽅法。

⽐如说，⼀个⽤户通过⾕歌搜索到⼀个页⾯，然后看到⼀个⾯包屑路径，这将会诱使⽤户点击上⼀级页⾯去浏览感兴趣的相关主题。

这样，从⽽，可以降低⽹站的总体跳出率。

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

10、⾯包屑有利于⽹站内链的建设，⽤⾯包屑⼤⼤增加了⽹站的内部连接，提⾼⽤户体验。

什么时候应该⽤⾯包屑导航？
评价⼀个⽹站是否适合于使⽤⾯包屑导航的最好⽅法便是将⽹站的结构画出来或者以图表的形式呈现出来，然后分析使⽤⾯包屑导航是否会帮助⽤户更⽅便地切换到不同类的⽹页。

什么时候⽤：你的⽹站结构是严格的线性结构或者是预先分好组（类）的层级结构。

⽐如电商⽹站的结构就是层级结构，包含了按类别分好组的⼤量商品页⾯。

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

⾯包屑导航正在变得越来越实⽤
作为⼀个⾼效的视觉辅助⼯具，⾯包屑导航暗⽰了⽤户在⽹站层级结构中的位置。

对⽤户来说，⾯包屑导航包含了⼤量的信息，可以帮助他们解答以下问题：
1、我在哪？⾯包屑导航明确地告诉⽤户他们的位置。

2、我接下来可以去哪？⾯包屑可以使⽤户更加⽅便地查找⽹页。

⽐起放在菜单⾥，放在⾯包屑导航中的⽹站结构更容易被⽤户所理解。

3、我应该去这⾥吗？⾯包屑导航可以暗⽰⽤户⽹页内容的价值从⽽引起他们继续浏览的兴趣。

⽐如在⼀个电商⽹站中，⽤户可能对当前访问的这个商品不满意，但是他还想看看同类的其他商品，这时候⾯包屑导航就可以告诉⽤户同类产品的链接。

这样可以很好地降低⽤户的流失率。

⾯包屑导航具有以下优点：
减少不必要的步骤
⾯包屑导航最实⽤的⼀点便是可以帮助⽤户更快地访问上级⽹页，⽆需借助浏览器的“返回”按钮和顶级导航栏。

占⽤空间少
⾯包屑导航仅由⽂本和链接组成的⼀⾏内容构成，因此占⽤的页⾯空间⾮常⼩。

这样的好处是当内容过载时它的功能也不会受到影响。

⽤户体验很好
⽤户可能会忽略这个⼩控件，但是他们从来不会误解或在使⽤上遇到问题。

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

基于位置的⾯包屑导航
基于位置的⾯包屑导航可以表⽰⽹站的结构。

它可以帮助⽤户理解并访问你的⽹站各个层级的内容。

这种⾯包屑导航对于那些从外部（如搜索引擎）直接访问深层位置的⽤户来说尤为重要。

在下⾯这个例⼦（BestBuy⽹站）中，每⼀个链接都代表⼀个页⾯，从左⾄右逐级深⼊。

基于路径的⾯包屑导航
基于路径的⾯包屑导航展⽰了⽤户访问的完整轨迹。

这种⾯包屑导航通常是动态⽣成的。

有时候它们会有帮助，但是多数情况下它们会让⽤户感到困惑。

⽤户通常会在各个页⾯之间跳来跳去，这时候记录下来的路径就会⾮常复杂，还不如浏览器的“返回”按钮更加实⽤。

⽽且，对于从外部直接访问的⽤户来说基于路径的⾯包屑导航就完全没⽤了。

下图是⼀个基于路径的⾯包屑导航，展⽰了到达相同页⾯的不同路径。

基于属性的⾯包屑导航
基于属性的⾯包屑导航会将特定页⾯的类别列出来。

⽐如电商⽹站就会列出来常⽤商品分类。

这种⾯包屑导航可以帮助⽤户了解产品之间的联系，同时提供了不同的访问⽅式。

如下图所⽰，在TM Lewin⽹站中，⾯包屑导航展⽰了商品的不同属性
我应该⽤哪个？
使⽤⾯包屑导航的原则是展⽰⽹站的结构⽽不是⽤户的访问历史。

因此，尽量使⽤基于位置和属性的⾯包屑导航⽽不是基于路径的。

最佳实践
使⽤⾯包屑导航的时候需要注意以下⼏点：
不要⽤⾯包屑导航来替代顶级导航
我们应该将⾯包屑导航视为⼀项附加功能，不能⽤它来替代⾼效的顶级导航菜单。

它很⽅便，但是仅仅作为访问⽹站的⼀个备选⽅式，⽽不是唯⼀⽅式。

下图的例⼦是苹果的官⽹，在页⾯底部添加的⾯包屑导航对顶级导航起到了辅助的效果
不要给当前页⾯的导航⽂字添加链接
⾯包屑导航的最后⼀项可以表⽰当前页⾯也可以表⽰当前页⾯的上⼀级。

如果你想⽤当前页⾯的话，切记不要给这个项⽬添加链接，因为⽤户已经处于这个页⾯了，再添加指向当前页⾯的链接是没有任何意义的。

使⽤分隔符
⾯包屑导航中最简洁明了的分隔符便是⼤于号“>”。

通常⼤于号⽤于基于位置的⾯包屑导航，以“⽗类>⼦类”的形式表⽰导航项⽬之间的层级关系。

除了⼤于号以外还可以⽤向右箭头“→”，双⼤于号”>>”和斜线”/”。

到底使⽤哪个取决于导航的类别和视觉效果。

设置合适的⼤⼩和padding属性
在设计的时候要谨慎考虑导航菜单的⼤⼩和padding属性。

在每⼀个项⽬之间必须有充⾜的间隔，否则⽤户理解起来会有问题。

同时你希望⾯包屑导航不会抢了其他主要部分的风头，因此你需要让它看起来⽐顶级导航要低等⼀些。

不要让它们看起来很突出
不要使⽤花哨的字体和亮⾊，这样会违背使⽤⾯包屑导航的初衷。

设计⾯包屑导航的原则是它不能是页⾯加载后最吸引⽤户的内容。

下⾯这个例⼦中的⾯包屑导航虽然效果不差，但是太吸引⽤户的⽬光，可能会分散⽤户的注意⼒，使其更加关注⾯包屑导航⽽不是顶级导航和页⾯的主要内容。

⾕歌就没有让⾯包屑导航很显眼，但是⽤户可以很⽅便地发现并使⽤它。

不要在移动端⽹站上使⽤
⾯包屑导航在移动端的体验并不好，尤其是在层级⽐较复杂的⽹站中。

⽽且，你会发现在在移动端上设计⾯包屑导航会遇到很多问题。

因此，你需要尽可能地简化你的⽹站结构，如果简化之后仍较为复杂，那么最好就不要⽤⾯包屑导航，毕竟它不是主要功能。

结语
⾯包屑导航的宗旨是让⽤户可以更⽅便地访问你的⽹站。

它看似简单，但却可以很好地优化⽤户体验，增加⽤户粘性。

以上就是我们针对⽹站中⾯包屑导航做的详细总结，如果⼤家还有任何不明⽩的地⽅可以在下⽅留⾔讨论。