UI.

如何使用面包屑(正确的方式)

Marc Schenker. 经过 Marc Schenker.  |  2016年11月30日

面包屑......他们带来了与亨尔和希尔特的童话的协会,汉莱斯留下面包屑,以帮助他再次找到自己的回家。虽然与面包屑的关系可能在Grimm故事的领域中仍然更加强大,但随着导航中的面包屑,Web设计人员为网站访问者创造了更好的用户体验,仍然逐渐变化。

该图形控制元件在网站上的导航辅助提供了非常有用的目的,提供了智能设计。对于需要依赖路径的较少经验丰富的访客可以成为一个神秘,以帮助他们跟踪他们在客户网站上的位置。

面包屑的迹线将跟踪并显示访问者查看的每个页面,有时候在订单中被录取,其他时间在不同的安排中。

以下是如何将面包屑整合到导航中:

 

三种主要类型的面包屑导航

有三种主要类型的面包屑,您通常会在任何给定的网站上遇到,两个是比上一个更受欢迎。

位置面包屑

您遇到的两个最受欢迎的种类之一,位置面包屑会告诉您的用户在网站的层次结构方面。其直接的组织,在网站内以明确切割的方式设计用户使这种类型非常广泛地使用。

流行在具有众多级别内容和导航层的网站中,Location Backcrumbs Empowers用户能够有效地恢复到以前,更高级别的内容,简单点击。此外,位置面包屑是静态的(他们永远不会改变),使它们能够帮助重新定位用户的可靠方式。

屏幕截图-2016-10-10-at-at-2-36-17-pm

1-800朵花 提供功能位置面包屑的经典示例。每次购物者访问它是我的生日花卉安排页面时,他会看到他首先从主页开始后必须点击生日类别。当然,他可以点击每个更高级别的面包屑,立即到达那里。

属性面包屑

属性面包屑是您遇到的第二种主要类型。与位置面包屑不同,这些工作类型类似的过滤器选项,因为它们不会根据用户的偏好而不断更改。

他们不会在网站上告诉您您的位置,而是显示有关页面内容的元数据。因此,属性面包屑受到电子商务网站,您可以在那里自定义您想要购买的产品,例如汽车网站。

因此,您不一定使用这种类型的面包屑方法来找到您已经访问过的页面的方式。

看看我在说什么,退房 Cars.com的 面包屑。当您通过制作和型号搜索汽车时,请注意屏幕左上角附近的面包屑,就在网站徽标下方。这一年,制作和型号都代表了之前的网站上的搜索,但它们并没有提供可靠的路径来重新访问您已经查看的旧页面。

屏幕截图-2016-10-10-at-2-47-29-pm

注意这类面包屑和位置面包屑之间的差异,允许您准确地重新访问您最近访问过的页面。

道路面包屑

道路面包屑是三个中最不欢迎的,因为,坦率地说,他们所做的一切都是复制浏览器的后退纽扣!这根本没有帮助改善UX;它相当多余。

又称历史迹纵横道,路径面包屑实际上并不是那么有帮助,因为它们不会向游客提供额外的上下文或信息,该访问者降落在网站层次结构中已经深入的页面。一个例子将是一个产品页面上的访客着陆,因为他找到了他点击的搜索结果。

由于这种围绕这种类型的面包屑导致的这些UX问题,在今天的网站上发现它越来越罕见。

 

哪种类型最适合什么网站?

三种主要类型的面包屑的细分乞求明显的问题,最适合目的是什么?

让我们开始与你不应该打扰的人的开始:道路面包屑。至少,这没有帮助UX;最糟糕的情况是,用户实际上可能会被路径面包屑混淆,因为它们不会在网站内显示不同级别的正确层次结构。

现在我们有那么多,让我们专注于位置和属性面包屑。

位置面包屑更适合具有非常深刻和内容水平的更大网站。这是一个很好的例子是eBay,这是一个巨大的商店,因为所有这些都是出售或拍卖的物品。因此,当游客可以清楚地使用额外的方向时,位置面包屑非常适合这种内容。

屏幕射击-2016-10-10-at-7-53-49-pm

现在让我们关注属性面包屑。

如上例在上面的例子中,提供了提供购物者的电子商务网站,许多可定制选项将极大地受益于这种类型的导航援助。具有各种定制选项的网站可能会迫使购物者压倒性。这就是为什么给出这些过滤器的原因比位置面包屑更有意义,因为购物者希望跟踪他们对搜索结果和订单所做的各种更改。

 

面包屑的最佳实践

一般来说,当您在为客户网站设计面包屑导航时遵循这些提示时,您就不会出错:

  • 确保在BreadCrumbs的跟踪中没有重复元素(读取:落入多个类别或内容级别的页面),因为这实际上可以混淆用户。
  • 使用大于符号(>)分解面包屑中的链接,因为这是用户已经期待多年的网站熟悉和公约。
  • 在决定面包屑中的不同类别的名称时,请使用您想要在SEO中实际排名的关键字,因为这有助于SEO。

 

面包屑:伟大的主意,但并不总是正确使用

与设计和UX的许多概念一样,如果它没有正确实现,那么对用户来说非常有帮助的巨大想法成为困难。这就是本简要指南的内容:为您提供知识,使您能够设计面包屑来优化UX,而不是没有影响甚至伤害它。

虽然在各种场地上不是绝对的必要性,但是,宽度批量可以为用户提供额外的导航帮助,当您面临多层内容或他们想要过滤的大量选项时。无论哪种方式,从面包屑派生的可用性最终都会介绍设计人员如何在客户的网站上实现它们。

通过确保您了解每种类型的面包屑导航背后的目的,您可以帮助您自己为您设计的网站类型做出正确的选择。当您智能地选择时,您将满足用户,快乐的客户和良好的推荐,所以下次您正在处理面包屑时需要一些额外的护理。