并不简单！网页中为你指路的面包屑到底应当怎么使用？

面包屑是一种著名的导航工具。它们经常出现在页面内容的顶部，告诉你它们在哪里。它小巧、方便、常见、简单。但即使是这样的UI控制器在设计上也很精致。今天，让我们来谈谈面包屑~

面包屑是一种众所周知的导航工具。它们经常出现在页面内容的顶部，告诉你它们在哪里。它体积小、方便、普通、简单。然而，即使是这样的UI控件在设计上也很精致。今天我们来谈谈面包屑~

面包屑作为一种辅助导航系统，可以帮助用户清晰地定位自己网站的位置。这个词源于童话里跟着面包屑回家的孩子，网页上的面包屑也是用户找到自己位置的UI控件。

面包屑通过路径显示告诉用户他们的位置，今天的文章将讨论如何设计可用的网页面包屑，并通过最佳实践展示面包屑的正确使用。

面包屑导航提供可用性

面包屑作为一种视觉指导，为用户揭示了网页的层次结构。因此，面包屑已成为用户了解网站背景信息的重要途径，帮助用户了解以下问题的答案：

·我在哪里？根据整个网站的级别，面包屑可以让用户知道他们在哪里。我还能去哪里？面包屑提高了整个网站的可搜索性。面包屑的存在揭示了整个网站的结构，用户也了解了网站的其他部分。我们应该浏览更多吗？面包屑揭示了该网站有更多值得探索的内容，并鼓励用户浏览更多内容。相反，面包屑的出现降低了网站的跳出率。

减少操作次数

从可用性的角度来看，面包屑减少了用户跳转到高级页面的操作数量，避免了用户使用浏览器返回按钮和搜索导航以寻找上级页面的复杂交互。

占用空间小

面包屑的设计元素在页面上占用的空间相当小。它基本上以链接文本的形式存在，通常只有一行。

面包屑不会给用户带来麻烦

这个小设计元素占用的空间不大，但给用户带来的便利远远大于可能带来的问题和麻烦。

什么时候用面包屑？

是否在网站上使用面包屑主要取决于网站的结构。查看您的网站地图或整体结构图，分析使用面包屑是否可以改善用户在网站内的不同类别和目录下的导航：

·当你的网站有一个分类清晰、组织清晰的多层次线性结构时，你应该使用面包屑。例如，面包屑对一个产品种类繁多的电子商务网站非常有用。当网站没有逻辑清晰的层次结构时不要使用面包屑。

面包屑的类型

面包屑是一种基于网站逻辑结构的导航组件，可以根据位置、路径或属性来显示。

面包屑以位置为基础

基于位置的面包屑设计通常能很好地反映网站的结构特征。它们直接向访问者展示网站的层次结构，包括多个层次（通常超过2层）。这种层次的显示面包屑对从外部来源（如搜索引擎）进入网站的用户具有明显的指导作用。

在下面 BestBuy 在页面中，面包屑显示了产品所在页面的层次关系。

基于路径的面包屑

基于路径的面包屑通常被称为“历史足迹”，它显示的不是网站结构，而是访问者到达特定页面的完整路径。这种面包屑路径不是静态的，而是动态的。基于路径的面包屑有时会帮助用户，但有时会让用户感到困惑——有些用户浏览网站浏览路径太不受约束，这种基于路径的面包屑会帮助他们记录，不需要看历史，也不需要使用浏览器返回按钮返回到特定的位置。此外，这种基于路径的面包屑对一次到达特定位置的用户毫无用处。

以下是基于路径面包屑导航的案例和原理说明:

基于属性的面包屑

这种基于属性的面包屑在电子商务网站上很常见，产品通常根据类别和属性组织到不同的子目录中。基于属性的分类使用户更容易理解产品和产品之间的关系，并提供更多不同的浏览路径。

就像 TM Lewin 在这个页面上，面包屑显示了特定页面对应的产品，产品是根据一定的属性组织的:

层次还是历史？

根据实际经验，在绝大多数情况下，面包屑仍然适合展示分级机构，而不是浏览历史。因此，基于位置和属性的面包屑被广泛使用，基于路径的面包屑相对罕见。

面包屑导航的最佳实践

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

1、不要用面包屑代替网页的主导航系统

面包屑只是一个辅助导航系统，它不能取代主要的导航系统。请记住，它只是一个快速定位链接系统，用于方便用户。

2、不要在面包屑中添加当前的页面链接

面包屑的最后一个层次是当前的页面，不应该在面包屑中添加链接，因为它只起到显示定位的作用，没有任何意义。

3、使用分隔符

用于分隔不同层次的面包屑最常见的方法是大于符号(>)，常用的方法是“父类别” > 子类别”。当然，分隔符的使用并不局限于这一类，还有箭头的使用。（→）还有书名的使用（»）是的，也有斜杠(//)。使用哪种分隔符通常取决于设计师的整体风格和偏好。

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

在设计时，应仔细考虑尺寸和间隔。不同面包屑级别之间应有足够的间距，以确保用户能够识别。当然，你不希望面包屑占用页面太多的空间。如果面包屑比顶部导航大，看起来会很尴尬。

5、不要让它成为视觉焦点

面包屑本身就是辅助导航。如果使用太花哨的字体和醒目的颜色，会让它看起来太抢眼。它不应该是浏览过程中用户的视觉焦点。下面的面包屑设计还不错，但是太醒目了，甚至比顶部导航还能吸引用户的注意力。

Google 面包屑的设计并不抢眼，但用户仍然可以很好地使用它。

6、不要在移动页面上使用面包屑

如果你认为你想在移动页面上使用面包屑，这意味着你的移动网页设计有问题：网站可能太复杂（嵌套级别太深），这不符合移动终端的使用场景。为了解决这个问题，你应该试着简化整个系统，以确保面包屑不会出现在手机上。

结语

面包屑让用户更容易浏览整个网站，追溯到上级页面，寻找相关产品，对整个网站结构有意义。它的功能并不复杂，增加易用性是它的主要功能，所以不要把面包屑复杂化。