# 监控看板设计：关系图接上状态列表 原网页：https://www.jvds.cn/share/ui-design/flowtune-nodes-alert-time-u030 语言：zh-CN 发布：2026-10-12 作者：界达设计工作室（JVDS） FlowTune用深绿画布、蓝绿节点和紧凑指标呈现服务监控。桌面关系图与手机概览各有重点：一端看服务如何连接，另一端看哪里需要关注。点评这组设计，关键是让对象、时间和告警在两种视图中可以互相核对。 ## 核心结论 - 拓扑适合看关联，状态列表适合快速定位具体异常。 - 时间条件与告警对象应在不同视图中持续一致。 ## 节点图先建立关联 桌面画布将不同服务做成蓝绿矩形，用线路连接，部分节点内还有子项。节点比一列名称更容易表现依赖关系；下方并排放TCP Throughput与Service Overview，又把结构和数值放在同一工作区。 深色背景压低了外围，亮色节点与连线更醒目。名称在部分节点内被截断，因此选中详情适合提供完整名称、所属组与相关连接。缩小后的图形可以看关系，但具体服务身份仍需要文字。 画面中的小概览与缩放控制有助于定位大画布。这类服务拓扑界面更适合追查关联，快速查找一个已知异常时，[固定搜索入口](https://www.jvds.cn/share/website-design/enterprise-site-search-ux-design)与列表会更直接。两种入口共享选中对象，才能避免查看了不同服务却误以为是同一项。 ![FlowTune桌面拓扑的蓝绿节点、连线、顶部范围筛选与底部吞吐服务模块](https://www.jvds.cn/upload/2026/1008/d187-tp/u030-i1.webp) 桌面画布上下部｜拓扑与监控模块同屏，选中服务需要贯穿各区域。 ## 时间范围应跟随查看过程 手机节点稿保留Interval和顶端工具，底部又展示时间刻度与粉色事件标记。时间没有完全藏进设置，用户在查看关系时仍能知道还有时间维度，这一点适合监控任务。 顶端范围文字、当前选点与刷新间隔应分别命名。Load、Save、Reset很紧凑，但保存布局与保存某段数据是不同动作，工具说明需要解释各自结果。时间变化以后，节点、图表与列表都应展示同一条件。 手机样机外还放了放大的节点和时间条，这是组件说明。不能由其排列判断它们在真实手机里有多大，实际密度要以屏幕内的画面检查，尤其是复杂节点附近的点选范围。 ![FlowTune移动节点页顶端的Interval日期时段、Load Save Reset与底部时间范围](https://www.jvds.cn/upload/2026/1008/d187-tp/u030-i2.webp) 手机顶端与底部｜范围提示两处可见，短标签与起止时段要共同校对。 ## 告警数量与评价分开解释 另一张手机稿以TCP Throughput和Service Overview上下排列，顶部High、Medium、Low配不同颜色，下方列表又以Alert、Warm等短标签显示状态。概览式排列适合先看程度，再找到具体服务。 图表浮层同时出现Alerts、52与Excellent。[数量和整体评价](https://www.jvds.cn/share/ui-design/dashboard-data-visualization-mistakes)可以来自不同指标，但在同一小卡片上需要写出解释对象，否则读者难以理解为什么告警旁边出现良好评价。增加更多红色并不能解决这个文字关系。 建议让告警条目显示服务、时刻和指标，再提供进入相关节点的操作。图表选点的时间应与条目保持一致；Warm的含义也需由状态定义确认，而不能凭相近拼写猜测。 ![FlowTune手机吞吐图的等级图例、Alerts Excellent浮层及Alert Warm服务列表](https://www.jvds.cn/upload/2026/1008/d187-tp/u030-i3.webp) 手机中下部｜图例、浮层和服务标签并列，不同状态名称尚需统一解释。 ## 常见问题 ### 监控手机端需要完整节点图吗？ 取决于移动任务。临时查看告警可优先列表，追查依赖再进入关系图；两者要保留相同时间与选中对象。 ### 同一告警卡可以显示数量与评价吗？ 可以，但需要分别说明数量统计什么、评价针对什么，并提供具体指标或条目，避免让两种信息互相解释。 ## 设计检查清单 - 选中节点可读到完整服务名。 - 刷新间隔、查看范围与当前时刻分开表达。 - 告警可定位到对象、时间和指标。 ## 让监控信息可以相互核对 服务监控产品可从一条告警到节点详情的路线开始评审，统一时间、名称和状态，再调整图表密度。 界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。 [联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)