2023年交互思考：“重要的小角色”-面包屑导航

交互思考：“重要的小角色”——面包屑导航说到面包屑导航，我先跟你共享一个童话故事：两个孩子为了不在森林里迷路，于是沿途洒下了面包屑作为标记，关心自己能够原路返回。

面包屑导航（下文统一统一用“面包屑”来表述）的概念便来自这个童话故事；面包屑导航的作用和面包屑一样，可以关心用户能看清自己在网站中所处的路径，也能够快速的找到其他相同类型的网站和功能。

一、什么是面包屑？

通俗来说，面包屑是作为帮助和补充的导航方式，它能让用户知道在网站或应用中所处的位置并能便利地回到原先的站点。

它们绝大部分看起来就像这样：一级页面二级页面三级页面或者一级页面/二级页面/三级页面。

二、面包屑的类型有哪些？

通常来说，面包屑分为以下三种类型：基于位置的面包屑、基于属性的面包屑、基于路径的面包屑。

1.基于位置的面包屑

这种面包屑是面包屑导航中最常见的一种，这种类型的面包屑导航可以很好地指出当前页面与整个网站的层次结构；可以是用户了解自己所在的位置，以及可以更快地找到自己想要到达的页面，此类面包屑导航主要用在具有多级导航（通常具有二级以上导航）的网站中。

2.基于属性的面包屑

基于属性的面包屑导航会将特定页面的类别列出来。

这种面包屑导航可以很好地指出当前页面内产品的其他属性或者类别，这种面包屑导航可以关心用户了解产品之间的联系，通过各种不同的属性对搜寻结果进行筛选；这种类型的面包屑常消失在具有大量类别产品和服务的网站中，比如我们常见的电子商务网站、网上教学服务等，亚马逊、腾讯课堂就是典型的示例。

对于一个产品来讲，往往不止一个属性，有大属性，有小属性；像这种从属关系的路径，通过这种面包屑导航就可以给用户一个更加直观的了解。

3.基于路径的面包屑

此类面包屑导航是最不常见到的，这种面包屑导航和上文所说的童话故事类型很想，他们可以显示访客在到达页面前所访问过的网页的链接。

面包屑之间没有明显的层级关系，他们的功能与前进、后退的按钮有些类似。

三、什么状况下适合使用面包屑？

我们先来看下面包屑的作用，表现在以下方面：

表面当前页面所处的位置，便利定位和导航，帮助用户查找路径；便利跳转到之前的页面，告知用户「你在哪里」，削减操作次数；总体上为主导航做补充，占用屏幕空间小，干扰性性小，具有临时性。那么在什么状况下是适合使用面包屑导航的呢？

我们再看一下面包屑的典型作用：信息定位和用户路径展现。

基于这两个典型特点，那么面包屑就特别适合在以下两种场景中使用：

1.严格的线性结构

由于面包屑导航路径是线性结构的，因此网站内容必需划分的特别清楚，保证独立不交叉。

否则，面包屑导航的路径就不是唯一的，同一分类可能消失在不同的路径中，会让用户感到困惑，从而降低用户体验。

2.较深的层级结构

面包屑导航适合层级较深的网站，假如只有一级分类的话，通过主导航就可以起到快速定位的作用；比如电商网站的结构就是层级结构，而且是包含了分好组的层级结构，里面的页面包含了按类别分好组的大量商品页面。

推断在设计网站时是否适合于使用面包屑导航的最好方法便是将网站的结构画出来或者以图表的形式呈现出来，然后分析使用面包屑导航是否会关心用户更便利地切换到不同类的网页。你学会了吗？

四、使用面包屑时有哪些要留意的？

以上我们讲了面包屑的定义、类型以及什么状况适合使用面包屑，接下来我们一起来看看使用面包屑时的留意点：

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

面包屑总体上为主导航做补充，在页面中不应当起到支配的作用。面包屑和主导航视觉上相比要比较小或不太突出，页面占用空间相当小；在颜色上主要以黑、灰为主，它基本都是以带链接的文本的形式存在的，并且通常只有一行。

通常水平地消失在页面顶部，一般会位于标题/页头的下方或内容区的上方。

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

面包屑导航的最终一个层级，可以表示当前页面也可以表示当前页面的上一级。

但假如是表示当前页面的话，切记不要添加链接，由于用户已经处于这个页面了，再添加指向当前页面的链接，就相当于两个盘子装一条鱼——多余了哈。

3.分隔符使用

分隔符：面包屑导航中最简洁明白的分隔符便是大于号“”。通常大于号用于基于位置的面包屑导航，以“父类子类”的形式表示导航项目之间的层级关系。

除了大于号以外还可以用向右箭头“→”，双大于号“”和斜线“/”，究竟使用哪个取决于导航的类型和视觉效果。

五、总