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

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

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

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

一、面包屑

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

其用法特點(diǎn)是：

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

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

二、帶下拉菜單的面包屑

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

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

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

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

3. 如果切換某一個(gè)面包屑的下拉菜單選項(xiàng)，后一個(gè)面包屑也會(huì)隨著切換而消失，不會(huì)保留。

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

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

三、標(biāo)簽頁

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

其用法特點(diǎn)是：

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

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

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

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

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

作者：長(zhǎng)弓小子