功能对比页
Feature Comparison Page
别名:功能对比页选型对比表功能对照表插件对比页套餐对比买哪个版本对比参数对比表对比矩阵
这是什么
用并列矩阵把多个方案的功能、价格与限制逐项对齐的页面：首列固定为对比维度，各方案各占一列， 支持只看差异、按维度排序与推荐标记。它服务于「选哪个」的决策，把宣传语替换成可逐格核对的证据。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 用户需要在两个以上方案之间做选择
- 功能、价格、限额等能按行逐项对齐
- 目标是突出差异而不是重复宣传
✕ 不适用场景
- 只有单一方案（用落地页或定价页更合适）
- 各方案维度差异过大、无法逐项对齐
- 需要长篇解释而非逐格打勾
常见形式
并列表格
Side-by-side Table
经典行列矩阵，首列固定为对比维度
只看差异
Differences Only
隐藏相同项，只留下真正有区别的行
卡片对比
Card Comparison
方案纵向堆叠成卡片，移动端友好
页面结构
- 01
标题与说明
一句话说明对比对象与适用场景，避免用户选错表。
- 02
方案表头
每个方案一列，含名称、价格与推荐徽标，可点选聚焦。
- 03
维度列
固定在左侧的功能、价格与限制行名，支持分组。
- 04
数据单元格
用勾、破折或数值表达是否支持，保持统一口径。
- 05
差异高亮
标出各方案不同之处，并提供只看差异开关。
- 06
行动按钮
每个方案底部给出试用、购买或咨询入口。
实现要点
gridflexposition: stickyoverflow-x: autoborder-collapse: collapse真正的表格用 table 语义标签获得原生可访问性；首列与表头用 position: sticky 吸附，横向溢出交给 overflow-x: auto 容器。差异高亮用背景加图标或文字标记，不能只靠颜色。移动端可降级为卡片对比； 排序与只看差异由组件状态驱动，不改动文档结构。
相关概念
用行与列精确对齐数据的二维表格：一行一条记录、一列一个字段，适合逐列比较、排序与大容量数据浏览。 行可悬停高亮、点击选中，列头通常带排序控制。
组件包含组件将少量互斥选项并排放在同一个容器中的选择控件。选中状态通过底色、文字和边界同时表达，切换后立即更新当前视图或设置。它适合时间范围、显示方式等轻量选择；选项应简短、稳定且始终可见。与标签页不同，它通常修改同一内容的呈现方式，而不是进入另一组内容。
组件包含组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件包含组件把信息分层呈现：先给最常用、最必要的部分，把次要细节藏到"展开""下一步""显示更多"后面， 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担，让界面入门简单，同时保留深度供高级用户按需取用。
交互模式使用模式把付费方式讲清楚的商业页面：页面通常以标题与计费周期切换开头，主体是并排的套餐卡 （价格、功能清单、行动按钮），推荐档位用视觉强调；下方补功能对比表和 FAQ 兜底疑虑。 组织逻辑是"先选周期、再选档位、最后消除犹豫"。
页面相似概念