面包屑导航详解


Posted in Javascript onDecember 07, 2017

关于网站上的面包屑导航很多朋友不知道为什么这么叫。顾名思义,面包屑挺巧就是琐碎的意思,一点点的形状,这就代表我们的网站导航中,那些不在主导航上,其他辅助性琐碎的导航就叫面包屑导航了。

首先我们来看看面包屑导航的作用:

1、让用户了解当前所处位置,以及当前页面在整个网站中的位置。

2、体现了网站的架构层级,能够帮助用户快速学习和了解网站内容和组织方式,从而形成很好的位置感

3、提供返回各个层级的快速入口,方便用户操作。

4、Google已经将面包屑导航整合到搜索结果里面,因此优化面包屑导航每个层级的名称,多使用关键字,都可以实现SEO优化。面包屑路径,对于提高用户体验来说,是很有帮助的。

5、方便用户,面包屑主要用于为用户提供导航一个网站的次要方法,通过为一个大型多级网站的所有页面提供面包屑路径,用户可以更容易的定位到上一次目录,引导用户通行;

6、减少返回到上一级页面的点击或操作,不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面;

7、不用常常占用屏幕空间,因为它们通常是水平排列以及简单的样式,面包屑路径不会占用页面太多的空间。这样的好处是,从内容过载方面来说,他们几乎没有任何负面影响;

8、降低跳出率,面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说,一个用户通过谷歌搜索到一个页面,然后看到一个面包屑路径,这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样,从而,可以降低网站的总体跳出率。

9、有利于百度蜘蛛对网站的抓取,蜘蛛直接沿着那个链走就可以了,很方便。

10、面包屑有利于网站内链的建设,用面包屑大大增加了网站的内部连接,提高用户体验。

什么时候应该用面包屑导航?

评价一个网站是否适合于使用面包屑导航的最好方法便是将网站的结构画出来或者以图表的形式呈现出来,然后分析使用面包屑导航是否会帮助用户更方便地切换到不同类的网页。

什么时候用:你的网站结构是严格的线性结构或者是预先分好组(类)的层级结构。比如电商网站的结构就是层级结构,包含了按类别分好组的大量商品页面。

什么时候别用:你的网站结构是单层或者不是分好组(类)的层级结构。

面包屑导航正在变得越来越实用

作为一个高效的视觉辅助工具,面包屑导航暗示了用户在网站层级结构中的位置。对用户来说,面包屑导航包含了大量的信息,可以帮助他们解答以下问题:

1、我在哪? 面包屑导航明确地告诉用户他们的位置。

2、我接下来可以去哪? 面包屑可以使用户更加方便地查找网页。比起放在菜单里,放在面包屑导航中的网站结构更容易被用户所理解。

3、我应该去这里吗?面包屑导航可以暗示用户网页内容的价值从而引起他们继续浏览的兴趣。比如在一个电商网站中,用户可能对当前访问的这个商品不满意,但是他还想看看同类的其他商品,这时候面包屑导航就可以告诉用户同类产品的链接。这样可以很好地降低用户的流失率。

面包屑导航具有以下优点:

减少不必要的步骤

面包屑导航最实用的一点便是可以帮助用户更快地访问上级网页,无需借助浏览器的“返回”按钮和顶级导航栏。

占用空间少

面包屑导航仅由文本和链接组成的一行内容构成,因此占用的页面空间非常小。这样的好处是当内容过载时它的功能也不会受到影响。

用户体验很好

用户可能会忽略这个小控件,但是他们从来不会误解或在使用上遇到问题。

面包屑导航的分类

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

基于位置的面包屑导航

基于位置的面包屑导航可以表示网站的结构。它可以帮助用户理解并访问你的网站各个层级的内容。这种面包屑导航对于那些从外部(如搜索引擎)直接访问深层位置的用户来说尤为重要。

面包屑导航详解

在下面这个例子(BestBuy网站)中,每一个链接都代表一个页面,从左至右逐级深入。

面包屑导航详解

基于路径的面包屑导航

基于路径的面包屑导航展示了用户访问的完整轨迹。这种面包屑导航通常是动态生成的。有时候它们会有帮助,但是多数情况下它们会让用户感到困惑。用户通常会在各个页面之间跳来跳去,这时候记录下来的路径就会非常复杂,还不如浏览器的“返回”按钮更加实用。而且,对于从外部直接访问的用户来说基于路径的面包屑导航就完全没用了。

下图是一个基于路径的面包屑导航,展示了到达相同页面的不同路径。

面包屑导航详解

基于属性的面包屑导航

基于属性的面包屑导航会将特定页面的类别列出来。比如电商网站就会列出来常用商品分类。这种面包屑导航可以帮助用户了解产品之间的联系,同时提供了不同的访问方式。

面包屑导航详解

如下图所示,在TM Lewin网站中,面包屑导航展示了商品的不同属性

面包屑导航详解

我应该用哪个?

使用面包屑导航的原则是展示网站的结构而不是用户的访问历史。因此,尽量使用基于位置和属性的面包屑导航而不是基于路径的。

最佳实践

使用面包屑导航的时候需要注意以下几点:

不要用面包屑导航来替代顶级导航

我们应该将面包屑导航视为一项附加功能,不能用它来替代高效的顶级导航菜单。它很方便,但是仅仅作为访问网站的一个备选方式,而不是唯一方式。下图的例子是苹果的官网,在页面底部添加的面包屑导航对顶级导航起到了辅助的效果

面包屑导航详解

不要给当前页面的导航文字添加链接

面包屑导航的最后一项可以表示当前页面也可以表示当前页面的上一级。如果你想用当前页面的话,切记不要给这个项目添加链接,因为用户已经处于这个页面了,再添加指向当前页面的链接是没有任何意义的。

使用分隔符

面包屑导航中最简洁明了的分隔符便是大于号“>”。通常大于号用于基于位置的面包屑导航,以“父类>子类”的形式表示导航项目之间的层级关系。除了大于号以外还可以用向右箭头“→”,双大于号”>>”和斜线”/”。到底使用哪个取决于导航的类别和视觉效果。

面包屑导航详解面包屑导航详解

设置合适的大小和padding属性

在设计的时候要谨慎考虑导航菜单的大小和padding属性。在每一个项目之间必须有充足的间隔,否则用户理解起来会有问题。同时你希望面包屑导航不会抢了其他主要部分的风头,因此你需要让它看起来比顶级导航要低等一些。

不要让它们看起来很突出

不要使用花哨的字体和亮色,这样会违背使用面包屑导航的初衷。设计面包屑导航的原则是它不能是页面加载后最吸引用户的内容。下面这个例子中的面包屑导航虽然效果不差,但是太吸引用户的目光,可能会分散用户的注意力,使其更加关注面包屑导航而不是顶级导航和页面的主要内容。

面包屑导航详解

谷歌就没有让面包屑导航很显眼,但是用户可以很方便地发现并使用它。

面包屑导航详解

不要在移动端网站上使用

面包屑导航在移动端的体验并不好,尤其是在层级比较复杂的网站中。而且,你会发现在在移动端上设计面包屑导航会遇到很多问题。因此,你需要尽可能地简化你的网站结构,如果简化之后仍较为复杂,那么最好就不要用面包屑导航,毕竟它不是主要功能。

结语

面包屑导航的宗旨是让用户可以更方便地访问你的网站。它看似简单,但却可以很好地优化用户体验,增加用户粘性。

 以上就是我们针对网站中面包屑导航做的详细总结,如果大家还有任何不明白的地方可以在下方留言讨论。

Javascript 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
谈谈JS中的!!
Dec 07 #Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 #Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 #Javascript
jquery学习笔记之无new构建详解
Dec 07 #jQuery
利用Node.js检测端口是否被占用的方法
Dec 07 #Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 #Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 #Javascript
You might like
很实用的一个完整email发送程序
2006/10/09 PHP
PHP简洁函数小结
2011/08/12 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python实现停车管理系统
2018/11/30 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
英国网上花店:Bunches
2016/11/29 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
应届毕业生应聘自荐信范文
2014/02/26 职场文书
企业文化宣传标语
2014/06/09 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
python随机打印成绩排名表
2021/06/23 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技