广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >web开发如何实现面包屑导航
  • 952
分享到

web开发如何实现面包屑导航

web开发 2022-10-19 08:10:31 952人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关web开发如何实现面包屑导航的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。首先我们来看看面包屑导航的作用:1、让用户了解当前所处位置,以及当前页面在整个

这篇文章给大家分享的是有关web开发如何实现面包屑导航的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

减少不必要的步骤

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

占用空间少

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

用户体验很好

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

面包屑导航的分类

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

基于位置的面包屑导航

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


web开发如何实现面包屑导航

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

web开发如何实现面包屑导航

基于路径的面包屑导航

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

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


web开发如何实现面包屑导航

基于属性的面包屑导航

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

web开发如何实现面包屑导航

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


web开发如何实现面包屑导航

我应该用哪个?

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

最佳实践

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

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

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


web开发如何实现面包屑导航

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

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

使用分隔符

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


web开发如何实现面包屑导航web开发如何实现面包屑导航

设置合适的大小和padding属性

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

不要让它们看起来很突出

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

web开发如何实现面包屑导航

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

web开发如何实现面包屑导航

不要在移动端网站上使用

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

感谢各位的阅读!关于“WEB开发如何实现面包屑导航”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: web开发如何实现面包屑导航

本文链接: https://www.lsjlt.com/news/78924.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • web开发如何实现面包屑导航
    这篇文章给大家分享的是有关web开发如何实现面包屑导航的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。首先我们来看看面包屑导航的作用:1、让用户了解当前所处位置,以及当前页面在整个...
    99+
    2022-10-19
    web开发
  • css如何实现面包屑导航
    这篇文章主要介绍了css如何实现面包屑导航,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   居中分页   如果要让分页居中,可以在容器...
    99+
    2022-10-19
    css
  • Vue2+element-ui实现面包屑导航
    本文实例为大家分享了Vue2+element-ui实现面包屑导航的具体代码,供大家参考,具体内容如下 1、面包屑导航栏布局 代码: <template>     <...
    99+
    2022-11-13
    Vue2 elemen ui 面包屑导航
  • php怎么实现面包屑导航
    本文操作环境:windows10系统、php 7、thinkpad t480电脑。面包屑导航的作用是告诉访问者它们在网站中的位置以及如何返回。可能很多小伙伴对面包屑导航不太了解,其实它来自于一个童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿...
    99+
    2020-02-14
    php 面包屑 导航
  • vue实现动态面包屑导航
    本文实例为大家分享了vue实现动态面包屑导航的具体代码,供大家参考,具体内容如下 动态面包屑导航是根据路由中的matched获取到的单独提取出面包屑导航栏组件 <templat...
    99+
    2022-11-13
    vue动态面包屑导航 vue面包屑导航 vue动态导航
  • vue项目实现面包屑导航
    本文实例为大家分享了vue项目实现面包屑导航的具体代码,供大家参考,具体内容如下 安装依赖 npm i vuex 创建 tagView.vue <template>  ...
    99+
    2022-11-13
    vue 面包屑导航
  • CSS3如何实现圆形风格面包屑导航
    小编给大家分享一下CSS3如何实现圆形风格面包屑导航,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!<html><...
    99+
    2022-10-19
    css3
  • vue项目怎么实现面包屑导航
    这篇文章主要介绍“vue项目怎么实现面包屑导航”,在日常操作中,相信很多人在vue项目怎么实现面包屑导航问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目怎么实现面包屑导航”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-30
  • Bootstrap中如何添加面包屑导航
    这篇文章主要讲解了“Bootstrap中如何添加面包屑导航”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Bootstrap中如何添加面包屑导航”吧!1 面包...
    99+
    2022-10-19
    bootstrap
  • css如何使用伪元素:before实现的面包屑导航栏
    小编给大家分享一下css如何使用伪元素:before实现的面包屑导航栏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!伪元素:be...
    99+
    2022-10-19
    css before
  • 如何利用React高阶组件实现一个面包屑导航
    本篇内容介绍了“如何利用React高阶组件实现一个面包屑导航”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是 react 高阶组件rea...
    99+
    2023-06-05
  • React高阶组件如何创建一个面包屑导航
    这篇文章主要介绍“React高阶组件如何创建一个面包屑导航”,在日常操作中,相信很多人在React高阶组件如何创建一个面包屑导航问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React高阶组件如何创建一个面包...
    99+
    2023-07-04
  • ASP.NET Web开发框架怎么实现功能导航
    本篇内容主要讲解“ASP.NET Web开发框架怎么实现功能导航”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ASP.NET Web开发框架怎么实现功能导航”吧!功能导航主要解决如何布局功能,把...
    99+
    2023-06-17
  • vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能
    目录0 前言1 准备工作1.1 安装ant-design-vue1.2 安装图标组件包2 选择组件3 路由文件4 Vue导航页面5 最终效果0 前言   &nbs...
    99+
    2023-01-29
    vue3使用ant-design-vue实现动态导航栏 vue3使用ant-design-vue
  • web开发中如何制作一级导航栏
    这篇文章将为大家详细讲解有关web开发中如何制作一级导航栏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。第一步:引入css样式表,新建一个id为nav的层,使用<u...
    99+
    2022-10-19
    web开发
  • 小程序开发中怎么实现九宫格界面的导航
    这篇文章将为大家详细讲解有关小程序开发中怎么实现九宫格界面的导航,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先来考虑九宫格数据的生成,每一个格子需要有一个图标、一个标...
    99+
    2022-10-19
    微信小程序
  • android开发中如何实现一个定位与目的地导航功能
    本篇文章为大家展示了android开发中如何实现一个定位与目的地导航功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。效果:        ...
    99+
    2023-05-31
    android roi
  • React Router 5.1.0如何使用useHistory实现页面跳转导航
    React Router 5.1.0如何使用useHistory实现页面跳转导航,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1.使用withRouter组件withRou...
    99+
    2023-06-25
  • js如何实现点击导航栏切换页面功能
    可以使用 JavaScript 来实现点击导航栏切换页面的功能。下面是一个简单的示例:首先,在 HTML 中创建导航栏和对应的页面内...
    99+
    2023-08-08
    js
  • web开发中如何实现水印
    这篇文章主要为大家展示了“web开发中如何实现水印”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“web开发中如何实现水印”这篇文章吧。分析问题首先,考虑到业务场...
    99+
    2022-10-19
    web开发
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作