面包屑导航知识补缺

作者: 东炜黄 | 来源:发表于2017-04-04 15:11 被阅读358次

面包屑导航是 UI 设计上经典且重要的一个设计模型,作用是告诉用户当前页面的位置或来源路径。我虽然看过不少相关介绍和最佳实践,但还是第一次遇到这样的问题:

如果到达这个页面的路径不止一个,面包屑导航该如何表达?

《多设备时代的 UI 设计设计法则》一书提到三种解决思路:

  1. 固定展示一个路径
  2. 同时展示多个路径
  3. 动态展示一个路径

1. 固定展示一个路径

这很好理解,也应该是最常见的一种,就是无论用户从哪个路径来,面包屑导航只固定展示一个。比如美团上的「瑞可爷爷的店(正佳广场店)」,无论你:

  • 直接搜索
  • 先找「天河区」再找「甜点饮品」
  • 先找「甜点饮品」再找「天河区」

最终面包屑导航都是一样的。

面包屑导航:广州团购 » 美食团购 » 甜点饮品 » 天河区 » 正佳广场 » 瑞可爷爷的店(正佳广场店)

问题是,如何确定展示哪个路径?这恐怕就要考虑各自的分类标准了。

2. 同时展示多个路径

这种情况我还真没遇见过,但书里提到乐天就是这么操作的,于是去看了下,果然如此,不知道是不是日本独有的设计风格。

页面上同时出现 4 个面包屑导航

3. 动态展示一个路径

这也很好理解,比如在亚马逊网站中找《细节》这本书,按照分类一级级找下去,最终的面包屑导航是这样的:

面包屑导航:图书 > 经济管理 > 企业经营与管理

可如果你直接搜索,面包屑导航却是这样的:

面包屑导航:返回对 "细节" 的搜索结果

再对比了京东和当当,无论以哪种方式来找,最终都只显示同样的路径(也即是第一种固定展示的方式)。

相关文章

网友评论

  • 东炜黄:再补充一个:当层级过多时,可以考虑使用省略符 + 下拉菜单的样式。如 http://wx1.sinaimg.cn/mw690/6e4dcabfgy1fh49qea5o8j20jw091abd.jpg
  • 93499f2d66ab:能否讨论评价下,三种模式的比较?
    东炜黄:@卓耀 👍 不妨再去问问程序员哥哥,看看每一种在技术实现上成本如何
    93499f2d66ab:@Dominic_H
    个人倾向于动态;
    1.用户无须学习、也不会学习站点内的层级关系(因此无须显示固定或所有层级);
    2.固定层级关系可能罗列结果过多,造成数据冗余(话说日本电商网站用户体验比国内还差,从用户交互体验比亚马逊>国内电商>日本电商);
    3.动态模式便于用户回溯。
    东炜黄:你自己的思考呢?

本文标题:面包屑导航知识补缺

本文链接:https://www.haomeiwen.com/subject/araaottx.html