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

競(jìng)品廠商

一、金蝶

1.1. 金蝶·云星辰截圖

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

一款產(chǎn)品無(wú)到有，產(chǎn)品經(jīng)理需要做些什么？

在一個(gè)產(chǎn)品從無(wú)到有的過(guò)程中，要做好產(chǎn)品經(jīng)理這個(gè)角色實(shí)在是不容易，除了大家都知道的寫(xiě)需求、寫(xiě)需求、寫(xiě)需求，要做的事多著呢。產(chǎn)品經(jīng)理不是你眼中的只會(huì)找你麻煩，提要求..

查看詳情 >

1.1.1. 工作臺(tái)

1.1.2. 目錄頁(yè)

1.1.3. 列表頁(yè)

1.1.4. 新建頁(yè)

1.1.5. 詳情頁(yè)

1.1.6. 待辦待閱

1.1.7. 幫助系統(tǒng)

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

1.2. 金蝶·云星空截圖

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

1.2.1. 工作臺(tái)

1.2.2. 列表頁(yè)

1.2.3. 新建頁(yè)

1.2.4. 詳情頁(yè)

1.2.5. 待辦帶閱

二、致遠(yuǎn)

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

2.1. 工作臺(tái)

2.2. 后臺(tái)配置

三、MK·PaaS

四、泛微

4.1. 項(xiàng)目管理

4.1.1. 列表頁(yè)

4.1.2. 新建頁(yè)

4.1.3. 詳情頁(yè)

4.1.4. 待辦待閱

4.1.5. 幫助系統(tǒng)

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

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

從用戶端進(jìn)入后臺(tái)配置，新開(kāi)頁(yè)簽

4.2. 公文管理

4.2.1. 列表頁(yè)

4.2.2. 新建頁(yè)

4.2.3. 詳情頁(yè)

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

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

六、總結(jié)

1. 頁(yè)面跳轉(zhuǎn)的場(chǎng)景

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

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

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

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

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

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

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

場(chǎng)景：如打開(kāi)某數(shù)據(jù)查看詳情，從工作臺(tái)查看詳細(xì)報(bào)表進(jìn)行數(shù)據(jù)分析，查看操作歷史或日志記錄等

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

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

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

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

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

2. 頁(yè)面跳轉(zhuǎn)方式對(duì)比

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

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

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

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

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

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

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

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

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

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

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

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

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

• 跳轉(zhuǎn)目的與用戶意圖：用戶通常在同一組織的不同子系統(tǒng)之間切換，處理不同的業(yè)務(wù)需求。
• 用戶角色與權(quán)限：每個(gè)二級(jí)域名子系統(tǒng)可能對(duì)應(yīng)不同的用戶角色和權(quán)限管理，需要確保用戶身份和數(shù)據(jù)的一致性。
• 適合新開(kāi)標(biāo)簽頁(yè)：二級(jí)域名跳轉(zhuǎn)建議新開(kāi)標(biāo)簽頁(yè)，以便用戶在處理完相關(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)時(shí)無(wú)縫傳遞。
• 適合新開(kāi)標(biāo)簽頁(yè)：跳轉(zhuǎn)到第三方系統(tǒng)時(shí)，新開(kāi)標(biāo)簽頁(yè)能夠使用戶在完成操作后輕松返回原系統(tǒng)。

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

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

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

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

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

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

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

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

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

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

5.1 新開(kāi)Tab頁(yè)簽

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

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

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

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

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

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

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

5.3. 抽屜

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

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

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

最后補(bǔ)兩句

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

在需要新開(kāi)多個(gè)標(biāo)簽頁(yè)的場(chǎng)景中，需要考慮瀏覽器的性能表現(xiàn)和用戶設(shè)備的資源消耗。可以通過(guò)優(yōu)化加載速度、減少頁(yè)面資源占用等方式來(lái)提升用戶體驗(yàn)。

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

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

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