把云计算服务织成可循环的创意矩阵

做法：列出首屏必需资源清单，把图片统一压到 WebP/AVIF、单张 ≤ 120KB，并在页面头部分层加载（首屏 3 张，其余 loading="lazy"）。避坑：不要为了「科技感」堆叠大图与视频背景。参数：单页请求数 ≤ 45，首屏 DOM 节点 ≤ 900。

做法：把内容按 4（小屏单列）→8（平板双列）→12（桌面四列）的矩阵映射，卡片间距固定 16–20px，圆角统一 20–28px。避坑：不要为每段内容单独发明间距值；所有间距必须引用同一套 4/8pt 令牌。指标：栅格错位率 0，视觉扫描路径 ≤ 2 条。

做法：大面积用纯白与极浅灰表层承载内容，主色只用于标题与按钮，强调色只点小面积（关键数字、激活态、细高亮线）。避坑：绿色作主色时必须降饱和并搭配中性灰与少量暖色，避免通篇荧光绿造成视觉疲劳。指标：首屏最高饱和色占比 ≤ 12%。

做法：超大屏把容器放宽到 1400–1680px、卡片 3→4 列；1024px 收起侧栏导航为横向锚点；640px 单列堆叠；380px 内边距收到 8–12px、按钮点按区 ≥ 44px。避坑：禁用 100vw 宽度与固定像素列，防横向溢出。

做法：面板只保留 4 个核心 KPI（PUE、绿电占比、单请求碳强度、缓存命中率），条形图使用同一主色的明度层次而非多种高饱和色。避坑：不要在面板里塞十种颜色，阅读成本会抵消数据价值。

做法：正文用深色文字保证对比，图片写描述性 alt，装饰元素标记 aria-hidden，并为 prefers-reduced-motion 提供无动画降级。避坑：不要用颜色单独传递状态（如仅靠绿色表示「已达标」），需附加图标或文字。