面包屑（Breadcrumb）和標(biāo)簽頁（Tabs）是 B 端產(chǎn)品中常用的兩個組件。最近有同學(xué)問我:

"帶有下拉菜單的面包屑應(yīng)該怎么使用呢？"

"標(biāo)簽頁可以當(dāng)作面包屑來使用么？"

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

一、面包屑

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

其用法特點是：

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

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

二、帶下拉菜單的面包屑

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

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

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

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

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

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

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

三、標(biāo)簽頁

Tabs 標(biāo)簽頁也可以被叫做"選項卡組件"常見的樣式如下圖：

其用法特點是：

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

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

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

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

你可以看看這些組件的特點，根據(jù)你的產(chǎn)品功能和業(yè)務(wù)場景來做恰當(dāng)?shù)膽?yīng)用。

作者：長弓小子