發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象：幾乎每個(gè)做 B 端產(chǎn)品的團(tuán)隊(duì)，都會(huì)在某個(gè)階段收到用戶強(qiáng)烈要求——"能不能在系統(tǒng)里加個(gè)多頁(yè)簽（Tab）功能？"聽(tīng)起來(lái)很合理，但真做起來(lái)才發(fā)現(xiàn)，這事兒遠(yuǎn)比想象的復(fù)雜。

一、多頁(yè)簽確實(shí)能解決 B 端用戶的痛點(diǎn)

先說(shuō)說(shuō)為什么 B 端用戶這么喜歡多頁(yè)簽。對(duì)他們來(lái)說(shuō)，這功能確實(shí)很實(shí)用。想象一下，你在處理訂單的時(shí)候，需要同時(shí)查看客戶信息、庫(kù)存狀態(tài)、還得填寫(xiě)發(fā)貨單。如果沒(méi)有多頁(yè)簽，就得不停地在不同頁(yè)面之間跳來(lái)跳去，剛填到一半的表單因?yàn)樘D(zhuǎn)丟失了，又得重新開(kāi)始。

有了多頁(yè)簽就不一樣了，幾個(gè)任務(wù)可以同時(shí)進(jìn)行，需要對(duì)比數(shù)據(jù)的時(shí)候也方便，整個(gè)工作效率確實(shí)會(huì)提升不少。而且對(duì) B 端用戶來(lái)說(shuō)，他們的工作本身就是多任務(wù)并行的，多頁(yè)簽正好符合他們的工作習(xí)慣。

二、為什么用戶不愿意用瀏覽器的多頁(yè)簽？

你可能會(huì)問(wèn)，瀏覽器本身就有多頁(yè)簽功能，為什么用戶還要求在網(wǎng)頁(yè)內(nèi)部再做一套？

這其實(shí)有歷史原因。早期的 B 端用戶大多是從 Windows 客戶端軟件開(kāi)始接觸辦公系統(tǒng)的，那時(shí)候的軟件特別喜歡用選項(xiàng)卡（Tab 的另外一個(gè)譯名），像 Office、各種 ERP 系統(tǒng)都是這樣設(shè)計(jì)的。用戶從年輕時(shí)就習(xí)慣了這種交互方式。

Windows 的選項(xiàng)卡

傳統(tǒng) ERP 軟件的選項(xiàng)卡

關(guān)鍵是，Web 興起的時(shí)候，瀏覽器市場(chǎng)的老大是 IE。老版本的 IE 瀏覽器，跟現(xiàn)在的 Chrome、Edge 不一樣，它自己沒(méi)有多頁(yè)簽功能。你想同時(shí)看幾個(gè)網(wǎng)頁(yè)，就得開(kāi)好幾個(gè) IE 窗口，既笨重又麻煩。所以，當(dāng)企業(yè)把軟件從客戶端搬到網(wǎng)頁(yè)上時(shí)，用戶就自然而然地提出要求："我以前的軟件能同時(shí)開(kāi)好幾個(gè)窗口，你這個(gè)網(wǎng)頁(yè)版也得做到！"怎么辦呢？開(kāi)發(fā)人員只能在網(wǎng)頁(yè)內(nèi)部手動(dòng)模擬一套頁(yè)簽系統(tǒng)。

老版本的 IE 瀏覽器

就這樣，B 端網(wǎng)頁(yè)內(nèi)置多頁(yè)簽成了一種約定俗成的"標(biāo)配"。

雖然現(xiàn)在 Chrome 成了主流，瀏覽器自帶的頁(yè)簽功能已經(jīng)非常強(qiáng)大，但用戶的習(xí)慣一旦養(yǎng)成，就很難改變。對(duì)他們來(lái)說(shuō)，瀏覽器是瀏覽器，工作軟件是工作軟件。他們希望工作流的所有操作都在軟件內(nèi)部閉環(huán)，而不是跳到瀏覽器層面去管理。這種習(xí)慣，或者說(shuō)"肌肉記憶"，就是他們強(qiáng)烈要求內(nèi)置多頁(yè)簽功能的根本原因。

三、 第一個(gè)坑：寶貴的屏幕空間被占用了

B 端用戶對(duì)"屏效"特別敏感，也就是屏幕的利用效率。他們的工作界面通常信息密度很高，需要展示大量的表格、圖表、表單。

多頁(yè)簽雖然方便，但會(huì)占用一整條橫向空間。別小看這 30-40 像素的高度，對(duì) B 端用戶來(lái)說(shuō)，本來(lái)能顯示 10 行數(shù)據(jù)的表格，現(xiàn)在可能只能顯示 8 行了；本來(lái)一屏能看完的表單，現(xiàn)在非得往下滾一下才行。對(duì)于那些天天盯著數(shù)據(jù)大盤(pán)的用戶來(lái)說(shuō)，這簡(jiǎn)直是不能忍的。

我見(jiàn)過(guò)有些用戶為了節(jié)省空間，把多頁(yè)簽做得特別小，結(jié)果頁(yè)簽標(biāo)題顯示不全，用戶根本分不清哪個(gè)頁(yè)簽是什么內(nèi)容。這就本末倒置了。

左圖沒(méi)有多頁(yè)簽，表格能多顯示一行，而且界面看著也更簡(jiǎn)潔

四、第二個(gè)坑：層級(jí)關(guān)系越來(lái)越復(fù)雜

加了多頁(yè)簽之后，整個(gè)頁(yè)面的層級(jí)結(jié)構(gòu)就變得復(fù)雜了。

首先是視覺(jué)層級(jí)。想象一下，一個(gè)典型的 B 端后臺(tái)：左邊是全局導(dǎo)航菜單，頂部是全局標(biāo)題欄和用戶信息，現(xiàn)在中間又插入了一個(gè)多頁(yè)簽欄。這樣，頁(yè)簽里的內(nèi)容屬于頁(yè)簽，而頁(yè)簽又屬于全局菜單的某個(gè)功能。這種層層嵌套會(huì)讓整個(gè)界面看起來(lái)?yè)頂D復(fù)雜。設(shè)計(jì)師必須絞盡腦汁，用顏色、陰影、分割線去區(qū)分這些層級(jí)關(guān)系，稍有不慎，整個(gè)頁(yè)面就會(huì)顯得雜亂無(wú)章。

然后是交互層級(jí)。這個(gè)問(wèn)題更棘手。以彈窗為例，一個(gè)常見(jiàn)的"刪除確認(rèn)"彈窗，它應(yīng)該歸屬于誰(shuí)？

1. 如果它是全局彈窗，一旦出現(xiàn)，整個(gè)頁(yè)面都會(huì)被蒙層覆蓋。用戶就無(wú)法切換到其他頁(yè)簽查詢數(shù)據(jù)再回來(lái)做決定，多頁(yè)簽的優(yōu)勢(shì)立刻消失。
2. 如果它是頁(yè)簽內(nèi)彈窗，邏輯就更復(fù)雜了。比如，你在 A 頁(yè)簽點(diǎn)擊某個(gè)按鈕，觸發(fā)了 B 頁(yè)簽里的一個(gè)任務(wù)，然后 B 頁(yè)簽彈出了一個(gè)窗口。如果用戶沒(méi)處理這個(gè)窗口就切回 A 頁(yè)簽，B 頁(yè)簽的彈窗狀態(tài)該如何處理？這背后的邏輯狀態(tài)維護(hù)讓人頭疼不已。

五、第三個(gè)坑：鏈接跳轉(zhuǎn)邏輯變得超級(jí)復(fù)雜

在普通的網(wǎng)頁(yè)里，點(diǎn)擊鏈接通常只有三種結(jié)果：

1. 當(dāng)前頁(yè)面跳轉(zhuǎn)：適合線性流程，如"商品列表 → 商品詳情 → 下單"，一步接一步。
2. 瀏覽器新頁(yè)簽打開(kāi)：適合并行任務(wù)，如瀏覽搜索結(jié)果時(shí)，將感興趣的幾個(gè)都打開(kāi)，逐個(gè)查看。
3. 彈窗打開(kāi)：適合臨時(shí)、輕量級(jí)的操作，如確認(rèn)通知。

這三種方式場(chǎng)景明確，用戶已經(jīng)習(xí)以為常。

但一旦引入網(wǎng)頁(yè)內(nèi)的多頁(yè)簽，每個(gè)鏈接就必須面臨靈魂拷問(wèn)。選擇一下子增加到六種：

1. 瀏覽器當(dāng)前頁(yè)面刷新
2. 瀏覽器新頁(yè)簽打開(kāi)
3. 瀏覽器彈窗打開(kāi)
4. B 端網(wǎng)頁(yè)內(nèi)當(dāng)前頁(yè)簽刷新
5. B 端網(wǎng)頁(yè)內(nèi)新開(kāi)一個(gè)頁(yè)簽
6. B 端網(wǎng)頁(yè)內(nèi)彈出一個(gè)窗口

這意味著每次設(shè)計(jì)一個(gè)按鈕或鏈接，你都要反復(fù)思考：到底哪種方式最合適？

為了簡(jiǎn)化，你可能會(huì)說(shuō)："那我統(tǒng)一一下，所有操作都在 B 端網(wǎng)頁(yè)里新開(kāi)頁(yè)簽！"然而，這又會(huì)帶來(lái)新的邏輯問(wèn)題。以"列表頁(yè) → 新建表單頁(yè)"流程為例：用戶在新建頁(yè)簽里填完表單并保存后，正常邏輯是返回列表頁(yè)并刷新，顯示新建的數(shù)據(jù)。而使用新頁(yè)簽后，你需要額外添加邏輯：保存成功后自動(dòng)關(guān)閉新建表單頁(yè)簽，并通知列表頁(yè)頁(yè)簽刷新。這些額外的處理邏輯不僅增加了開(kāi)發(fā)成本，還容易引入Bug。

六、第四個(gè)坑：性能問(wèn)題防不勝防

每個(gè)頁(yè)簽，用戶都希望它能"記住狀態(tài)"。看報(bào)表的頁(yè)簽，用戶希望數(shù)據(jù)實(shí)時(shí)更新；填表單的頁(yè)簽，用戶又希望它保持不變，即使他填到一半切換出去處理其他事，再回來(lái)時(shí)草稿也應(yīng)原封不動(dòng)地保留。

要保存這些頁(yè)簽的狀態(tài)（包括數(shù)據(jù)、滾動(dòng)條位置、第三方庫(kù)實(shí)例等），意味著它們都必須在內(nèi)存中"活著"。開(kāi)三五個(gè)頁(yè)簽或許還行，但如果用戶開(kāi)了十幾個(gè)、二十個(gè)呢？特別是那些包含復(fù)雜圖表、地圖或引入多個(gè)第三方庫(kù)的頁(yè)面，內(nèi)存占用會(huì)急劇增加，最終導(dǎo)致整個(gè)網(wǎng)頁(yè)變得極其卡頓，甚至直接崩潰。

你可能會(huì)說(shuō)，瀏覽器自帶的多頁(yè)簽不也開(kāi)很多嗎，怎么就沒(méi)事？問(wèn)得好！多頁(yè)簽技術(shù)其實(shí)是個(gè)天坑。

早期的 IE 沒(méi)有這功能，后來(lái)像 Maxthon（傲游）這樣的第三方瀏覽器雖然提供了，但也是常年被崩潰問(wèn)題困擾?，F(xiàn)代瀏覽器能做到穩(wěn)定，是因?yàn)樗鼈儽澈笫枪雀?、Mozilla 這些巨頭投入了海量工程師，把瀏覽器本身做得幾乎像一個(gè)操作系統(tǒng)一樣復(fù)雜。你想想，F(xiàn)igma 這種能和 Photoshop 媲美的復(fù)雜應(yīng)用都能在瀏覽器里跑，你就知道現(xiàn)代瀏覽器的技術(shù)含量有多高了。你自己在 B 端頁(yè)面里再套一層頁(yè)簽，等于在 Windows 里再裝個(gè) Windows——技術(shù)債堆到火星，后期維護(hù)能讓你頭發(fā)掉光。

左圖是 Chrome 瀏覽器架構(gòu)，右圖是安卓系統(tǒng)架構(gòu)。都挺復(fù)雜的

七、第五個(gè)坑：和瀏覽器原生功能沖突

當(dāng)你在一個(gè)已有頁(yè)簽功能的軟件（瀏覽器）中，又嵌套了另一個(gè)有頁(yè)簽功能的應(yīng)用（你的 B 端網(wǎng)頁(yè)），沖突就不可避免。

1. 前進(jìn)/后退：用戶習(xí)慣性地會(huì)點(diǎn)擊瀏覽器左上角的前進(jìn)后退按鈕。然而，切換內(nèi)置頁(yè)簽時(shí)，瀏覽器的 URL 通常保持不變。這導(dǎo)致用戶點(diǎn)擊"后退"時(shí)，不是返回上一個(gè)內(nèi)置頁(yè)簽，而是直接退出整個(gè)系統(tǒng)。這種體驗(yàn)是災(zāi)難性的。
2. 收藏/分享：URL 是 Web 的核心優(yōu)勢(shì)之一。用戶可以收藏當(dāng)前頁(yè)面鏈接或分享給同事。但內(nèi)置頁(yè)簽讓這個(gè)功能失效了。你無(wú)法單獨(dú)收藏或分享"用戶張三的詳情頁(yè)"，只能告訴同事："先登錄系統(tǒng)，然后點(diǎn)客戶管理，再搜索張三，再點(diǎn)進(jìn)去……"這大大降低了協(xié)作效率。

八、怎么說(shuō)服用戶不要用內(nèi)置多頁(yè)簽？

作為設(shè)計(jì)師，我們不能生硬地拒絕用戶，而應(yīng)該采取引導(dǎo)的方式。

① 先認(rèn)同，再引導(dǎo)：首先要充分肯定用戶的需求。"您說(shuō)得對(duì)，能同時(shí)處理多個(gè)任務(wù)、快速切換且不丟失數(shù)據(jù)，這個(gè)需求非常重要！"

② 重新定義問(wèn)題：然后將問(wèn)題從"要不要加多頁(yè)簽"轉(zhuǎn)化為"如何更好地實(shí)現(xiàn)多任務(wù)處理"。"我們共同的目標(biāo)是提升效率，那么多頁(yè)簽是唯一的或最佳的解決方案嗎？讓我們一起探討更巧妙的方案。"

③ 拿出替代方案：針對(duì)具體場(chǎng)景，提供更優(yōu)的解決方案。

1. 需要對(duì)比信息？ 我們可以采用"主從布局"（Master-Detail），左側(cè)是列表，右側(cè)是詳情，點(diǎn)擊左側(cè)項(xiàng)目，右側(cè)內(nèi)容隨之更新?；蛘呤褂?quot;分屏視圖"。
2. 需要處理臨時(shí)任務(wù)？我們可以使用"抽屜"（Drawer）從側(cè)邊滑出。例如在用戶列表頁(yè)，點(diǎn)擊編輯按鈕，右側(cè)滑出編輯面板，既不離開(kāi)當(dāng)前列表，又能完成編輯任務(wù)，完成后直接關(guān)閉即可。
3. 真的需要多個(gè)獨(dú)立任務(wù)并行？那就充分利用瀏覽器本身的功能！我們優(yōu)化系統(tǒng)，確保用戶在瀏覽器中"右鍵-在新標(biāo)簽頁(yè)中打開(kāi)"時(shí)體驗(yàn)流暢。讓用戶使用瀏覽器強(qiáng)大的頁(yè)簽管理能力，而不是在系統(tǒng)中重新實(shí)現(xiàn)一個(gè)功能受限的版本。

九、如果真的要做，怎么避免踩坑？

當(dāng)然，有時(shí)候胳膊擰不過(guò)大腿，因?yàn)楦鞣N原因，這個(gè)功能你必須得上。那行，我們也要有專業(yè)的兜底方案，把坑填得平一點(diǎn)。

1. 限制頁(yè)簽數(shù)量：明確告知用戶并設(shè)定一個(gè)上限，比如 10 個(gè)或 15 個(gè)。超過(guò)了就提示他需要關(guān)閉一些，這既能避免用戶認(rèn)知過(guò)載，也給性能留了條活路。
2. 優(yōu)化關(guān)閉機(jī)制：光有個(gè)小叉叉不夠。要提供“關(guān)閉所有”、“關(guān)閉其他”、“右鍵菜單關(guān)閉”等便捷功能，讓用戶能快速清理工作區(qū)。
3. 智能緩存策略：別傻乎乎地把所有頁(yè)簽都 keep-alive?？梢灾粚?duì)最近活動(dòng)的 3-5 個(gè)頁(yè)簽做實(shí)時(shí)緩存，更早的頁(yè)簽在用戶切回來(lái)的時(shí)候，顯示一個(gè)加載動(dòng)畫(huà)，重新請(qǐng)求數(shù)據(jù)。這是典型的用一點(diǎn)點(diǎn)體驗(yàn)犧牲，換取巨大的性能提升。
4. 與 URL 部分同步：這是個(gè)推薦項(xiàng)，但很有用。至少，把當(dāng)前激活的頁(yè)簽 ID，通過(guò) hash 或 query 參數(shù)反映在瀏覽器的 URL 上。這樣用戶不小心按了 F5 刷新頁(yè)面，至少能幫他恢復(fù)到他最后正在看的那個(gè)頁(yè)簽，而不是打回首頁(yè)。
5. 明確的視覺(jué)提示：對(duì)于有未保存修改的頁(yè)簽，在標(biāo)題旁邊加個(gè)星號(hào)（*）或者小圓點(diǎn)，這是最基本的用戶提示。
6. 做好移動(dòng)端降級(jí)：這套復(fù)雜的頁(yè)簽系統(tǒng)在手機(jī)上絕對(duì)是災(zāi)難。必須為移動(dòng)端設(shè)計(jì)一套完全不同的、更簡(jiǎn)潔的導(dǎo)航和任務(wù)流。
7. 時(shí)刻反思替代方案：在整個(gè)設(shè)計(jì)過(guò)程中，都要不斷問(wèn)自己，當(dāng)前這個(gè)小需求，是不是真的非得用新頁(yè)簽？用彈窗行不行？用側(cè)邊欄行不行？別把內(nèi)置頁(yè)簽當(dāng)成唯一的錘子，看什么都像釘子。

說(shuō)實(shí)話，B 端產(chǎn)品的多頁(yè)簽需求背后，往往反映的是信息架構(gòu)的問(wèn)題。如果用戶頻繁需要在多個(gè)頁(yè)面間切換，可能說(shuō)明我們的信息組織方式有問(wèn)題。與其在技術(shù)上硬扛，不如從根本上優(yōu)化信息架構(gòu)和交互流程。

總而言之，內(nèi)置多頁(yè)簽是個(gè)“重型武器”，看著很強(qiáng)大，但后坐力也驚人。作為設(shè)計(jì)師，我們既要理解它為何深得用戶歡心，也要清晰地認(rèn)識(shí)到它背后的五大“天坑”。最好的策略是引導(dǎo)用戶使用更輕、更巧的方案，如果實(shí)在不行，那就帶上這份“避坑指南”，小心翼翼地把它實(shí)現(xiàn)好吧。

作者：龍爪槐守望者