PRODUCT LIFECYCLE
情境升级门槛Contextual Upgrade Gate
用户正要使用超出当前套餐的能力时才弹出升级提示。此刻他已经有明确意图,转化率远高于常驻的倒计时横幅。
效果预览
⚡已用完 3 / 3 个项目
升级到团队版可创建无限项目,并解锁共享与权限管理。
升级套餐
适合用在哪
超出配额、点击了高级功能、尝试邀请超过席位数时。SaaS 提升试用转付费的首选手段。
容易踩的坑
- 配额还剩 50% 时就频繁弹出,用户会形成提示盲区,真正到上限时反而无视。
- 只有「升级」按钮没有「稍后再说」,被强行打断的用户更倾向直接流失。
- 琥珀色文字放在浅黄底上,对比度常低于 4.5:1,说明文字难以阅读。
设计提示词 · Prompt
情境升级门槛(Contextual Upgrade Gate):用琥珀色系(边框 #fcd34d、底 160deg #fffbeb→#fff)明确区别于普通提示。内容:一行图标 + 加粗标题(说明「为什么现在不能做」,如「已用完 3/3 个项目」),一行说明,下方一行配额进度条(显示当前用量与上限),右侧一个深色升级按钮。语气要中性,避免指责用户。要点:只在用户主动触发受限动作时出现,且要提供「稍后再说」的出口,不要阻断式拦截。
Contextual Upgrade Gate: use an amber palette (border #fcd34d, background 160deg #fffbeb→#fff) to clearly set it apart from ordinary notices. Content: one row with an icon + bold title (explain "why you can't do this right now", e.g. "You've used 3/3 projects"), one line of explanation, then a quota progress bar below (showing current usage against the limit), with a dark upgrade button on the right. Keep the tone neutral and avoid blaming the user. Key points: show it only when the user actively triggers a restricted action, and always provide a "Maybe later" exit — don't block with a hard stop.
常见搭配
同一页面里经常和「情境升级门槛」一起出现的模式,可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-gate">
<div class="lc-gate__hd"><em>⚡</em><b>已用完 3 / 3 个项目</b></div>
<p>升级到团队版可创建无限项目,并解锁共享与权限管理。</p>
<div class="lc-gate__row">
<span class="lc-gate__u"><i></i></span>
<span class="lc-gate__btn">升级套餐</span>
</div>
</div>
</div>