作为一个两年的B端UI设计，突然发现一个奇怪的现象，最近查看众多B端产品页面时，发现之前经常出现在顶部菜单栏下方的标签页消失啦，面包屑取代了标签页的地位。对此现象，产生了疑问🤔️？两者有什么关系及是什么原因产生这个现象？收集网上资料汇总整理及思考给出答案，有补充或说明的欢迎指点！

文章以下列目录进行解释说明：

  1. 定义
  2. 说明
  3. 分析
  4. 总结

一、定义

1、面包屑导航（页面路径）

截屏2022-01-16 13.05.52.png

定义

  • 面包屑通常水平地出现在页面顶部，一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接（这些链接也是能到达当前页面的路径），在层级架构中通常是这个页面的父级页面。
  • 面包屑提供给用户回溯到网站首页或入口页面的一条快速路径，它们绝大部分看起来就像这样：首页→分类页→次级分类页

    分类

    1.路径型(Path)

    路径型面包屑是一个动态显示用户到达页面经过的途径。当用户需要处理的事务构成了一种逻辑上的先后顺序，就形成了业务路径。与浏览器后退功能重复。

如下图所示：【我是卖家>店铺管理>域名设置】，在这个路径中，用户可以很明显的知道自己所要办理的业务，属于哪个模块下面，便于用户进行业务上的操作配置。
截屏2022-01-15 23.19.00.png

2.位置型(Location)

位置型面包屑是固定的，显示了页面在网站结构中的位置。这种类型的面包屑导航可以很好的指出当前页面与整个站点的层次结构。可以显示当前页面的前一个页面或者目录的链接。使访客了解自己的位置，以及更快的找到自己想要到达的页面。

如下图所示：【首页>行业动态>综合百货行业动态】，用户到达这个页面需要先点击首页，再点击行业动态，接着在点击综合百货才能到达。
截屏2022-01-15 23.13.49.png

3.属性型(Attribute)

属性型面包屑给出当前页面的分类信息。对于一个产品来说，所具有的属性往往不只有一种，而通过这种面包屑导航可以给消费者一个更加直观的了解。当事物的属性存在层级关系时，便可以形成路径。层次属性是指在网站中，属性表现出来的多层次的特征。

比如下图路径在：【腾讯QQ专区>QQ专秀>QQ秀服饰】 QQ秀服饰属于QQ秀，而QQ秀又属于腾讯QQ专区。像这种从属关系的路径，就可以用面包屑来展示，直观明了。

截屏2022-01-15 23.17.50.png

2、标签页导航（页签）截屏2022-01-16 12.27.34.png

定义

  • Element规范中归属导航-标签页，定义为分隔内容上有关联但属于不同类别等数据集合。
  • Ant Design规范中归属于数据展示-标签页，定义为选项卡切换组件，提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
  • Arco.design规范中同Ant一样归属于数据展示-标签页，定义为将内容组织同一视图中，一次可查看一个视图内容，查看其他内容可切换选项卡查看。
  • Tdesign规范介绍中为导航-标签选项卡，定义为用户可在同一级别下不同页面或类别的组件，方便在同一个页面框架下进行快速切换。
  • 维基百科中又称为页签，Windows内建的浏览器又称为索引标签。指的是在账册或是资料夹边缘用来索引用的标签，抓住的话可以来快速检索特定页面，分页浏览器就是以此为概念制作成图形使用者界面。

    分类

    根据上面几种规范，将标签页自己理解划分为以下四类：样式类（样式、图标）、操作类（增删拖拽）、位置类（布局位置）、自定义（混合）。

    1、样式类

    主要是对标签样式进行编辑，如：基础样式、卡片样式、图标样式等。
    截屏2022-01-16 13.29.36.png
    截屏2022-01-16 13.30.23.png
    截屏2022-01-16 13.25.06.png

    2、操作类

    主要是对标签进行新增、删除、拖拽等操作。
    截屏2022-01-16 13.28.38.png
    截屏2022-01-16 13.29.14.png

    3、位置类

    通过选择标签影响页面内的布局。
    截屏2022-01-16 13.32.12.png
    截屏2022-01-16 13.31.49.png

    4、自定义

    会根据实际使用时进行自定义编辑或者混合使用，比如：图标卡片样式+操作。截屏2022-01-16 13.35.57.png截屏2022-01-16 13.37.59.png

二、对比

如果说面包屑在各个大厂规范中是毋庸置疑归属导航类，那么标签页就不知道到底是导航类还是数据展示类的孩子啦？不过从划分到数据展示类，可以想到在规范制定者们认知中对于标签页的看法或许并不是那么统一？根据各种对标签页及面包屑的资料整理，总结出以下异同点对比。


 面包屑 标签页
相同点
1. 了解用户所在位置，引导用户路线
2. 快速到达其他页面，方便用户操作
3. 实现SEO搜索优化
4. 都是辅助性导航
不同点 面包屑之间具有一定关联性，例如：层级属性。 标签页与标签页多为无关联性、并联关系。
使用场景多，可在顶部菜单下方或页面内容区等。 一般为顶部菜单下方或页面最下方。
功能上和浏览器的前进后退功能有所重复。 独立于浏览器，可以新增并删除标签页切换标签查看页面内容
聚焦当前页面层级信息，信息可不断深入。 首页标签页固定，其他标签页独立展示信息。

三、分析

在查看许多B端产品页面，并对面包屑取代标签页的现象有以下几种思考。

1、环境影响

B端产品发展过程中，是由原来的传统工程师主导转向专业的多工位（产品、交互、视觉、前端、后端）协同的作业方式的转变，专业人士对当前软件设计进行科学分析产生新的设计理念并使用，比如：2021年layui框架的关闭、Element UI框架在市场上的扩展、各大厂设计规范的陆续公布等。

2、产品架构

根据产品的复杂性和颗粒度进行不同的框架设计，对于简单的产品页面线性结构，面包屑的导航无疑是最适合的呈现方式。对于多并列关系的产品架构，标签页进行分类是比较合适的呈现方式。
image.png

3、技术革新

现有网络技术的革新，从面包屑也可以具备标签页的功能，甚至更多的自定义功能。网上现有组件情况来看，两者虽然都具备导航属性，但标签页导航无关联性、扩展性组件少、空间占用大等特点，面包屑具有关联性、扩展性组件多及空间占用较少等特点。
image.png
image.png

4、交互体验

从体验来说，标签页的并列属性适合多屏查看对比页面信息场景，而在使用时会产生信息割裂感，多标签页并列时会产生信息堆叠识别感下降。面包屑的关联属性在使用中可以让用户了解当前所处位置，以及当前页面在整个产品中的位置，对整体产品架构有清晰的认知。
截屏2022-01-16 16.27.57.png
截屏2022-01-16 16.13.56.png

四、总结

面包屑和标签页都是辅助性导航，对于一般B端产品用户引导来说，标签页导航替换成面包屑导航在实际使用中更加方便信息呈现更加聚焦，并且可以节省空间，留给信息展示更多空间。当然对于页面层级很简单的页面，或许一个返回按钮就可以解决问题，也不需要引导。

参考文章：
https://www.zhihu.com/question/19760227/answer/58054143
https://tdesign.tencent.com/vue/components/tabs
https://element.eleme.cn/?#/zh-CN/component/breadcrumb
http://www.woshipm.com/ucd/107620.html
http://www.woshipm.com/ucd/3112.html
http://www.woshipm.com/pd/4317776.html