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

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

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

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

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

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

一、面包屑｜Breadcrumb

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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