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

競品廠商

一、金蝶

1.1. 金蝶·云星辰截圖

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

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服務平臺

1.2.1. 工作臺

1.2.2. 列表頁

1.2.3. 新建頁

1.2.4. 詳情頁

1.2.5. 待辦帶閱

二、致遠

致遠的智能表單管理系統(tǒng)，因權限不夠，只有部分頁面；但依然可以看到其結構，也是系統(tǒng)內 Tab 頁簽跳轉

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)后臺配置

直接菜單切換，無跳轉（前臺應用配置，不需要跳轉頁面）

從用戶端進入后臺配置，新開頁簽

4.2. 公文管理

4.2.1. 列表頁

4.2.2. 新建頁

4.2.3. 詳情頁

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

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

六、總結

1. 頁面跳轉的場景

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

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

1.1 操作流程跳轉

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

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

1.2 信息查詢與查看類跳轉

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

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

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

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

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

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

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

2. 頁面跳轉方式對比

跳轉方式名稱太長，簡稱為：

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

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

3. 頁面跳轉對比總結

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

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

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

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

4. 關于系統(tǒng)內/外跳轉的場景分析

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

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

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

4.1.2. 二級域名跳轉

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

4.1.3. 第三方集成跳轉

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

4.2 適合系統(tǒng)內跳轉的場景

4.2.1. 頁面內跳轉

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

4.2.2. 模塊間跳轉

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

4.2.3. 流程間跳轉

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

1.2.4. 系統(tǒng)設置與管理跳轉

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

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

5.1 新開Tab頁簽

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

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

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

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

在當前頁內，新增一行 tab，來承載內容

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

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

5.3. 抽屜

一般從右側劃出抽屜浮層，來承載內容

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

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

最后補兩句

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

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

清晰的跳轉反饋、完善的路徑和返回機制

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

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