3. 用户自定义压测场景配置向导入口:向导模式 vs 专家模式
在自助服务容量压测作业平台中,用户自定义压测场景的配置入口采用双模式入口设计,分别面向不同经验水平的用户群体。本章详细阐述两种模式的定位差异、交互流程与页面布局设计,帮助平台开发者和UI设计师理解如何构建高效、易用的配置向导。
3.1 向导模式 vs 专家模式:核心差异
两种模式在目标用户、操作路径、配置粒度与学习成本上存在显著差异。下表从多个维度进行对比:
| 对比维度 | 向导模式(Wizard Mode) | 专家模式(Expert Mode) |
|---|---|---|
| 目标用户 | 初级测试工程师、运维人员、非频繁使用者 | 高级性能测试专家、平台深度用户 |
| 操作路径 | 分步引导,线性推进,每步聚焦单一任务 | 单页全览,自由跳转,并行配置 |
| 配置粒度 | 提供常用预设参数,隐藏高级选项 | 暴露全部参数,支持自定义脚本、断言、监控等 |
| 学习成本 | 低,跟随提示即可完成基础场景配置 | 高,需理解压测原理与平台底层机制 |
| 配置效率 | 中等,适合首次或低频配置 | 高,熟练用户可快速完成复杂场景 |
| 错误预防 | 强,每步校验,前置依赖明确 | 弱,依赖用户自身经验,提交时统一校验 |
| 适用场景 | 标准压测、快速验证、教学演示 | 复杂混合场景、自定义协议、深度调优 |
设计原则:两种模式共享同一套底层场景数据模型,用户在向导模式中完成的配置可无缝切换到专家模式进行微调,反之亦然。平台在入口处提供模式切换按钮,并保留用户最后一次使用的模式偏好。
3.2 向导模式的交互流程与页面布局
向导模式采用步骤条 + 内容面板 + 操作栏的三段式布局,引导用户按顺序完成场景配置。整体交互流程分为以下五个核心步骤:
- 基本信息:填写场景名称、描述、选择压测目标环境(测试/预发/生产)。
- 脚本配置:上传或选择已有压测脚本(JMeter/Gatling/Locust),支持参数化变量绑定。
- 压力模型:设置并发用户数、递增策略、持续时间、循环次数等核心参数。
- 监控与断言:勾选需要采集的监控指标(TPS、响应时间、错误率),配置通过/失败断言规则。
- 预览与提交:汇总展示所有配置项,确认无误后提交作业。
下图展示了向导模式的页面布局与步骤流转关系:
交互细节:步骤条中的已完成步骤使用绿色高亮,当前步骤使用蓝色高亮,未完成步骤保持灰色。用户可通过点击已完成的步骤节点回退修改,但不能跳过未完成的步骤。每步切换时,内容面板采用淡入动画,保持操作连贯性。
3.3 专家模式的交互流程与页面布局
专家模式采用单页全览 + 分区折叠 + 全局操作栏的布局,所有配置项在同一页面内呈现,用户可根据需要自由展开/折叠各配置区域。核心交互流程如下:
- 顶部全局工具栏:包含场景名称、环境选择、保存草稿、导入/导出配置、模式切换按钮。
- 左侧配置导航树:以树形结构列出所有可配置模块(脚本、压力、监控、断言、高级设置),点击可快速定位。
- 右侧配置面板:默认全部展开,用户可手动折叠不关注的模块。每个模块内部采用表格或键值对形式展示参数。
- 底部操作栏:提供“校验配置”、“保存为模板”、“提交作业”三个核心操作,支持批量参数替换。
下图展示了专家模式的页面布局与模块分区:
注意事项:专家模式下所有配置项均为实时生效,修改后不会自动保存。建议用户在提交前使用“校验配置”功能进行全量检查,避免因参数遗漏或格式错误导致压测失败。平台会在校验通过后高亮显示“提交作业”按钮。
3.4 模式切换与数据同步机制
两种模式之间的切换需要保证配置数据的完整同步。平台采用以下机制确保切换体验:
- 双向同步:用户在向导模式中完成的配置,切换到专家模式后,所有参数自动填充到对应模块的输入框中。
- 差异标记:当用户在专家模式下修改了向导模式中已配置的参数,切换回向导模式时,平台会标记被修改的步骤,并提示用户确认是否覆盖。
- 草稿自动保存:每次模式切换前,系统自动保存当前配置为草稿版本,防止数据丢失。
- 版本对比:在预览提交步骤中,提供“与上次配置对比”功能,以差异视图展示当前配置与历史版本的变更内容。
3.5 页面布局设计要点总结
下表汇总了两种模式在页面布局设计上的关键差异,供UI设计参考:
| 布局要素 | 向导模式 | 专家模式 |
|---|---|---|
| 页面结构 | 步骤条 + 单内容面板 + 底部导航 | 顶部工具栏 + 左侧导航树 + 右侧配置面板 + 底部操作栏 |
| 信息密度 | 低,每步只展示当前步骤相关控件 | 高,所有配置模块同时可见 |
| 操作反馈 | 步骤间切换有动画,校验提示在面板内 | 实时校验,错误标记在对应输入框旁 |
| 响应式适配 | 内容面板自适应宽度,步骤条可折叠为下拉选择 | 左侧导航树在窄屏下可收起为汉堡菜单 |
| 辅助功能 | 每步提供帮助图标,点击弹出浮层说明 | 每个参数旁提供问号图标,悬停显示详细说明 |
设计建议:在页面布局设计时,建议为两种模式提供统一的视觉语言(配色、字体、控件样式),仅在布局结构和交互方式上做区分。这样既能降低用户的学习成本,又能保持平台整体品牌一致性。