本文全面講解了B端產(chǎn)品常用組件面包屑（Breadcrumb）和標簽頁（Tabs）的使用特點，幫助產(chǎn)品設計者更好地應對不同場景下的需求，提高用戶體驗。同時深入分析了這兩個組件在頁面結(jié)構(gòu)、瀏覽軌跡、操作鏈路等方面的區(qū)別和聯(lián)系，給出了具體實例和使用指南，

面包屑（Breadcrumb）和標簽頁（Tabs）是 B 端產(chǎn)品中常用的兩個組件。

最近有同學問我:

“帶有下拉菜單的面包屑應該怎么使用呢”？

“標簽頁可以當作面包屑來使用么”？

本文就來詳細分析下這三者的區(qū)別和聯(lián)系，幫助你做好應用。

一、面包屑｜Breadcrumb

我們常見的面包屑組件樣式如下圖幾種：

其用法特點是：

1. 顯示用戶瀏覽的軌跡，并能向上返回。
2. 表示當前頁面在產(chǎn)品系統(tǒng)層級和結(jié)構(gòu)中的位置，也即：每個面包屑都在產(chǎn)品的層級和結(jié)構(gòu)上存在一定的關系。
3. 每一層有明顯的從屬關系，前一個面包屑是后一個面包屑的來源頁面，也即：前后兩個面包屑在頁面上存在一定的關系。
4. 點擊返回前面的面包屑，后面的面包屑就會消失。也即：面包屑并不支持前后兩個頁面中任務的并行操作。
5. 原則上每一個面包屑都是一次頁面的跳轉(zhuǎn)。
6. 當前頁面的面包屑可以不做展示，比如下圖中 Fluent Design 和 Carbon Design 都默認當前頁面的面包屑不展示：

前兩者更強調(diào)頁面的來源和功能框架；后者則更強調(diào)當前頁面的信息和功能。

二、帶下拉菜單的面包屑｜Breadcrumb with Dropdown

帶有下拉菜單的面包屑樣式如下：

下拉菜單中的內(nèi)容呈現(xiàn)思路有兩種：

1. 下拉菜單中的內(nèi)容代表與該一級面包屑同一級別的內(nèi)容。比如下圖中的例子：二兒子、三兒子、四兒子都和 “大兒子” 是同一個層級，都歸屬于 “爸爸” 的下一級：

2. 下拉菜單中的內(nèi)容代表該面包屑的子集內(nèi)容。比如下圖中例子：大兒子、二兒子都是“兒子”的子集（注意是子集，不是下一級）：

如果切換某一個面包屑的下拉菜單選項，后一個面包屑也會隨著切換而消失，不會保留。

這種帶有下拉菜單式的面包屑并不常見，其使用場景是：當前頁面承載的內(nèi)容過多，有可能使用了錨點導航、標簽頁等方式對同一級別的內(nèi)容做了區(qū)分，將當前頁面劃分了多個模塊。

這種情況使用下拉菜單面包屑，可以便于用戶快速做切換，即刻定位到想要看的內(nèi)容區(qū)域，同時頁面也不會發(fā)生跳轉(zhuǎn)。

三、標簽頁｜Tabs

Tabs 標簽頁也可以被叫做“選項卡組件”常見的樣式如下圖：

其用法特點是：

1. 將同一級別的大塊內(nèi)容進行收納和展示，以保持界面整潔。（帶有下拉菜單的面包屑就是對應著這類頁面，切換頁面中的內(nèi)容模塊時不會跳轉(zhuǎn)頁面），如下示例：

2. 提供可關閉、可添加的樣式，常用于承載內(nèi)容的容器頂部，如下示例：

3. 可以表示瀏覽的痕跡（并非“軌跡”，因為前后的標簽頁可能并不具備邏輯關系，只有瀏覽時間上的先后順序）。如下示例：

4. 不同標簽頁中的內(nèi)容可以同時進行操作，且操作鏈路互不干擾。因此點擊或關閉一個標簽頁，其后面的標簽頁不會消失。

你可以看看這些組件的特點，根據(jù)你的產(chǎn)品功能和業(yè)務場景來做恰當?shù)膽谩?/p>