数据里程碑带（Stat Band）是什么：效果预览与 AI 设计提示词

效果预览

2.4M月活跃用户

99.99%服务可用性

18s平均响应

4.9应用商店评分

适合用在哪

首页中段、About 页顶部、融资公告页、年报页。

容易踩的坑

count-up 动画没设最终值作为初始 HTML，JS 失败或爬虫抓取时显示全是 0。
四组 72px 数字在 375px 宽手机上挤成一行，必然溢出，应改为 2×2 排列。
竖线分隔在换行后仍保留，移动端出现孤零零的竖线挂在行首。

设计提示词 · Prompt

数据里程碑带（Stat Band）：一行 3-4 组数据，每组是大号数字（40-72px、800 字重、tabular-nums、字距 -0.03em）+ 下方小标签。组间用 1px 竖线分隔（浅灰）。数字进入视口时做 count-up 动画。数字选择有讲究：要有量级冲击（2.4M 而不是 2,400,000）、要带单位语境（"每月处理"而不是"处理"）、最好有一个"反常识"数字制造记忆点。整条带子可以放在全出血深色区块里，数字用白色 + 品牌色强调。

Stat Band: a row of 3-4 stats, each a large number (40-72px, weight 800, tabular-nums, letter-spacing -0.03em) + a small label below. Separate groups with a 1px vertical line (light gray). Run a count-up animation when the numbers enter the viewport. Choose numbers carefully: they should have impact in magnitude (2.4M rather than 2,400,000), carry unit context ("processed per month" rather than "processed"), and ideally include one "counter-intuitive" number to make it memorable. The whole band can sit inside a full-bleed dark section, with numbers in white + brand-color accents.

常见搭配

同一页面里经常和「数据里程碑带」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

数字滚动计数Odometer / Count-up Animation 全出血区块Full-bleed Section Logo 云Logo Cloud

演示 HTML 结构

<div class="s d-statband">
  <div class="d-statband__cell"><b>2.4M</b><span>月活跃用户</span></div>
  <div class="d-statband__cell"><b>99.99%</b><span>服务可用性</span></div>
  <div class="d-statband__cell"><b>18s</b><span>平均响应</span></div>
  <div class="d-statband__cell"><b>4.9</b><span>应用商店评分</span></div>
</div>