YL

PRICING

功能对比表Feature Comparison Table

行是功能、列是套餐的完整矩阵,绿色的勾和灰色的杠一眼分出高下。

效果预览

功能免费Pro旗舰
项目数量3∞∞
自动化流1∞∞
优先渲染—✓✓
私有部署——✓

适合用在哪

定价页下方、功能页、企业销售材料。

容易踩的坑

  • sticky 表头所在父元素设了 overflow:hidden,吸顶直接失效。
  • ✓ 和 — 只是图标没有隐藏文本,读屏念出「对勾」「破折号」而不是「包含/不包含」。
  • 功能行超过 40 行却不分组折叠,用户滚到底已忘了各列对应哪个套餐。

设计提示词 · Prompt

功能对比表(Feature Comparison):表格按功能组分区(基础 / 协作 / 安全 / 支持),行是具体功能、列是各套餐;推荐套餐整列加浅色底并置顶加粗表头。勾用绿色 ✓、无用灰色 —、数字值直接写("10 GB")。行悬停浅灰底,sticky 表头(长表滚动时表头吸顶)。功能行要写到"能做决策"的粒度——"导出 PDF"好过"高级导出"。表格顶部加"展开全部 N 项功能"折叠长尾功能,默认显示决策关键项。移动端改为按套餐分列的手风琴卡。
Feature Comparison: a table divided into feature groups (Basics / Collaboration / Security / Support), with specific features as rows and plans as columns; give the recommended plan's whole column a light background and a pinned bold header. Use a green ✓ for included, a gray — for not included, and write numeric values directly ("10 GB"). Light gray background on row hover, sticky header (stays pinned while scrolling a long table). Write feature rows at a "decision-making" granularity — "Export to PDF" beats "Advanced export". Add "Show all N features" at the top of the table to collapse long-tail features, showing decision-critical items by default. On mobile switch to per-plan accordion cards.

常见搭配

同一页面里经常和「功能对比表」一起出现的模式,可以收藏后用「组合收藏为整页提示词」一起交给 AI。

演示 HTML 结构

<div class="s d-featcmp">
  <table>
    <tr><th>功能</th><th>免费</th><th class="col-hot">Pro</th><th>旗舰</th></tr>
    <tr><td>项目数量</td><td>3</td><td class="col-hot">∞</td><td>∞</td></tr>
    <tr><td>自动化流</td><td>1</td><td class="col-hot">∞</td><td>∞</td></tr>
    <tr><td>优先渲染</td><td class="no">—</td><td class="col-hot yes">✓</td><td class="yes">✓</td></tr>
    <tr><td>私有部署</td><td class="no">—</td><td class="col-hot no">—</td><td class="yes">✓</td></tr>
  </table>
</div>

标签