Breadcrumbs are an important navigational element that supportswayfinding- 让用户了解其当前位置的网站的分层结构。面包屑是代表当前页面及其“祖先”(父页,祖父母页等)的链接列表,通常一直返回网站主页。nn / g一直推荐面包屑1995,因为他们在几乎为用户提供许多好处no cost to the UI.

面包屑表示为页面顶部的链接路径,通常在全球导航之下;主页(或层次结构的根节点)是第一个链接,链接通常由符号“>”或“/”分隔。我们推荐“>”字符,尽管没有功能差异,也是可以接受的。

Rei Breadcrumb Trail,显示网站的层次结构
REI.com: A breadcrumb trail(1)is displayed in its typical location at the top of the page, just below the global navigation bar. The trail shows the location of the current page within the hierarchy of the site. Each item in the breadcrumb trail is a link to an ancestor page; the “>” character separates the breadcrumbs. In this example, the home page and current page are omitted from the breadcrumb trail, which is not recommended.

如果用户在从主页浏览完该页面的所有祖先页面后到达一个深度页面,他们将对自己在网站信息层次结构中的位置有一个相当清晰的了解。但是,当他们跳过其中一些级别(例如,因为他们是通过单击外部链接(如搜索引擎结果)到达网站的时候),面包屑会确定他们的方向,帮助他们找到其他可能更相关的页面。

深页通常在相对狭窄的特定主题上显示内容,但面包屑路径可以引导用户在当前页面的父节点和祖父节点中的更多常规内容。

在桌面上使用面包屑的指南

  1. Breadcrumbs不应取代全局导航栏或分区内的本地导航。

Breadcrumbs are intended tosupplement其他导航组件,例如延伸到每个页面顶部的全局导航栏或通常位于左侧的本地导航栏。面包屑增加了导航的主要形式,但并不能取代它们。

Unusual breadcrumb that includes a drop down menu
Travelsouthdakota.com displays a breadcrumb trail that also serves as section navigation. Instead of a traditional breadcrumb trail (which would be: Home /Explore /Itineraries / Cultural Immersion), the breadcrumb trail includes a tier-1 item (Explore) and the parent page (Itineraries). The link to the parent page is a下拉菜单那with the current page’s siblings (bottom image). A better design would have a separate UI for the local navigation, to enable users to travel to lateral pages in the current section of the site.
  1. 面包屑应在站点的层次结构中显示当前位置,而不是会话历史记录。

Breadcrumbs不是用来显示站点会话期间遍历的页面的历史记录(洛杉矶浏览器的本机Back按钮);他们的目的是显示hierarchical structure of the site. We’ve noted this for many years, but it still bears repeating; attempting to show a list of the pages a user has accessed, in order, will quickly become long and confusing, with a lot of repetition, and won’t provide any benefit for users who arrive on a deep page directly from an external link, which is one of the key uses of breadcrumbs.

  1. 对于多层次网站,breadcrumbs应该在网站的多层次结构中显示一条路径。

Breadcrumbs pose an inherent tension with多层次sites (in which a page has more than one parent). In such situations, we do not recommend showing two or more breadcrumb trails reflecting the different paths in the polyhierarchy, because they will confuse users and take a lot of space at the top of the page.

如果页面具有多个不同的父项,请在站点层次结构中标识其上的规范路径,并显示面包屑路径中的路径。不要尝试个性化面包屑轨迹,以便它将反映每个用户在站点层次结构中的各个路径,因为您将最终将混合信号发送到搜索引擎。您仍然需要将层次结构中的一个路径指定为来自外部链接的访问者的主路径。

  1. Include the current page as the last item in the breadcrumb trail.
  2. 在面包屑路径中,对应于当前页面的面包屑不应是链接。

你不应该有一个什么都不做的链接。最后一个面包屑(表示当前页面)不应该是链接。为避免混淆用户,请在视觉上区分当前页面和前面链接的面包屑项目,最好使用下划线或蓝色文本。

在链接和未链接项目之间没有视觉区分的面包屑
On the British Red Cross site, there is no visual differentiation between the breadcrumbs that are links and the紧急情况志愿者item, which is (correctly) not a link.
  1. Breadcrumbs should include only site pages, not logical categories in your IA.

面包屑路径中的每个节点应该是祖先页面的链接(如上所述,与当前页面对应的链接的重要例外)。如果全球导航中的一些子类别标签没有专用于它们的单独页面,则不在面包屑路径中包含这些子类别。

The ability to “click-and-go” is a crucial part of users’ understanding of breadcrumbs, so all items (except the current page) should represent a place the user can go to.

Breadcrumb不包含导航中的逻辑类别,这些类别不是它们自己的不同页面
新蛋网:全局导航megamenu(顶部)的子类别没有自己的页面-例如,商业网络 1)。On the Wired Networking page (bottom), the breadcrumb trail(2)不包括商业网络,因为子类别没有关联页面。
  1. 面包屑不是必需的(或有用的)对于仅有1或2级的扁平层次结构,或在结构中线性的网站。

对于只有1或2级类别的平面层次结构站点,不需要面包屑作为寻路设备。在这种情况下,请考虑清楚地指示页面所在的顶级部分或类别。

网站与平面层次结构,不需要面包屑
麻省理工学院的主要网站有一个扁平的层次结构,每个部分只有1页。虽然它在页面顶部有一个breadcrumb,但这个breadcrumb不是必需的。在主导航中,页面的位置高亮显示。

无需面包屑的线性导航站点
NPR features a minisite about the history of color, which is designed as a linear experience, where users will encounter each page in order. This site’s structure is nonhierarchical, and so there is no need (or value) in including a breadcrumb trail.
  1. 面包屑小径应以与主页的链接开始

很像我们的guidelines对于全球导航,链接到主页(标记为Home) are still necessary. However, note that duplicating theHome全局导航和面包屑路径中的链接都是notrecommended — one or the other is fine.

Breadcrumb包括导航和Breadcrumb中的主链接
俄勒冈州政府网站包括一个面包屑小径,但省略了与主页的链接。但是,在这种情况下,这是可接受的,因为该站点还包括全局导航中的主链接 - 复制主页链接不是必需的,但它确实需要在两个地方之一中显示。

Guidelines for Using Breadcrumbs on Mobile

Unfortunately, on mobile, the cost of using breadcrumbs can quickly overwhelm the benefits.

  1. 不要使用包装成多行的面包屑。

在移动网站上,breadcrumbs可以快速包装成多行,并在已经拥挤的移动显示屏上占用宝贵的空间。多行breadcrumb trail不能很好地说明链的结构(特别是当某些项目占用自己的行,而其他项目可能在一行中有两个或多个链接时)

面包屑在移动站点上是如此之大,它推动折叠下方的页面标题
REI.com网站的移动网站在面包屑路径上使用了大量的不动产,因此它推送了产品的名称折叠下方,即使在大型移动设备上(在这种情况下,iphone x)。
  1. Don’t use breadcrumbs that are too small or too crowded together.

Some sites attempt to get breadcrumbs take less screen space by making the links smaller or closer together. Unfortunately, this solution doesn’t work on touchscreens:tap targets need to be at least 1 cm X 1 cm

  1. 考虑缩短面包屑路径,仅包含最后一个级别。

On some pages, a single breadcrumb pointing up a level may be all that is necessary to support the main user goals. For example, on an ecommerce site, if a user lands on a product-detail page (via a Google search, for example), she may wish to see other product options in that same category to comparison shop, so a breadcrumb linking up to the parent level in the hierarchy can support this common task. This solution avoids a long, crowded breadcrumb trail that eats up precious mobile real estate.

请注意,此建议与准则#8冲突,只能在手机上执行。在桌面上-有更多的空间-总是显示完整的轨迹。

移动面包屑与桌面面包屑相比,移动面包屑只显示层次结构中的最后一层
bestbuy.com:移动网站(顶部)显示截断面包屑(1)那allowing access up to the immediate parent category. The desktop site (bottom) presented the full breadcrumb trail(2)。这种在移动设备上妥协支持了某种方式,但避免占用珍贵的房地产。

Summary

面包屑是一种辅助导航形式,协助用户在分层结构附近进入附近的内容。当用户通过外部链接到达网站时,它们特别有用,并不与主页开始。确保面包屑路径中的所有项目都是链接,并且每个单个节点都会更具体地进入站点时。在手机上,面包屑可以占用太多空间或者很难挖掘;如果您的用户的任务允许它,请考虑缩短面包屑路径。