定价表UI系统
目的
定价表UI系统提供了一种方法论，用于设计定价层级在视觉和结构上的组织方式。它确保用户可以轻松比较方案、理解价值差异，并选择合适的选项，而不会造成认知负担。该系统关注层级的空间布局、功能的层次结构，以及支持购买决策的交互功能（如计费切换器）。
使用场景
- 为SaaS应用程序设计订阅方案网格。
- 构建分层服务产品（例如，代理商套餐）。
- 为实体产品捆绑创建比较矩阵。
- 在跨产品公司中标准化定价布局。
- 实现响应式定价“卡片”，在移动设备上保持上下文。
何时不使用
- 单一产品电商： 对于没有竞争层级的单个商品，请使用
product-page-optimization。 - 仅限企业定制报价： 如果每个价格都是“联系我们”，请专注于潜在客户捕获表单设计。
- 纯数据比较： 用于比较10个以上项目的技术规格，请使用
data-table-ui-system。 - 动态/拍卖定价： 价格由竞标或实时市场波动决定。
输入
- 方案层级： 每个层级的名称、价格和目标受众。
- 功能清单： 按优先级分类的全面功能列表。
- 计费周期： 月度与年度计费选项以及相关折扣。
- 主要目标： 哪个方案是“黄金选择”或“最佳价值”选项？
- 品牌样式令牌： 来自父系统的间距、排版和颜色比例。
输出
- 定价网格结构： 层级卡片的定义（标题、价格、功能、行动号召按钮）。
- 计费切换器规格： 在不同支付条款之间切换的设计。
- 功能比较逻辑： 功能在不同层级间如何显示、隐藏或总结的规则。
- 层级突出策略： 用于强调推荐方案的视觉方法。
- 响应式堆叠方案： 网格如何适应移动视口。
工作流
1. 构建层级结构
将visual-hierarchy-system应用于单个定价卡片：
- 标题： 方案名称和简短的价值主张（例如，“面向成长中的团队”）。
- 价格区块： 货币、金额和间隔（例如，“/月”）。确保金额是最突出的元素。
- 功能列表： 最重要的 5-7 个功能。
- 行动号召按钮： 一个高对比度的按钮，用于选择方案。
2. 设计“锚点”层级（突出显示）
确定主要方案并使其在视觉上占主导地位：
- 层次感： 使用微妙的阴影或边框使其“突出”。
- 颜色： 对标题或行动号召按钮使用品牌色。
- 徽标： 添加“最受欢迎”或“最佳价值”的丝带/徽标。
- 尺寸： 相比相邻卡片，略微增加卡片的高度。
3. 建立计费逻辑
设计在计费周期（例如，月度与年度）之间切换的机制：
- 切换器： 使用清晰的开关或标签式界面。
- 折扣提示： 在年度选项附近明确说明节省金额（例如，“节省20%”）。
- 上下文定价： 确保切换时卡片中的价格立即更新。
4. 管理功能比较
组织功能以防止“文字墙”：
- 主要功能： 在顶部列出独特的价值驱动因素。
- 功能分组： 如果列表很长，将相似功能分组（例如，“支持”、“安全”）。
- 对勾与文字： 对二元功能使用图标（是/否），对限制使用文字（例如，“最多10个用户”）。
- “显示全部”链接： 对于复杂层级，保持卡片简短，并提供指向下方完整比较表格的链接。
5. 定义响应式堆叠
规划网格在较小屏幕上的折叠方式：
- 水平滚动与垂直堆叠： 在移动设备上，垂直堆叠层级以确保可读性。
- 粘性标题： 对于垂直堆叠，考虑使用粘性栏，在用户滚动浏览功能时保持方案名称和价格可见。
- 方案比较模式： 在移动设备上，如果垂直堆叠过长，允许用户通过“滑动”在层级之间进行水平比较。
- 容器查询： 对于层级卡片本身，优先使用容器查询而非视口断点，因为定价网格通常嵌入在宽度变化的环境中（例如，首页板块与完整定价页面）。
决策规则
- 三项法则： 三个层级（例如，基础版、专业版、企业版）是减少选择瘫痪的最佳数量。
- 价格突出性： 价格应该是仅次于“最佳价值”徽标的第二突出元素。
- 一致的行动号召： 所有层级在同一直垂直位置（通常与卡片底部对齐）都应该有一个行动号召按钮。
- “无隐藏条款”规则： 始终在价格附近显示计费频率（例如，“29美元/月，按年计费”）。
- 二元清晰度： 对包含的功能使用清晰、高对比度的对勾；对排除的功能使用柔和的“X”或直接省略，以避免负面的视觉噪音。
约束条件
- 可访问性： 切换器必须可通过键盘访问，并通过
aria-checked或aria-pressed暴露其状态。价格文本必须符合WCAG AA对比度（4.5:1），并且所有交互目标（切换器、行动号召按钮）必须满足WCAG 2.2的24x24像素最小目标尺寸（2.5.8）。 - 响应式设计： 定价卡片绝不能有固定宽度；它们应该在
responsive-grid-system内是流式的。 - 货币支持： 设计时要考虑不同货币符号长度（例如，“10美元”与“1,000克朗”），并使用逻辑CSS属性（
margin-inline、padding-inline），以便布局能正确适应RTL语言环境。
常见失败模式
- 功能过多： 在单个卡片中列出20多个功能，导致无法扫描。
- 不可见的切换器： 计费周期开关太小，用户不知道可以获得折扣。
- “浮动行动号召按钮”： 按钮在卡片间未对齐，使网格看起来杂乱。
- 模棱两可的定价： 直到结账时才说明价格是每用户还是统一费用。
- 缺乏层级区分： 方案看起来非常相似，用户不知道该选哪一个。
验证标准
- 层级之间存在清晰的视觉层次（推荐的层级被突出显示）。
- 价格是层次名称之后最突出的元素。
- 计费切换器清晰可见，并能即时更新价格。
- 每个卡片的功能限制在最顶层的5-7个。
- 网格中所有卡片的行动号召按钮水平对齐。
- 移动视图垂直堆叠卡片，或提供可访问的滑动模式。
- 所有交互元素（切换器、按钮）均可通过键盘访问。
- 价格和徽标的对比度达到WCAG AA标准。