Breadcrumbs are an important navigational element that supportswayfinding- 让用户了解其当前位置的网站的分层结构。面包屑是代表当前页面及其“祖先”(父页,祖父母页等)的链接列表,通常一直返回网站主页。nn / g一直推荐面包屑1995年,因为它们对UI几乎没有成本为用户提供了许多好处。
面包屑表示为页面顶部的链接路径,通常在全球导航之下;主页(或层次结构的根节点)是第一个链接,链接通常由符号“>”或“/”分隔。我们推荐“>”字符,尽管没有功能差异,也是可以接受的。

如果用户通过该页面的所有祖传页面从主页到达一个深入的页面,他们将有一个相当清楚的了解他们在网站信息层次结构中的位置。但是,当他们跳过一些这些级别时(例如,他们通过点击诸如搜索引擎结果等外部链接到达网站时),面向填充它们并帮助他们找到其他,可能更相关的页面。
深页通常在相对狭窄的特定主题上显示内容,但面包屑路径可以引导用户在当前页面的父节点和祖父节点中的更多常规内容。
在桌面上使用面包屑的指南
- Breadcrumbs should not replace the global navigation bar or the local navigation within a section.
Breadcrumbs are intended tosupplement其他导航组件,例如跨越每页顶部的全局导航栏或左侧通常在左侧发现的本地导航栏。面包屑增强但不要替换这些主要的导航形式。

- 面包屑应在站点的层次结构中显示当前位置,而不是会话历史记录。
面包屑并不意图显示在网站上的会话期间遍历的页面历史(洛杉矶浏览器的本地人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.
- 对于多角形站点,面包屑应在网站的多主导体中显示单个途径。
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.
如果页面具有多个不同的父项,请在站点层次结构中标识其上的规范路径,并显示面包屑路径中的路径。不要尝试个性化面包屑轨迹,以便它将反映每个用户在站点层次结构中的各个路径,因为您将最终将混合信号发送到搜索引擎。您仍然需要将层次结构中的一个路径指定为来自外部链接的访问者的主路径。
- Include the current page as the last item in the breadcrumb trail.
- 在面包屑路径中,对应于当前页面的面包屑不应是链接。
你永远不应该有一个没有任何作用的链接。最后的面包屑(表示当前页面)不应该是链接。为避免令人困惑的用户,可视地区分当前页面和前面的链接的面包屑项目,优选地使用带下划线或蓝色文本。

- 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.

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


- 面包屑小径应以与主页的链接开始。
就像我们一样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.
- 不要使用包裹到多行的面包屑。
在移动网站上,面包屑可以快速包裹在多条线上,并在已经拥挤的移动显示器上享有有价值的空间。多线面包屑轨迹没有说明链条的结构(特别是当某些物品占用自己的线路时,其他项目可能在单行中有两个或多个链接)

- 不要使用太小或太拥挤的面包屑。
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。
- 考虑缩短面包屑路径,仅包含最后一个级别。
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冲突,只能在移动设备上完成。在桌面上 - 在哪里有更多空间 - 始终显示完整的路径。

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