网站上的 breadcrumb 使用场景浅析

Posted 2022-05-16 JerryWang汪子熙

下图是 SAP Spartacus 电商云 UI 的 breadcrumb Angular Cloud Portal 的源代码。Component 的 crumbs$ 数据，通过结构化指令 ​​*ngFor​​​ 展开，然后通过 ​​span​​​ 和 ​​a​​ 标签渲染。

breadcrumb 的 Component 区域仅限于此：

“breadcrumb”（或“breadcrumb trail”）是一种二级导航方案，用于显示用户在网站或 Web 应用程序中的位置。 这个词来自汉塞尔和格莱特的童话故事，其中两个有头衔的孩子丢下面包屑，形成一条回家的路。 就像在故事中一样，现实世界应用程序中的 breadcrumb 为用户提供了一种追踪路径回到其原始着陆点的方法。

下图就是 Spartacus 中 breadcrumb 具体的导航路径，通过 ​​Sony->Camera Flashes->Home​​ 的依次点击，可以回到 home 页面，这个过程还是非常直观的。

您通常可以在以分层方式组织大量内容的网站中找到 breadcrumb. 您还可以在具有多个步骤的 Web 应用程序中看到它们，它们的功能类似于进度条。 在最简单的形式中，breadcrumb 是水平排列的文本链接(就像 SAP Spartacus)，由某种特殊符号分隔(比如 Spartacus 中的 ​​/​​)；该符号表示该页面相对于其旁边的页面链接的级别。

什么时候应该使用 breadcrumb？

对大型网站和具有分层排列页面的网站使用 breadcrumb 导航。 一个很好的场景是电子商务网站，其中大量的产品被分组到逻辑类别中。

相反的，不应该将 breadcrumb 用于没有逻辑层次结构或分组的单级网站。 确定网站是否会从 breadcrumb 导航中受益的一个好方法是构建站点地图或表示网站导航架构的图表，然后分析 breadcrumb 是否会提高用户在类别内和类别之间导航的能力。

breadcrumb 导航应被视为一项额外功能，不应取代有效的主导航菜单。 这是一个方便的功能； 辅助导航方案，允许用户确定他们的位置； 以及浏览您的网站的另一种方式。