面包屑导航知识补缺

作者: 东炜黄 | 来源:发表于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