网站
SaaS 定价网站设计
这款 SaaS 定价网站设计将套餐选择组织成清晰的购买决策路径，结合计费选项、套餐详情、对比表和有针对性的常见问题。
定价网站使用场景
- 定价页面设计展示套餐，同时不掩盖重要的购买详情
- SaaS 产品营销将服务差异转化为易于浏览的网站分区
- 购买决策流程帮助访客比较成本、限制和支持服务
- 功能对比设计组织共享能力和套餐专属能力
套餐对比亮点
- 计费切换控件按月和按年的选项出现在层级选择之前
- 三层级布局Solo、Team 和 Enterprise 使用一致的套餐结构
- 对比表各行展示卡片无法呈现的差异
- 有针对性的常见问题定价疑问通过浏览器原生问答区展开
从计费标签到常见问题
1 / 3
SaaS 定价网站设计
这个官方 OpenDesign 随附示例展示了一个 Filebase SaaS 定价与购买决策页面。其主标题 “One flat rate. No throttling.” 在访客看到套餐详情之前，先建立了直接明确的定价主张。
辅助说明 “Start free. Pick a paid tier the day you outgrow it. Switch yearly billing for two months off.” 为页面提供了清晰的进程：开始使用、在需要时升级，并考虑按年计费。它将页面构建为一条决策路径，而不是孤立功能的目录。
该设计使用最大宽度指定为 1080px 的居中内容区域。这一限制让标题、计费控件、层级卡片、对比表和问题处于同一个易读的水平系统中，同时限制了每个套餐旁边能够容纳的辅助细节数量。
先做决策
标题和静态计费控件出现在套餐信息之前。Monthly 被设为初始选择，而 Yearly 作为替代选项展示；源文件并未实现价格变化。
套餐角色
Solo 面向个人，Team 面向最多 50 人的团队，而 Enterprise 则以 SSO、本地部署的加密密钥和 99.99% SLA 呈现企业级功能。
在 SaaS 套餐之间进行选择
套餐卡片面向需要将工作场景与购买层级匹配的访客而设计。Solo 列出 “$8 / month”、1 TB 存储空间、两台设备和电子邮件支持。Team 将计费单位改为 “$14 / seat / month”，并增加共享存储、角色、审计信息和优先支持。
卡片重复使用一种实用模式：适用对象说明、价格或自定义状态、能力列表和操作。这种一致性让套餐差异更易于浏览，但也带来取舍：较长的功能标签会与操作区域竞争空间，尤其是在 Team 卡片中。
Team 以橙色描边和实心 “Choose Team” 按钮标记为 “RECOMMENDED”。这种强调在设计中提出了一条优先路径，同时中性的 Solo 和 Enterprise 操作保留了其他选择。该标签是视觉推荐，并不能证明该套餐表现更好。
个人存储
Solo 突出固定月费、存储容量、设备限制和电子邮件支持。
团队运营
Team 将按席位计费与共享存储、共享文件夹、角色、审计日志和使用分析结合起来。
企业需求
Enterprise 用 Custom 替代列出的价格，并以 SSO、账户预配、加密密钥和专属支持作为重点。
套餐对比与页面结构
页面顺序十分明确：Solo、Team、Enterprise、Plan comparison，然后是 Common questions。对比部分将套餐名称重复为列标题，而不是要求访客在浏览各行时记住卡片内容。
该表首先让共享能力变得可见。块级同步和端到端加密在三个套餐中都显示勾选标记；共享文件夹从 Team 开始，SAML / SCIM 仅出现在 Enterprise 中，Audit log 从 Team 开始。这种排序将基础能力与升级专属差异区分开来。
SLA 一行为 Team 和 Enterprise 列出不同数值，Support 一行则从 Email 变为 Priority，再变为 Dedicated CSM。这些行说明了对比表的作用：价格卡片概括套餐，表格则展示套餐差异所在的具体维度。
| 功能 | Solo | Team | Enterprise |
|---|---|---|---|
| 块级同步 | 是 | 是 | 是 |
| 端到端加密 | 是 | 是 | 是 |
| 共享文件夹 | 否 | 是 | 是 |
| SAML / SCIM | 否 | 否 | 是 |
| 审计日志 | 否 | 是 | 是 |
| SLA | 否 | 99.9% | 99.99% |
| 支持 | 电子邮件 | 优先支持 | 专属客户成功经理 |
常见问题与能力边界
最后一节标题为 “Common questions”，包含三个可见问题：“Can I change tiers mid-month?”、“Is there a free tier?” 和 “How does seat-based billing work for Team?”。它们的顺序遵循可能的购买不确定性：变更套餐、入门成本，然后是团队选项背后的计费模式。
每个问题都使用浏览器原生的 details/summary 展开模式，可在本地展开。Monthly、Yearly、Choose Solo、Choose Team 和 Talk to sales 按钮在源文件中没有事件处理程序：它们既不会更改价格，也不会打开购买或销售流程。该页面不能证明已连接计费、账户、销售或支持服务。
除非经过单独核实，否则名称、数字、产品声明和对比内容均为示例。隔离环境中的截图展示了创作完成的视觉设计和声明的示例数据；它们不能证明实时定价、运营限制、外部服务响应或原始生成过程。
如何在 OpenDesign 中创建 SaaS 定价网站设计
设定购买顺序
从简短的定价主张、一句辅助说明和一个计费选项开始。将计费模式置于套餐卡片之前，让访客在相同语境下阅读所有价格。
建议提示词为文件存储产品创建一个 SaaS 定价网站设计，使用居中的 1080px 内容区域。使用标题 “One flat rate. No throttling.”、静态的 Monthly 和 “Yearly · save 17%” 计费控件，以及三个名为 Solo、Team 和 Enterprise 的套餐。将价格和产品承诺标记为示例内容。保留购买按钮作为未连接的示例，并使用原生 details/summary 实现 FAQ 展开；不要暗示已实现价格切换、实时计费或经过验证的运营数据。
构建可比较的套餐卡片
让每个套餐遵循相同的信息节奏：适用对象、价格状态、能力和操作。让 Team 推荐在视觉上有所区别，但为 Solo 和 Enterprise 保留中性的路径。检查最长的 Team 功能标签不会挤压操作区域。
添加决策依据
在卡片之后添加对比表，区分各套餐共有功能与升级套餐专属功能。最后加入三个简洁的可展开问题，涵盖套餐变更、免费访问和按席位计费。将拟议交互限制在本地设计中，并单独核实所有产品声明。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
