你在网站里不会迷路，要感谢这个导航设计 | 灵感早读

好产品，或许你已见得不少。但好产品背后的探索和思考，恐怕没有太多人知道。

在灵感早读，你会知道「产品人」如何创作，提供更好的用户体验，并影响成千上万人的生活。

我们精选优质内容，为你提供特别的产品视角。 如果你有好文推荐，或者希望投稿，欢迎联系 [e-mail]。

这是灵感早读的第 5 篇文章

导语：现在网络世界缤纷多彩，大家的注意力也更加短暂，如何让用户更久地留在你的网页里？「面包屑导航栏」就是其中一个关键。

AppSo（微信号 appsolution）这篇文章，分享网页设计「面包屑导航栏」的 3 个 W，让你给用户提供更好的网页体验。

面包屑导航（或面包屑痕迹）作为辅助的导航系统，它能告诉用户其在网站或网页 app 中的位置。这个词语来自汉赛尔与格莱特（又译糖果屋）童话故事中，主人公沿路丢下面包屑，形成一条小径，从而指引其回到自己的家中。

和童话故事主人公一样，网站用户也需要知道其在网站层次结构中的位置，以使其在需要的情况下能直接浏览上一级页面。

本文，我们将会来讨论面包屑导航应用及其最佳实践：什么是面包屑导航（What）、什么时候使用面包屑导航（When）和如何设计面包屑导航（How）。

一、面包屑导航有什么用？

面包屑导航作为有效的视觉辅助，能告诉用户其在网站层次结构中的位置。这种特性对用户来说是上下文信息的重要来源，可以帮助用户找到以下问题的答案：

• 我在哪里？告诉用户其在整个网站层次结构中的位置。

• 我能去哪里？用户更能找到相关网站栏目和页面。相比菜单栏，用户通过清晰直观的面包屑导航，更容易熟悉和了解网站结构。

• 我该去那里吗？面包屑导航体现了网站的内容价值，能鼓励用户继续浏览网站。比如，用户打开电商网站某产品页面时，该产品可能不是他想要的产品，但用户也许想浏览其他同类产品。通过面包屑导航，就能相应地减少网站的总体跳出率。

1. 减少用户行为次数

就适用性而言，面包屑导航减少了用户访问上一级页面本应产生的行为次数。除了使用浏览器「后退」按钮或网站主导航回到上一级页面，用户也可以使用面包屑导航。

2. 占用最少页面空间

紧凑的结构，不占用过多页面空间，面包屑导航是一条横向文字连接。好处在于，如有内容过载的情况，其带来的负面影响微乎其微。

3. 面包屑导航为用户带来零烦恼

人们可能没有在意这个小小的设计元素，但没人不明白面包屑导航，也没人不会使用面包屑导航。

二、什么时候该用面包屑导航？

测试网站是否会得益于面包屑导航，有种好方法是构建网站导航结构的网站地图或图表，再分析面包屑导航是否能帮助用户，提高其在同类或不同目录下的导航能力。

• 你应该使用面包屑导航的前提是，有大量内容存在于有线性或层次结构的网站分类目录中。所谓分类目录，是指网站内容可以分类呈现，这些类别还可以继续分为更多细分类别。典型例子正如将大量产品合理地进行分类的电商网站。

• 对于层次单一、没有合理架构或分类的网站，则不推荐使用面包屑导航。

三、面包屑导航的分类

面包屑导航可以按位置、路径和属性分为 3 类。

1. 位置面包屑

位置面包屑导航体现的是网站结构。其能辅助用户了解网站层次结构，并在有多层级（通常大于两级）网站中导航。若用户从别处链接（比如搜索引擎结果）进入网站深层次页面，这对用户来说非常有用。

位置面包屑导航。图片来源：marketingland

下图百思买（BestBuy）的案例中，每个文本链接都可以指向一个页面，从右到左依次是网站当前页面到上一级页面。

百思买（BestBuy）位置面包屑导航

2. 路径面包屑

路径面包屑（也称「历史痕迹」）显示用户浏览至某特定页面的所有页面路径。这类面包屑导航链接通常是动态产生的。

有时，路径面包屑很有用，但大多时候会令人困惑——因为用户浏览网站可能会从一个页面突然跳到另一个页面，非常随意。

这类无规律的浏览路径并不能为用户提供太大帮助，但倒可以用浏览器「后退」按钮来轻松取代。此外，若用户直接进入某网站深层次页面，那路径面包屑也毫无用处。

下图是路径面包屑示例，其展示了两条到达目标页面的路径。

路径面包屑导航。图片来源：Oracle

3. 属性面包屑

属性面包屑对电商网站非常有用，其通过特定页面或更常见的按产品类别将大量页面进行分类。这类面包屑导航可以帮助用户了解各类产品之间的关系，也提供了另外一种导航方式。

属性面包屑导航。图片来源：marketingland