PRICING
月付年付切换Billing Toggle
一颗开关切月付/年付，价格数字带过渡动画地变便宜——年付转化神器。
效果预览
按月
按年
省 20%
年付 ¥648，合每月仅 ¥54
适合用在哪
所有订阅制定价页。
容易踩的坑
- 开关只用颜色表示当前选中，没有 aria-checked 或文字加粗，读屏和色弱用户分不清。
- 价格数字切换动画未用 tabular-nums，数字跳动时卡片宽度来回抖动。
- 切换状态不写入 URL，用户分享链接或刷新后又回到默认计费周期。
设计提示词 · Prompt
月付年付切换（Billing Toggle）：定价表上方居中一颗开关——左"按月"右"按年"两段文字夹着滑块开关，"按年"旁贴一枚绿色"省 20%"胶囊徽章。切换时所有价格数字做滚动/淡入过渡（200ms），并同时更新"按年支付 ¥xxx（合每月 ¥xx）"的小字。年付默认开启（锚定效应），但月付必须真实可选。价格心理学：年付显示折算月价（¥54/月）而不是总价（¥648），数字小才有"便宜感"；总价放小字里。开关位置要一眼可见——藏在角落等于没有年付。
Billing Toggle: a centered switch above the pricing table — the labels "Monthly" on the left and "Yearly" on the right flank a slider switch, with a green "Save 20%" pill badge next to "Yearly". On toggle, all price numbers roll/fade in (200ms), and the small line "Billed yearly at ¥xxx (¥xx/month)" updates at the same time. Default to yearly (anchoring effect), but monthly must genuinely remain selectable. Pricing psychology: for yearly, show the per-month equivalent (¥54/mo) rather than the total (¥648); a smaller number feels "cheap"; put the total in small print. The switch must be visible at a glance — hiding it in a corner is the same as having no yearly plan.
常见搭配
同一页面里经常和「月付年付切换」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-billtoggle">
<div class="d-billtoggle__row">
<span>按月</span>
<span class="d-billtoggle__sw"></span>
<span class="is-on">按年</span>
<span class="d-billtoggle__save">省 20%</span>
</div>
<span class="d-billtoggle__delta">年付 ¥648，合每月仅 ¥54</span>
</div>