起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識詳解｜B 端產品中的 Tabs，可以當作面包屑使用么？
本文全面講解了B端產品常用組件面包屑（Breadcrumb）和標簽頁（Tabs）的使用特點，幫助產品設計者更好地應對不同場景下的需求，提高用戶體驗。同時深入分析了這兩個組件在頁面結構、瀏覽軌跡、操作鏈路等方面的區別和聯系，給出了具體實例和使用指南，
面包屑（Breadcrumb）和標簽頁（Tabs）是 B 端產品中常用的兩個組件。
最近有同學問我:
“帶有下拉菜單的面包屑應該怎么使用呢”？
“標簽頁可以當作面包屑來使用么”？
本文就來詳細分析下這三者的區別和聯系，幫助你做好應用。
一、面包屑｜Breadcrumb
我們常見的面包屑組件樣式如下圖幾種：
其用法特點是：
- 顯示用戶瀏覽的軌跡，并能向上返回。
- 表示當前頁面在產品系統層級和結構中的位置，也即：每個面包屑都在產品的層級和結構上存在一定的關系。
- 每一層有明顯的從屬關系，前一個面包屑是后一個面包屑的來源頁面，也即：前后兩個面包屑在頁面上存在一定的關系。
- 點擊返回前面的面包屑，后面的面包屑就會消失。也即：面包屑并不支持前后兩個頁面中任務的并行操作。
- 原則上每一個面包屑都是一次頁面的跳轉。
- 當前頁面的面包屑可以不做展示，比如下圖中 Fluent Design 和 Carbon Design 都默認當前頁面的面包屑不展示：
前兩者更強調頁面的來源和功能框架；后者則更強調當前頁面的信息和功能。
二、帶下拉菜單的面包屑｜Breadcrumb with Dropdown
帶有下拉菜單的面包屑樣式如下：
下拉菜單中的內容呈現思路有兩種：
1. 下拉菜單中的內容代表與該一級面包屑同一級別的內容。比如下圖中的例子：二兒子、三兒子、四兒子都和 “大兒子” 是同一個層級，都歸屬于 “爸爸” 的下一級：
2. 下拉菜單中的內容代表該面包屑的子集內容。比如下圖中例子：大兒子、二兒子都是“兒子”的子集（注意是子集，不是下一級）：
如果切換某一個面包屑的下拉菜單選項，后一個面包屑也會隨著切換而消失，不會保留。
這種帶有下拉菜單式的面包屑并不常見，其使用場景是：當前頁面承載的內容過多，有可能使用了錨點導航、標簽頁等方式對同一級別的內容做了區分，將當前頁面劃分了多個模塊。
這種情況使用下拉菜單面包屑，可以便于用戶快速做切換，即刻定位到想要看的內容區域，同時頁面也不會發生跳轉。
三、標簽頁｜Tabs
Tabs 標簽頁也可以被叫做“選項卡組件”常見的樣式如下圖：
其用法特點是：
1. 將同一級別的大塊內容進行收納和展示，以保持界面整潔。（帶有下拉菜單的面包屑就是對應著這類頁面，切換頁面中的內容模塊時不會跳轉頁面），如下示例：
2. 提供可關閉、可添加的樣式，常用于承載內容的容器頂部，如下示例：
3. 可以表示瀏覽的痕跡（并非“軌跡”，因為前后的標簽頁可能并不具備邏輯關系，只有瀏覽時間上的先后順序）。如下示例：
4. 不同標簽頁中的內容可以同時進行操作，且操作鏈路互不干擾。因此點擊或關閉一個標簽頁，其后面的標簽頁不會消失。
你可以看看這些組件的特點，根據你的產品功能和業務場景來做恰當的應用。
專欄作家
元堯，微信公眾號：長弓小子，人人都是產品經理專欄作家。一線互聯網大廠B端體驗設計師，清華大學美術學院本碩連讀。曾負責國內最大開源組件庫Ant Design組件的設計和運營工作，目前負責國際業務線B端產品體驗設計和組件庫的搭建工作。
本文原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
后臺