面包屑导航，一个曾经风靡武林，不经意间默默无闻的远古控。很多交互设计师只是听说了一下，就退休了。但是，在某些类型的网站上，它仍然是不可或缺的导航方式。今天，Meituan.com的交互设计师@ Tokugawa Ryo专门整理了一下资料，开始带大家熟悉面包屑导航。

什么是面包屑导航

网页上的控件，允许用户感知当前页面的层次位置或产品属性之间的关系。面包屑的一个常见样式是在链接文本中添加“>”。，横向排列，还有一些其他风格。

这里用的是“感知”，意思是面包屑导航并不是页面中最显眼的地方，只是在一定程度上帮助用户了解网站的结构和属性之间的隶属关系。

面包屑的分类

1.用于解释页面之间的连贯关系和当前页面的位置。这些页面之间的层级关系可以独立于归属和包含，只要这些页面之间存在线性跳转关系。

2.用于解释产品属性和当前页面位置的归属关系。这些属性具有所有权和包含关系。

3.用来显示用户的操作路径和历史(国外有文章说过这个，但是我没有找到相应的网站…)

面包屑的作用

1.解释当前页面的位置，感知产品属性之间的关系。

2.方便地跳转到上一页。

3.整体上弥补了主导航。

面包屑的使用

并非所有网站都需要使用:

1.信息层次很平。这也是移动产品中面包屑被丢弃的原因之一；

有哪些导出微信聊天记录的方法？微信聊天记录导出到word教程。

2。没有线性页面关系；

3.其他具有替换面包屑功能的设备有:进度指示器；

它主要出现在页面的左上角和主导航的下方。

面包屑的“变种”

进度指示器栏。用于说明页面在随意步中的位置，和往常一样，头部的区域是不能点击跳转的，仅供参考。

复合导航面包屑，方面搜索和搜索框。

这种“变体”面包屑的优点是，可以方便地跳转到上一级页面，并在当前级别进行过滤和搜索。

面包屑的应用现状

移动产品和社交产品几乎看不到面包屑。

缘故原由1：当前的产物设计趋势都是将信息的条理结构扁平化，尽可能将种种模块平铺，使信息结构的广度增添，削减纵向的深度
缘故原由2：社交类站，相对于大型电商类和内容类网站，其层级的庞大度相对较低
缘故原由3：移动装备屏幕小了，寸土寸金，它的作用价值较低，就把它剔除了

电商和内容网站只会出现在部门页面。

固然它不会泛起在首页，一样平常它会泛起在二级频道页的下一个条理的页面
好比，在京东首页，点击进入了【生涯家电】频道页，在频道页点击了净化器后，你就能看到面包屑了

比如在爱奇艺，点击进入动漫的频道页面。在频道页面点击《猫和老鼠》后，可以看到面包屑。

面包屑的料想

移动终端不使用面包屑。大一点的网站也可以完全用面包屑吗？

面包屑和页面标题是重复的。能否消除这里的信息冗余，让信息得到完美利用？