跳到主要内容
前端术语库

UI 组件 · 营销

价格表

Pricing Table

也叫：价格方案、套餐对比、定价区、Pricing Plans、Pricing Cards、Plan Comparison

官网上并排列出几档套餐的区域，每档写清价格、适合谁、包含哪些功能和一个购买按钮，常把推荐的一档突出显示。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在价格区块里做一个价格表：顶部是 h2 标题和一个「按月 / 按年」分段切换（年付显示真实的优惠，比如「省 2 个月」；没有年付优惠就不要这个切换）。下面 3 张等高的方案卡片，桌面 3 列、手机 1 列：卡片顶部是方案名和一行「适合谁」，中间是 40px 粗体价格（格式「¥ 数字 / 月」），下面 5~6 条带勾的权益，底部一个撑满宽度的按钮；中间那档加 2px 主色边框和「推荐」标签，按钮用主按钮，另外两档用描边按钮。方案名、价格和权益全部用我提供的真实方案：［方案 1：名称、价格、权益］［方案 2］［方案 3］，不要自己编价格或功能。卡片下方一行 13px 灰字写清是否含税、能否随时取消。

发给

01判断

你的内容是这样吗？

对照两列，确认价格表是不是你要找的。

符合这些情况，用价格表

  • 官网、落地页需要公开收费方式，让访客自己比较后选择方案
  • 产品有两三档功能或用量不同的套餐，需要并排对比差别
  • 升级页、购买页，引导已有用户从免费版升级到付费版

是这些情况，换成别的

  • 只有一种价格，一句「¥ 99 / 年」配一个购买按钮就够了

  • 价格要按规模单独报价、不能公开时，用「联系销售」的行动号召区

    改用行动号召区

  • 商品、课程这类很多个单独售卖的东西

    改用卡片网格

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    几档方案的权益列表几乎一样，只差最后一条，访客看不出为什么要多付钱

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    价格只写「¥ 99」，不写按月还是按年、是否含税

  3. 03

    为了显得完整编了一档根本不卖的「企业版」，或写了实际做不到的「不限量」

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由区块标题、可选的月付 / 年付切换和 2~4 张并排的方案卡片组成，每张卡片有方案名、适用人群、价格、权益列表和购买按钮，推荐档带标签或高亮边框，下方可接功能对比表。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一排两到四张等宽的卡片，每张中间有一个很大的价格数字
  2. 2价格下面是一列带对勾的短句，卡片底部各有一个按钮
  3. 3其中一张有高亮边框或「推荐」「最受欢迎」标签

04解释

详细解释

价格表一般是 2~4 张并排的方案卡片：顶部是方案名和一句「适合谁」，然后是大号价格（带币种和周期，例如「¥ 199 / 月」），下面一列带勾的权益，最底部是按钮。推荐的那一档加粗边框或挂「推荐」标签；上方常有「按月 / 按年」切换，按年时显示能省多少。方案多、功能细的产品，会在卡片下面再接一张详细的功能对比表。

它和 卡片网格 都是一排卡片，但价格表的几张卡片是同一组选项，要放在一起比，数量固定、字段对齐；卡片网格是一批内容，逐个浏览。功能对比表本身是一张 表格，价格表通常指上面那排方案卡片。「按月 / 按年」的切换是一个 分段控制器。

价格、权益、用量上限都是产品事实，必须和实际收费一致，不要为了好看编一档「企业版」，也不要写做不到的「不限量」。每档之间的差别要一眼看出来，把不同的权益放在列表前面；价格写清按月还是按年、是否含税。推荐只标一档。手机上改为一列，推荐的那档放最前面。

开发者信息
术语 ID
component-pricing-table
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • section:is([class*="pricing" i], [id*="pricing" i], [class*="plans" i], [id*="plans" i])
  • table:is([class*="pricing" i], [class*="plans" i], [class*="plan-compar" i])
  • :is([class*="pricing" i], [class*="plan-card" i], [class*="price-card" i]) :is(ul, ol)
  • :is(div, section, ul):has(> :nth-child(1) > [class*="price" i] ~ :is(ul, ol)):has(> :nth-child(2) > [class*="price" i] ~ :is(ul, ol)):not([class*="product" i], [class*="goods" i])
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • pricing
  • pricing-table
  • pricing-section
  • pricing-grid
  • pricing-cards
  • pricing-card
  • pricing-plans
  • price-card
  • plans
  • plan-card
  • plan-features
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Pricing
  • PricingTable
  • PricingSection
  • PricingPlans
  • PricingCard
  • PlanCard
  • PriceCard
  • Plans
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标题开头
  • 网格排列
  • 重复子项
优先级
4 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30