E5.05.1locational breadcrumb设计研究

面包屑表达层级路径而非历史路径

别名: 位置型面包屑 · hierarchy trail · 非历史路径

概念解释

面包屑(breadcrumb)画出的是当前页在分类树上的位置:从根到当前节点的那一条层级路径。它回答「我在这棵树的哪一层」,不回答「我刚才走过哪些页面」。从搜索结果点进一件商品,面包屑仍应是「商城 / 家具 / 椅子 / 这把椅子」,而不是「首页 → 搜索 → 这把椅子」。后者是浏览历史,应由返回来承担。

机制

分类树是一份共享地图。人用面包屑做两件事:确认当前节点挂在哪一个父级下,以及沿父级跳到树上的任意祖先。这两件事都依赖路径表示「属于」,而不是「来过」。历史路径因人、因入口而变:同一件商品可以从广告、搜索、收藏、站内信抵达,若面包屑跟着变,地图就不再共享,用户也无法学会「点倒数第二段会到该类目」。层级路径稳定,历史路径不稳定,所以面包屑一旦改画成轨迹,它作为定向装置就失效。

把两者画在同一条里还会教错返回模型。用户点面包屑的上一级,期望的是「到父节点」,系统若按历史弹出,可能退到搜索页而不是类目页。之后用户再也不敢点面包屑,这条控件就浪费了。搜索、过滤、推荐都是进入树的斜坡,不是树上的节点,不该插入面包屑中间。

怎么研究

定位提问:从非树入口(搜索、外链、通知)进入同一叶节点,问「你现在在哪一类下面」并让人用面包屑跳到父级。自变量是面包屑画层级还是画历史。因变量是父级命名正确率、点击面包屑后落地是否为父节点、以及是否与返回的落点被当成同一件事。

再加一条路径一致性:同一叶从三条入口进入,看面包屑是否仍是同一串。不一致即控件在画轨迹而非地图。

边界

没有稳定分类树的产品(聊天、时间线、画布)不该硬造面包屑,位置应由标题或其他结构表达。有些流程是线性向导而不是树,那是步骤条的工作。少数工具用「最近访问」条,它必须从视觉上与面包屑分开,并明确写「最近」而不是假装成层级。多父级对象(一篇文章挂在两个栏目)会让单条面包屑撒谎,需要选一条主路径或同时标明「也属于」。单层站点只有根和叶,面包屑几乎没有信息量,可以不放。

怎么落地

  • 面包屑只渲染分类树上从根到当前节点的祖先链,忽略本次会话怎么进来。
  • 每一段(当前页除外)都链到该祖先节点本身,不要链到历史栈里的某一帧。
  • 搜索、标签、推荐作为入口时,可在页内另写「从搜索到来」,不要插进面包屑中间。
  • 验证:从搜索、收藏、站外链各进同一详情一次,三张截屏的面包屑应逐字相同。再点倒数第二段,落地必须是父节点,而不是浏览器历史里的上一页。

延伸

  • 同组E5.05.2 深层级需要中段省略策略 · E5.05.3 面包屑不能替代返回
  • 相邻E5.10 步骤条 · E5.01 顶部导航栏
  • 站内检索locational breadcrumb · hierarchical trail · wayfinding

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.05.1