面包屑导航知识补缺
2017-04-04 本文已影响358人
东炜黄
面包屑导航是 UI 设计上经典且重要的一个设计模型,作用是告诉用户当前页面的位置或来源路径。我虽然看过不少相关介绍和最佳实践,但还是第一次遇到这样的问题:
如果到达这个页面的路径不止一个,面包屑导航该如何表达?
![](https://img.haomeiwen.com/i64365/f15c7eb2afe99000.png)
《多设备时代的 UI 设计设计法则》一书提到三种解决思路:
- 固定展示一个路径
- 同时展示多个路径
- 动态展示一个路径
1. 固定展示一个路径
这很好理解,也应该是最常见的一种,就是无论用户从哪个路径来,面包屑导航只固定展示一个。比如美团上的「瑞可爷爷的店(正佳广场店)」,无论你:
- 直接搜索
- 先找「天河区」再找「甜点饮品」
- 先找「甜点饮品」再找「天河区」
最终面包屑导航都是一样的。
![](https://img.haomeiwen.com/i64365/81fde245b7855864.png)
问题是,如何确定展示哪个路径?这恐怕就要考虑各自的分类标准了。
2. 同时展示多个路径
这种情况我还真没遇见过,但书里提到乐天就是这么操作的,于是去看了下,果然如此,不知道是不是日本独有的设计风格。
![](https://img.haomeiwen.com/i64365/20c8a45b9a1b9e33.png)
3. 动态展示一个路径
这也很好理解,比如在亚马逊网站中找《细节》这本书,按照分类一级级找下去,最终的面包屑导航是这样的:
![](https://img.haomeiwen.com/i64365/e1dd0cbc2557044f.png)
可如果你直接搜索,面包屑导航却是这样的:
![](https://img.haomeiwen.com/i64365/487b3dff391c988a.png)
再对比了京东和当当,无论以哪种方式来找,最终都只显示同样的路径(也即是第一种固定展示的方式)。