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

原创
2023/10/12 17:12
阅读数 33

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

file

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

file

为什么叫面包屑 Breadcrumb

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

file

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

面包屑 101

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

file

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

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

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

Image

YDKWYDK

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

现在你也多一个冷知识了!快去和你的朋友卖弄吧 「你知道面包屑是啥吗」 「知道呀,网页上的导航」 「那你知道它为什么叫面包屑」 「🤔」 「🥶」


💡 你可以访问官网,免费注册云账号,立即体验 Bytebase。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部