面包屑导航是 UI 设计上经典且重要的一个设计模型,作用是告诉用户当前页面的位置或来源路径。我虽然看过不少相关介绍和最佳实践,但还是第一次遇到这样的问题:
如果到达这个页面的路径不止一个,面包屑导航该如何表达?
《多设备时代的 UI 设计设计法则》一书提到三种解决思路:
- 固定展示一个路径
- 同时展示多个路径
- 动态展示一个路径
1. 固定展示一个路径
这很好理解,也应该是最常见的一种,就是无论用户从哪个路径来,面包屑导航只固定展示一个。比如美团上的「瑞可爷爷的店(正佳广场店)」,无论你:
- 直接搜索
- 先找「天河区」再找「甜点饮品」
- 先找「甜点饮品」再找「天河区」
最终面包屑导航都是一样的。
面包屑导航:广州团购 » 美食团购 » 甜点饮品 » 天河区 » 正佳广场 » 瑞可爷爷的店(正佳广场店)问题是,如何确定展示哪个路径?这恐怕就要考虑各自的分类标准了。
2. 同时展示多个路径
这种情况我还真没遇见过,但书里提到乐天就是这么操作的,于是去看了下,果然如此,不知道是不是日本独有的设计风格。
页面上同时出现 4 个面包屑导航3. 动态展示一个路径
这也很好理解,比如在亚马逊网站中找《细节》这本书,按照分类一级级找下去,最终的面包屑导航是这样的:
面包屑导航:图书 > 经济管理 > 企业经营与管理可如果你直接搜索,面包屑导航却是这样的:
面包屑导航:返回对 "细节" 的搜索结果再对比了京东和当当,无论以哪种方式来找,最终都只显示同样的路径(也即是第一种固定展示的方式)。
网友评论
个人倾向于动态;
1.用户无须学习、也不会学习站点内的层级关系(因此无须显示固定或所有层级);
2.固定层级关系可能罗列结果过多,造成数据冗余(话说日本电商网站用户体验比国内还差,从用户交互体验比亚马逊>国内电商>日本电商);
3.动态模式便于用户回溯。