发布时间：2022-4-23 分类： 电商动态
编者注：面包屑是我们熟悉的导航工具。它们通常出现在页面内容上方，以告知您的位置。它小巧，方便，通用，简单。然而，即使这样的UI控件在设计上也非常优雅。我们今天谈谈面包屑〜
作为辅助导航系统，面包屑可以帮助用户清楚地找到他们的网站。这个词来自一个童话故事的孩子，他带着面包屑返回家中，网页上的面包屑也是帮助用户找到自己位置的UI控件。
面包屑告诉用户他们在路径中的位置，今天的文章将探讨如何设计一个有用的Web面包屑，以通过最佳实践显示正确使用面包屑。
面包屑导航提供了可用性
作为视觉指南，面包屑揭示了用户的网页层次结构。因此，面包屑成为用户了解网站背景信息的重要途径，帮助用户理解以下问题的答案：
·我在哪里？面包屑允许用户根据整个站点的级别知道它们的位置。
·我还能去哪儿？面包屑提高了整个网站的可搜索性，面包屑的存在揭示了整个网站的结构，用户了解网站的其他部分。
·我应该浏览更多吗？面包屑显示该网站有更多内容可供浏览，并鼓励用户浏览更多内容。反过来，面包屑的出现降低了网站的跳出率。
减少操作次数
从可用性的角度来看，面包屑减少了用户跳转到高级页面的操作次数，从而避免了用户使用浏览器的后退按钮以及翻找的复杂交互来查找高级页面。
占地面积小
面包屑的设计元素占用页面上的少量空间。它基本上以带有链接的文本形式存在，通常只有一行。
面包屑不会打扰用户
这种小型设计元件占用的空间很小，但给用户带来的便利远远大于可能出现的问题和问题。
你什么时候使用面包屑？
是否要在网站中使用面包屑主要取决于网站的结构。查看您的站点地图或整体结构图，并分析使用面包屑是否可以改善站点内不同类别和目录中用户的导航：
·当您的站点中具有定义明确，组织良好的多级线性结构时，您应该使用面包屑。例如，一个拥有各种产品的电子商务网站，面包屑非常有用。
·当站点没有逻辑清晰的层次结构时，请勿使用面包屑。
面包屑的类型
面包屑是基于网站的逻辑结构而存在的导航组件。可以根据位置，路径或基于属性显示它们。
基于位置的面包屑
基于位置的面包屑设计通常反映了网站的结构特征。它们直接向访问者显示站点的层次结构，其中包含多个级别（通常超过2个级别）。这种分层显示的面包屑对于从外部来源（例如搜索引擎）进入网站的用户具有明显的指导作用。
在下面的BestBuy页面中，面包屑显示产品页面的层次关系。
基于路径的面包屑
基于路径的面包屑通常被称为“历史足迹”，它不显示网站的结构，而是显示特定页面的访问者的完整路径。此痕迹路径不是静态的，而是动态生成的。基于路径的面包屑有时可以帮助用户，但有时它们会让用户感到困惑。 —有些用户在浏览路径过于荒谬时浏览网站，这种基于路径的面包屑将帮助他们记录，无需浏览历史记录，或使用浏览器的后退按钮返回特定位置。此外，这种基于路径的面包屑对于一次到达特定位置的用户来说是无用的。
以下是使用基于路径的面包屑导航的示例和原则：
基于属性的面包屑
这种基于属性的面包屑在电子商务网站中是常见的，并且产品通常基于类别和属性被组织成不同的子类别。基于属性的分类使用户更容易理解产品和产品之间的关系，提供更多不同的浏览路径。
与TM Lewin上的此页面一样，面包屑显示特定页面的产品，产品根据特定属性进行组织：
层次结构还是历史？
根据实际经验，在大多数情况下，面包屑仍然适合显示等级制度而不是浏览历史。因此，基于位置和属性的面包屑被更广泛地使用，并且基于路径的面包屑相对罕见。
面包屑导航的最佳实践
当您开始设计面包屑导航时，应牢记以下几点：
1.不要使用面包屑而不是网页的主导航系统
面包屑只是一种辅助导航系统，无法取代主导航系统。请记住，它是次要选项，仅为方便用户而用于到达快速位置链接系统的其他级别。
2.不要将当前页面链接添加到面包屑
最后一层面包屑是当前页面，这个项目不应该在面包屑中链接，因为它只用于显示定位，它没有任何意义。
3.使用分隔符
在面包屑中，分隔不同级别的最常见方式是大于符号（>），其通常由“父类别”>使用。子类和rdquo ;.当然，分隔符的使用不仅限于此，有箭头（→），而且使用书名（»），也有使用斜杠（//）。使用哪个分隔符通常取决于整体风格和设计师的偏好。
4.选择合适的尺寸和间距
在设计过程中应仔细考虑尺寸和间距，不同的面包屑水平之间应有足够的间距，以确保用户识别。当然，您不希望面包屑占用页面上太多空间。如果面包屑比顶部导航大，它看起来非常尴尬。
5.不要让它成为视觉焦点
面包屑本身是一个辅助导航，如果你使用过于花哨的字体和引人注目的颜色，它将使它看起来像一个压倒性的，太引人注目。它不应该是浏览过程中用户的视觉焦点。下面的面包屑也不错，但它太引人注目，甚至可以引起用户的注意甚至是顶部导航。
谷歌的面包屑设计并不引人注目，但用户仍然可以很好地使用它。
6.不要在移动页面上使用面包屑
如果您觉得要在移动页面上使用面包屑，则意味着您的移动网页设计存在问题：可能是网站太复杂（嵌套级别太深），因此，它不会匹配移动终端的使用。为了解决这个问题，您应该尝试简化整个系统，以确保手机上没有出现面包屑。
结论
面包屑使用户更容易浏览整个站点，返回上一页，并找到对整个站点结构有意义的相关产品。它的功能并不复杂，它的易用性是它的主要功能，所以不要使面包屑复杂化。
