片中文字依次为：每一秒。看见全局。秒级发现。即刻处置。一屏统览，全域安全。安全态势感知平台，看得见，才守得住。

06安全态势

安全态势感知平台

B 端安全大屏 · 在职 2023–2025 · 重制 2026

防火墙、WAF、审计设备各自告警，这块大屏把它们收到一屏里：先看整体安不安全，再看哪里在被打，最后直接处置。

136 Figma 组件库里的组件变体，基础 69 个，复合 67 个

3档 1920、1366、1024 三种屏宽，网格重排，不整屏缩放

5ms 每来一条攻击的地图重绘耗时，拆成静态底图加飞线层前约 70 毫秒

ROLE在职：大屏视觉与界面设计
2026 重制：交互原型 · Figma 组件库 · 宣传片
TIME2023–2025 · 重制 2026
PLATFORM指挥中心大屏 · 1920×1080

交互原型 · 出于保密不用前公司真实数据，人名、IP 与单位均为虚拟

01Context

一块屏，要同时回答三种人的问题

政企客户的机房里，防火墙、WAF、审计、路由器来自不同厂商，各出日志、各自告警、各有后台。

平台把这些日志收拢分析，大屏负责把结果摆出来。它挂在指挥中心墙上，领导汇报、竞标演示、日常值守都用它，三种人站在同一块屏前，想知道的事不一样。

三种人对应屏幕上、中、下三块，这也是下一节信息分层的由来

02Layers

先判断，再盯变化，最后给出行动入口

深色是功能选择：底色压暗，红和黄靠对比度自己跳出来。屏幕从上到下分三层，一屏之内走完“看全局、盯变化、去处理”。

03Flow

一次攻击，从看见到处置都在这块屏上

5 个总量：攻击次数、已阻断、高危告警、受攻击资产、威胁情报命中，各带环比 — **01 监测**5 个总量各带环比，高危告警单独标红

攻击来源 TOP5 排行，每行一个地区和攻击次数 — **02 关联**点一个来源，地图和事件表跟着筛

攻击事件详情弹窗：等级、时间、攻击源、目标资产、情报标签、载荷摘要和处置建议，底部确认告警、转工单、阻断源 IP — **03 下钻**一张弹窗讲清发生了什么、打到哪、建议怎么办

告警处置进度：总体处置率、待处置告警数，高中低三档各自的进度和待处置入口 — **04 处置**阻断后，处置进度当场更新

04Semantics

颜色即状态，每张图只回答一个问题

值守的人一盯就是一整班。颜色固定只表示状态，不拿来装饰；看到红，不用读字就知道要处理。

高危#FF4D5E高危攻击、待处置、高危横幅
中危#FF9A3C中危攻击与飞线
低危#FFBE00低危攻击、探测类事件
进行中#3490E4处置中、可点击的链接
正常#2BAE7C已阻断、评分良好
归档#7797B5已确认、次要信息

每块面板一个问题

先写下面板要回答的问题，答不出来的图不放。

全局安全评分: 今天整体安不安全？
攻击趋势: 比平时多还是少？
攻击类型分布: 主要是哪一类攻击？
受攻击资产 TOP5: 哪台资产最危险？
攻击来源 TOP5: 攻击从哪些地区来？
告警处置进度: 还剩多少没处理？
地图飞线: 从哪来，打到哪个站点？
实时攻击事件: 现在先处理哪一条？

05Screens

三栏六面板，中间留给地图和事件

整体攻击态势大屏：顶栏、5 个总量、全球地图飞线、实时攻击事件表，左右各三块面板

三种屏宽，按网格重排

会议室的屏不都是 1920。整屏等比缩小会让小字糊掉，所以按宽度重排：1366 收紧行高，1024 只留最要紧的面板。

1366 宽：顶栏和行高收紧，总量去掉环比行 — **1366**收紧行高，总量去掉环比

1024 宽：去掉攻击类型和受攻击资产两块面板，总量只留 3 个 — **1024**留 4 块面板、3 个总量

06Interactions

原型里能点的，都录了下来

全球 ⇄ 全国地图一镜推近、拉远，来源面板和事件表跟着换成境内

实时推送每 3.2 秒一条，高危弹横幅，点横幅直接看详情

联动筛选点来源，地图和事件表一起筛；再点资产叠加一层

处置阻断源 IP，状态和处置进度当场更新

时间与等级今日、近 7 天、近 30 天一起切；事件表按等级筛

新窗口打开交互原型

07Design system

原型定下来以后，拆成 Figma 组件库

颜色、字号、间距从原型里逐个取值，每个组件把状态都画出来：默认、悬停、选中、新到、空表、待处置到已阻断。

136组件变体
基础 69 个，复合 67 个
12图标
统一取自 Lucide 线性图标
9页面模板
全球、全国、弹窗、空表
7交互流程
视图切换到暂停恢复

面板组件 7 种：全局安全评分、攻击类型分布、攻击来源 TOP5、攻击趋势、受攻击资产 TOP5、告警处置进度、实时攻击事件（含空表） — **Panel × 7**六块面板加事件表，事件表带空表状态

总量卡组件：正常与告警两种类型，环比上升和下降两种趋势 — **KPICard**正常 / 告警 × 上升 / 下降

事件表组件：表头，行的默认、隔行、悬停、新到四种状态，空表，等级筛选与来源筛选标签 — **TableRow**默认、隔行、悬停、新到；空表；等级与来源筛选

图表组件：评分仪表、类型环图默认与聚焦、趋势曲线和悬停提示 — **Chart**评分仪表、类型环图聚焦、趋势曲线与提示

事件详情弹窗：待处置和已阻断两种状态，下面三条处置后的提示 — **EventDetailDialog**待处置 → 已阻断，三种处置提示

地图组件：全球视图飞线、标题条、图例、站点标记、最新攻击条三种状态、高危横幅两种状态 — **MapView**标题条、站点标记、最新攻击条、高危横幅

08Then & now

同一个整体攻击态势，中心从地球换成了路径

整体攻击态势

在职版整体安全态势：画面中心是 3D 地球，总量压在地球下沿，右侧仪表和环图，底部攻击列表 — 在职版3D 地球占住中心，看不出攻击从哪来、打到哪；总量压在地球上，原稿只留下这张缩略图

09Method

换一个行业，同一套大屏方法照样成立

60 秒宣传片，带声音

城脉 · 商圈选址决策大屏CITYPULSE · 2026

开店前选址用的一块屏。从地球俯瞰到城市、商圈一路下钻；在地图上双击落一个候选点，按五个维度打分，调权重当场重算。

预置 20 个城市、64 个商圈。数据默认是模拟的，每块面板都标着“真实”或“模拟”。

新窗口打开城脉原型

10Review

大屏不是越满越好，每块面板都要答得出一个问题

做得好的

01每块面板先写它回答哪个问题，答不出的图不放。
02地图拆成静态底图和飞线层，实时推送不再整张重绘。
03Figma 组件库按原型逐个取值，设计稿和代码对得上。

做得不够好的

01旧版 2.0 只留下缩略图，没法逐屏对照当年的取舍。
02出于保密用的是预设数据，没接过真实 SIEM，告警量很大时的表现没验证。
03只重做了整体攻击态势一套模板，APT、流量、僵木蠕毒三套还没做。

深色、飞线、动效都可以有，前提是它帮人更快看到该处理的那一条。