价格锚点（Price Anchoring）是什么：效果预览与 AI 设计提示词

效果预览

¥299 ¥428 -30%

限时价 · 10 月 20 日 24:00 恢复原价

适合用在哪

促销商品、限时优惠、年度大促、清仓专区。

容易踩的坑

划线价只用 CSS 删除线，读屏念不出「原价」语义，应用 del 标签并加隐藏说明。
折扣百分比四舍五入后与实际价差不符，例如标 -30% 实际只降 27%，涉嫌误导。
红色角标与红色现价同时出现，视觉焦点分散，用户反而找不到最终价格。

设计提示词 · Prompt

价格锚点（Price Anchoring）：一行三件套——划线原价（灰色 s 标签、比现价小 40-50%）→ 现价（超大加粗）→ 红色折扣角标（"-30%"，胶囊形浅红底深红字）。排版顺序有讲究：先看到划线价（锚定高位），再看到现价（感知便宜）。辅助元素：下方一行"限时价，10 月 20 日恢复原价"（时效锚）。合规要求：划线价必须是真实成交过的价格（七天内最低价），虚构原价属价格欺诈。原价与现价的字号比至少 2:1 才有锚定效果。

Price Anchoring: a one-line trio — the struck-through original price (gray s tag, 40-50% smaller than the current price) → the current price (extra large, bold) → a red discount badge ("-30%", pill-shaped, light red background with dark red text). Order matters: first see the struck-through price (anchoring high), then the current price (perceived as cheap). Supporting element: a line below "Limited-time price; original price returns on October 20" (time anchor). Compliance requirement: the struck-through price must be a real past transaction price (lowest price within seven days); a fabricated original price is price fraud. The font-size ratio between current and original price must be at least 2:1 for anchoring to work.

常见搭配

同一页面里经常和「价格锚点」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

稀缺性徽章Scarcity Badge 产品卡片Product Card 月付年付切换Billing Toggle

演示 HTML 结构

<div class="s d-anchor">
  <div class="d-anchor__row">
    <span class="d-anchor__now">¥299</span>
    <span class="d-anchor__was">¥428</span>
    <span class="d-anchor__off">-30%</span>
  </div>
  <span class="d-anchor__cap">限时价 · 10 月 20 日 24:00 恢复原价</span>
</div>