作者：Nick Babich    翻译：ITsCrystal    编辑：风口上的猪毛

面包屑是一个网站或者app中为用户指引其所处位置的第二导航系统。它来源格林童话中的一个著名的故事情节，里面说到的面包屑是用来指引故事主人翁回家的。

和童话故事里的一样，浏览者能够了解这个网站的层级结构，并且便于浏览高层级的内容。

图片来源：loseyourmarbles

在本文中，我们将对网站中面包屑导航的运用进行探索，并对一些好的实例进行讨论，以便将来能运用在你的网站中。

面包屑导航越来越广泛的应用

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

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

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

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

减少操作次数

就可用性而言，面包屑可以减少用户为达到一个更高的层级页面所必经的操作步骤。用户可用面包屑替代使用浏览器的“返回”按钮或网站的初始化导航。

占用最少空间

这是一种不需要占用多大空间的紧凑机制，因为它只是一些带水平下划线的文本链接。其好处是不会造成负面的页面过载。

没有用户受面包屑的困扰

人们会忽视这个小设计元素,但他们从来没有觉得面包屑难以理解或难以操作。

什么时候你应该运用面包屑导航？

一个很好的方法来确定一个网站是否受益于面包屑导航，就是构造一个站点地图或图表来代表网站的导航结构，然后分析面包屑是否提高了用户类别与类别之间及类别中的引导：

- 当你有大量的内容需要组织成一个严谨的线性结构，或者层级结构有明确类别划分的时候（比如可拆分为很多子项的需要划分为几个部分）一个经典的例子就是电商网站，就是将大量的产品以不同的逻辑划分；

- 而不应该将面包屑运用与没有逻辑层级或组合的单层级网站

面包屑导航的类型

面包屑导航一般基于以下三种：位置、路径和属性

基于位置

基于位置的面包屑导航是网站结构的表现。它们帮助用户理解两层以上的网站结构，起到导航的作用，这种面包屑导航非常支持从外部资源进入网站且处于较深层级的用户（例如从搜索引擎的结果页进入）

基于位置的导航。图片来源：marketingland

在下例中（取自bestbuy），每个文本链接都是指向一个页面，并且左边的层级高于右边。

bestbuy上基于位置的面包屑导航

基于路径

基于路径的面包屑导航（被称为“历史路径”）展示用户到达特定页面的所浏览过的路径。这种面包屑导航链接是一种典型的动态生成。有时基于路径面包屑非常有用，但是大多数时候又容易让人疑惑——用户经常浏览非常宽泛，从一个页面跳到另外一个页面。

如此曲折的路径并不能给用户提供帮助，但是能很好地替代浏览器的“返回”按钮，另外，当用户直接到达网站深处页面时，这种历史路径并不能给用户提供帮助。

以下是一个路径面包屑导航链接，它展示了到达目标页面的两种路径。

基于路径的导航。图片来源：Oracle

基于属性

基于属性的面包屑列举出了特殊页面或大多数电商网站常见的面包屑导航类型。这种类型的面包屑帮助用户理解产品与产品之间的关系，并且提供一种不同的方法。

图片来源：marketingland

例如，在TM Lewin，面包屑导航在特定页面上体现了不同项目之间的属性关系

这一页展示了所有修身款的西服，图片来源：T.M.Lewein

层级还是历史？

面包屑的经典作用是在于体现网站的层级，而不是用户的历史。因此,应当使用基于位置/属性的面包屑,而不是基于路径的。

面包屑导航的最佳实例

当你在设计面包屑导航时，记住以下几点：

1、不要把面包屑用来替代网站的原始导航

面包屑导航应当被当作一种附加功能，而不应该用来替代有效的主导航菜单。记住它只是一个方便的功能；一种次级导航策略；一种可供选择的网站导航方式

苹果使用面包屑导航辅助展示主导航

2、别在面包屑导航的当前页面加链接

面包屑导航的最后一项（当前用户位置）是可显示也可不显示的，但是需要确定的是它不可点击。因为当用户已经处于这个页面时，就没有理由给面包屑导航中的当前页面加上跳转链接。

3、使用分隔符

大多数面包屑导航都是用大于号“>”来作为链接与链接之间的分隔符。尤其是当“>”符号被用作表示层级分隔时，它表示 父级类别>子级类别。另外还有一些符号也可以表征排序从左至右，比如()、(»)、(/)。可以根据网站的视觉风格和面包屑道行的类型来进行选择

图片来源：Dribbble

图片来源：Dribbble

4、选择合适的尺寸和边距

在设计时认真思考一下目标尺寸和边距。在不同面包屑之间应当留有足够的间隙，否则用户体验会很不好，觉得不好用，并且你并不希望你的面包屑在页面中占主导地位，因为它将会相对减弱你主导航菜单。

5、别让它称为设计的焦点

你不应该使用花哨的字体或明亮的颜色,因为这些会破坏你使用面包屑导航的初衷。在设计面包屑导航大小尺寸和风格时应当遵循的一个原则是：它不应当成为页面上用户一眼就关注到的东西。

在下例中的面包屑导航不能说特别差，但是它太多人眼球了，以至于可能分散用户在主内容和主导航上的注意力。

图片来源：Dribbble

google就不会将面包屑导航做得很花哨，但是用户很容易找到它去用它。

6、别将面包屑导航运用在手机网站上

如果你在手机上浏览，你会发现你试图在手机网站上运用面包屑导航这个想法是错的。如果需要在手机环境中提供这种特定的类型，很可能是你的网站结构太过复杂，或者嵌套太深。解决这个问题的根本，你应该首先想想如何把网站设计得更简单，而不是把面包屑的运用提上日程。

总结

在网站内容和整体结构有意义的前提下，所有的面包屑的作用都应当是为了让浏览者更容易在网站中穿梭浏览。这只是一种加强可用性，带给用户良好体验的简单方法。只是整个网站中一行充分发挥作用的设计项。

原文链接：Breadcrumbs For Web Sites: What, When and How 

作者：ITsCrystal
链接：https://www.jianshu.com/p/a05a2b1ebc6e