面包屑导航_面包屑导航栏是什么不看后悔

菜园子讨论的第 533 条话题：【2019第070号话题】为啥移动端产品不再采用“面包屑导航”？，今天累计有 88 条讨论，快来看看吧！

 

菜园子第533个话题【2019第070号话题】为啥移动端产品不再采用“面包屑导航”？【话题分类】交互【话题难度】★★★在桌面互联网时代，“面包屑导航”是一种被广泛采用的交互设计，有助于用户在纷繁复杂的网站内容中确认自己的位置，并方便的访问到任一层级的内容。

“面包屑导航”出自一个童话故事"汉赛尔和格莱特"，大家可自行搜索，具体概念见附图然而，来到移动互联网时代以后，这个便捷的交互方式已经很少被采用，即使是电商、豆瓣、贴吧这样的多层级内容产品也很少采用该设计。

今天的移动端产品使用最多的导航方式是什么？你见过哪些产品的导航方式让你觉得特别方便快捷？你觉得移动端产品不采用“面包屑导航”的主要原因是什么？共 88 条讨论菜园子广州分舵-BC现在导航比较常见就三种：Taps、Drop down menu、Hamburger menu。

无一例外都是为了在有限多的空间里展示尽量多的内容并且模糊用户路径breadcrumbs一来是太宽了，看例图便知：这个大小根本没法点，要做到可以点那就太大了，移动产品上每个像素都是宝贵的，还要考虑设计的留白。

不可能把空间留给这样一个可有可无的功能 其次移动端上整个购物逻辑都变了，举个例子你要去京东买台新手机，你要么就直接搜“手机”，要么直接搜你想要的型号，都是很直线的思维点进去一个产品不喜欢了就用手指从屏幕左边一滑就能返回上一页看其他。

既然是做触屏手机的交互，自然得考虑touch friendly，自然也得物尽其用6 赞菜园子产品经理地园-杭州-真•打杂-冷公子1.手机因为其独特的屏幕大小以及操作方式，决定了用户的主要操作区域在于手机的中下部区域，而传统面包屑的位置应置于页面的左上角，在位置上就天生不处于用户便捷的触达区域。

2.移动端由于屏幕太小相对于内容多的产品，其空间的利用更是重要，相较于需要展示给用户的内容来说，面包屑导航的重要程度是很低的 3.面包屑导航条的目的有2个，1个是让用户在复杂的界面跳转中能够时刻知道自己所处的位置。

第二个是让用户可以跳过中间的返回操作直接回到前几次操作界面中 在移动端针对此处有专门进行过设计，如界面顶部菜单栏中的界面名称，又比如很多软件会在页面右上角增加返回首页的功能并且相对于pc来说，移动端返回的操作已经是极其方便了。

页面右滑，返回按钮等都会比面包屑导航更加的便捷 4.移动端有着自己特有的导航体系，如底部导航条，顶部导航条，侧边抽屉导航条，分类，搜索，还有淘宝的右上角返回首页，购物车等这些导航的方式更加适合在移动端进行操作。

4 赞菜园子上海分舵-烽使用最多的导航是顶部/底部标签+首页网格导航 移动端没有面包屑导航主要有几个原因：①APP作为独立的产品有单独的入口，用户每次进入都会进入首页，用户知道自己明确的操作路径；但网页不是如此，除了少数常用网站外，其余网站都是通过搜索找到，用户需要面包屑这样一个东西对网站结构有个整体认知，同时通过找到当前页面的上一级来获得更多信息；②移动端产品重在浏览，发现感兴趣的；pc端产品主要是目的明确，搜索触达；③移动端产品有几个特点，返回方便、屏幕空间有限、长条形屏幕使得顶部、底部加筛选标签变得合理。

2 赞菜园子PM西南分舵-Nick cao导航有很多常常在运用的，包括选项卡 列表 侧抽屉 下拉菜单式 很多很多，个人看面包屑 在于 web端中，像用户注册时，会常常用到，并非用的很低频，像移动端用的就会比较少，因为现在的产品极力倡导 最优路径和最小路径，所以一般路径较短时，基本就不会再用到面包屑了！

1 赞菜园子产品经理三园-Jack潘登 深圳 消费分期1  移动端产品使用最多的是“全局底部导航”这种导航方式比较简洁，并适应大屏智能手机的操作习惯（手握时，点击导航的便捷性） 2  从快捷角度来看，一键触达的方式最便捷。

但是需要根据实际场景和功能重要程度去调整 3  移动产品不用“面包屑导航”的主要原因是：PC端产品层级复杂，而移动产品的层级已经控制的比较好（一般深度不会超过3个层级），辅助导航和定位的面包屑手段不再需要；其他导航，例如底部全局导航解决了用户导航便捷性的问题。

1 赞菜园子产品经理地园-北京-游戏-高贵枫1.手机使用很碎片化，并且受制于手机屏幕的大小，面包屑导航展开的层级有限，效果降低 2.手机用户需求反馈更加频繁切换界面，类目都比PC用户操作快很多，步骤成本低。

想一想，动一下手指，互动屏幕远比在电脑上，移动鼠标，点击鼠标左键时间成本更低那么面包屑的设置，反而，消弱了掌上设备的最大优势，所以面包屑导航的设计，被另外的设计取代1 赞菜园子产品经理地园-北京-医疗-产品收割机

面包式导航在pc端的优势还是比较大的，先说一下他的优点：1、对于用户来说面包屑导航最基本的功能就是告诉用户当前页面在整个网站中的位置2、对于搜索引擎可以帮助搜索引擎体识别目录层级，利于目录的排名提升 这个第二点对于pc端的网站来说就很友好了，对于网站的seo优化有很大的帮助，但是放在移动端的话1、移动端的屏幕就那么大，不管网站APP那么长的目录层级对于移动端的寸屏寸金来说都是一个极大的浪费2、除去网站，APP中的功能按钮基本上都是以上图下文的形式存在的，用户一眼就可以看的到。

1 赞菜园子产品经理天园-深圳-前端-望舒手机现在流行的交互是侧边栏底部栏这种显示隐藏，这样可以节省屏幕占比，并且做出来的效果也更好看0 赞菜园子产品经理八园-透视天下移动端受屏幕限制，需要简单方便操作的交互。

0 赞菜园子产品经理天园-天津-pm-二蒙儿手机用的最多的应该是底部菜单导航，底部菜单全局导航就很方便，面包屑的交互方式不适用手机0 赞菜园子华南（深圳）总部-俊峰底部导航栏扁平化设计，让信息更加直接可见。

0 赞菜园子PM西南分舵-成都-唐静梅-产品我最喜欢通过滑动屏幕更改导航这个方式，比如微信的底部的四个导航和网易云音乐更改一级和二级导航的方式0 赞菜园子武汉分舵-子非鱼  จุ๊บ1、移动端屏幕有限的情况下，设计更加扁平化、垂直化，层级关系也就显得不那么重要。

2、移动端返回、取消按键更加快捷有效0 赞菜园子产品经理地园-假PM --酷ma萌宝宝经典三段式，在非全面屏时代时，是通配，但是在AI加持的全面屏下，用户对移动的APP界面，也会是“全面屏”趋势，所以，面包????屑式导航栏看以看做为“占用空间”。

目前最妥协的导航栏就是卡片式抽拉0 赞菜园子广州分舵-LLLLLL在移动端采用tab居多，一是以手机为例，屏幕尺寸限制展开层级有限二移动端操作应该是为用户做减法 而不是做加法0 赞菜园子产品经理一园-北京-无崖子-18761。

好像在网页也没见过这种面包屑，第一次听说移动端产品操作相对简单，跟着入口点进去，不喜欢，左上角可以直接返回，用户应该清楚自己在哪个位置移动端的屏幕大小也不适合面包屑这样式移动端的内容一般都是一屏一个页面内容，和这个面包屑大的桌面导航风格也不搭。

0 赞菜园子PM西安分舵-西安舵主-大女主移动产品最常见的是底部Tabbar导航，顶部tab导航，多tab滑动导航，顶部二级导航，左抽屉导航，顶部导航栏触发按钮弹出导航面板，或其他触发按钮事件引出导航面板。

移动产品不采用面包屑导航的原因: 1. 手机需要用手去触发，相对于鼠标，手指与屏幕的接触面较大，面包屑误点击率高 2. 用户还未行成这样的操作习惯0 赞菜园子产品经理地园-北京-待业-吉吉我还是没看懂啥是面包屑。

0 赞菜园子产品经理五园-深圳-产品经理-怀朔移动端主要还是受限于屏幕空间，一是不好排版，二是字体太小不好点击，不像鼠标点击那么精确移动端最常见的还是抽屉式菜单导航比较常见0 赞菜园子产品经理玄园-北京-产品-smile。

tab居多，主要是受限于手机屏幕大小0 赞菜园子广州分舵-D_l俊贤移动端因为屏幕小，抽屉和卡片式比较合理0 赞菜园子产品经理五园-成都 安安移动端的导航方式主要有TAB，抽屉式，舵式导航，分段式等根据不同需求来定。

最方便的应该是TAB，标签1-3个个人觉得是比较好用的多了会觉得好麻烦 移动端屏幕横向纵向都有局限触屏操作面包屑方式有点让手无所适从啊0 赞菜园子PM西南分舵-西南舵主-125-Ranispy(景薇)移动端现在多采用的是table导航，移动端更加方便快捷，可以一键返回到首页。

标签重点突出几个主栏目，切换栏目即可0 赞菜园子产品经理地园-成都-电商-Pinno1. 工具内容类app比较常见的是标签导航和舵式导航，像电商内容复杂的一般都是组合导航 2. 不要导航，让我觉得最方便，哈哈哈哈，比如早期的豆瓣fm 3. pc端需要面包屑是因为让用户知道自己所在位置和快速返回前几个导航。

而移动端的使用路径更为清晰，层级更为扁平所以不需要面包屑，而且一般有直接返回按钮和快速返回首页按钮0 赞菜园子PM西南分舵-重庆-企业软件-付洁移动互联网时代，交互需要更加简单明了例如抖音，上划下划即可。

0 赞菜园子产品经理女园-妙妍网站一般是因为拥有多个层级，所以使用面包屑式的导航能够使用户操作更加便捷，手机端的app大多只有一级分类，使用主导航就能起到快速定位的作用，犯不上用面包屑0 赞菜园子产品经理四园-深圳-产品经理-冰冰

移动端显然不适合面包屑导航，方寸之间可展示的空间有限，而面包屑太占地方[呲牙]0 赞菜园子上海分舵-最帅三长老第一次听说面包屑导航，好像没见过这种设置，原谅我接触互联网比较晚0 赞菜园子上海分舵-二长老-鱼头酱。

面包屑导航很长，就算折叠也不适合移动端上次也讨论过移动端地图app的快捷点触功能，移动交互多一点人性化的设计比如最新ios，针对手指够不到屏幕上部，直接在屏幕底部下滑可以缩进，具体看图0 赞菜园子产品经理地园-上海-夏小鱼（群管理员）。

默默飘过，没做过移动端的产品不过移动端肯定要考虑手机屏幕大小、用户操作便捷性等方面，然后还有一些广告位摆放的位置啊什么的应该都是有讲究的0 赞菜园子产品经理女园-上海-产品-我想想～一般应用想在页面显示最多的信息，有一些可点图标，也会有扩展显示，面包屑形式太占空间。

0 赞菜园子产品经理地园-广州耳东陈可能这就是优胜劣汰吧，微信一直在调整样式和交互方式，像之前的字体变得更加粗体，像看文章增加浮窗退出，这是一种创新，而微信一直都是左滑退出 微信作为国民APP，很多产品经理又一直在学习这些交互方式，所以会形成新的交互方式。

0 赞菜园子产品经理女园-北京-何小小受移动端屏幕大小及交互手势影响，面包屑显示全路径已经不适合了0 赞菜园子产品经理宇园-贾佳璐打个卡好了，今天太忙而且面包屑导航也不太了解，晚上有空再补吧????0 赞

菜园子产品经理二园-Huan杨欢_207我觉得不采用“面包屑导航”的主要原因是屏幕太小，显示+交互性的组合有限0 赞菜园子产品经理七园-宸[25]面包屑也是基于页面层级逐层返回为主移动端的返回键有包含此功能含义。

只是不像pc端那样，直接展示出来不同的交互设备，不同的交互展示，非常合理0 赞菜园子PM西安分舵-舵主助理刘凯移动端的交互最简单越好，左滑和右滑时间长了也会累 移动端不采用面包屑也为他的层级比较少，用户知道我在那里。

0 赞菜园子产品经理地园-城市+行业+昵称底部tab导航、分段选项卡、滚动选项卡等 手机屏幕本来都这么小了 面包屑有点子占地方啊并且点击上也不方便0 赞菜园子产品经理宇园-PM -NK让用户的选择变少，让它更贴近用户真实的需求，让用户操作更简单。

0 赞菜园子PM西南分舵-重庆 - 白度手机界面不同于PC端，毕竟简单的界面配对简单的返回与选择，而PC端内容复杂自然要以用户为中心，让他知道自己所处的位置0 赞菜园子PM驻京办-国贸-产品-Patton。

手机体积较小所以便携性是必要的！0 赞菜园子武汉分舵-Melody【2019第070号话题】为啥移动端产品不再采用“面包屑导航”？ 【话题分类】交互 【话题难度】★★★ 在桌面互联网时代，“面包屑导航”是一种被广泛采用的交互设计，有助于用户在纷繁复杂的网站内容中确认自己的位置，并方便的访问到任一层级的内容。

“面包屑导航”出自一个童话故事"汉赛尔和格莱特"，大家可自行搜索，具体概念见附图 然而，来到移动互联网时代以后，这个便捷的交互方式已经很少被采用，即使是电商、豆瓣、贴吧这样的多层级内容产品也很少采用该设计。

今天的移动端产品使用最多的导航方式是什么？ 你见过哪些产品的导航方式让你觉得特别方便快捷？ 你觉得移动端产品不采用“面包屑导航”的主要原因是什么？ ????参与话题请带标签，可自动被收录并获得赞赏；实时查看发言，请输入  /今日话题 ????群规： 除菜园子运营者，他人禁止发外链接，包括文章、二维码等 ????提醒： 关注「PM菜园子」，才可获得菜园子社群完整服务体验。

0 赞菜园子武汉分舵-互金—苏格林不适用于单手操作的导航都会被淘汰0 赞菜园子PM西安分舵-皮丘—知识付费—PM左滑右滑就可以完成的，自然就不需要付出更多的步骤，因为“懒”0 赞菜园子广州分舵-广州–电商–周梦

用户操作习惯和便携性决定的0 赞菜园子产品经理天园-Leo手机太大，手指不够长，够不上顶部的导航0 赞菜园子产品经理黄园-上海船长极大的简化用户操作成本，PC端是为了让用户知道自己现在在哪里，移动端更多的是立马决策，立即体验。

0 赞菜园子产品经理地园-郑州-PM-????1、移动端最常见的导航就是tab bar和返回键； 2、手指正常可点击区域为88px，所以如果使用面包屑，将增大点击难度； 3、功能少的App，导航方式或者交互效果一般都不会差。

0 赞菜园子产品经理地园-合肥-医疗产品-三石手机屏幕越来越小，想点的东西找不到[捂脸]0 赞菜园子产品经理四园-深圳-PM-大鹏移动端使用最多的导航总体上应该是抽屉式菜单导航 一个国外社交应用path 弧线状收放菜单。

面包屑导航一般适用宽屏，点击的交互比较好，而移动端恰恰更多的是小屏，触摸点击0 赞菜园子产品经理天园-邹邹邹w7没太明白这个导航的具体形态……电商比较常用的是顶部或底部导航双击顶部滑到顶端的导航我比较喜欢。

0 赞菜园子广州分舵-@胡子哥@优秘CEO2019年就业形势0 赞菜园子产品经理杭州分舵-菜园子杭州管理员 一只阿木木面包屑导航的核心价值，在于体现页面的层级关系而这种价值，移动端用户并不需要 移动端有着自己特有的导航体系，比如Taps、Drop down menu、Hamburger menu。

用户操作，更倾向于通过内容扩展和继续行为，那么接续阅读最好的方法是基于人际互动的推荐而网站承载的功能性，是为了SEO0 赞菜园子产品经理女园-shino手机宽度及交互方式不一样，PC交互是点击，手机多是滑动交互？

0 赞菜园子PM西南分舵-成都 PM time.sleep(600)帮助用户做选择，让用户沿着剩余价值被压榨最大化的路径去浏览内容0 赞菜园子产品经理宇园-小虞手机版的面包屑导航……版面大小是最大的问题了吧。

现在基本都做的比较直观的入口了吧，下拉或者其他的不过挺习惯PC端这种模式0 赞菜园子华南（深圳）总部-张平移动端多数取消了导航，转而使用底部tab进行导航，或者有些app更是没有导航，这样呈现内容更直接，减少用户操作。

0 赞菜园子产品经理宇园-　selimylover是不是因为手机上点击面包屑没有电脑????方便，不符合易用原则0 赞菜园子产品经理三园-王大鱼你见过哪些产品的导航方式让你觉得特别方便快捷？ 说一个最近发现的亮点功能。

因为最近在租房，所以下载了各大租房软件：安居客、链家、58，其中58的地图找房我觉得特别方便，可以直接定位到目标地点，看周围有哪些小区有几套房子出租，方便估算出行时间，看周围配套环境0 赞菜园子产品经理玄园-深圳-IPTV-李益祯

移动端产品不采用“面包屑导航”的主要原因，面包屑导航在PC产品中的一个重要作用减少用户返回上一层的操作次数而移动端往往都有快捷返回按键或者向右滑动操作返回0 赞菜园子产品经理三园-薇薇-话题看公告或发指令 /topic。

    Pc端因为设备比较大，可以承担更多复杂的功能，对应的功能层级也会更多，面包屑可以让用户快速跳出原有的功能，因此是必备的   手机端由于屏幕小，因此在设计初期时就定位功能不能太多，层级不能太多，因此返回键就足够了。

0 赞菜园子产品经理三园-王大鱼常见的app框架有列表、网格、屏幕轮显、标签导航、tab导航、抽屉导航、卡片、泳道、堆叠组合0 赞菜园子产品经理宇园-建山1.用户浏览移动端端页面一般速度相对较快2.页面力求精简，面包屑层级相对层级不够，可以剔除.3.用户返回上一层，就移动端而言，用户更喜欢手机上的返回按钮！。

0 赞菜园子产品经理三园-王大鱼在APP端，比起使用面包屑导航，手机系统自带的返回更方便，并且因为手机应用的层级比较少，用户可以很快速的进入到目标页面，所以，作用于定位页面的面包屑导航能够起到的作用就不大了。

0 赞菜园子产品经理地园-广州-教育产品-陈伟洪位置：手机屏幕有点小，而pc端屏幕比较大，通过鼠标可以精准的定位到面包屑具体的位置，而手机则不行，如果面包屑太大，反而占地方，太小，手指触摸却很难定位 交互：手机返回上一个页面非常方便，可以通过左滑，当然也可以点击左上角的返回按钮，这个位置很明显，同时左滑的学习成本很低。

而pc端无法通过左滑快速回到上一个页面，唯一可以返回要么是浏览器本身的返回按钮，要么是客户端的返回按钮 个人很喜欢左滑的交互方式，很便捷0 赞菜园子产品经理地园-许多随着时代的发展，设计也要跟上创新的步伐，原来在大屏上展示的面包屑导航，受到空间的局限，只能被更好的展示方式代替，比如抽屉式、标签等。

0 赞菜园子产品经理三园-菜菜 Jacky Hii面包屑导航的核心价值，在于体现页面的层级关系APP交互体验，在于减少用户的层级烦恼，似乎这种层级关系的展示，价值和意义不是太大0 赞菜园子产品经理三园-Edwina。

多导航化，界面的操作按钮可以让我随时找到我想要去的地方；app设计的简洁化，方便易用；0 赞菜园子产品经理七园-杭州 - 产品 - Chris_的确，面包屑超过三级的意义会比较大，不过有个致命的缺点，吃宽度。

在移动端，大多数的交互，都在三步内解决（貌似），应用的意义也不大了，而且手机屏幕寸土寸金；需要更加合理的利用0 赞菜园子产品经理男园-韭菜麵包蟹移動端用的少⋯⋯標籤式，列表式，分級，頂部，特色，九宮格，多級等菜單比較常見，標籤和分級比較多⋯⋯多數是多種組合⋯⋯各有利弊⋯⋯

0 赞菜园子产品经理三园-深圳_产品_三三儿用户在使用手机的时间碎片化，停留时间更短，会把视线落在有实际内容的地方，导航只是作为辅助，面包屑导航会在重点位置让用户感受到沉重的信息困扰 手机返回键就挺好的，我认为不怎么需要面包屑导航

0 赞菜园子上海分舵-苏州-SaaS-王海明因为屏幕尺寸不同，同时只能关注一个页面导航的模式通常变为“返回”或者左右滑动0 赞菜园子产品经理地园-北京-番茄1、pc网站网页路径太深 2、pc浏览器上往往会同时打开无数的网站或网页来回切换，不容易记忆当前网页所处的位置 3、pc软件用面包屑的好像也不多。

0 赞菜园子产品经理宇园-西安_电商_Wendy移动端结构相对扁平，面包屑用处大多用于多级分类0 赞菜园子产品经理宇园-福州～电商～梅红移动端还有个屏幕大小的限制吧，用导航，显示不全吧0 赞菜园子PM西南分舵-成都-医疗-冰冰

导航的操作需要手势交互，面包屑以pc端的鼠标点击为主，而移动端更需要方便的手势交互0 赞菜园子产品经理玄园-深圳-PM-李莹屏幕太小0 赞菜园子产品经理宇园-深圳-杰作-OTO-产品第15天微信的导航方式使用最广，还是微信和淘宝呀，主要是足够简单，移动不采用pc面包屑的主要是 路径不够扁平，但是有类似这种交互，如淘宝APP右上角的快速通道 回到首页等

0 赞菜园子华南（深圳）总部-Michael移动端比较少见面包屑导航，屏幕宽度小0 赞菜园子产品经理四园-沈阳-资深八零后-飞面包屑超过三级才有意义，级越多越体现优势就像在森林里迷路时才丢面包屑，不然的话，不管是古代还是现代还是童话故事里，小朋友乱丢面包屑会被罚背悯农的。

移动端不用面包屑导航的原因就是：宽度不够0 赞菜园子PM西南分舵-教育+产品+芒果标签式导航，微信这种几个部分关联不太大的，舵式导航，拍照类的用的比较多，侧滑抽屉式的，悬浮式的，手机上的页面层级一般不会太多

0 赞菜园子广州分舵-广州-产品-Lam林燊杰1.面包屑导航在页面会占用一定空间，本来移动端屏幕会比较少的空间 2.移动端的页面层级会比PC端简单很多0 赞菜园子广州分舵-知识图谱｜张谦用户没有必要知道自己处理应用的哪个位置。

只要知道自己这一刻在干嘛下一刻往哪就行了0 赞菜园子上海分舵-有缘人手机和电脑屏幕尺寸不一样0 赞菜园子PM西南分舵-成都-PM-步凡见过移动端最多的是抽屉是导航，移动端因为页面大小缘故，需要更多的将产品更重要的信息展示出来，且默认业务路径在移动端不会设计太长。

0 赞菜园子上海分舵-上海-PM助理-穆紫晴倒没仔细关注，觉得都能接受0 赞菜园子产品经理玄园-泉城教育加盐移动端的层级相对于PC端的目录层级不会很多0 赞菜园子产品经理杭州分舵-热心可爱的群主－柠檬移动端用的多的是浮层导航?面包屑导航因为所占面积等大不适合移动端，而且移动端的操作一般一个流程回控制在三步及以内，没必要用到这个导航

0 赞↓ 关注服务号，发送入群即可 ↓

免责声明：本站所有信息均搜集自互联网，并不代表本站观点，本站不对其真实合法性负责。如有信息侵犯了您的权益，请告知，本站将立刻处理。联系QQ：1640731186