Breadcrumbs are an important navigational element that supportswayfinding- 让用户了解其当前位置的网站的分层结构。面包屑是代表当前页面及其“祖先”(父页,祖父母页等)的链接列表,通常一直返回网站主页。nn / g一直推荐面包屑1995年,因为它们对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 should not replace the global navigation bar or the local navigation within a section.

Breadcrumbs are intended tosupplement其他导航组件,例如跨越每页顶部的全局导航栏或左侧通常在左侧发现的本地导航栏。面包屑增强但不要替换这些主要的导航形式。

不寻常的面包屑,包括下拉菜单
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. 面包屑应在站点的层次结构中显示当前位置,而不是会话历史记录。

面包屑并不意图显示在网站上的会话期间遍历的页面历史(洛杉矶浏览器的本地人Back按钮);它们旨在显示该网站的层次结构。多年来我们已经注意到了这一点,但它仍然是重复的;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 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.

面包屑不包括来自导航的逻辑类别,这些类别不是他们自己的不同页面
newegg.com:全球导航Megamenu(Top)有子类别,没有自己的页面 - 例如,商业网络 1)。在有线网络页面(底部),面包屑小径(2)不包括商业网络,因为子类别没有关联页面。
  1. 面包屑不是必需的(或有用的)对于仅有1或2级的扁平层次结构,或在结构中线性的网站。

对于仅具有1或2个类别的平板层次结构的网站,不需要面包屑作为WayFinding设备。在这种情况下,考虑清楚地指示页面内存的顶级部分或类别。

网站具有平坦的层次结构,不需要面包屑
麻省理工学院的主要网站有一个平面层次结构,每个部分只有1个页面。虽然它在页面顶部的面包屑中,但不需要这种面包屑。在主导航中,突出显示页面的位置。

线性导航网站,无需面包屑
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.

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

在移动设备上使用面包屑的指南

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

  1. 不要使用包裹到多行的面包屑。

在移动网站上,面包屑可以快速包裹在多条线上,并在已经拥挤的移动显示器上享有有价值的空间。多线面包屑轨迹没有说明链条的结构(特别是当某些物品占用自己的线路时,其他项目可能在单行中有两个或多个链接)

面包屑在移动站点上是如此之大,它推动折叠下方的页面标题
Rei.com的移动网站使用这么多的房地产为填充迹线推动产品名称折叠下方,即使在大型移动设备上(在这种情况下,iphone x)。
  1. 不要使用太小或太拥挤的面包屑。

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)。这种在移动设备上妥协支持了某种方式,但避免占用珍贵的房地产。

概括

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