攻防演练大屏可视化系统全景展示
大屏可视化 · 系统设计

攻防演练大屏可视化与后台管理系统设计

为网络安全攻防演练场景打造的全链路可视化系统——从实时大屏态势感知到后台战果管理,覆盖数据监控、流量分析、事件复盘等核心环节。

我的职责
UI/UX 设计负责人 独立完成全链路设计
技术栈
Figma · ECharts · React 大屏端 + Web 管理端
项目周期
10 周 需求分析 → 设计交付
项目类型
政企安全可视化 大屏 + 后台双端交付
01 · 项目背景

从数据洪流到一目了然

网络安全攻防演练涉及海量实时数据——攻击流量、防御响应、节点状态、事件时间线——传统报表和文本日志难以支撑指挥中心的快速决策需求。

本项目目标是将复杂的多维度安全数据转化为直观、富有层次感的大屏可视化界面,使指挥人员能够在数秒内完成态势感知与决策触发。

  • 实时流量攻击方向与强度可视化
  • 多层级拓扑地图联动展示
  • 关键事件时间轴与复盘轨迹
攻防演练大屏总览界面
02 · 大屏可视化设计

深色科技感 · 数据即故事

大屏采用深蓝/深紫暗色基调,搭配霓虹蓝、翠绿、琥珀橙作为数据高亮色,确保在昏暗的指挥中心环境中信息清晰可读,同时营造出科技与安全并重的视觉氛围。

顶部全局 KPI 看板让核心指标一览无余,中部左右分栏分别承载网络拓扑与流量监控,底部时间轴串联关键事件——形成"总览 → 分屏 → 事件"的三级信息架构。

  • 暗色科技风 · 低亮度环境友好
  • 三级信息架构 · 逐层深入
  • ECharts 动态图表实时更新
后台管理系统战果提报表单列表页
03 · 后台管理系统

高效管理 · 战果可视化闭环

后台管理系统承载演练全生命周期的数据管理——赛事创建、战队注册、战果提报、评分审核——每个环节都设计了清晰的操作路径与状态反馈。

战果提报列表页采用表格 + 得分高亮的组合设计,支持多维度筛选与批量操作,关键得分信息以视觉化标签突出展示,大幅提升评审效率。

  • 清晰的状态流转与操作路径
  • 关键信息视觉标签化高亮
  • 批量操作与多维筛选支持
04 · 更多界面展示

全场景覆盖 · 多端协同

赛事列表管理界面 用户认证授权界面设计
05 · 设计流程

从需求到交付

STEP 01
需求调研
深度访谈安全分析师与指挥人员,梳理核心信息层级与决策链路
STEP 02
信息架构
设计三级信息架构:KPI 总览 → 分屏监控 → 事件追溯,确保逐层深入
STEP 03
视觉设计
构建暗色科技风视觉体系,定义数据配色规范与组件库,保证双端风格统一
STEP 04
交付测试
输出设计规范文档与标注稿,配合前端联调,完成交互走查与视觉验收
06 · 项目成果

设计驱动的实际价值

40+
交付界面数量
决策响应速度提升
95%
用户满意度评分
返回作品集首页