Product / Plan Cards

Dropbox 在 Plans 页面突出推荐方案和升级路径，帮助现有用户根据存储与协作需求升级。

Figma 在定价与方案管理页面呈现方案差异和管理入口，帮助用户选择、变更或降级订阅方案。

Linear Pricing 在方案卡片中将自助购买与 Enterprise 联系销售并列，帮助高复杂度团队进入询价路径。

Notion Pricing 用月付/年付切换即时更新方案价格并提示年付节省，帮助用户比较计费周期。

Slack 在定价与升级页面用情境化升级入口连接团队当前需求与 Pro 方案，推动现有团队升级。

Spotify 在 Premium 定价页用方案卡片并列展示各套餐的价格与权益，引导用户选择方案并开始订阅。

Vercel Pricing 用 Popular 标记突出 Pro 方案，并通过试用与演示入口区分自助和企业路径。

面向首次访问和回访用户的站点入口页面，解释站点价值并提供主要探索路径。

围绕单一活动、受众或转化目标组织的独立页面模板。

解释方案、价格、差异和购买或联系路径的商业页面。

并列或分层展示方案、价格、限制和适用对象的商业比较区块。

让用户一次提交多项任务，在可见的队列、批量结果或额度限制下完成处理。

让用户按功能、限制和使用权益逐行核对不同方案的差异。

帮助用户在多个产品、产品线或套餐组合之间找到适合的购买路径。

把席位数、用量或周期等输入转成可解释的价格估算，降低复杂定价的计算成本。

让用户在有限的方案层级中比较价值、价格和下一步动作，并选出适合自己的方案。

Calendly Pricing 用方案卡片与功能矩阵对比会议类型、团队协作和管理能力。

Dropbox Plans 突出推荐方案、存储容量和升级路径，帮助用户按容量与协作需求选择订阅。

Figma Pricing 以方案层级、协作权益和团队规模为主要比较维度，并提供方案管理路径。

GitHub Pricing 在方案卡片后提供完整功能比较表，核对 Free、Team 与 Enterprise 的差异。

Jira Pricing 让用户输入团队人数并切换计费周期，生成与团队规模相关的价格估算。

Mailchimp 用方案摘要和功能比较表帮助营销团队核对联系人数量、自动化和支持能力差异。

Notion Pricing 用月付/年付切换即时更新方案价格，并同时展示 Free、Plus、Business 与 Enterprise 路径。

Slack 在 Pricing 页面用方案卡片和升级入口连接免费团队当前需求与 Pro 方案。

Spotify 用并列方案卡片呈现价格、权益和订阅入口，让用户从个人、双人、家庭等使用情境中选择方案。

TinyPNG 支持多文件压缩，并在免费容量限制后展示 Web Pro/Ultra 等升级路径。

Vercel Pricing 用 Popular 标记突出 Pro 方案，并将自助试用与 Enterprise 演示路径并列。

围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。

设计从理解价值到提交、注册、购买或联系的连续路径。

定义容器、列、间隙和阅读宽度等布局基础。

定义字体家族、字号、字重、行高和字距的基础尺度。

显示轻量分类、状态或数量标记。

触发动作、提交选择或打开流程。

Image 如何在界面中被理解、操作或组合？

以一致布局组织多个卡片并表达集合关系的结构

呈现一个定价方案、适用对象、价格、限制和行动的比较组件。