大字排版的信息层级
标题 3.6rem、正文 1.06rem，字重 800/400 两档拉开对比；把最重要的一个数字放在左上角 1/3 视线落点。
- 行高：标题 1.12 / 正文 1.62
- 错位叠压位移 ≤ 92px，不遮挡正文
01 / 能力拼图
五块拼图，拼出一页能用的云
每张卡都对应一个可交付能力，卡片间距 16px、圆角 6px，玻璃磨砂分层加 1px 内高光，hover 上浮 3px 并加深阴影 —— 动效克制，信息密度优先。
按需伸缩的云计算服务
业务低谷自动缩到 2 副本，活动峰值 5 分钟内扩到 20 副本；扩容触发阈值建议设在 CPU 65%。
- 冷启动预算：≤ 8s
- 缩容冷却：10 分钟防抖
把指标画成能读懂的图
单图不超过 5 条线；用色只用主色—暖金—青三系，青仅作关键阈值高亮，占比控制在 10% 以内。
- 坐标轴标签 ≥ 12px
- 对比度 ≥ 4.5:1
智能推荐版式与配色
根据内容类型推荐栅格：图文混排走非对称两栏，纯参数页走等宽四列；推荐结果附 1 句话理由。
- 推荐延迟 ≤ 300ms
- 可一键回退到默认版式
动态交互只做“必要的三下”
入场交错延迟 50–330ms，滚动吸附仅用于分段收束；其余交互一律 0.25s 缓动，避免页面像在跳舞。把状态变化放在用户视线停留处，而不是全屏闪烁。移动端点击区不小于 44×44px，长英文词强制 break-word，保证小屏不横向溢出。
02 / 服务与档位
三档价格，按「你要上线什么」挑
价格为参考区间（按月、不含流量超额），适合做预算沟通的起点。所有档位都包含基础监控、日志与 7×24 工单响应。
起步档 · 个人与轻站点
¥ 68/月
2 vCPU · 4 GB · 100 GB SSD
- 适合日 PV ≤ 3 万的小站
- 含 CDN 20 GB/月
- 备份保留 7 天
主力档 · 成长型团队（推荐）
¥ 268/月
4 vCPU · 16 GB · 500 GB SSD · 自动伸缩
- 支持 2–20 副本弹性伸缩
- 含数据可视化看板 + 智能推荐配置
- 备份保留 30 天，可一键回滚
企业档 · 多环境与合规
按需报价起于 ¥ 1.2 万
独立网络隔离 · 多可用区 · 专属支持
- 双活部署，RPO ≤ 1 分钟
- 审计日志留存 ≥ 180 天
- 专属架构师，响应 ≤ 15 分钟
03 / 关键数据
别只看跑分，看这四件事
下面四格是给非技术同事看的「体检表」，右上角数字为近 30 天实测中位数；下方进度条为资源水位，超过 75% 就该规划扩容。
99.95%多可用区可用性（目标 SLA）
186ms接口 P95 响应（同城访问）
2.4×峰值自动扩容倍数上限
−38%图片与字体优化后首屏降幅
04 / 合作伙伴
一起把页面接上云的伙伴
覆盖监控、日志、CDN、支付、地图与身份认证六类；接入方式统一走 API 网关，平均对接耗时 3–5 个工作日。
云监控
日志仓储
边缘加速
支付网关
地图服务
身份认证
05 / 常见问题
大家在迁移前最想确认的四件事
下面答案都按「可操作」写：能给出参数就给参数，能给出时间窗就给时间窗。
创意排版的页面会不会拖慢加载？
不会，前提是把排版当资源来管：标题用系统字体栈，不加载第三方字体；装饰渐变用 CSS 而非图片；首屏只保留 1 张 Hero 图（建议压到 180 KB 以内），其余图片统一 loading="lazy"。这样排版再“重”，实际传输量反而下降约 38%。
从传统主机迁到云计算服务，停机多久？
常见做法是双写过渡：新环境先跑 48 小时影子流量，确认接口 P95 差值小于 20ms 后，再切 DNS 并把 TTL 提前降到 60 秒。整体停机窗口通常可控制在 5 分钟以内，回滚只需切回旧解析。
数据可视化看板会不会泄露敏感指标？
按角色分层：运营看聚合值，研发看实例级，财务只看成本项。默认关闭逐实例标签，导出前强制脱敏；审计日志留存不少于 180 天，所有查看动作可回溯。
智能推荐会不会把版面改乱？
推荐只动「栅格与间距」两类变量，字号层级与配色令牌锁定不动；每次推荐都给出理由并保留一键回退，且先在 A/B 中跑满 1000 次曝光再决定是否采纳。
06 / 实用指导清单
六条能今天就动手的检查项
每一条都给了判断阈值，可以直接做成发布前的勾选项；右侧是配套的工作流程，按周推进即可。
01
先定字号层级，再谈配色
把标题/副标/正文/注释锁成 4 档（如 3.6 / 1.4 / 1.06 / 0.82rem），行高分别取 1.12 / 1.32 / 1.62 / 1.5。层级没定死前不要调色，否则会靠加饱和来“找重点”。
02
强调色占比控制在 10% 以内
青色 oklch(0.78 0.16 210) 只用于按钮、图标、激活态与关键数字；面积一旦超过整屏 10%，就改用主色或中性灰承接。
03
间距走 4/8pt 节奏
区块内边距 24–32px、卡片间距 16px、标签与正文 8px。禁止出现 13px、27px 这类随手值，否则整页看着“差一点”。
04
动效只留三处交错
入场位移 14px、时长 0.6s、交错延迟 50/120/190ms；滚动吸附仅用于分段收束。并写 prefers-reduced-motion 降级，照顾晕动用户。
05
响应式先测 320 与 2560 两端
320px 下确保无横向滚动、点按区 ≥ 44px；2560px 下容器放宽到 1680px 并增列，避免中间一条窄柱两侧大片空白。长英文词统一 break-word。
06
把指标写进页面而不是文档
可用性、P95、缓存命中率直接做成数据条；每次发布后记录一次，连续 3 次劣化超过 10% 才触发扩容评估，避免被瞬时毛刺带着走。
07 / 工作流程
从海报草稿到上线，五步
第 1 步
内容清点（0.5 天）
列出必须出现的专有名词与数字，超过 12 条就拆页，避免大字排版变成信息堆叠。
第 2 步
版式定稿（1 天）
在 1440px 画布上确定非对称栅格与错位位移，导出 3 张缩略图给非设计同事投票。
第 3 步
接入云服务（3–5 天）
按档位开通计算、存储与 CDN，配置自动伸缩阈值与备份保留周期，接入监控看板。
第 4 步
性能与无障碍验收（1 天）
核对首屏体积、对比度与键盘可达性，跑一遍 320px 与 2560px 两端截图。
第 5 步
灰度与复盘（1 周）
先放 10% 流量，观察 7 天指标；把真实数据回填到数据条，再决定是否扩大推荐策略权重。
08 / 场景图集
同一套排版，放进三种真实场景
所有图片统一 16:9 裁切、圆角 4px、加 1px 描边，保证在等宽网格里节奏一致，不因原始比例不同而高低错落。
监控大屏
深色底 + 青系高亮，关键阈值只用一处强调。
多云拓扑
区域与实例用层级分明的字号区分，不靠连线堆复杂度。
上线协作
把五步流程做成可勾选清单，谁卡住一眼可见。