弹性算力卡片
按 CPU 使用率阈值自动伸缩：连续 5 分钟 >70% 触发扩容，连续 15 分钟 <25% 触发回收，实例预热 40s 内完成。
扩容响应≤ 90s
/ 卡片式设计 · 五张核心卡
硬边描边 + 偏移阴影，让每一块算力都可被读取
栅格规则：桌面 12 列，间距 16px；卡片间距 12–20px；断点 1600 / 1024 / 640 / 380px。所有卡片共享同一组圆角与景深令牌。
数据可视化卡片
同一卡片承载指标、维度与阈值线三类信息；折线采样 1 分钟、聚合 5 分钟，异常点自动标注偏差百分比，减少 60% 的人工比对时间。
图表首屏128ms
动态交互卡片
hover 缓慢缩放呼吸，卡片抬升 2–3px；键盘 Tab 顺序与视觉顺序一致，焦点环 2px 强调色，动效统一走 250ms / 450ms 两条曲线。
交互延迟< 16ms
响应式布局卡片
超宽屏 1400 / 1680 容器逐级放宽，卡片 3→4 列；640px 以下单列堆叠，点按区不小于 44px，长英文与 URL 强制断行，无横向溢出。
断点覆盖4 档
成本与安全卡片
按项目 / 可用区 / 标签三元组拆分账单，偏差超过预算 8% 即告警；安全组变更走双人复核，审计日志保留 180 天。
预算偏差≤ 8%
/ 客户评价 · 用量化指标说话
三段真实反馈，三条可复现的决策依据
评价来自不同规模的团队，均给出上线前后的对比数据，便于横向校准你自己的基线。
「把监控、账单、发布三块拆成独立卡片后，值班同学平均定位故障的时间从 22 分钟降到 7 分钟；告警到拉群的链路缩短了一半。」
「数据可视化卡片把 6 张报表压成 1 屏，周会从 90 分钟压到 35 分钟；决策不再靠印象，而是先看折线再看结论。」
「弹性算力卡片按阈值自动伸缩，闲时回收比例稳定在 37% 左右；我们没有增加运维人力，但支撑的业务峰值翻了 2.4 倍。」
/ 合作伙伴墙 · 网格拼图
拼图式网格，hover 放大即可查看生态位
8 个生态位覆盖 IaaS 底座、可观测、数据仓库、安全合规与交付咨询，拼图块随视口在 3 / 4 / 5 列之间切换。
IaaS 底座
可观测
DATA
WAREHOUSE
WAREHOUSE
安全合规
DELIVERY
CONSULTING
CONSULTING
边缘节点
/ 应用场景展示
三类高频场景，三套可直接套用的卡片组合
每个场景给出目标指标与卡片配置，便于对照自己的业务体量做取舍。
电商大促弹性扩容
峰值前 30 分钟预扩容至基线 3 倍，峰值后按 15 分钟窗口回收。
- 目标：扩容完成 ≤ 90s，超卖率 0
- 卡片：弹性算力 + 实时流量 + 成本预算
数据中台可视化
多源同步任务按 5 分钟粒度聚合，延迟超过 3 分钟即高亮。
- 目标：端到端延迟 ≤ 3min，口径一致率 99%
- 卡片：数据可视化 + 任务编排 + 血缘
研发效能流水线
构建缓存命中率与排队时长并列展示，瓶颈一眼可见。
- 目标：流水线 P95 ≤ 8min，缓存命中 ≥ 75%
- 卡片：动态交互 + 构建指标 + 发布记录
/ 实用指导清单 · 六条可落地要点
先把卡片体系定下来，再谈视觉风格
以下每条都给出做法、参数与验收阈值，可直接贴进你的设计评审清单。
先定栅格，再定卡片
桌面 12 列、间距 16px，卡片跨列只用 3/4/5/6 四档；容器按 1140 → 1400 → 1680px 逐级放宽，避免超宽屏出现窄柱留白。
验收：1440px 下左右留白差 < 4px必过
卡片间距控制在 12–20px
间距小于 12px 会显得拥挤，大于 20px 会稀释栅格节奏；统一用 --sp-3/--sp-4 令牌，禁止各处写死 15px、18px 这类魔法值。
验收：全站间距取值 ≤ 6 种必过
数据可视化卡片只放一条主动线
折线采样 1min、聚合 5min；同卡内不超过 3 条曲线，异常点标注偏差百分比而非仅变色，减少 60% 人工比对。
验收：首屏渲染 ≤ 200ms必过
动效统一两条曲线、两个时长
进入与 hover 用 250ms，展开与呼吸用 450ms；hover 位移不超过 3px，缩放不超过 1.06；必须提供 prefers-reduced-motion 降级。
验收：动效时长种类 ≤ 3 种必过
配色守住 60-30-10
约 60% 中性底、30% 主色（卡片描边、按钮、图表主色）、10% 强调色仅用于关键数字与激活态；强调色不做大面积填充，避免把最高彩度铺满屏。
验收：强调色面积占比 ≤ 10%必过
防溢出与响应式兜底
grid 列一律 minmax(0,1fr)，子项加 min-width:0；禁用 100vw，图片 max-width:100% 且固定宽高比裁切；380px 下点按区 ≥ 44px。
验收：320–2560px 无横向滚动必过