首页(测试总览)排版布局优化 — 效果图

方案 A 为现状还原 · 方案 B / C 为优化提案 · 数值为示意数据

方案 A — 现状还原(对照基准)当前线上
四张独立统计卡片 → 图表区(趋势 16 + 饼图 8)→ 最近执行表格 → 快捷操作。问题:卡片重复感强、页脚信息弱关联;快捷操作沉底几乎不可见;页面纵向过长;数字与图表割裂。
1,842
本月通过
执行 356 次
213
本月失败
跳过 41 次
📈
89.6%
平均通过率
状态良好
🗂
427
总用例数
36 个模块
执行趋势(近30天)执行次数 | 通过率
折线图(近 30 天)
模块用例分布
环形饼图
最近执行记录查看全部
执行名称状态通过率耗时触发人时间操作
每日定时执行自动化测试-0910完成92.4%4521s调度器09-10 04:39详情
每日定时执行自动化测试-0909失败15.2%调度器09-09 11:21详情
全量测试-手动回归完成88.1%398sczj09-08 16:20详情
🎥
录制用例
▶️
执行全部测试
📁
管理模块
📊
查看报告
现状痛点:① 4 卡片各占 1/4 行,数字之间无层次,页脚关联信息弱  ② 快捷操作在页面最底部,首屏之外基本无人点  ③ 表格 7 列全宽,但信息密度低  ④ 纵向四段式,滚动 2-3 屏才能看完
方案 B — 深色数据驾驶舱推荐
首屏改为「欢迎横幅 + 指标内嵌」:4 个核心指标合并进深色 Hero 横幅(右侧通过率环形),快捷操作上浮到第二位(图标色块化),图表区压缩高度,最近执行保持全宽表格。一屏容纳全部核心信息,动线:看数据 → 快捷行动 → 查明细。
测试总览
2026-09-10 · 近 30 天数据 · 每日定时任务正常调度中
1,842
本月通过
执行 356 次
213
本月失败
跳过 41 次
427
总用例数
36 个模块
89.6%
🎥
录制用例可视化录制回放
执行全部测试一键全量回归
📁
管理模块用例组织维护
📊
查看报告历史执行报告
执行趋势(近30天)执行次数 | 通过率
折线图(高度 180→190,网格更紧凑)
模块用例分布
环形饼图
最近执行记录查看全部
执行名称状态通过率耗时触发人时间操作
每日定时执行自动化测试-0910完成92.4%4521s调度器09-10 04:39详情
每日定时执行自动化测试-0909失败15.2%调度器09-09 11:21详情
收益:首屏即全部核心指标(纵向省 ~200px),快捷操作从页底提升到第二位、点击率大幅提升,深色横幅区分「总览数字」与「明细内容」两个层次
代价:页面出现深色区块,与现有浅色风格形成对比(也可做浅色渐变横幅变体)
方案 C — 浅色仪表盘 + 左右双栏
保持浅色风格:顶部 4 指标改为一体化 KPI 带状卡(分隔线 + 底部彩条,去独立卡片感);下方改为左主右辅双栏——左侧趋势图 + 最近执行,右侧「今日待关注(失败/中断)」+ 模块用例 Top5 横向条形图(饼图 → 条形,小空间下更可读)。信息密度最高,适合长期盯数据。
1,842
本月通过
执行 356 次
213
本月失败
跳过 41 次
89.6%
平均通过率
▲ 状态良好
427
总用例数
36 个模块
执行趋势(近30天)执行次数 | 通过率
折线图
最近执行记录查看全部
执行名称状态通过率时间操作
每日定时执行-0910完成92.4%09-10 04:39详情
每日定时执行-0909失败15.2%09-09 11:21详情
全量测试-手动回归完成88.1%09-08 16:20详情
⚠ 需要关注全部
每日定时执行-0909 · 被取消11:21
5.202 执行 107 例 · 通过率 35.5%09:36
今日定时任务 09:00 被部署中断09:00
模块用例 Top5
会议运维
96
资产设备
78
安全测试
64
通知公告
47
登录验证
33
快捷操作
🎥 录制用例
▶ 执行全部测试
📁 管理模块
📊 查看报告
收益:KPI 带状卡去卡片重复感、色条强化指标归属,右侧「需要关注」直击痛点(失败/中断一眼可见),饼图改条形图在侧栏小空间更可读
代价:改动幅度最大(新增「需要关注」聚合逻辑,需后端 stats 接口补充数据),最近执行表格列数精简,触发人/耗时列移到详情页