Web 页面模块与内容模式 / Pricing Comparison
Pricing Comparison
把方案、价格、权益、限制和选择动作放在同一比较结构中。
关键字段
Identity · 身份
- 子类型
- 模块
What · 是什么
- 定义
- 把方案、价格、权益、限制和选择动作放在同一比较结构中。
Why · 为什么
- 实现目标
- 先确认该模块解决的信息或任务问题，再控制内容密度、阅读顺序和动作优先级；所有证据、外链和社交内容都应有来源、替代路径和可访问语义。
Where · 在哪里
- 适用场景
- 表单与转化、Button、Link、Badge、Grid、Typography、Web 界面设计、Plan Card、Card Group、Tabs、Pricing、Home、Landing Page、Pricing Comparison
How · 怎么做
- 实现说明
- 先确认该模块解决的信息或任务问题，再控制内容密度、阅读顺序和动作优先级；所有证据、外链和社交内容都应有来源、替代路径和可访问语义。
How much · 多少
- 衡量指标
- 高 · 核心
Lifecycle · 生命周期
- 状态
- 启用
Content · 补充内容
- 兼容标签
- 基础 · 高 · 核心 · 商业
适用页面类型、Web 区块、UI 组件与主题
关系来自本地关系表，并包含反向关联。
- Calendly 方案比较Calendly Plan Comparison反向 · 应用于
Calendly 在 Pricing 页面用功能矩阵比较各方案的限制与能力，帮助用户判断购买哪一档方案。
- GitHub PricingGitHub Pricing Feature Comparison反向 · 应用于
GitHub Pricing 在方案卡片后提供完整功能比较表，帮助用户核对 Free、Team 与 Enterprise 差异。
- Mailchimp 方案比较Mailchimp Plan Comparison反向 · 应用于
Mailchimp 在 Pricing 页面用方案比较表并列功能与价格，帮助营销团队评估并选择订阅方案。
- HomeHome Page应用于
面向首次访问和回访用户的站点入口页面，解释站点价值并提供主要探索路径。
- Landing PageLanding Page应用于
围绕单一活动、受众或转化目标组织的独立页面模板。
- PricingPricing Page应用于
解释方案、价格、差异和购买或联系路径的商业页面。
- Pricing ComparisonPricing Comparison应用于
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- Web 界面设计Web Interface Design应用于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- 表单与转化Forms & Conversion应用于
设计从理解价值到提交、注册、购买或联系的连续路径。
- GridGrid应用于
定义容器、列、间隙和阅读宽度等布局基础。
- TypographyTypography应用于
定义字体家族、字号、字重、行高和字距的基础尺度。
- BadgeBadge应用于
显示轻量分类、状态或数量标记。
- ButtonButton应用于
触发动作、提交选择或打开流程。
- LinkLink应用于
Link 如何在界面中被理解、操作或组合？
- Card GroupCard Group应用于
以一致布局组织多个卡片并表达集合关系的结构
- Plan CardPlan Card应用于
呈现一个定价方案、适用对象、价格、限制和行动的比较组件。
- TabsTabs应用于
在同一上下文中切换互斥内容面板的组件。