用途：当可视化是一个系统而非一张截图时使用本技能，即更新节奏、延迟、交互设计、可观测性与渲染预算与图表选择同等重要。若主要需求是测试实时仪表盘、冻结数据流、模拟刷新行为或端到端覆盖告警与过期状态，应先转到 ../testing-data-visualizations/SKILL.md。默认面向移动端运维使用，除非明确排除；可参考 ../../references/foundations/mobile-first-responsive-visualization.md 规划竖屏仪表盘、可选横屏、触控交互、屏幕键盘、弱网处理及告警或振动策略。
主要能力：覆盖三类紧密相关的问题——实时流式与刷新行为；布局层级与扫描优先的仪表盘组织；交互模式与联动视图；以及性能与规模。默认需回答更新模型（仅追加流、周期轮询、事件突发、全量快照替换）、延迟要求（亚秒级监控、近实时运营复盘、异步报表）、用户任务（发现异常、对比当前与历史、排查原因、筛选下钻）、硬性限制（帧预算、内存预算、网络预算、可导出性、移动端带宽/电量/热预算）、可同时可见的可视化实例数量，以及移动端在中断下必须可用的状态。
实时设计规则：清晰展示时间窗口；区分实时数据与历史上下文；显式处理缺失、迟到与乱序事件；重连期间保留最后已知良好可视化，并将过期、延迟、部分、离线与错误状态与正常实时数据区分；在证据附近显示最后更新时间和更新节奏；先聚合、降采样或汇总再输出原始点；提供告警阈值、注释与状态转换；振动、系统通知或推送式告警仅用于用户请求且有意义的状 态变化，并始终提供应用内视觉与无障碍告警路径；保持最重要指标位置与编码稳定；键与图表就近放置；在有助于扫描时使用迷你图等微型图表；围绕态势感知而非最大瓦片数设计；优先自解释面板与简洁标签。
布局与扫描默认：给出清晰焦点路径（当前状态、支撑上下文、控件与次要诊断）；避免所有瓦片等权重的网格；筛选与开关靠近其影响的视图；标注与叙述文案仅用于异常、注意事项或操作；折叠或延后低价值控件；移动端不要把筛选栏或诊断控件堆在实时状态之前，使用底部抽屉、标签或内联控件，并在应用、取消、重置或关闭后回到受影响的可视化；横屏用于宽时间线、地图、密集表格或多序列轨迹更清晰时，但仍提供竖屏摘要。
交互模式：先总览，再筛选或聚焦，最后按需细节；总览加细节；聚焦加上下文；刷选与联动；悬停预览、点击确认；触控设备上点按或聚焦预览，再次点按或显式操作确认；下钻与穿透；选择在更新后保持；显式重置与撤销路径。交互应降低认知负荷，而非把关键上下文藏在持续鼠标移动之后。移动端为密集标记增加步进控件、搜索或最近项选择，不要依赖悬停、像素级点按或会困住页面滚动的单指图表平移。
性能默认：仅在真正需要时按 16 毫秒帧预算；先减少工作量（更少标记、更智能聚合、更小重绘区域、适当降低更新频率）再优化代码；有意识地选择渲染器：SVG 用于语义与注释，Canvas2D 用于密集二维栅格负载，WebGL、deck.gl、PixiJS、Sigma.js 或 Three.js 用于 GPU 规模标记、地图、粒子、图渲染或真三维；对长时间实时视图使用环形缓冲、视口裁剪与多分辨率摘要；将交互状态与渲染状态分离；粒子或辉光仅用于活动流、告警状态、焦点或新近性，避免与监控竞争的环境动效。
输出期望：描述更新模型与失败模式；描述移动端重连、过期数据、离线或部分数据及低带宽行为；说明用户首次扫描在触碰任何控件前应理解什么；说明移动端用户首先看到什么，以及主可视化如何在控件与键盘输入周围保持可见；在构建控件前定义交互契约；说明数据速率或标记数量上升时系统如何降级；为新工作包含技术设计部分，覆盖同时图表数量、每实例与页面级预算及所选渲染策略的维护影响；保持无障碍与导出策略可见。
限制：资料未提供具体收费、价格、平台支持范围或效果数据；本技能为设计指导性内容，不包含可直接运行的完整代码示例。