网站导航
WAP 网站

手机网站中面包屑导航是否有存在的必要?

关注者
208
被浏览
31,936

10 个回答

最近正好关注了一下面包屑导航的问题,试着回答一下。

先说结论:绝大多数手机网站中面包屑导航没有存在的必要。


一、需求分析

1.面包屑导航是什么,有什么作用?

  • 面包屑是一种“历史记录”的应用方式,作用是帮助追溯来路、告诉访问者他们目前在网站中的位置,以及如何返回。
  • 面包屑导航是一种线性的导航方式,显示方式是“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样。
  • 面包屑导航是判断页面在整个网站结构中的位置的最好方法。它能诱惑首次访问者在进入一个页面后去浏览整个网站,降低网站的总体跳出率;增加网站的内部链接,提高用户体验。

2..用户在什么情况下需要用面包屑导航?

  • 网站层级较多(3层及以上),内容庞杂。主导航展示能力不足或者使用不便,无法满足指引用户的需求。
  • 用户不熟悉网站,他们需要直观清晰地了解目前所处的位置,以及当前页面在整个网站中的位置、怎么回来。比如工信部官网有大量的新用户访问。
  • 用户有读完某一页面的下级页面的需求。比如学生依次阅读重要的学校官网通知。


  • 用户回到上一层级比较麻烦。比如容易误操作、回退步骤多、缺乏上级页面的快捷入口、或者用户自身操作不便。

3.面包屑导航适合哪些网站使用?

  • 面包屑导航适用于层级较深的网站,如果只有一级分类的话,通过主导航就已经能够起到快速定位的作用,扁平型架构的网站就没有使用面包屑导航的必要。
  • 由于面包屑导航路径是线性结构的,即下一级分类必定只属于上一级分类,因此网站内容必须划分得非常清晰,且不存在交叉。否则,面包屑导航的路径是不唯一的,同一个分类可能出现在不同的路径中,让用户感到困惑。
  • 目前常见的该结构网站包括门户类、电子商务类等层级较深,且内容的组织分类逻辑性强,独立不交叉的网站。

如图,淘宝的二级页面没有面包屑,新浪在进入财经频道后开始面包屑导航。


如图,新浪房产和新浪体育在UI上有较大的区别,用户很少会感到困惑。


从用户需求的角度来讲,大多数WAP站都没有必要添加面包屑导航。

  • 在PC端,使用面包屑导航的主要是新闻网站、电商网站、官方网站。但是新闻网站和电商网站的趋势是变得更加“频道化”。为了将网站的纵深控制在三四个页面,分别做不同主题的垂直网站。
  • 例如淘宝会将用户分流到全球购、天猫超市、淘宝美妆等二级网站,而这些二级页面和淘宝主站并不是非常紧密的连接;新浪也将用户分流到新浪财经、新浪新闻等网站,而不强调它们与门户的从属关系。事实上,它的每个子网站的界面都不同,采用不同的信息组织方式,更像是彼此独立的网站。
  • 在这种情况下,单一WAP站的层级自然变少了,不同的UI也提醒用户分别处在门户的不同频道,添加面包屑的需求也就减少了。

二、用户体验分析

1.用户在使用手机网站时有哪些习惯?

  • 时间更为碎片化。大多数时候,用户没精力系统阅览整个网站的信息架构,WAP站随之变得更为扁平化、垂直化
  • 浏览速度快,停留时间短。用户使用手机上WAP站时,他们的下滑操作是很机械的,要不断寻求新的视线着力点,而且只会把视线落在有实际内容的地方,导航作为辅助的功能一般退居其次。
  • 注意力不集中。对WAP站而言,页面内容是否吸引、是否有“爆点”更加重要。用户在使用手机时往往更容易丧失耐心,并且感受到冗余信息的困扰。所以应该留足页面内容的空间,并把有用的东西排列好,除掉其他一切冗杂信息。
  • 不停地被打断。用户随时被电话微信吸引走注意力,所以会倾向于使用简单粗暴的方式回退。跳出率有一个天花板,所以就更不应该让用户停顿和学习怎么使用,不要让他们困惑。

2. 其他的回溯方式是否具备足够的替代性?

  • 和手机返回键相比:比起使用面包屑导航,手机返回更方便、更深入人心。Android系统一般都给实体按键一个返回的功能,对用户而言,只要在Android手机上,这个按键无论何时都是退回上层的意思。而iOS系统下,页面左上角是预留的返回位置,沿用这种设计可以顺利地契合用户习惯。

  • 和浏览器返回按钮相比:浏览器返回更方便、更快捷,学习成本更低。 手机浏览器(包括app内嵌浏览器)都会有地址栏、收藏夹、返回键这些,在浏览WAP站页面的过程中,底栏的返回键和顶栏的地址一直存在,用户若要返回会首先使用浏览器的返回。

如图,百度和UC浏览器都在底栏放置了前进和后退按钮。

而微信的内嵌浏览器左上角有返回、关闭两个按钮;知乎的内嵌浏览器底栏有后退、前进两个按钮,同时页面左上角可以退出内嵌浏览器。


从用户体验的角度来讲,WAP站自身几乎没有必要添加面包屑导航。

  • 绝大多数WAP站都将配合手机浏览器或APP内嵌浏览器使用,而几乎所有的浏览器都会有很方便的回溯功能。
  • 随着大数据的发展,网页的推荐已经可以做到一定程度上贴近用户,用户更倾向于通过推荐内容扩展和接续阅读行为而非回溯。
  • 4G和Wi-Fi网络的发展已经大大提升移动网络的速度,用户的的阅读行为也随之变得更加任性而并非中规中矩地沿一条路线查看。

  • 社交网络和分享功能的兴盛让我们越来越难以预测用户是从何处进入某个WAP页面查看的,那么接续阅读最好的方法是基于人际互动的推荐(看过这篇文章的人也看过的、你的朋友也喜欢的、分享次数也很多的内容)而非回溯上级页面。
  • 无论如何,WAP站的主导航依然存在,iOS等系统已经可以做到轻触回到顶部主导航处,能比较快捷地满足用户导航的需求。

三、网页设计角度分析:

1.面包屑导航的设计原则与WAP站的设计原则有冲突

  • WAP站的页面宽度较低,在WAP站的设计规范中,对每行字数上限做了限定。现今大多数的网站一行字数上限为14个中文字符
  • 面包屑导航只能逐层降级,不可跳级,文字必须横排排列,且不可以省略字数和符号。一旦层级较多就很容易超限,但如果层级很少,又没必要使用面包屑。

  • 展示在手机屏幕的WAP站首屏页面非常珍贵,寸土寸金,应该把更多空间交给引爆用户的内容而不是辅助型的导航
  • 面包屑导航条只能出现在页面头部和尾部,但手机浏览器的上下部分已经预留了按键:头部有回退按钮,尾部有回退按钮或手机按键,所以面包屑导航条的必要性大大降低了

  • 面包屑导航需要持续使用,但只对三级页面有较大的意义,相对成本高
  • 面包屑导航不应该过于显眼,一般都比较小,但是手机字体本来就比较小,继续变小的话,点按会变得十分困难,太大又会占用过多的地方

2.不适合使用面包屑的WAP站:

  • 新闻类、电商类网站:目前多采用分频道的方式区分二级站点和主站,减少层级,努力做到结构上的扁平化
  • 社交类网站:结构一般都比较扁平,层次也比较清晰,功能点较少不需要指引
  • 知识类、生活类网站:一般使用站点地图来体现整个站点的结构,如同PC端一样,他们更注重展示与內容,较少采用面包屑

3.政府网站、官方网站:适合使用面包屑导航。

  • 查看政府网站和官方网站的人一般是新用户,不够了解该网站
  • 这些网站由于是 to B 的项目,其信息架构会受到乙方的较大干涉,会出现各不相同的状态,就更容易让用户感到困惑
  • 官网的内容量比较少而且稳定,并不会像媒体类、电商类网站有海量信息,也不像UGC网站有许多用户自拟的标签。WAP设计者可以对之保持较高的控制力,将层级保持在合理的范围内
  • 面包屑导航条利于搜索引擎优化,百度蜘蛛直接沿着导航链走就可以了,能更好地对网站内容进行抓取。而Google已经将面包屑导航整合到搜索结果里面,因此添加面包屑有利于官网的推广,对企业是有好处的

综上所述,除官方网站、政府网站之外,其他大多数WAP站没有必要添加面包屑导航。

编辑于 2016-12-02 08:25

面包屑导航不仅仅是给搜索蜘蛛看的,对用户也是有帮助,用户可以通过面包屑清晰知道当前页面所属频道

发布于 2011-07-11 14:51

手机网站中面包屑导航有没有存在的必要?这要看是什么类型的网站。现在很多功能性的网站都不用面包屑导航的结构了,因为网站简单,没有复杂的层级结构。但政府官网,尤其是品牌独立站这种网站,非常有必要使用面包屑导航。

面包屑导航的作用

从用户角度讲:

1、面包屑导航很清楚的告诉了用户所处的位置,为用户找到自己的目标网站页面提供了指引

2、便于用户了解网站的层次结构,进而浏览网站,提高用户体验

3、降低跳出率,通过面包屑导航,用户可以很容易地找到自己感兴趣的页面,从而大大地降低了网站整体的跳出率

从SEO角度讲:

1、提升收录:面包屑导航为网站理清了网站结构,有助于蜘蛛抓取到网站的各个页面,从而有助于网站整体的收录

2、传递权重:通过面包屑导航,层级越浅的页面,越重要的页面所占到的内链比重也越高,从而有利于权重的合理传递

3、促进关键词排名:关键词的排名一般都是通过内链的合理建设来提升的,而面包屑导航里面如果放入我们的目标关键词,则有助于目标关键词排名的提升

面包屑导航怎么用?

面包屑导航被当作一种有效的视觉救援,指引用户在网站层级中所处的位置。以上这些特性使得用户通过面包屑导航获取到一大部分承上启下的信息资源,并且帮助用户找到以下问题的答案:

我在哪儿?面包屑导航提醒浏览者他当前处于整个网站层级中具体位置。

我能去到哪里?面包屑导航能够提高用户对网站的章节和页面的搜寻能力,比起只是放置一个菜单,放置一排面包屑导航更容易让人理解网站的结构。

我将去哪里?面包屑导航能将内容进行关联,井且促进浏览(比如电商网站的用户可能进到一个商品详情页之后,发现这个商品并不是自己想要的,这个时候用户可能有意愿浏览同类的商品),同时,又反过来降低了整个网站的跳出率。

面包屑导航可用性设计指南

面包屑显示为页面顶部的链接,通常位于全局导航下方;主页(或层次结构的根节点)是第一个链接。

链接通常用符号“>”或“/”分隔,我们推荐使用“>”字符,尽管两者在功能上没有区别。

当用户跳过一些网站层级,比如点击外部链接(如搜索引擎结果到达网站),面包屑会引导并帮助他们找到通往其他更相关页面的路径。

https://mfdemo.cn 点击搜索查看更多

(一)在桌面上(PC端)使用面包屑导航的指南

1.面包屑不应取代全局导航栏或部分本地导航。

面包屑可以作为导航的有效补充,但是不能取代主要导航。可以采用下拉式菜单。更好的设计是为本地导航提供单独的Ul,以使用户能够访问站点当前部分的横向层级页面。

2.面包屑应该显示站点层次结构中的当前位置,而不是浏览历史记录。

面包屑并不用于显示用户在网站的页面浏览历史记录(例如浏览器的本机后退按钮);它们旨在显示站点的层次结构。

3.对于多层次站点,面包屑应显示站点多层次结构中的单一路径。

面包屑与多层次站点(其中一个页面有享个父级) 之间存在固有的紧张关系。在这种情况下,我们不建议两个或更多反映多层次结构中不同路径的面包屑路径,因为它们会混淆用户并在页面顶部占用大量空间。

如果一个页面有多个不同的父级,请在站点层次结构中标识到它的规范路径,并在面包屑路径中显示该路径。

4.包括当首页面作为面包屑路径中的最后一顶。

5.在面包屑路径中,当前页面对应的面包屑不应该是链接。

最后一个面包屑(表示当前页面) 不应该是链接。

为避免混淆用户,请在视觉上区分当前页面和前面键接的面包屑,最好使用下划线或蓝色文本。

6.面包屑应送只包含网站页面,而不是IA中的逻辑类别。

面包屑路径中的每个节点都应该是一个指向主页的链接。如果全局导航中的某些子类别标签没有专门的单独页面,请不要在面包屑路径中包含这些子类别。

“点击即走”能力是用户理解面包屑的关键部分,因此所有项目(当前页面除外)都应该代表用户可以去的地方。

7.对于具有仅 1-2层深的扁平结构站点或结构呈线性的站点,面包屑导航是非必需的。

8.面包屑路径应该以指向主页的链接开头。

(二)在移动设备上使用面包屑的指南

需要提出的是,在移动设备上,使用面包屑的成本很快就会超过收益。

9.不要使用包含多行的面包屑

在移动网站上,面包屑可以快速换成多行,并在已经拥挤的移动显示器上占用宝贵的空间。多行面包屑路径不能很好地说明链的结构。

10.不要使用太小或太拥挤的面包屑。

一些网站试图通过使链接更小或更靠近来减少面包屑占用的屏幕空间。不幸的是,此解决方案不适用手触摸屏:点击目标至少需要 1cm x 1cm。

11.考虑缩短面包屑路径以仅包含最后一个级别。

在某些页面上,指向一个级别的单个面包屑可能是支持主要用户目标所必需的。此解决方案避免了占用宝贵的移动空间的冗长、拥挤的面包屑路径。

请注意,此建议与准则 #8 冲突,井且只能在移动设备上完成。在桌面上一一有更多空间——总是显示完整的轨迹。

总结:一个小小的面包屑是最能体现网站用户体验的部分之一。电商网站的子页面数不胜数,而面包屑是指引用户的一盏明灯,由此可见面包屑导航对于用户浏览的重要性。


极简慕枫-Global,帮助更多创新型企业实现品牌全球化!

编辑于 2022-11-11 10:58

现在很多网站依然存在面包屑导航,但与几年前的出现形式不同,一般都是与比较“现代化”的导航(也就是一个导航bar上提供网站几个频道入口的那种导航)并存,为用户提供了快捷跳转到上一级和上上一级的入口。

面包屑不再作为主要的导航形式(手机站和PC站都是如此),有一个重要的原因是样式不好看,如果仔细去看的话可以发现一些热门网站(比如手机新浪网)依然有一点“面包屑”的影子的。除此之外,如果硬要说面包屑有什么缺点的话,应该是看起来不够“简单之美”吧

发布于 2014-07-20 14:46

什么是网站面包屑?

简单来说,网站面包屑的作用就是告诉访问者他们在网站中的位置以及如何返回。

网站面包屑有助于为网站访问者提供积极的用户体验,并加强搜索引擎的网站结构。

图片选自谷果信息官网https://www.googlesemseo.cn

网站面包屑导航会影响谷歌自然排名吗?

将面包屑添加到你的网站有助于Google等搜索引擎从层次结构的角度更好地理解你的内容,也可以帮助用户了解他们在你网站上的当前位置,对谷歌和用户都有好处。

图片选自谷果信息官网https://www.googlesemseo.cn

在Google首次将面包屑添加到搜索结果时,搜索引擎推出了关于如何在搜索结果中显示网站层次结构的增强功能。在更改之前,Google通常会在每个搜索结果的底部显示一个绿色网址或URL,以让用户知道他们要去哪里,之后绿色URL被替换为显示页面在网站上的精确位置的层次结构(AKA,面包屑)。

已经在导航中提供分层面包屑的网站受益于这一变化,因为它们的SERP列表与常规搜索结果不同。

正如AaronWall当时解释的那样:

“每个面包屑都是指向相关页面的可点击链接(在某些情况下,这可能会增加目标网站的访问量)……”

在随后的几年里,一些SEO专业人士开始推测面包屑导航链接可能是一个排名因素。

要了解面包屑导航作为排名因素的想法是如何产生的,重要的是要了解SEO专业人士是如何操作的。

在初期,面包屑不仅被视为简化网站导航的工具,而且还被视为需要优化的内部链接结构。

Google 的 Josh曾在他的文章“ Google对网站的看法:”中提供了这个提示:

“要创建最佳的面包屑链接过程,请确保你已将关键字策略与网站内容的信息架构一起应用。

你的URL结构应包括关键字丰富和内容相关的类别/文件夹命名约定,并确保网站内容属于适当的类别。”

不久后,Catfish Comstock将面包屑导航列为需要优化的 三个重要链接结构之一(还有全局导航模板和“替代链接”)。

Ethical SEO Consulting的Matt Green曾发表的一篇题​​为“ Breadcrumb Navigation Linksasan On-Page Optimization Factor ”的博客文章中提到了面包屑是SEO排名因素的观点。

“链接中使用的锚文本仍然是一个重要的排名因素,尽管谷歌最近的算法更新据报道削弱了它们的重要性。当网站上启用面包屑导航时,它会在网站的每个页面上创建锚文本链接,这些链接链接回网站的主页。这就是你如何使用面包屑链接作为目标关键字的积极排名因素。”

Google显示搜索结果的方式多年来一直在发展,但谷歌仍然在其SERP中加入面包屑,也建议网站所有者和开发人员实施面包屑导航。Google的约翰·穆勒在推特上还表示,谷歌使用面包屑进行爬行(查找内部链接)和丰富的结果(结构化数据)。

图片选自谷果信息官网https://www.googlesemseo.cn

综上所述,网站的面包屑有助于为访问者提供积极的用户体验,并加强网站的搜索引擎结构。此外,面包屑自然会建立更多的内部链接,从而将更多的PageRank推到这些页面。所以,从用户体验、可用性和SEO排名的角度来看, 谷果信息建议开发人员和网站所有者使用面包屑。

发布于 2022-03-30 21:59

试试这个导航网站(貌似作者很有情怀): smallpdf.cn

发布于 2018-12-11 19:14

高票答案主要从交互的角度做了回答,分析的挺好。

不过掰开从电商来讲,面包屑导航是否采用与其商业模式、运营定位也有很大关系。 如平台型的天猫、淘宝,我猜是为了照顾商家的流量需求,防止外跳,所以不采用,而自营型的如京东,可能以男性为主(以前听刘强东讲过,当前不确定),购买逻辑性和目的性更强,面包屑指向性更强,所以采用。另外B2B的企业,采购目的性更强,每笔采购都有计划和预算的,如何清晰而快速的指向到他需要的商品,面包屑更重要。

最后手机端是否要,倒不是很重要,原因,只有一个词“碎片化场景”!

发布于 2016-07-15 13:26
夫唯SEO视频课程:SEO工作中如何优化面包屑导航
552 播放
发布于 2021-06-30 18:15· 34 次播放

如何做到清晰导航

Seo优化一直是站长们所追求的,但是清晰的当行系统也是一个网站设计的重要地方,对于网站信息架构、用户的良好体验非常重要,seo在导航栏设计的时候也越来越多,而我们要站在用户的角度,去建立一个导航系统才能解决这个问题。

首先就是要告诉用户现在自己在网站的什么位置,我现在在哪?用户进入网站的渠道很多,首页或者外联或者用户不知怎么点击进来,所有你的导航在这个时候用途必须告诉用户我在哪,这也是用户体验的一部分,页面设计最好统一。加上面包屑导航加高亮效果有助于用户体验。

然后要告诉用户下一步去哪,用户来你的网站肯定是有自身的目标,用户知道自己要找什么要做什么,导航这个时候就可以清晰吗,明了的告诉用户怎么点击才能做到完成自己的目标,合理的导航加上分类名称、正文中的链接、购物网站的放入购物车按钮、相关产品推荐、还有网站地图都是有助于提升用户体验,更多详情亲关注 t.qq.com/seocoachjn

Seo网站导航注意要素:

1、 尽量使用最普通的html文字导航,不需要特别绚丽的图片或者JavaScript生成,更不要用FLASH导航,CSS的样式可以很好的表达出你想要的效果,嘴最单的效果对搜索引擎抓紧是比较有帮助的,导航栏是蜘蛛抓取的重要连接,千万不要在导航栏上给搜索引擎增加麻烦。

2、 点击距离一定要进,所有的页面最好能跟首页点击距离3次以内,权重普通的网站最好也不要超过五次以上,要使自己网站结构扁平化。

3、 锚文字要包含自己网站的关键词,导航中的链接是分类页面获得内部链接的主要来源,数量巨大,锚文字对用户对目标页面的相关性有巨大影响。

4、 面包屑导航是对用户和搜索引擎都是有帮助的,是可以判断页面在整个网站结构中的权重倾向,这个在大中型网站上必须使用。

5、 不要堆积页脚,随着seo知识普遍,在页脚推挤关键词的做法,现在已经被搜索引擎所反感,甚至会造成惩罚,更多详情请关注 t.qq.com/seocoachjn

编辑于 2016-01-30 11:32

面包屑作为用户寻找路径的一种辅助手段,能方便他们定位和导航,提升用户体验。有必要存在!

发布于 2011-07-11 16:12
( 为什么?)