未采用
实体设备插画化
以真实设备轮廓构建视觉词汇，细节丰富，但整体视觉偏重。
ENTERPRISE OPERATION PORTAL
管理员门户
看板设计
从全局信息聚合到机房设备监控
面向视频会议系统管理员，将业务统计、资源状态、机房连接和设备故障集中在一个门户中。
SCROLL TO EXPLORE
CARD 01 / 11
PROJECT BRIEF
项目目标与核心挑战
项目旨在构建省市县多层级视频会议管理系统的统一门户，在单一界面内汇聚业务运行、资源使用与设备状态等关键信息，并将机房到设备的链路监控作为重点能力进行深化。
01
统一门户看板
通过统一看板整合会议运行、资源负载、终端状态、直播点播及告警信息，建立从全局概览到关键指标的管理视角。
- 信息统一汇聚
- 关键指标分层
- 多终端适配
02
机房与设备监控
系统需实时呈现多机房之间的连接与运行状态，并支持从异常机房节点进一步下钻至设备层级，查看具体设备及链路状态，并支持相关运维操作
- 机房连接实时感知
- 异常状态快速识别
- 设备与链路逐级下钻
- 机柜板卡可视化
核心设计
挑战在有限的看板空间内建立清晰的“机房—设备—故障”信息层级，使复杂的连接关系与多维状态具备良好的可读性，并形成从全局监控到故障定位的连续操作路径。设计机柜板卡的统一可视化效果
挑战在有限的看板空间内建立清晰的“机房—设备—故障”信息层级，使复杂的连接关系与多维状态具备良好的可读性，并形成从全局监控到故障定位的连续操作路径。设计机柜板卡的统一可视化效果
INFORMATION HIERARCHY
层级架构与交互原型设计：概览 → 机房 → 设备与故障定位
先确认异常机房，再查看关联设备与接口状态，最终完成故障定位。三个层级对应三种不同的信息密度。
中心概览
18总数5一般告警0重要告警1严重告警
面板1
面板2
面板3
面板4
面板5
面板6
继续向下浏览，逐层查看从全局概览到设备定位的过程
VISUAL EXPLORATION
视觉设计：核心机房的视觉重构
机房本身是多个设备集合的抽象概念，我将这个概念具象为一个运算方块，用来在概览图中直观的表示机房的状态，以及机房之间的连接，增强视觉感知。
CORE OBJECT单个机房外观设计
一般告警黄色告警标签
重要告警橙色告警标签
网络波动链路状态异常
独立模式节点独立运行VISUAL DIRECTION EXPLORATION
视觉设计：实体机柜的数字化映射
运维界面用户需要能清晰看到每个板卡接口的运行状态，与实际设备一一对应。需要对实际产品进行数字化处理。
深化方向
统一数字化映射
以统一的设备轮廓、板卡与接口状态构建映射关系，成为后续交互原型的视觉基础。
子设备
UMS4000连接延迟 10ms · 运行顺畅
DASHBOARD COMPOSITION
全局信息聚合与响应式布局
门户首页仍以综合信息为主，但机房监控承担异常入口，因此获得最大的卡片面积和更高的视觉优先级。
首页空间分配
中心概览约 30%
会议资源负载约 12%
正在召开约 12%
会议并发约 16%
终端并发入会约 16%
会议直播约 7%
观看点播约 7%
响应式编排演示
中心与设备概览 · 八张业务画板
10ms
210ms
20ms
4设备总数
1一般告警
0重要告警
0严重告警
珠海市
汕尾市
惠州市
佛山市
东莞市
中山市
深圳市
肇庆市
韶关市
清远市
广州市
江门市
广东省中心机房
梅州市
阳江市
汕头市
湛江市
河源市
茂名市
19中心总数
6一般告警
12重要告警
5严重告警
CARD 08 / 11
DEVICE OVERVIEW
设备概览的关键业务卡片
中心与设备概览、资源负载、正在召开、会议并发、终端入会、会议直播与观看点播，延续同一套数据视觉语言。
机房A设备概览图
10ms
210ms
20ms
4100
中心概览
珠海市
汕尾市
惠州市
佛山市
东莞市
中山市
深圳市
肇庆市
韶关市
清远市
广州市
江门市
广东省中心机房
梅州市
阳江市
汕头市
湛江市
河源市
茂名市
196125会议资源负载
56%
输入端口授权数
AP
67%
媒体端口授权数
MP
24%
会议调度授权数
VCS
77%
媒体资源
中
正在召开
30场
会议总数12场
点对点会议8场
多点会议会议并发
多点点对点
100806040200
08/1508/1608/1708/1808/1908/20今天
多点会议 64点对点会议 56
软终端硬终端
100806040200
08/1508/1608/1708/1808/1908/20今天
会议直播
12场
今天
观看点播
深浅主题 · 登录页与主页
CARD 09 / 11
LOGIN & THEME
登录页与深浅风格
浅色主题用于日常管理场景，深色主题适合监控大屏和低照度环境；登录页保持相同的品牌气质。
DESIGN SYSTEM
设计规范：色彩、字体与组件
色彩
品牌主色
- 主按钮 / 数据蓝
#5EA9FE - 强调蓝
#4D9CF8 - 深强调蓝
#287CDA - 数据绿
#31BF76
状态色
- 正常运行
#28BD75 - 一般告警
#FFC445 - 重要告警
#FF9A38 - 严重告警
#FF584D
中性色
- 正文
#3D424D - 卡片标题
#37556D - 辅助文字
#909094 - 描边
#E6E6E6 - 页面底色
#F5F7FB - 浮层 / 提示
#1D3147
深色主题
- 页面底色
#161819 - 卡片底色
#212325
字体与字阶
Noto Sans SC中文界面与正文
Reddit Mono环形图百分比数值
Inter西文、链路延迟与坐标数字
- 80 / Bold12场直播大数字
- 64 / Bold30场会议统计数字
- 28 / Bold19概览数值 / 百分比
- 14 / Bold会议资源负载卡片标题
- 14 / Regular输入端口授权数正文 / 控件
- 12 / Regular08/15 · 多点会议图例 / 坐标轴 / 节点标签
大数字按 80 / 64 / 28 三档区分信息层级，图中样例已等比缩小。
间距与圆角
间距 · 4 的倍数
- 4图标与文字
- 8指标块间距
- 16内容区内边距
- 24卡片边距 / 栅格间距
圆角
- 8业务卡片
- 6指标块 / 提示框
- 4下拉选择
- 12胶囊标签
组件
按钮与选择
登录
最近7天
终端并发入会终端并发在线
终端并发入会终端并发在线
状态标签
告警图标
指标块
19125图标
- 机房
- 网络波动
- 独立模式
导出
全局总览
翻页
功能图标为 24px 线性风格（#37556D / #414751）；状态与机房图标使用实心填充。
THANK YOU FOR WATCHING