Michaels 运维支持系统面向深圳技术团队内部使用。2022 年，我负责相关 UI/UX 设计，包括开发需求对接、初始框架与风格设定、高保真设计、设计系统维护及开发交付。核心页面围绕前端告警、模块与页面看板、基础配置展开。
- 设计重点我围绕列表、详情、看板与配置，整理适合技术团队阅读的信息层级。
- 系统框架应用中心提供统一入口，工具内部再按任务展开，保持全局与局部的分工。
- 视觉语言用克制的底色、稳定的表格骨架、状态标签与图表组合承载复杂内容。
Michaels 运维支持系统
Michaels技术团队（深圳）运维支持系统
业务逻辑 / 数据管理支持 2022
给高密度信息，建立一套清楚的视觉秩序
工作空间先回答：我正在看哪个系统
应用中心 / 聚合入口而不混合任务
我把前端告警监控、离线包管理和数据库管理并列在应用中心，上方保留工作空间与账户。卡片负责识别工具，全局栏负责建立归属，进入应用后再展开具体内容。整个框架保持克制，让工具本身成为重点。
我把全局框架、应用导航和内容区看作三个尺度。全局层说明当前空间，导航展开工具能力，内容区聚焦具体记录。先把这三个尺度理顺，后续页面就可以在共同骨架里变化，而不必反复设计新的入口形式。
告警列表，先筛选再采取行动
告警列表 / 等级、环境与状态共同辅助判断
我用 P1—P5 文字和色块形成等级标签，再以 Open / Closed 表达另一组状态。环境、模块与标识沿列排列，右侧收拢操作。标签提供快速识别点，稳定列宽与行距则维持整张表格的秩序。
高密度列表是我在这个项目里花心思比较多的部分。等级、环境和模块适合快速读取，长标识则适合在需要时细看。我希望短标签、长文本和固定操作列之间有明确的轻重关系，让表格丰富但不吵闹。
| 信息类型 | 阅读方式 | 我的视觉处理 |
|---|---|---|
| 等级与状态 | 快速识别与比较 | 标签位置稳定，文字与颜色共同区分不同维度 |
| 环境与模块 | 确定当前范围 | 使用一致的命名位置，与上方筛选形成对应 |
| 标识与操作 | 定位具体记录并继续查看 | 长文本保持有序，操作收在固定区域 |
详情页，围绕一次事件重建上下文
告警详情 / 从摘要进入设备、行为与报文
我把模块、环境和等级集中在顶部摘要，设备、性能、行为记录与报文依次展开。较长内容拥有独立区域，短信息采用紧凑排列，让同一页面容纳不同密度而不失去层次。
我把详情组织为摘要、条件和记录逐层展开的结构。大标题建立页面起点，组标题帮助分段，较长的报文留在独立区域。不同长度的内容共享边距和对齐方式，阅读深度增加时，页面仍然有清楚的节奏。
模块与页面，是两种观察尺度
模块看板 / 关注范围与全量目录
我用上方卡片呈现“我的关注”，下方表格保留完整目录。卡片适合反复扫看，表格适合逐行查找，两种表达共享模块和环境标识，在视觉上形成从重点到全量的层级。
页面看板 / 以业务页面组织监测对象
我用业务页面名称作为卡片的识别点，再安排 URL、环境和相关数值。名称承担第一层阅读，链接和标识退到次级位置。相同的卡片骨架让不同页面有统一的呈现方式。
模块用于发现一片范围的变化，页面用于收窄到具体入口。两种看板需要形成可追溯关系，我将定位层级组织为“工作空间—模块与环境—页面—事件”，让每次下钻都知道正在缩小哪一层范围。
- 工作空间确定当前团队和工具，建立操作范围。
- 模块与环境确认是哪一项业务、哪一套运行环境，避免跨环境比较。
- 页面通过业务名称与完整 URL 找到具体监测对象。
- 事件查看该对象的告警、发生条件和相关记录。
数字、趋势与分布，需要不同的尺度
模块详情 / 总量、趋势与分布分层
我把数值卡、每日柱图和 Top 10 排行分成三个层次。它们分别适合快看、看变化和做比较，所以在页面中使用不同高度与宽度。标题、图例和内容边距保持相近，图表之间就有了整体感。
页面性能 / 把耗时与相关事件放在一起
我让 TTFB、DOM 解析和平均加载时间形成一排摘要，下方再展开耗时分布与相关记录。数字、图形和列表有不同的视觉重量，共同构成从概括到细节的阅读路径。
| 图表形式 | 适合呈现的信息 | 我的排版重点 |
|---|---|---|
| 指标卡 | 少量需要快速读取的核心数值 | 数字大于标题，单位和说明保持邻近 |
| 时间趋势 | 连续变化及阶段差别 | 给绘图区充分宽度，标题与图例保持固定关系 |
| 分布与排行 | 不同对象之间的横向比较 | 统一标签、排序和数值对齐，形成稳定阅读方向 |
我会先想清楚读者是在看一个数值、一段变化，还是一组对象的差别，再选择图表形式。这样图表之间可以有大小和形态的变化，但它们的标题、图例与说明仍然属于同一套语言。
把操作层级，放进共同的组件规则
追踪、处理和更多操作在视觉上不需要同样突出。我倾向于把当前最常用的动作留在明面上，其余内容通过次级入口展开。这种主次关系可以复用于不同表格，也让操作列保持相对安静。
- 确认范围在列表中读取环境、模块和状态，找到当前记录。
- 展开信息进入详情，按摘要、条件和相关记录逐层阅读。
- 继续处理回到稳定的操作区域，选择与当前任务对应的动作。
配置页，把规则写成可理解的行为
配置目录 / 环境、模块与规则各自成组
我把环境、模块和规则各自组织为表格，统一表头、时间和编辑信息的位置。规则区域用行为说明连接类型、数值与表达式，让技术字段也能拥有自然的阅读顺序。
就地新增 / 表单靠近对应的配置表
我让新增表单紧贴对应的配置组，局部展开后仍然能看见原来的表格。表单与表格共享左右边界，按钮保持固定层级，用亲密性而不是额外装饰来说明它们的关系。
| 配置对象 | 内容特点 | 我的呈现方式 |
|---|---|---|
| 时间类规则 | 需要同时阅读条件与时长 | 将数值、单位和说明靠近排列 |
| 追踪类规则 | 需要理解触发条件与后续动作 | 以简短行为描述连接多个字段 |
| 累计类规则 | 需要读取数量及相关范围 | 让关键数值突出，补充信息留在同一组内 |
交付一套页面，也整理一套组件关系
对我来说，这套内部工具的整体感来自反复出现的小规则：筛选区的位置、状态标签的强度、图表标题的间距、详情分组的节奏，以及局部表单如何展开。它们不抢眼，却能把不同工具自然地连起来。
- 组件层我关注列表、标签、指标卡、图表与表单各自的层级规则。
- 组合层我让相邻组件共享边距和对齐关系，同时用尺度区分主次。
- 交付层我把常见布局、内容长度与状态样式作为设计系统维护的重要部分。
这个项目让我觉得，技术后台的精致感不一定来自新奇的视觉形式。把长文本、数据、操作和留白安排得恰到好处，让不同页面保持同一种阅读逻辑，本身就是很有价值的设计工作。