面包屑对格林童话里的兄妹没有帮助，但对你的网站有

Original 米拉 Bytebase 2023-10-31

早上看产研周报的时候瞄到一眼「面包屑」三个字，因为是个面包脑袋，所以快速识别到了这几个字，在我的认知里，面包屑和 Bytebase 好像并不对付？

其实这里说的是面包屑导航啦，加上图是不是容易理解一点！

为什么叫面包屑 Breadcrumb

面包屑导航源于格林童话《汉赛尔和格莱特》（别名:《糖果屋历险记》《糖果屋》），汉赛尔和格莱特在森林里留下一串面包屑方便找回家的路（不幸的是，后来鸟儿来了吃掉了他们的面包屑……）。

网站的面包屑导航可以向用户展示他们在网站上的路径，并允许用户重新追溯步骤。

通常来说，面包屑导航可以是个很有用的工具。它可以通过减少用户需要执行的操作次数来提升用户体验，提升网站部分和页面的存在感。它还是一种有效的视觉辅助工具（不会在网页里迷路了！）。

有三种类型的面包屑导航：

基于位置：指示了用户在的当前页面在网站层次结构中的位置，并为着陆页提供重要背景信息。常用的分隔符有 >, /, >> 这些。
基于属性：这些用于具有筛选或排序内容的网站。它们显示用户选择的属性或筛选器，并展示这些选择如何导致当前页面。这种常见于电商平台，例如，如果用户按尺寸和颜色对产品进行了筛选，那面包屑就会显示这些属性。
基于路径：这些显示用户到达当前页面所经过的实际路径。例如，如果用户通过一系列筛选器或搜索结果进行导航，面包屑将显示该路径上每个步骤，理论上说这为用户提供了便捷方式来返回上一页或浏览相关内容，不过后退键其实也可以做到类似效果？🤔

Bytebase 用的是第一种，也是市面上最流行的：基于位置的导航，无论你从哪个路径到的最终页面，面包屑始终是最简路径。

这是个经典的「You don’t know what you don’t know」案例，即「你不知道自己不知道的事情」。不知道面包屑特指什么之前，其实我也不知道有面包屑这个术语。。。😅

现在你也多一个冷知识了！快去和你的朋友卖弄吧

「你知道面包屑是啥吗」

「知道呀，网页上的导航」

「那你知道它为什么叫面包屑」

「🤔」

「🥶」

继续滑动看下一个