定价页
Pricing Page
别名:价格方案页面定价页套餐价格页收费方案花多少钱的页面订阅方案页价格表
这是什么
把付费方式讲清楚的商业页面：页面通常以标题与计费周期切换开头，主体是并排的套餐卡 （价格、功能清单、行动按钮），推荐档位用视觉强调；下方补功能对比表和 FAQ 兜底疑虑。 组织逻辑是"先选周期、再选档位、最后消除犹豫"。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 订阅制或有多个档位的产品售卖
- 访客需要在购买前比较不同方案
- 需要引导用户从免费档向付费档升级
✕ 不适用场景
- 只有一个固定价格（并入落地页即可）
- 完全定制报价、按项目计费（用联系销售页更合适）
- 已登录用户的账户账单管理（属于设置/账单页）
常见形式
简单分层
Simple Tiers
3～4 张套餐卡并排，最经典
月年切换
Billing Toggle
月付/年付切换并给出折扣提示
功能对比
Feature Comparison
套餐卡 + 完整功能对照表
免费增值
Freemium
免费档永久免费，强调付费档价值
页面结构
- 01
标题区
页面主张与定位说明，先讲清价值再谈价格。
- 02
计费周期切换
月付 / 年付切换，年付标注折扣。
- 03
套餐卡
2–4 档，推荐档视觉强化；每档列出关键差异。
- 04
功能对比表
细粒度功能逐项对比，可折叠次要行。
- 05
常见问题
打消计费、退款、升级等购买顾虑。
实现要点
flexgridgrid-template-columns: repeat(auto-fit, minmax(220px, 1fr))transform: scale(1.05)套餐卡用等高网格排布，推荐档位以边框强调色 + 轻微放大或徽标突出； 月/年切换用受控状态切换价格并做数字过渡；对比表桌面横向滚动、移动端折叠成手风琴； FAQ 用原生 details 或手风琴组件。
相关概念
用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件包含组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件包含组件用滑轨上的圆形滑块表示二元设置的开与关，拨动立即生效，无需确认。 滑块位移与轨道变色同时反馈状态，右侧或内嵌「开 / 关」文字辅助辨认， 是设置页的标准控件。
组件包含组件由多个可折叠区块组成的垂直列表：点击标题展开内容、再点收起，可互斥（同时只开一项） 也可多开。用于在有限空间里收纳成组内容，让用户按需展开。
组件包含组件用行与列精确对齐数据的二维表格：一行一条记录、一列一个字段，适合逐列比较、排序与大容量数据浏览。 行可悬停高亮、点击选中，列头通常带排序控制。
组件包含组件