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

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

最近有同學(xué)問我:

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

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

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

一、面包屑｜Breadcrumb

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

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

1. 顯示用戶瀏覽的軌跡，并能向上返回。
2. 表示當(dāng)前頁面在產(chǎn)品系統(tǒng)層級和結(jié)構(gòu)中的位置，也即：每個(gè)面包屑都在產(chǎn)品的層級和結(jié)構(gòu)上存在一定的關(guān)系。
3. 每一層有明顯的從屬關(guān)系，前一個(gè)面包屑是后一個(gè)面包屑的來源頁面，也即：前后兩個(gè)面包屑在頁面上存在一定的關(guān)系。
4. 點(diǎn)擊返回前面的面包屑，后面的面包屑就會消失。也即：面包屑并不支持前后兩個(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)前頁面的信息和功能。

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

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

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

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

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

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

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

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

三、標(biāo)簽頁｜Tabs

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

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

1. 將同一級別的大塊內(nèi)容進(jìn)行收納和展示，以保持界面整潔。（帶有下拉菜單的面包屑就是對應(yīng)著這類頁面，切換頁面中的內(nèi)容模塊時(shí)不會跳轉(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)簽頁不會消失。

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