ToB系统页面跳转对比分析

一、综述

前言

在 ToB 系统中，跳转场景的合理分类和设计对用户体验至关重要。不同的跳转方式（如当前页刷新或新开标签页）直接到影响用户的操作效率和系统性能。本文将从分类、设计建议以及用户体验的角度，深入探讨如何优化 B 端系统中的跳转场景。

ToB 的页面跳转方式，应遵循完善的业务规则和使用逻辑，不能一刀切选择一种方式（如一直新开浏览器 Tab 页签）。最好允许用户自定义跳转方式，如在系统设置中提供选项，让用户选择某些操作是当前页刷新还是新开标签页。这有助于满足不同用户的偏好，提高系统的灵活性和用户满意度。

在需要新开多个标签页的场景中，需要考虑浏览器的性能表现和用户设备的资源消耗。可以通过优化加载速度、减少页面资源占用等方式来提升用户体验。

设计原则：清晰的跳转反馈、完善的路径和返回机制

而无论是当前页刷新还是新开Tab页签、系统内 Tab 页签，系统都应在跳转后给予用户明确的反馈。比如加载进度条、操作成功提示等，让用户始终知道自己的操作状态。在复杂的跳转路径中，设计面包屑导航、返回按钮或快捷键，有助于用户快速找到跳转路径并返回到之前的操作页面，避免跳转迷失。

通过完善的业务规则和使用逻辑，灵活地结合用户行为分析和个性化设置，有助于提升系统的整体用户体验。在实际应用中，还需时刻关注系统性能，确保在多标签页和多终端跳转的情况下，依然能保持流畅的用户体验。

竞品厂商

二、正文

1. 页面跳转的场景

在 ToB 系统中，在不同场景下页面的跳转对于用户体验至关重要。不同的跳转方式，直接影响到用户的操作效率和系统性能。

从用户操作角度，可以将页面的跳转分为三类「操作流程类」「信息查询」「系统配置类」（端到端如 PC 端到移动端，不在此次讨论范围）

1.操作流程跳转

用户在系统中进行的具体操作，用户执行某个任务或业务流程，如数据的创建、编辑、审批等。通常目标是推进某个操作流程的完成。

场景：如新建或编辑某数据，收到待办审批某流程等

2.信息查询与查看类跳转

当用户需要查询、查看或分析系统内的数据和信息时，需要从一个页面跳转到另一个页面，以获取更多的详细信息或进行更深入的分析。

场景：如打开某数据查看详情，从工作台查看详细报表进行数据分析，查看操作历史或日志记录等

3.系统配置与管理跳转

涉及系统设置、用户权限管理、插件配置等功能的跳转，通常由管理员或有权限的用户执行，用于配置和管理系统的运行环境和用户权限。如管理员需要从用户管理页面跳转到权限设置页面

场景：如打开后台系统，配置系统参数或用户权限

注：第三方系统跳转、子域名跳转属于功能类特殊场景，已涵盖在下方业务场景中

以上三种分类涵盖了基本的页面跳转场景，但不够具体，现按照以下具体场景对竞品的跳转方式展开对比分析（注：弹窗属于模态，不在此次范围之内）

2. 厂商页面跳转方式对比

跳转方式名称太长，以下简称为：

1.新开 Tab：新开浏览器 Tab 页签

2.系统 Tab：系统内置 Tab 页签

3.菜单跳转：以菜单形式进行切换，如左侧导航

4.当前页刷新：在当前页面，直接刷新内容

厂商对比结果：

3. 厂商页面跳转业务对比结果说明

1. 在同一个平台或系统内的信息，没有其他特殊情况时，最好不要新开浏览器 Tab 页签，这点泛微和金蝶保持了统一，都没有新开浏览器 Tab 页签；
   1. 泛微使用「抽屉」的形式；
   2. 金蝶使用「系统内 Tab 页签」的形式；
2. 跳转后台系统、或其他子系统、子域名或第三方平台时，这时可以新开「浏览器 Tab 页签」，展示其独立完整信息结构
   • 如帮助系统，有些帮助以文档、视频或论坛的形式存在，使用独立页签可以很好的呈现其完整性
   • 这点「MK」「金蝶」「泛微」都做到了统一

👇先说结论👇

4. 关于系统内/外跳转的适用场景说明

1.1. 适合系统外跳转的场景

1.1.1. 跨系统跳转

• 跳转目的与用户意图：用户可能在不同业务系统之间切换，完成更复杂的业务操作。
• 用户角色与权限：跨系统的跳转通常涉及不同权限的管理，需要保证用户的访问控制。
• 适合新开标签页：跨系统跳转时，为了避免用户在回到原系统时迷失上下文，新开标签页是较为合理的选择。

1.1.2. 二级域名跳转

• 跳转目的与用户意图：用户通常在同一组织的不同子系统之间切换，处理不同的业务需求。
• 用户角色与权限：每个二级域名子系统可能对应不同的用户角色和权限管理，需要确保用户身份和数据的一致性。
• 适合新开标签页：二级域名跳转建议新开标签页，以便用户在处理完相关业务后能快速回到原系统。

1.1.3. 第三方集成跳转

• 跳转目的与用户意图：用户在系统中使用集成的第三方服务，通常涉及外部供应商或合作伙伴的系统。
• 用户角色与权限：第三方系统的操作可能需要特定的用户角色或权限，确保这些权限在跳转时无缝传递。
• 适合新开标签页：跳转到第三方系统时，新开标签页能够使用户在完成操作后轻松返回原系统。

1.2. 适合系统内跳转的场景

1.2.1. 页面内跳转

• 跳转目的与用户意图：通常用于细分任务，例如从概览到详细设置。用户期望在同一页面内快速找到所需内容。
• 用户角色与权限：所有用户角色都适用，尤其是在配置或设置页面中。
• 适合当前页系统内Tab页签：页面内的内容切换适合使用当前页来保持用户的注意力。

1.2.2. 模块间跳转

• 跳转目的与用户意图：用于在不同功能模块之间切换，用户期望在不同模块中完成不同的业务操作。
• 用户角色与权限：不同角色的用户可能在不同模块中有不同的权限。例如，管理员有访问所有模块的权限，而普通用户可能仅限于特定模块。
• 适合当前系统内Tab页签：在模块间跳转时保持用户上下文的一致性，有助于用户在完成一个操作后快速进入下一个操作。

1.2.3. 流程间跳转

• 跳转目的与用户意图：通常用于多步骤的业务流程，用户期望顺利完成每一步操作。
• 用户角色与权限：不同角色可能负责流程中的不同步骤，确保每个角色在合适的时机进入流程的对应步骤。
• 适合当前页系统内Tab页签：保持流程的连续性和用户的操作连贯性。

1.2.4. 系统设置与管理跳转

• 跳转目的与用户意图：用户通常在此场景中调整系统的配置或管理系统用户。
• 用户角色与权限：主要适用于管理员角色，需要明确区分不同角色的管理权限。
• 适合当前页系统内Tab页签：设置和管理类操作通常需要用户集中注意力，在当前页有助于用户保持在特定任务上的聚焦。

5. 跳转方式的优缺点

1.1. 新开Tab页签

传统的网页浏览都是新开浏览器标签页的形式，实现内容的并行独立展示，从而避免跳转和返回的问题

优点：实现内容的并行、且独立展示，从而避免跳转和返回的问题；可以保证用户并行操作，方便信息间的对比、参考；适合独立子系统，完整呈现系统内容

缺点：打开页签太多时会很耗性能，造成卡顿；也会造成用户迷路，找不到之前的内容

1.2. 系统内 Tab 页签

在当前页内，新增一行 tab，来承载内容

优点：系统内 Tab 页，页面是相互独立的、互不干涉的，多窗口自由切换，并且信息保留在系统内部，用户的视觉动线相对集中，交互操作成本更低

缺点：标签页栏属于框架层级，会影响原有的页面结构；且始终都会占据页面位置，会进一步压缩屏幕纵向有效空间；在整体的统一性上，也需要综合考虑使用

1.3. 抽屉

一般从右侧划出抽屉浮层，来承载内容

优点：在当前页面出现的抽屉浮层，可以避免页面频繁跳转、以及频繁返回带来的页面刷新导致用户效率下降的问题

缺点：会遮挡一部分上文内容，无法看全；且抽屉宽度有限，无法承载更多内容信息（不过有些抽屉支持放大/缩小 可以避免这个问题）

三、竞品截图

1. 金蝶

1.1. 金蝶·云星辰截图

金蝶云·星辰聚焦小型企业在线经营和数字化管理，提供财务云、税务云、进销存云、订货商城、费用报销等SaaS服务，支持小型企业拓客开源、智能管理、实时决策，是一款适合小微型企业的云端财务进销存管理软件

1.1.1. 工作台

1.1.2. 目录页

1.1.3. 列表页

1.1.4. 新建页

1.1.5. 详情页

1.1.6. 待办带阅

1.1.7. 帮助系统

1.1.8. 系统后台配置

1.2. 金蝶·云星空截图

金蝶云星空是金蝶面向事业部制、多地点、多工厂等运营协同与管控型企业及集团公司，提供的一个通用ERP服务平台

1.2.1. 工作台

1.2.2. 列表页

1.2.3. 新建页

1.2.4. 详情页

1.2.5. 待办带阅

2. 致远

致远的智能表单管理系统，因权限不够，只有部分页面；但依然可以看到其结构，也是系统内 Tab 页签跳转

2.1. 工作台

2.2. 后台配置

3. MK·PaaS

MK-PaaS是蓝凌软件公司推出的微服务架构平台，它基于“云原生”技术，提供统一门户、消息、流程、搜索、低代码平台、集成平台等功能，旨在帮助企业构建数字化平台，提升业务敏捷度

4. 泛微

4.1. 项目管理

4.1.1. 列表页

4.1.2. 新建页

4.1.3. 详情页

4.1.4. 待办待阅

4.1.5. 帮助系统

4.1.6. 系统后台配置

直接菜单切换，无跳转（前台应用配置，不需要跳转页面）

从用户端进入后台配置，新开页签

4.2. 公文管理

4.2.1. 列表页

4.2.2. 新建页

4.2.3. 详情页

5. TDesign腾讯企业设计体系

腾讯的企业设计体系中，也包含了这一层设计规则（功能）

- End -