新华三安全运营平台 · 设计规范与页面

01

OVERVIEW

项目概述

Web 平台 · 设计规范 · 可视化大屏

新华三安全托管服务（MSS / MDR）的一体化运营平台。汇聚资产、威胁、漏洞等多源安全数据，串联监测、研判、处置、派单、评估、呈现的运营闭环：新华三运营团队在平台上处置告警、流转工单、量化服务成效；企业客户通过控制台与大屏掌握自身安全态势，确认托管服务价值。

多源安全数据统一呈现
托管服务能力可视化

产品需求PRODUCT

用户诉求USER DEMANDS

一眼看清安全态势
告警工单高效处置

02

ROLES & WORKFLOW

业务梳理

6 个环节在 4 类角色间接力，最终交付到客户侧

业务流程 × 角色

主导协同交接

客户侧

服务侧 · 新华三

01监测威胁 / 脆弱性告警

02研判运营场景 · 攻击链

03处置黑白名单 · 自动化

04派单工单 · 流程配置

05评估成熟度 · 满意度

06呈现控制台 · 大屏

安全运营工程师快速处置告警，按时闭环工单

安全专家研判复杂威胁，量化运营成效

运营主管统筹团队与客户，汇报运营成果

企业安全负责人掌握自身安全状况，确认服务成效

分级筛查初判批量封禁 / 加白接单回填编排攻击链场景配置自动化策略成熟度 / 健康度评估配置流程、分派工单满意度调查大屏汇报查看报告控制台查看态势

03

INFORMATION ARCHITECTURE

信息架构

顶部一级 + 侧边二三级，两期共用一套骨架。

安全运营平台

运营概览

客户控制台
综合视图
⋯

监控中心

威胁告警
脆弱性告警
运营场景
自动化处置
策略管理
⋯

调度中心

运营日常
流程配置
我的工单
⋯

成熟度评估

评估概览
评估任务
评估模板
指标库
⋯

客户管理

客户列表
客户画像
满意度调查
⋯

大屏展示

安全运营管理
运营交付
设备托管
⋯

04

DESIGN SYSTEM

设计规范

Web 端交互设计规范 v1.0

4.1

色彩

BRAND

按下#5296A2 品牌色#66BBCB 悬停#85C9D5 渐变#BFE2E9 禁用#E0F1F5 浅底#EFF8F9

GRAY

一级文字#383838 二级文字#808080 三级文字#A6A6A6 分割线#E5E5E5 背景色#F5F5F5 模块#FFFFFF

STATUS

危险#E64545#FCECEC

警告#FFC300#FFF9E5

成功#43CF7C#ECFAF1

4.2

字体

Windows: 思源黑体
Arial
macOS: 苹方
Helvetica

英文 / 数字Arial · Helvetica

RegularMediumBold

中文思源黑体 · 苹方

常规中等粗体

示例字号行高使用场景

新华三安全运营2028页面标题
新华三安全运营1826模块标题
新华三安全运营1624卡片标题
新华三安全运营1422正文 · 表格
新华三安全运营1220辅助说明

4.3

基础

间距4N

圆角

2

4

6

8

投影

SML

图标32 GRID

26
24
28×20
20×28

4.4

布局

1440

头部50

面包屑40

18

树形分组 212

查询重置

批量操作其他操作

模块区

≥ 1184 自适应

4.5

表单 · 弹窗

表单组一

策略名称

请输入内容

涉及组织

请选择

封禁时间

开始 — 结束

源 IP

172.16.9.101

多个 IP 用逗号分隔

表单组二

加白时间

自定义7 天30 天

确认取消

16 24 4 48

1120

880

640

420

卡片弹窗H ≤ 700

904

452

抽屉右对齐

05

COMPONENTS

组件

6 类基础组件 · 全状态

按钮

normalhoveractivedisabled 填充按钮新建 · 导入导出 · 提交填充按钮填充按钮填充按钮填充按钮描边按钮刷新 · 重置 · 取消描边按钮描边按钮描边按钮描边按钮描边 · 激活填充选择类次要操作描边按钮描边按钮描边按钮描边按钮文字按钮表格行内操作文字按钮文字按钮文字按钮文字按钮

输入框

默认请输入内容

悬停请输入内容

激活

已填充已填充示例

错误已填充示例

错误提示文本

禁用已填充示例

多文本

源 IP 172.16.9.101 多次触发暴力破解告警，已加入黑名单观察。

38/150

单选框

自定义7 天14 天永久

源 IP目的 IP双向

近 24 小时近 7 天近 30 天

评分维度评分趋势

数字输入框

1

30▴▾

天

1

时间选择器

2024-03-11 — 2024-03-17

«‹2024 年 3 月›»

日一二三四五六

今天清空确定

标签输入框

标签请输入内容标签

源 IP172.16.9.101

按钮尺寸

每区主按钮唯一 · 间距 8

大按钮H40 · 16px · R4 · 左右 24 · 最小宽 112

中按钮H30 · 14px · R4 · 左右 16 · 最小宽 88常用

小按钮H26 · 12px · R2 · 左右 12 · 最小宽 72

Do

填充按钮描边按钮描边按钮

Don't

填充按钮填充按钮填充按钮

06

KEY SCREENS

核心页面

29 页精选 6 页 · 标签注明对应规范

P.01

客户控制台

客户首屏：先结论，后明细

运营概览 / 控制台

A B C D E

A
安全评分首屏左上，一个分数回答是否安全
B
数据概览4 项指标横排，大数字统一样式字体 · 数据展示
C
风险评估环形图并列，已 / 未处置对照
D
专家服务专家与在办工单、告警同屏直达
E
服务状态临期标警告色，就近提供开通入口色彩 · 警告色

P.02

综合视图

一页看全态势、成熟度与健康度

运营概览 / 综合视图

A B C D E F

A
评分 + 服务天数翻牌数字强化持续服务感知
B
安全态势小标题分组，不叠加边框降噪
C
成熟度等级总分附等级释义
D
维度 / 趋势切换按钮单选切换两图，不增页长组件 · 单选框
E
待提升 Top5双列排行，直指改进项
F
扣分 / 加分零轴居中的正负双向柱

P.03

威胁告警

工程师主工作台：筛选与批量处置

监控中心 / 威胁告警

A B C D E

F

A
组织树树形分组布局，树宽 212布局 · 树形分组
B
筛选栏展开态每行 3 项，查询置右下，可收起布局 · 筛选栏
C
处理状态四态带计数，一键切换队列
D
操作按钮批量操作居左，列设置居右布局 · 按钮
E
确信度 + 操作列实底标签分级，操作列右侧固定
F
预处理抽屉904 抽屉内批量处置或转工单弹窗 · 抽屉

P.04

运营场景编辑

攻击链节点化，节点挂载检测规则

监控中心 / 运营场景 / 模板详情

A B C D E

A
基本信息标签右对齐，间距 16，行距 24布局 · 表单
B
攻击链画布按阶段左→右排布，支持并行分支
C
节点管理列表与画布联动，选中即编辑
D
行内编辑行内增改，开关启停，免弹窗
E
完成 / 取消居中置底，主按钮唯一按钮 · 按钮组合

P.05

成熟度评估报告

任务 → 参数 → 结论 → 明细

画面内可滚动

成熟度评估 / 评估任务 / 任务详情

A B C D E F

A
任务信息三列描述列表，灰底标签
B
评估参数权重与阈值成表，结果可回溯
C
关键指标4 项结论置顶，主数字下拆分
D
成熟度等级L1–L5 阶梯条标示当前等级
E
开展率分组柱状对比，悬停看同组值
F
得分明细双列并排，缩短滚动

P.06

黑名单

封禁 IP 的增删、加白与续期

监控中心 / 策略管理 / 黑名单

A B C D

E F

A
三级侧导航宽 220，圆点 + 竖线表达层级导航 · 侧边导航
B
批量操作「新增」唯一填充，其余描边按钮 · 按钮组合
C
剩余时间 + 状态剩余时长精确到秒，状态带图标
D
翻页器页码、条数、跳页齐全导航 · 翻页器
E
卡片弹窗880 宽双列表单，高 ≤ 700弹窗 · 卡片弹窗
F
加白时间常用时长单选 + 自定义天数组件 · 单选 / 数字输入

07

DATA SCREENS

可视化大屏

平台用于操作，大屏用于汇报；口径与语义色与平台一致。