实时数据计数器（Live Counter）是什么：效果预览与 AI 设计提示词

效果预览

342 实时

人正在浏览这个页面

适合用在哪

热门商品页、直播页、活动页、报名页。

容易踩的坑

数字区域设了 aria-live="polite" 却每 3 秒刷新，读屏被持续打断无法阅读页面。
每个标签页都开一个 WebSocket，后台标签不暂停，移动端耗电和流量都明显上升。
绿点呼吸动画没响应 prefers-reduced-motion，对动效敏感的用户无法关闭。

设计提示词 · Prompt

实时数据计数器（Live Counter）：绿色呼吸圆点 + "实时"小标 + 大号跳动数字（tabular-nums 防抖）+ 说明文字。数字每 3-8s 随机小幅增减（用WebSocket 真数据最佳，模拟数据要符合自然波动规律——不能跳崖式变化）。放在商品页显示"342 人正在看"、报名页显示"剩余名额 17"。注意合规：数据必须真实，虚构紧迫感在部分平台违反广告法。配一条最近活动 ticker（"刚刚 · 北京的张先生购买了..."）效果更强但也更易造假感，慎用。

Live Counter: a breathing green dot + a small "Live" label + a large ticking number (tabular-nums to prevent jitter) + caption text. The number randomly rises or falls slightly every 3-8s (real WebSocket data is best; simulated data must follow natural fluctuation — no cliff-like jumps). On product pages show "342 people viewing", on sign-up pages show "17 spots left". Mind compliance: data must be real; fabricated urgency violates advertising law on some platforms. Pairing it with a recent-activity ticker ("Just now · Mr. Zhang from Beijing purchased...") is more powerful but also feels fake more easily — use with caution.

常见搭配

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

稀缺性徽章Scarcity Badge 底部悬浮 CTA 条Sticky Bottom CTA Bar 实时播报ARIA Live Region

演示 HTML 结构

<div class="s d-livecounter">
  <div class="d-livecounter__num">
    <b>342</b>
    <span class="d-livecounter__live"><span class="d-dot d-dot--pulse"></span>实时</span>
  </div>
  <span class="d-tiny">人正在浏览这个页面</span>
</div>