CONVERSION CTA
名额进度条Limited Spots Progress
一条快满的进度条 + "已报 87%"——比纯文字的"仅剩 X 席"更有说服力。
效果预览
适合用在哪
训练营报名、活动售票、社群招募、早鸟优惠。
容易踩的坑
- 进度条只用颜色表达占比，没有 role="progressbar" 和 aria-valuenow，读屏无从得知。
- 名额数据写死在 HTML 里，CDN 缓存数小时，用户看到的余量与实际不符。
- 6px 细条在移动端几乎看不出 85% 和 95% 的差别，必须配上数字文本。
设计提示词 · Prompt
名额进度条（Limited Spots Progress）：一条 6-8px 圆角进度条填到 85% 左右（橙→红渐变），上方左"本期名额"右"已报 87/100"（红字加粗数字），下方一行小字说明截止时间。与倒计时组合使用效果最佳（名额 + 时间双重稀缺）。同样注意合规：数据真实。进度条的颜色心理学：70% 以下用品牌色、85% 以上转暖色制造紧迫。放在报名按钮正上方 12px 处。
Limited Spots Progress: a 6-8px rounded progress bar filled to about 85% (orange→red gradient), with "Spots this round" on the upper left and "87/100 taken" on the upper right (bold red numbers), and a small line of text below stating the deadline. Works best combined with a countdown (double scarcity of spots + time). Same compliance note: data must be real. Color psychology of the bar: use the brand color below 70%, switch to warm colors above 85% to create urgency. Place it 12px directly above the sign-up button.
常见搭配
同一页面里经常和「名额进度条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-spotbar"> <div class="d-spotbar__top"><span>本期训练营名额</span><b>仅剩 13 / 100</b></div> <div class="d-spotbar__track"><div class="d-spotbar__fill"></div></div> <span class="d-tiny" style="color:var(--i-tx3)">10 月 20 日 24:00 截止报名</span> </div>