设计与交互产品交互设计@产品

面包屑导航知识补缺

2017-04-04  本文已影响358人  东炜黄

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

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

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

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

1. 固定展示一个路径

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

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

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

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

2. 同时展示多个路径

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

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

3. 动态展示一个路径

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

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

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

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

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

上一篇 下一篇

猜你喜欢

热点阅读