为什么需要面包屑导航
这里的面包屑可不是我们吃的面包屑哦。面包屑导航(或称为面包屑路径,也有叫层级菜单)是一种显示用户在网站或网络应用中的位置的二级导航方案。这个术语来自于格林通话故事《奇幻森林历险记》,故事的hansel 和 gretel两个小主人公丢下一条面包屑路径,然后顺着这条路径回到了家中,从而防止了迷路。就像这个故事一样,在现实世界的应用程序中,面包屑为用户提供一种追踪返回最初访问页面的方式。
这是Delicious.com网站的面包屑
你通常可以在有大量的按一定等级组织的内容的网站上找到面包屑。你也可以在有多于一个步骤的网络应用上见到它们,这个时候他们的功能类似于进度条。最简化的方式是,面包屑就是水平排列的被大于号” > ” 隔开的文本链接;这个符号指示该页面相对于链接到它的页面的深度(级别)。
在本文中,我们将探索面包屑在网站上的用法,并讨论在你自己的网站中应用面包屑路径的一些最佳实践方法。
什么时候使用面包屑?
面包屑导航用于大型网站和按分级排列页面的网站。一个典型的案例就是电子商务网站,在这类网站中,大量的产品被按照逻辑分类分组。在下一篇文章中我们将会详细介绍在B2C电子商务网站如果应用面包屑。请继续关注www.hiw3c.com。
你不必在没有逻辑等级或分组的单级网站上使用面包屑。一个决定是否使用面包屑导航的方法是建立一个网站地图或结构图来描述网站的导航结构,然后分析面包屑是否能提高用户在类别内和类别之间的定位能力。
面包屑导航应该作为扩展的额外的功能,而不能替代有效的主要导航菜单。它是一个方便的功能;一个允许用户定位他们在哪里的二级导航方案;一个定位你的网站的可选择的方法。
面包屑的种类
面包屑主要分为三类。
基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面。它们一般典型的用于有多个级别(一般是多于两级)的导航方案。在下面的例子中,每一个页面的文本链接表示它比它右边的文本链接高一级。
基于特性(Attribute-based)的面包屑路径显示一个特定页面的特性。例如,在国内的B2C电子商务网站新蛋Newegg中,面包屑路径表示在一个特定页面显示的特性内容。
基于路径(Path-based)的面包屑路径显示用户到达特定页面的操作步骤。基于路径的面包屑是动态的,它们显示用户在到达当前页面之前访问过的页面。
使用面包屑的优势
这里是一些使用面包屑路径的优势。
方便用户
面包屑主要用于为用户提供导航一个网站的次要方法。通过为一个大型多级网站的所有页面提供面包屑路径,用户可以更容易的定位到上一次目录。
减少返回到上一级页面的点击或操作
不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面 ,用户现在可以使用用更少点击数的面包屑来。
不用常常占用屏幕空间
因为它们通常是水平排列以及简单的样式,面包屑路径不会占用页面太多的空间。这样的好处是,从内容过载方面来说,他们几乎没有任何负面影响。
降低跳出率
面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说,一个用户通过谷歌搜索到一个页面,然后看到一个面包屑路径,这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样,从而,可以降低网站的总体跳出率。
面包屑和 Google
从2009年 11 月份开始,Google 已经整合了面包屑导航到搜索结果里面,使得更加吸引和可信赖性,但不是每个面包屑导航都可以被 Google 采用,但是将面包屑放在页面的越顶部越好。
4、面包屑的最好实践
面包屑真正能帮助用户的时候才使用。对于大型的,多层次的网站,面包屑首先就可以帮助用户,其次就是有助于 SEO 优化—这是一个额外的收益。不要仅仅为了更好的内部链接优化而使用面包屑。
当前页不要链接。(最后的一页的词语不要加链接效果)
不要用面包屑导航取代主导航栏。(面包屑在网站结构当中是横条结构的,试想下主导航却是垂直型展示目录和内容,没有了主导航会怎样呢?)
连贯地使用面包屑(这样使得用户在浏览你的网站的时候更有安全感同时可以更快地熟悉你网站的结构)
当我们分析一个网站可用性的时候,你是否会考虑到面包屑呢?!对于用户来说,面包屑几乎是一个“透明”的玩意儿,有谁会仔细观察那些页面左上方的导航链接呢?是的,没人在意,但却也没有人离得开它。





