面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小(xiǎo)心迷路了，但是他(tā)们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他(tā)们找到回家的路。所以，面包屑导航的作(zuò)用(yòng)是告诉访问者他(tā)们目前在网站中(zhōng)的位置以及如何返回。
面包屑导航来源
很(hěn)久很(hěn)久以前，在大森林的边上住着一个贫穷的樵夫，他(tā)与妻子和两个孩子相依為(wèi)命。他(tā)的儿子名(míng)叫汉赛尔，女儿名(míng)叫格莱特。后来樵夫的妻子去世了，他(tā)又(yòu)给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他(tā)们睡着的时候跑掉。汉赛尔无意中(zhōng)知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。在去森林的路上，汉赛尔悄悄地捏碎了他(tā)的面包，并不时地停下脚步，把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安(ān)慰他(tā)的妹妹说：“等太阳一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。”但是当太阳升起来时，他(tā)们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了，兄妹俩在森林中(zhōng)迷了路。不天的寻路，让他(tā)们饥饿难忍，腿脚无力，来到了一个用(yòng)面包做屋顶，糖果做窗户的小(xiǎo)屋。饥饿让他(tā)们忘记了疲惫，及潜在的危险，啃起了屋子。结果在巫婆的诱骗下，哥(gē)哥(gē)被锁屋中(zhōng)，妹妹被迫做劳力，就在巫婆要吃掉哥(gē)哥(gē)之时，妹妹借向巫婆學(xué)习添柴之机。将巫婆推入炉中(zhōng)，兄妹俩带着巫婆的财宝，回到了家中(zhōng)。后母己经去世，兄妹俩和父亲一起过上了幸福的生活。
面包屑导航原理(lǐ)
在童话里，面包屑是汉赛尔在进入森林的路中(zhōng)偷偷撒下的，这是一种“历史记录”的应用(yòng)方式，目的是帮助你追溯来路，因而它应该是一种線(xiàn)性的导航方式。不过在网页(yè)的应用(yòng)中(zhōng)，“追溯来路”这件事浏览器已经做得足够好了，所以“面包屑”慢慢地就变成用(yòng)来表达内容归属关系的界面元素，也就是我们经常看到的“主分(fēn)类>一级分(fēn)类>二级分(fēn)类>三级分(fēn)类>……>最终内容页(yè)面”这样的方式。但是一般正常的来讲目录结构由3层结构组成。分(fēn)别是首页(yè)>栏目页(yè)>内容页(yè)。合理(lǐ)的构建目录结构可(kě)以让用(yòng)户随时随地的找到自己所在的位置又(yòu)能(néng)保证栏目分(fēn)类后的各个栏目的权重不至于太分(fēn)散。同时在许多(duō)关于网站用(yòng)户使用(yòng)體(tǐ)验的调查报告中(zhōng)也得出超过3次点击访客还没有(yǒu)找到需要的信息，访客就很(hěn)大的可(kě)能(néng)性会离开网站。所以，3层目录结构也是浏览體(tǐ)验的需要。
面包屑导航作(zuò)用(yòng)
1、让用(yòng)户了解当前所处位置，以及当前页(yè)面在整个网站中(zhōng)的位置。
2、體(tǐ)现了网站的架构层级，能(néng)够帮助用(yòng)户快速學(xué)习和了解网站内容和组织方式，从而形成很(hěn)好的位置感。
3、提供返回各个层级的快速入口，方便用(yòng)户操作(zuò)。
4、Google已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名(míng)称，多(duō)使用(yòng)关键字，都可(kě)以实现SEO优化。面包屑路径，对于提高用(yòng)户體(tǐ)验来说，是很(hěn)有(yǒu)帮助的。
5、方便用(yòng)户，面包屑主要用(yòng)于為(wèi)用(yòng)户提供导航一个网站的次要方法，通过為(wèi)一个大型多(duō)级网站的所有(yǒu)页(yè)面提供面包屑路径，用(yòng)户可(kě)以更容易的定位到上一次目录，引导用(yòng)户通行；
6、减少返回到上一级页(yè)面的点击或操作(zuò)，不用(yòng)使用(yòng)浏览器的“返回”按钮或网站的主要导航来返回到上一级页(yè)面；
7、不用(yòng)常常占用(yòng)屏幕空间，因為(wèi)它们通常是水平排列以及简单的样式，面包屑路径不会占用(yòng)页(yè)面太多(duō)的空间。这样的好处是，从内容过载方面来说，他(tā)们几乎没有(yǒu)任何负面影响；
8、降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页(yè)面后去浏览这个网站的非常好的方法。比如说，一个用(yòng)户通过谷歌搜索到一个页(yè)面，然后看到一个面包屑路径，这将会诱使用(yòng)户点击上一级页(yè)面去浏览感兴趣的相关主题。这样，从而，可(kě)以降低网站的总體(tǐ)跳出率。
9、有(yǒu)利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可(kě)以了，很(hěn)方便。
10、面包屑有(yǒu)利于网站内链的建设，用(yòng)面包屑大大增加了网站的内部连接，提高用(yòng)户體(tǐ)验。
面包屑导航适用(yòng)条件
虽然眼下很(hěn)多(duō)网站都流行使用(yòng)面包屑导航，但是并不是所有(yǒu)的网站都适用(yòng)。符合下面两个条件的网站才适合使用(yòng)面包屑导航。1、层级较深的网站，面包屑导航适合层级较深的网站，如果只有(yǒu)一级分(fēn)类的话，通过主导航就可(kě)以起到快速定位的作(zuò)用(yòng)。比如“豆瓣网”类型扁平构架的网站就没有(yǒu)使用(yòng)面包屑导航。2、独立不交叉的网站结构，由于面包屑网站导航路径是線(xiàn)性结构的，因此网站内容必须划分(fēn)的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分(fēn)类可(kě)能(néng)出现在不同的路径中(zhōng)，让用(yòng)户感到困惑。
面包屑导航示范
基于位置(网杆基础工(gōng)程)的面包屑向用(yòng)户显示他(tā)们在网站的哪一个级别页(yè)面。
它们一般典型的用(yòng)于有(yǒu)多(duō)个级别（一般是多(duō)于两级）的导航方案。在下面的例子中(zhōng)，每一个页(yè)面的文(wén)本链接表示它比它右边的文(wén)本链接高一级。
A 表明当前在网站内的位置。
B 提供指向先前访问过的页(yè)面（或网站）和其他(tā)區(qū)域的捷径。
本质(zhì)上，它是网站结构的線(xiàn)性表示。Web上的定位面包屑路径所展示的不是导航的历史，而是在整个网站中(zhōng)某个固定的位置。就是说，不管用(yòng)户是如何到达网杆基础工(gōng)程页(yè)面，面包屑路径都是一样的。
面包屑导航分(fēn)类
一、基于位置的面包屑导航
这种类型是最常见的。这种类型的面包屑导航可(kě)以很(hěn)好的指出当前页(yè)面与整个站点的层次结构。这种面包屑导航可(kě)以显示当前页(yè)面的前一个页(yè)面或者目录的链接。可(kě)以使访客了解自己的位置，以及可(kě)以更快的找到自己想要到达的页(yè)面。可(kě)以很(hěn)好的提高用(yòng)户的友好體(tǐ)验。
二、基于属性的面包屑导航
这种面包屑导航最常出现在電(diàn)子商(shāng)務(wù)站点。这种面包屑导航可(kě)以很(hěn)好的指出当前页(yè)面内产(chǎn)品的其他(tā)属性或者类别。对于一个产(chǎn)品来说，所具(jù)有(yǒu)的属性往往不只有(yǒu)一种，而通过这种面包屑导航可(kě)以给消费者一个更加直观的了解。
三、基于路径的面包屑导航
这种面包屑导航是最不常见到的。这种面包屑导航和上文(wén)所说的童话故事类型很(hěn)像。他(tā)们可(kě)以显示访客在到达页(yè)面前所访问过的网页(yè)的链接。这种面包屑导航不是很(hěn)受欢迎，因為(wèi)他(tā)们的功能(néng)基本上是和前进和后退的按钮是一样的。
TEL：13511717451 QQ：1503897157
网站建设
