在 ToB 系統(tǒng)中，跳轉(zhuǎn)場景的合理分類和設(shè)計對用戶體驗至關(guān)重要。不同的跳轉(zhuǎn)方式（如當(dāng)前頁刷新或新開標(biāo)簽頁）直接到影響用戶的操作效率和系統(tǒng)性能。本文將從分類、設(shè)計建議以及用戶體驗的角度，深入探討如何優(yōu)化 B 端系統(tǒng)中的跳轉(zhuǎn)場景。

競品廠商

一、金蝶

1.1. 金蝶·云星辰截圖

金蝶云·星辰聚焦小型企業(yè)在線經(jīng)營和數(shù)字化管理，，提供財務(wù)云、稅務(wù)云、進(jìn)銷存云、訂貨商城、費用報銷等SaaS服務(wù)，支持小型企業(yè)拓客開源、智能管理、實時決策，是一款適合小微型企業(yè)的云端財務(wù)進(jìn)銷存管理軟件

1.1.1. 工作臺

1.1.2. 目錄頁

1.1.3. 列表頁

1.1.4. 新建頁

1.1.5. 詳情頁

1.1.6. 待辦待閱

1.1.7. 幫助系統(tǒng)

1.1.8. 系統(tǒng)后臺配置

1.2. 金蝶·云星空截圖

金蝶云星空是金蝶面向事業(yè)部制、多地點、多工廠等運營協(xié)同與管控型企業(yè)及集團公司，提供的一個通用ERP服務(wù)平臺

1.2.1. 工作臺

1.2.2. 列表頁

1.2.3. 新建頁

1.2.4. 詳情頁

1.2.5. 待辦帶閱

二、致遠(yuǎn)

致遠(yuǎn)的智能表單管理系統(tǒng)，因權(quán)限不夠，只有部分頁面；但依然可以看到其結(jié)構(gòu)，也是系統(tǒng)內(nèi) Tab 頁簽跳轉(zhuǎn)

2.1. 工作臺

2.2. 后臺配置

三、MK·PaaS

四、泛微

4.1. 項目管理

4.1.1. 列表頁

4.1.2. 新建頁

4.1.3. 詳情頁

4.1.4. 待辦待閱

4.1.5. 幫助系統(tǒng)

4.1.6. 系統(tǒng)后臺配置

直接菜單切換，無跳轉(zhuǎn)（前臺應(yīng)用配置，不需要跳轉(zhuǎn)頁面）

從用戶端進(jìn)入后臺配置，新開頁簽

4.2. 公文管理

4.2.1. 列表頁

4.2.2. 新建頁

4.2.3. 詳情頁

五、TDesign騰訊企業(yè)設(shè)計體系

騰訊的企業(yè)設(shè)計體系中，也包含了這一層設(shè)計規(guī)則（功能）

六、總結(jié)

1. 頁面跳轉(zhuǎn)的場景

在 ToB 系統(tǒng)中，在不同場景下頁面的跳轉(zhuǎn)對于用戶體驗至關(guān)重要。不同的跳轉(zhuǎn)方式，直接影響到用戶的操作效率和系統(tǒng)性能。

從用戶操作角度，可以將頁面的跳轉(zhuǎn)分為三類「操作流程類」「信息查詢」「系統(tǒng)配置類」（端到端如 PC 端到移動端，不在此次討論范圍）

1.1 操作流程跳轉(zhuǎn)

用戶在系統(tǒng)中進(jìn)行的具體操作，用戶執(zhí)行某個任務(wù)或業(yè)務(wù)流程，如數(shù)據(jù)的創(chuàng)建、編輯、審批等。通常目標(biāo)是推進(jìn)某個操作流程的完成。

場景：如新建或編輯某數(shù)據(jù)，收到待辦審批某流程等

1.2 信息查詢與查看類跳轉(zhuǎn)

當(dāng)用戶需要查詢、查看或分析系統(tǒng)內(nèi)的數(shù)據(jù)和信息時，需要從一個頁面跳轉(zhuǎn)到另一個頁面，以獲取更多的詳細(xì)信息或進(jìn)行更深入的分析。

場景：如打開某數(shù)據(jù)查看詳情，從工作臺查看詳細(xì)報表進(jìn)行數(shù)據(jù)分析，查看操作歷史或日志記錄等

1.3 系統(tǒng)配置與管理跳轉(zhuǎn)

涉及系統(tǒng)設(shè)置、用戶權(quán)限管理、插件配置等功能的跳轉(zhuǎn)，通常由管理員或有權(quán)限的用戶執(zhí)行，用于配置和管理系統(tǒng)的運行環(huán)境和用戶權(quán)限。如管理員需要從用戶管理頁面跳轉(zhuǎn)到權(quán)限設(shè)置頁面

場景：如打開后臺系統(tǒng)，配置系統(tǒng)參數(shù)或用戶權(quán)限

注：第三方系統(tǒng)跳轉(zhuǎn)、子域名跳轉(zhuǎn)屬于功能類特殊場景，已涵蓋在下方業(yè)務(wù)場景中

以上三種分類涵蓋了基本的頁面跳轉(zhuǎn)場景，但不夠具體，現(xiàn)按照以下具體場景，對競品的跳轉(zhuǎn)方式展開對比分析（注：彈窗屬于模態(tài)，不在此次范圍之內(nèi)）

2. 頁面跳轉(zhuǎn)方式對比

跳轉(zhuǎn)方式名稱太長，簡稱為：

1. 新開 Tab：新開瀏覽器 Tab 頁簽
2. 系統(tǒng) Tab：系統(tǒng)內(nèi)置 Tab 頁簽
3. 菜單跳轉(zhuǎn)：以菜單形式進(jìn)行切換，如左側(cè)導(dǎo)航
4. 當(dāng)前頁刷新：在當(dāng)前頁面，直接刷新內(nèi)容

致遠(yuǎn)的系統(tǒng)沒有體驗到完整的，只體驗到部分「智能表單管理系統(tǒng)」

3. 頁面跳轉(zhuǎn)對比總結(jié)

1）在同一個平臺或系統(tǒng)內(nèi)的信息，沒有其他特殊情況時，最好不要新開瀏覽器 Tab 頁簽，這點泛微和金蝶保持了統(tǒng)一，都沒有新開瀏覽器 Tab 頁簽；

• 泛微使用「抽屜」的形式；
• 金蝶使用「系統(tǒng)內(nèi) Tab 頁簽」的形式；
• 而 MK 以「****」為主，保持了自己的風(fēng)格；

2）跳轉(zhuǎn)后臺系統(tǒng)、或其他子系統(tǒng)、子域名或第三方平臺時，這時可以新開「瀏覽器 Tab 頁簽」，展示其獨立完整信息結(jié)構(gòu)

如幫助系統(tǒng)，有些幫助以文檔、視頻或論壇的形式存在，使用獨立頁簽可以很好的呈現(xiàn)其完整性；這點「MK」「金蝶」「泛微」都做到了統(tǒng)一；

4. 關(guān)于系統(tǒng)內(nèi)/外跳轉(zhuǎn)的場景分析

4.1 適合系統(tǒng)外跳轉(zhuǎn)的場景

4.1.1. 跨系統(tǒng)跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用戶可能在不同業(yè)務(wù)系統(tǒng)之間切換，完成更復(fù)雜的業(yè)務(wù)操作。
• 用戶角色與權(quán)限：跨系統(tǒng)的跳轉(zhuǎn)通常涉及不同權(quán)限的管理，需要保證用戶的訪問控制。
• 適合新開標(biāo)簽頁：跨系統(tǒng)跳轉(zhuǎn)時，為了避免用戶在回到原系統(tǒng)時迷失上下文，新開標(biāo)簽頁是較為合理的選擇。

4.1.2. 二級域名跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用戶通常在同一組織的不同子系統(tǒng)之間切換，處理不同的業(yè)務(wù)需求。
• 用戶角色與權(quán)限：每個二級域名子系統(tǒng)可能對應(yīng)不同的用戶角色和權(quán)限管理，需要確保用戶身份和數(shù)據(jù)的一致性。
• 適合新開標(biāo)簽頁：二級域名跳轉(zhuǎn)建議新開標(biāo)簽頁，以便用戶在處理完相關(guān)業(yè)務(wù)后能快速回到原系統(tǒng)。

4.1.3. 第三方集成跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用戶在系統(tǒng)中使用集成的第三方服務(wù)，通常涉及外部供應(yīng)商或合作伙伴的系統(tǒng)。
• 用戶角色與權(quán)限：第三方系統(tǒng)的操作可能需要特定的用戶角色或權(quán)限，確保這些權(quán)限在跳轉(zhuǎn)時無縫傳遞。
• 適合新開標(biāo)簽頁：跳轉(zhuǎn)到第三方系統(tǒng)時，新開標(biāo)簽頁能夠使用戶在完成操作后輕松返回原系統(tǒng)。

4.2 適合系統(tǒng)內(nèi)跳轉(zhuǎn)的場景

4.2.1. 頁面內(nèi)跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：通常用于細(xì)分任務(wù)，例如從概覽到詳細(xì)設(shè)置。用戶期望在同一頁面內(nèi)快速找到所需內(nèi)容。
• 用戶角色與權(quán)限：所有用戶角色都適用，尤其是在配置或設(shè)置頁面中。
• 適合當(dāng)前頁系統(tǒng)內(nèi)Tab頁簽：頁面內(nèi)的內(nèi)容切換適合使用當(dāng)前頁來保持用戶的注意力。

4.2.2. 模塊間跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用于在不同功能模塊之間切換，用戶期望在不同模塊中完成不同的業(yè)務(wù)操作。
• 用戶角色與權(quán)限：不同角色的用戶可能在不同模塊中有不同的權(quán)限。例如，管理員有訪問所有模塊的權(quán)限，而普通用戶可能僅限于特定模塊。
• 適合當(dāng)前系統(tǒng)內(nèi)Tab頁簽：在模塊間跳轉(zhuǎn)時保持用戶上下文的一致性，有助于用戶在完成一個操作后快速進(jìn)入下一個操作。

4.2.3. 流程間跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：通常用于多步驟的業(yè)務(wù)流程，用戶期望順利完成每一步操作。
• 用戶角色與權(quán)限：不同角色可能負(fù)責(zé)流程中的不同步驟，確保每個角色在合適的時機進(jìn)入流程的對應(yīng)步驟。
• 適合當(dāng)前頁系統(tǒng)內(nèi)Tab頁簽：保持流程的連續(xù)性和用戶的操作連貫性。

1.2.4. 系統(tǒng)設(shè)置與管理跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用戶通常在此場景中調(diào)整系統(tǒng)的配置或管理系統(tǒng)用戶。
• 用戶角色與權(quán)限：主要適用于管理員角色，需要明確區(qū)分不同角色的管理權(quán)限。
• 適合當(dāng)前頁系統(tǒng)內(nèi)Tab頁簽：設(shè)置和管理類操作通常需要用戶集中注意力，在當(dāng)前頁有助于用戶保持在特定任務(wù)上的聚焦。

5. 跳轉(zhuǎn)方式的優(yōu)缺點

5.1 新開Tab頁簽

傳統(tǒng)的網(wǎng)頁瀏覽都是新開瀏覽器標(biāo)簽頁的形式，實現(xiàn)內(nèi)容的并行獨立展示，從而避免跳轉(zhuǎn)和返回的問題

優(yōu)點：實現(xiàn)內(nèi)容的并行、且獨立展示，從而避免跳轉(zhuǎn)和返回的問題；可以保證用戶并行操作，方便信息間的對比、參考；適合獨立子系統(tǒng)，完整呈現(xiàn)系統(tǒng)內(nèi)容

缺點：打開頁簽太多時會很耗性能，造成卡頓；也會造成用戶迷路，找不到之前的內(nèi)容

5.2 系統(tǒng)內(nèi) Tab 頁簽

在當(dāng)前頁內(nèi)，新增一行 tab，來承載內(nèi)容

優(yōu)點：系統(tǒng)內(nèi) Tab 頁，頁面是相互獨立的、互不干涉的，多窗口自由切換，并且信息保留在系統(tǒng)內(nèi)部，用戶的視覺動線相對集中，交互操作成本更低

缺點：標(biāo)簽頁欄屬于框架層級，會影響原有的頁面結(jié)構(gòu)；且始終都會占據(jù)頁面位置，會進(jìn)一步壓縮屏幕縱向有效空間；在整體的統(tǒng)一性上，也需要綜合考慮使用

5.3. 抽屜

一般從右側(cè)劃出抽屜浮層，來承載內(nèi)容

優(yōu)點：在當(dāng)前頁面出現(xiàn)的抽屜浮層，可以避免頁面頻繁跳轉(zhuǎn)、以及頻繁返回帶來的頁面刷新導(dǎo)致用戶效率下降的問題

缺點：會遮擋一部分上文內(nèi)容，無法會看；且抽屜寬度有限，無法承載更多內(nèi)容信息（不過有些抽屜支持放大/縮小 可以避免這個問題）

最后補兩句

ToB 的頁面跳轉(zhuǎn)方式，應(yīng)遵循完善的業(yè)務(wù)規(guī)則和使用邏輯，不能一刀切選擇一種方式（如一直新開瀏覽器 Tab 頁簽）。最好允許用戶自定義跳轉(zhuǎn)方式，如在系統(tǒng)設(shè)置中提供選項，讓用戶選擇某些操作是當(dāng)前頁刷新還是新開標(biāo)簽頁。這有助于滿足不同用戶的偏好，提高系統(tǒng)的靈活性和用戶滿意度。

在需要新開多個標(biāo)簽頁的場景中，需要考慮瀏覽器的性能表現(xiàn)和用戶設(shè)備的資源消耗?？梢酝ㄟ^優(yōu)化加載速度、減少頁面資源占用等方式來提升用戶體驗。

清晰的跳轉(zhuǎn)反饋、完善的路徑和返回機制

而無論是當(dāng)前頁刷新還是新開Tab頁簽、系統(tǒng)內(nèi) Tab 頁簽，系統(tǒng)都應(yīng)在跳轉(zhuǎn)后給予用戶明確的反饋。比如加載進(jìn)度條、操作成功提示等，讓用戶始終知道自己的操作狀態(tài)。在復(fù)雜的跳轉(zhuǎn)路徑中，設(shè)計面包屑導(dǎo)航、返回按鈕或快捷鍵，有助于用戶快速找到跳轉(zhuǎn)路徑并返回到之前的操作頁面，避免跳轉(zhuǎn)迷失。

通過完善的業(yè)務(wù)規(guī)則和使用邏輯，靈活地結(jié)合用戶行為分析和個性化設(shè)置，有助于提升系統(tǒng)的整體用戶體驗。在實際應(yīng)用中，還需時刻關(guān)注系統(tǒng)性能，確保在多標(biāo)簽頁和多終端跳轉(zhuǎn)的情況下，依然能保持流暢的用戶體驗。