网站制作设计中面包屑导航怎么做?有什么好处
时间 :
2016-08-18,09:16:06
访问次数 :550
可能大家接触最多的是栏目导航,底部导航,侧边栏导航,而对于面包屑导航,了解的不是那么深,其实面包屑导航也是一种导航方式,他就像我们在城市中,不知道我们的当前位置时,那么正好这里有一个地图标志指出我们的位置,让我们顿时清醒了不少,而面包屑导航的优势在seo 网站优化中的作用,更不容小看。
首先我们来谈谈什么是面包屑?
“面包屑”是二级导航计划的一种形式,可以清楚的标明当前用户所在的网站或网络应用的位置。该术语源自《奇幻森林历险记》(Hansel and Gretel) 这篇童话故事,两个小孩子通过丢面包屑来标记回家的踪迹。和童话故事中一样,面包屑(breadcrumb)在现实应用中可以提供给用户追踪原始登陆点的方式。
cms上的面包屑
通常你可以在一些内容量极大,并且使用分级结构的网站上看到面包屑。你也可以在一些具有多重步骤的应用程序上看到它们。面包屑的结构非常简单,水平排放了一些文本链接,并且用大于号隔开(>);这个符号标明了当前页面与相邻页面之间的层级关系。
本文,我们将探讨面包屑在网站中的使用方法以及提供一些好的案例供参考。
什么时候需要使用面包屑?
大型网站或者具有层级结构页面的网站需要使用面包屑导航。最好的例子就是一个电子商务网站,这种网站的产品都会根据逻辑分类进行归组。
对于一些仅有一级结构的网站你不需要使用面包屑。一个决定是否需要使用面包屑最好的办法就是建立一个网站地图或者用图表画出网站导航结构,并且分析一下使用面包屑是否可以改善用户在分类之间的导引动作。
面包屑导航只能作为一个网站附属的特性而不能代替主导航。它是一个方便的功能,一个二级导航计划可以让用户确认他的当前位置,并且是你的网站导航的另一种表现方式。
面包屑的形式
下面介三种主要的面包屑形式。
基于位置的
基于位置的面包屑)可以告诉用户他们当前所在的网站层级。最具代表性的就是用在具有多级别(通常大于两级)的导航中。下面的示例 (SitePoint)中,每一个文本链接的层级都大于各自右侧的文本链接。
基于属性的
基于属性的面包屑路径显示了特定页面的属性。例如,在网站中,面包屑路径显示了特定页面上项目的属性。
该页面显示了所有具有制造者为“Lian Li”这个属性的计算机,同时他们还具有“MicroATX Mini Tower”这个表单元素。
基于路径的
基于路径的面包屑像用户提示了他们达到特定页面的步骤。这种形式的面包屑是动态的,因为它们显示的页面是用户在到达当前页面之前已经访问过的页面。
使用面包屑有以下几点好处:
1.为用户带来方便
使用面包屑主要是为用户提供站内导航的另一种方式。通过在多级结构的网站上为所有页面提供面包屑路径,用户可以更容易的定位到高级别的页面。减少返回高级别页面的点击数量或动作代替使用浏览器的返回按钮或者网站的主导航返回到高级别页面,用户现在可以通过面包屑使用更少的点击到达目的地。
2.通常不占用屏幕空间
因为通常都是使用水平方向且不进行格式化,面包屑路径不需要占用页面很多空间。这样的好处就是他们对于内容的加载没有任何负面影响,并且如果使用得得当的话将化解其他负载。
3.减少跳出率
面包屑路径对于吸引首次访问者进入当前加载页面以后继续查看网站其他内容是一个非常棒的方式。例如,当一个用户通过百度搜索进入到一个页面,看到一个面包屑路径的时候可能会试图点击更高级别的页面来查看相关感兴趣的文章。这样依赖,就可以减少整个网站的跳出率。
使用面包屑的常见错误
使用面包屑是意见十分简单的事情,在决定是否需要使用他们之前仅仅需要考虑几点建议。下面让我们看看需要避免的一些错误使用情况。
在不要使用的时候而使用了面包屑
最易发生的错误就是面包屑对于网站没有任何益处的时候而使用了它。
在上面的例子中,Slicethepie为使用者提供了太多的导航选择。
(1) 主导航 (2) 面包屑路径以及(3)二级导航的位置都十分接近。
面包屑(breadcrumb)在这里并没有为用户提供什么方便之处,因为二级导航已经直接显示出了下级页面。而且,点击面包屑上的二级链接 (”Music”)将把你代回到一级标签(”Listen”),这将错误的向你提示第一个标签会比第二个标签(”Search” 和 “Artist hall of fame”)级别高。
将面包屑作为主导航
正如前所属,使用面包屑仅仅是一种可选的导航方案。
在上面的例子中,mefeedia并没有提供主要的查看视频的导航菜单。尽管这里在页脚部分有一个文字链接导航,但是在页面主体上并没有一个导航菜单,从而使得网站其他部分的定位非常困难。
假设你通过百度直接到达了视频页面,那么可供你使用的导航仅有面包屑。也就是说如果你已经浏览了网站的其他页面并且到达了一个没有主导航菜单的页面,那么你不得不使用浏览器的“返回”按钮访问主菜单。
当页面具有多种分类的时候使用面包屑
面包屑具有一个线性结构,因此当你的页面分类种类较多的时候使用它会比较困难。决定是否需要使用面包屑通常都很大的依赖于你的网站结构设计。当一个低级别的页面具有一个以上的父级分类,那么使用面包屑是无效的,不精确的,而且会让用户非常迷糊。
面包屑导航设计考虑因素
当设计面包屑导航计划的时候,需要在大脑中牢记几点。让我们一起来看看当你设计面包屑的时候可能会遇到的问题。
应该用什么区分开链接项目?
通常被接受并且广泛认知的区分面包屑超级链接的符号就是大于号(>)。最具代表性的说,大于号用来表示层级结构,像这样的结构主分类>子分类。
选择使用什么样子的分隔符依赖于整个网站的美观设计以及所使用的面包屑(breadcrumb)形式。比如,基于路径的面包屑就不需要在每个链接文本之间提供层级关系,使用大于号并不能精确的传递他们之间的关系。
面包屑应该多大?
你无需让面包屑占据网页的主导位置。一个面包屑仅仅扮演用户使用助手的功能。它的尺寸只需可以传到足够的信息给用户足以,因此可以很小,或者比主导航小一些。
面包屑应该放在什么位置?
面包屑通常显示也页面的上半部分,如果导航菜单使用的是水平方向的话就在主导航菜单下方即可。
面包屑导航是导航系统中比较重要的部分,在seo 网站优化中发挥了重要的作用,一个良好的导航系统不仅对搜索引擎友好,还会给用户带来很大的便利,所以面包屑导航应是我们关注的重点。