面包屑_面包屑的家常用法 - CSDN
精华内容
参与话题
  • 面包屑导航通常在设计和开发过程中被忽略。 有些人可能认为它没有必要,而另一些人可能觉得它的价值太大了。 事实是,面包屑导航将显着提高网站的可用性。 面包屑为用户提供了另一种导航方法,使他们可以看到他们...

    面包屑导航通常在设计和开发过程中被忽略。 有些人可能认为它是不必要的,而另一些人可能觉得它的价值太大了。 事实是,面包屑导航将显着提高网站的可用性。

    面包屑为用户提供了另一种导航方法,使他们可以看到他们在网站层次结构中所处的位置,并且可以减少导航到网站更高级别所需的步骤数。

    本文概述了当今使用的不同类型的面包屑导航,它们为何必不可少以及如何最好地在网上实现。 这里还包括30多个示例,这些示例说明了今天如何在线使用面包屑

    请记住,虽然面包屑导航可能不会建立或破坏网站,但它会通过增加网站的整体可用性和功能为用户带来更多好处。

    面包屑类型

    路径

    基于路径的面包屑指示步骤或路径; 用户已经进入了网站的当前页面。 此外,用户将看到指向他们先前访问过的页面的链接,以访问当前页面。

    在三种面包屑导航中,基于路径的面包屑导航在网上最不流行。 原因是,基于路径的面包屑导航提供了与浏览器上的“前进”和“后退”按钮相似的功能。

    对于大多数网站,基于位置和基于属性的面包屑导航提供了更好的功能。

    位置

    基于位置的面包屑向用户指示当前页面在网站层次结构中所处的位置。

    这种面包屑导航最常见于深度或内容超过两个级别的网站。

    在进一步进入网站时,将为用户提供指向页面或类别的链接,这些页面或类别充当当前正在查看的页面的“父级”或上级。 例如,用户可能在“讲话”页面上。

    但是,“我们做什么”页面是“说”页面的父项,而“主页”页面是“我们做什么”页面的父项。

    明左有限公司
    属性

    基于属性的面包屑向用户指示归因于网站内当前页面的属性或类别。

    通常在电子商务网站上可以看到,产品不仅可以归为一类,还可以归为特定属性。

    例如,可以将车辆归类为SUV,然后具有黑色属性并在2016年发布。

    Cars.com

    为什么要使用面包屑?

    极好的可用性

    面包屑提供了一种额外的方式,使用户可以轻松浏览网站。 如果用户从另一个来源登陆到您网站的内部页面上,则面包屑将使用户确切地看到他们在网站层次结构中所处的位置。

    还使用户有机会在任何给定时间轻松升级到更高级别的网站。

    容易回溯

    主要导航并非设计为向后跟随面包屑。 由于回溯在网上非常流行,因此提供一些额外的帮助可能会很长的路要走。

    消除额外的点击

    面包屑允许用户从网站的上一层跳到下一层,而无需使用浏览器上的“前进”或“后退”按钮。 此外,面包屑消除了用户持续使用主导航的需求。

    显示用户层次结构

    网站的主要导航不会反映网站中每个页面的层次结构。 为用户提供面包屑将使他们能够看到网站中页面的层次结构。

    视觉上令人愉悦

    面包屑不仅为用户提供了更多的可用性,而且他们这样做也不会占用页面上太多的空间。 面包屑易于在您的网站的视觉设计中实现,并为用户带来极大的好处。

    提供其他H = help

    某些用户完全可能不了解网站的主要导航是如何工作的,并且在某些情况下,用户甚至可能不知道他们在寻找什么。

    为用户提供面包屑将使他们能够看到网站的整体进度和结构,从而使他们能够更好地浏览网站。

    较低的跳出率

    通常,面包屑将提供比主导航更详细的导航。 这样,将为用户提供有关如何浏览网站的更多选项。 让他们快速回溯网站中的几个级别将降低跳出率。

    引起兴趣

    当用户登陆网站的内部页面时,很可能他们已经在感兴趣的页面上了。 面包屑可能会提供指向其他页面和用户也感兴趣的信息的链接,而无需使它们从第一个方框开始。

    面包屑最佳做法

    在页面顶部使用面包屑

    面包屑最常见和本能的放置在页面顶部。 这允许用户以简单的方式找到面包屑并相应地使用它们。

    始终使用面包屑

    如果您决定使用面包屑,请确保在整个网站上使用它们。 在某些页面上为用户提供面包屑,而在其他页面上不会仅使它们感到困惑和沮丧。

    面包屑应温和降解

    面包屑应始终从首页开始,然后降级到当前页面。 这样,您的面包屑需要一次从最高级别到最低级别。

    适当化面包屑

    您希望看到面包屑; 但是,您不希望它们成为焦点。 您还想使面包屑不是页面主要内容的一部分,而只是页面的附加支持。 寻找一个令人愉悦的媒介,使您的面包屑引人注目,但又不要太过分。

    清晰地分类页面

    如果您的网页分为两个或多个类别,则可能不希望在网站上使用面包屑。 试图将页面放在两个或多个类别下可能只会产生不清楚的面包屑并使用户困惑。 确保您的网站具有组织化的层次结构,并通过面包屑进行相应显示。

    分隔每个级别

    确保用户可以区分每个面包屑级别之间的差异。 级别之间最常见的分隔符大于character >

    其他合适的分隔符包括右双角引号 Ã??»斜杠 /箭头 âÂ??Â?? 如果使用纯文本字符,则只能使用一个。

    选出当前页面

    在面包屑列表的最后一项上使用其他样式,以确保它是当前正在查看的页面。 您可以通过使项目变为粗体 ,更改其颜色或强调它来实现此目的。

    不要将当前页面链接

    无需将面包屑列表的最后一项链接为链接,因为它是当前正在查看的页面。 在此处创建链接只会使用户感到困惑,尤其是当用户单击链接并且不会将其带到新页面时。

    不要将面包屑用作页面标题

    将面包屑列表的最后一项用作当前页面的标题无效。 如果您选择使用面包屑,请同时添加页面标题。

    面包屑不能替代主要导航

    面包屑仅用作主要导航的支持,切勿完全取代主要导航。 在使用面包屑导航之前,您应始终为用户提供主导航,以便用户可以从中导航网站。

    面包屑的例子

    Vitra Direct
    跋涉自行车
    伊利
    siteInspire
    米娅与玛姬
    Intridea
    人为设计
    乐声
    比利克
    SitePoint
    目标
    沃尔玛
    1-800花
    百思买
    亚马逊网
    谷仓与贵族
    天涯海角
    苹果
    谷歌
    追
    AbsolutePunk.net
    利特曼兄弟照明
    Guardian.co.uk
    17区
    乌富
    田纳西州中部女童子军
    格拉斯哥集体
    长子
    贝尔加拿大
    Grooveshark
    lo

    编者注:这篇文章是Shay Howe为Hongkiat.com撰写的。 Shay Howe是一位专业的网络和用户界面设计师,目前居住在伊利诺伊州芝加哥。 他在letscounthedays的自己的博客中撰写有关Web设计的文章。


    翻译自: https://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/

    展开全文
  • 什么是面包屑及其优点

    千次阅读 2013-08-06 16:53:15
    它是一种线性的导航方式,是一种“历史记录”的应用方式,目的是帮助你追溯来路(在网页的应用中,“追溯来路”这件事浏览器已经很OK了)现在变成用来表达内容归属关系的界面元素。 我们经常看到的“主分类>一级分类...

    它是一种线性的导航方式,是一种“历史记录”的应用方式,目的是帮助你追溯来路(在网页的应用中,“追溯来路”这件事浏览器已经很OK了)现在变成用来表达内容归属关系的界面元素。 我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的方式。

    但是一般正常的来讲目录结构由3层结构组成。分别是首页>栏目页>内容页。

    合理的构建目录结构可以让用户随时随地的找到自己所在的位置又能保证栏目分类后的各个栏目的权重不至于太分散。

    一般用户3次内无法找到想要的信息就会离开,所以3层目录结构也是浏览体验的需要。

    目的:

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

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

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

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

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

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

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

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

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

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

     

    转载:http://wenwen.soso.com/z/q422039902.htm

     

    :)补充:在知乎查到关于面包屑和导航的区别,具体:

    准确来说
    面包屑导航只是导航条中的其中一种  不能把导航条叫做面包屑
    比如知乎顶部右侧的  首页 领域 通知 就是个导航条 他们不能叫面包屑
    同样底部也有  知乎阅读发现知乎指南建议反馈知乎协议   这个页脚导航条  也不是面包屑
    面包屑导航一般要有一定的所属和包含关系    能反映网站的结构和目录层次

    转载:http://www.zhihu.com/question/20231400

    展开全文
  • 面包屑的由来

    千次阅读 2013-08-06 16:46:54
    面包屑导航(Breadcrumb Navigation)的概念来自于格林童话"汉赛尔与格莱特",我们先来看一下这个童话故事,看完后或许你就能明白什么是网站面包屑导航,以及为什么网站面包屑导航对于SEO和用户体验有非常重要的作用了...

    具体来历见下面:    

    面包屑导航(Breadcrumb Navigation)的概念来自于格林童话"汉赛尔与格莱特",我们先来看一下这个童话故事,看完后或许你就能明白什么是网站面包屑导航,以及为什么网站面包屑导航对于SEO和用户体验有非常重要的作用了。

          故事大意是这样的:在大森林的边上,住着一个贫穷的樵夫,他的两个孩子--汉赛尔与格莱特还有他们的继母。由于生活贫穷,继母打算把两个孩子带到森林深处,然后借口去干活,偷偷走掉,把他们丢在森林里。但是汉赛尔无意中知道了继母的计划,于是他偷偷的在沿路洒下东西,帮助自己找到回家的路。第一次他是用闪闪发光的石子,顺利找到了回家的路;第二次时由于没办法出去捡石子,只好以面包屑代替。但是当他们想按照面包屑的指引回家时,却发现却怎么也找不到一点面包屑了,原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。故事到此并未结束,但和我们面包屑的故事已无关系,如果您对结局感兴趣的话,可以百度一下。

          在童话中,当汉赛尔与格莱特穿过森林时,他们在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路,这是一种“历史记录”的应用方式,目的是帮助你追溯来路。在浏览器中已经包含了追溯来路的功能,所以,在网页应用中面包屑导航来表达内容归属关系,作用是告诉访问者他们目前在网站中的位置以及如何返回。较典型的面包屑导航如下所示:

          面包屑导航

          最右端的地址为当前浏览页,最左端的为起始页面,这种结构使得用户对于所访问页的层次结构一目了然。面包屑导航不仅可改善网站的实用性,同时亦可提高网站对搜索引擎的友好性。访客使用面包屑导航可以快速返回上层目录,查看其它需要的内容。在许多关于网站用户使用体验的调查报告中也得出,如果超过3次点击,访客还没有找到需要的信息,那么有大约80%的访客会离开网站。这一点对搜索引擎来说也不例外。提供良好的返回导航连接可帮助搜索引擎更好地检索整个网站。而且,“面包屑型”导航连接中的锚文本还可以增进链接页的权重。

          对于SEO来讲,面包屑型导航是一个非常实用的功能,同时也提供了友好的用户体验,所以大家可不要把面包屑弄丢了,找不到回家的路啊!

    向左转|向右转

    转载:http://zhidao.baidu.com/question/204481509.html

    展开全文
  • 面包屑

    2018-11-28 21:35:08
    //service层 通过ParentId父类id查找子类 public List<TbItemCat> findByParentId(Long parentId); @Override  public List<TbItemCat&... TbItemCatExample exampl...


    //service层  通过ParentId父类id查找子类

    public List<TbItemCat> findByParentId(Long parentId);

    @Override
        public List<TbItemCat> findByParentId(Long parentId) {
            TbItemCatExample example=new TbItemCatExample();
            Criteria criteria = example.createCriteria();
            criteria.andParentIdEqualTo(parentId);
            return itemCatMapper.selectByExample(example);
        }
        
        
    //Controller层

    @RequestMapping("/findByParentId")
        public List<TbItemCat> findByParentId(Long parentId){
            return itemCatService.findByParentId(parentId);
        }
        
    //前端js  不分页

    //service
    app.service('itemCatService',function($http){

    //根据上级分类查询商品分类列表
        this.findByParentId=function(parentId){
            return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
        }
    }    


     //控制层 
    app.controller('itemCatController' ,function($scope,$controller   ,itemCatService){    


            $controller('baseController',{$scope:$scope});//继承分页控件和多选框 可不继承此功能不需要


    //根据上级分类ID查询列表
        $scope.findByParentId=function(parentId){
            itemCatService.findByParentId(parentId).success(
                function(response){
                    $scope.list=response;                
                }
            );        
        }
        
        $scope.grade=1;//当前级别
        //设置级别 
        $scope.setGrade=function(value){
            $scope.grade=value;
        }
        
        
        $scope.selectList=function(p_entity){
            //alert($scope.grade);
            
            if($scope.grade==1){
                $scope.entity_1=null;
                $scope.entity_2=null;
            }
            if($scope.grade==2){
                
                $scope.entity_1=p_entity;
                $scope.entity_2=null;
            }
            if($scope.grade==3){
                $scope.entity_2=p_entity;
            }
            
            $scope.findByParentId(p_entity.id);
            
        }
    }


    //页面导包
        <script type="text/javascript" src="../js/base.js"></script>
        <script type="text/javascript" src="../js/service/itemCatService.js"></script>
        <script type="text/javascript" src="../js/controller/baseController.js"></script>
        <script type="text/javascript" src="../js/controller/itemCatController.js"></script>
        

    //初始化 findByParentId(0)  查询最顶端的数据  得到第一页的数据
    <body class="hold-transition skin-red sidebar-mini" 
       ng-app="pinyougou" ng-controller="itemCatController" ng-init="findByParentId(0)">    
       
       
    //   页面遍历集合

                <tbody>
                 <tr ng-repeat="entity in list">
                     <td><input  type="checkbox" ></td>                                          
                     <td>{{entity.id}}</td>
                     <td>{{entity.name}}</td>                                        
                     <td>{{entity.typeId}}</td>                                          
                        <td class="text-center">
                         <span ng-if="grade!=3">
                          <button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button>                               
                         </span>                                             
                                                                
                         <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
                                              </td>
                                          </tr>
                                          
                                      </tbody>
                                      
                                      
    //面包屑导航栏 
                           <div class="box-body">
                                   <ol class="breadcrumb">
                            <li>
                                <a href="#" ng-click="grade=1;selectList({id:0})">顶级分类列表</a>
                            </li>
                            <li>
                                <a href="#" ng-click="grade=2;selectList(entity_1)">{{entity_1.name}}</a>
                            </li>
                            <li>
                                <a href="#" ng-click="grade=3;selectList(entity_2)" >{{entity_2.name}}</a>
                            </li>
                                 </ol>

                            <!-- 数据表格 -->
                            <div class="table-box">                


    //最后一级不现实下一页按钮 套入 ng-if="grade!=3"

      <span ng-if="grade!=3">
         <button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button>                               
        </span>                    


    //思维逻辑分析

        商品分类功能
        树形结构表:id,pid,name,其它
            展示数据的时候,分层展示,用的是查询上级ID的方式进行查询数据。
            
        三级分类:面包屑  
        
        首先需要两个对象 封装通过查询方法得到的父类
        和一个页面级别栏
        
            entity_1
            entity_2
            grade
            
            if(grade == 1){
                entity_1 =null;
                entity_2 =null;
            }else if(grade == 2){  // obj={id:123,name:电视}
                entity_1 =obj;//当前点的对象;
                entity_2 =null;
            }else if(grade == 3){  // obj={id:234,name:液晶电视}
                entity_2 =obj;//当前点的对象;
            }
            页面展示的时候
            固定的顶级分类 / entity_1 / entity_2
            
            entity_2==null?entity_1==null?"0":entity_1.id:entity_2.id
            if(entity_2==null){
                if(entity_1==null){
                    return 0;
                }else{
                    return entity_1.id;
                }
            }else{
                return entity_2.id;
            }
        第二种方法:把面包屑看一个集合,只要集合是对的,面包屑就是对的
            $scope.mbx=[{id:0,name:"顶级分类列表"}];
            $scope.findNextLevel=function(obj){
                //查询下级数据-用obj.id进行查询下级
                //展示面包屑
                if($scope.mbx.length<3){
                    $scope.mbx.push(obj);
                }
            }
            mbx.length = $index;
            上级ID
            return $scope.mbx[$scope.mbx.length-1].id;
        删除:物理删除和逻辑删除
            物理删除:从数据库里清除,从硬盘删除。
            逻辑删除:给数据加一个删除状态。在查询的时候永远查询不出来了。    
                                      

    展开全文
  • 面包屑的实现

    2019-09-07 23:56:51
    一、效果图 二、后台实现(通过父id查找) 2-1控制层 /** * 根据上级ID查询商品分类列表 * @param parentId * @return */ ...@RequestMapping("/findByParentId.do") ...public List&l...
  • 面包屑展示

    2019-07-26 19:41:05
    面包屑: 1.分析 面包屑是可长可短,所以我们选择用集合来存储面包屑信息。 当查询下级的时候,要添加面包屑。 当点面包屑,要展示所点击的面包屑下级数据,并且,面包只显示到当前层级。要结面包屑集合的数据进行...
  • 面包屑导航----递归生成

    千次阅读 2017-02-22 09:20:20
    1.首先理解什么是面包屑导航 可以看到面包屑的其实就是当前观看文章的所有上级分类一个简单的分类表一般由id name pid 组成所以是可以通过递归查询的 以下代码是基于thinkphppublic function class($id){ $res=...
  • 面包屑的用法

    2019-07-28 18:46:52
    面包屑是可长可短,所以我们选择用集合来存储面包屑信息。 当查询下级的时候,要添加面包屑。 当点面包屑,要展示所点击的面包屑下级数据,并且,面包只显示到当前层级。 要结面包屑集合的数据进行删除。 !...
  • css面包屑实例

    2019-01-02 13:47:34
    面包屑实例 inline兼容IE7 inline-block最低只能兼容至IE8 代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...
  • HTML+CSS面包屑导航整理

    千次阅读 2018-06-06 17:57:41
    原文地址随着Web技术越来越先进,浏览器更新换代也很快,在国内很多网站已经有使用css3和html5的技术了,所以我们也应该多学习这些新知识,...漂亮面包屑导航查看网站扁平化面包屑导航查看网站圆形风格面包屑导航查...
  • 你真的会用面包屑导航吗?

    万次阅读 2016-08-29 14:53:17
    面包屑导航是一个次级导航系统,可以展示用户在网站或应用中的位置。这个术语来源于童话《糖果屋》,故事中的主人公在森林里用面包屑做标记来防止迷路。 类似于故事里的主人公,用户需要知道他们在网站层级...
  • 面包屑设计

    万次阅读 热门讨论 2009-07-16 13:34:00
    什么是面包屑 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。 最常见的面包屑的样式是:横向的文字链接,由大于号“>”...
  • spring boot 与 iview 前后端分离架构之首页面包屑的实现(二十一)首页面包屑 首页面包屑 前面二十章我们已经基本实现了前端的几个大模块的整合开发,但是在细节部分我们还是有缺失的,比如我们的面包屑、左侧菜单...
  • VUE+elementui面包屑实现动态路由

    万次阅读 2018-09-12 09:05:26
    我的路由: const routerMap = [ { path: '/', redirect: 'dashboard', component: Layout, name:'Dashboard', children: [ { path: 'dashb...
  • 面包屑导航栏就是类似于这样的导航栏: 主页 > 博客 > 移动专栏 > 发表博文 大致有一下几点好处: 1.面包屑作为用户寻找路径的一种辅助手段,能方便他们定位和导航。 2.面包屑可以减少的用户返回上一级页面的...
  • 面包屑导航:最佳实践和范例

    千次阅读 2012-12-16 10:40:55
    译文出处:http://www.cogu.cn/archives/65 本文翻译自:... 作者 Hongkiat Lim.... 面包屑导航条在设计开发过程中常被怱视 有些人会觉得它毫无必要,也有些人觉得它带
  • 语法糖(Syntactic sugar)是由Peter J. Landin(和图灵一样的天才人物,是他最先发现了Lambda演算,由此而创立了函数式编程)创造的一个词语,它意指那些没有给计算机语言添加新功能,而只是对人类来说更“甜蜜”的语法...
  • jQuery面包屑型导航插件 - JCrumb

    千次阅读 2012-04-08 20:30:32
    近来开始学习jquery,今天学习了jquery的面包屑导航菜单插件JCrumb,现和大家分享: JCrumb是一个轻量级的jQuery插件,经压缩后只有2kb大小。JCrumb能让你轻松的在任意页面上创建面包屑导航路径,可定制性也很...
  • 最近在做一个功能,需要完成一个面包屑导航,实现动态显示当前位置,大神们求帮助![图片说明](https://img-ask.csdn.net/upload/201703/28/1490686398_151332.png)
  • 什么是面包屑导航 一般页面内容上方都会有一个路径导航,这个导航就是面包屑导航。例如: 上面这个图表示我们当前的页面是Breadcrumb面包屑,上一级目录是组件页面,再上一级目录是Element UI页面。当我们点击这些...
1 2 3 4 5 ... 20
收藏数 9,501
精华内容 3,800
关键字:

面包屑