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>