CONVERSION CTA
稀缺性徽章Scarcity Badge
"仅剩 12 席"的呼吸徽章 + 快满的进度条——限时限量带来的行动力。
效果预览
🔥 仅剩 12 席
本期名额已报名 86%
适合用在哪
限量课程、早鸟票、名额有限的训练营、库存少的商品。
容易踩的坑
- 倒计时每秒更新却放在 aria-live 区域里，读屏每秒播报一次，页面无法使用。
- 倒计时依赖本地时钟，用户改系统时间或跨时区时显示错误的剩余时长。
- 红橙渐变上白字对比度常低于 3:1，小于 14px 的徽章文字几乎看不清。
设计提示词 · Prompt
稀缺性徽章（Scarcity Badge）：暖色渐变胶囊（红→橙）+ 白字 + 呼吸动画（scale 1→1.05），写"仅剩 12 席"或"早鸟价还剩 6 小时"；下方配一条已满 86% 的进度条可视化稀缺程度。倒计时变体：数字时钟 hh:mm:ss 每秒跳动。合规红线：数字必须真实——虚假的"仅剩 X 件"违反《广告法》和《消费者权益保护法》；名额真的有限时才用，用完要真的关闭。放在价格附近或报名按钮正上方。
Scarcity Badge: a warm gradient pill (red→orange) + white text + a breathing animation (scale 1→1.05), reading "Only 12 seats left" or "Early-bird price ends in 6 hours"; below it, an 86%-full progress bar visualizes the scarcity. Countdown variant: a digital clock hh:mm:ss ticking every second. Compliance red line: the numbers must be real — fake "only X left" claims violate the Advertising Law and the Consumer Rights Protection Law; use it only when spots are truly limited, and actually close it when they run out. Place it near the price or directly above the sign-up button.
常见搭配
同一页面里经常和「稀缺性徽章」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-scarce"> <span class="d-scarce__badge">🔥 仅剩 12 席</span> <div class="d-scarce__bar"><i></i></div> <span class="d-scarce__cap">本期名额已报名 86%</span> </div>