# 智源AI 价格图用户体验设计原则 V1.0
> 📅 创建时间：2025年1月
> 🔄 更新时间：2025年1月17日
> 🎯 用途：指导价格图的用户体验设计，确保转化路径清晰、选择依据明确、服务预期合理
> 📦 配套文档：电商视觉规范 V1.1（视觉执行）、价格图内容规范 V1.0（内容结构）
---
## 一、文档定位与协作关系
### 1.1 文档定位
| 项目 | 说明 |
|------|------|
| 文档名称 | 价格图用户体验设计原则 |
| 核心用途 | 指导价格图的信息架构、决策引导、预期管理 |
| 解决的问题 | **为什么这样设计**——用户视角的转化逻辑 |
### 1.2 三文档协作关系
┌─────────────────────────────────────────────────────────────┐ │ 用户体验设计原则（本文档） │ │ ► 定义：为什么这样设计 │ │ ► 职责：决策逻辑、信息优先级、转化路径、预期管理 │ └─────────────────────────────────────────────────────────────┘ ↓ 指导 ┌─────────────────────────────────────────────────────────────┐ │ 价格图内容规范 │ │ ► 定义：写什么内容 │ │ ► 职责：内容结构、文案标准、价格数据源 │ └─────────────────────────────────────────────────────────────┘ ↓ 执行 ┌─────────────────────────────────────────────────────────────┐ │ 电商视觉规范 │ │ ► 定义：怎么呈现 │ │ ► 职责：颜色、字体、尺寸、元素样式 │ └─────────────────────────────────────────────────────────────┘
### 1.3 使用场景
| 场景 | 使用方式 |
|------|----------|
| 新建价格图 | 先用本文档确定信息架构 → 再用内容规范填充内容 → 最后用视觉规范执行设计 |
| 优化现有价格图 | 用本文档「问题诊断框架」定位问题 → 选择合适的「布局模式」 → 执行优化 |
| 评审价格图 | 用本文档「验收检查清单」逐项检查 |
---
## 二、核心设计原则（三维度框架）
价格图的用户体验设计围绕三个核心维度展开：
┌─────────────────────────────────────────────────────────────┐ │ 价格图用户体验三维度 │ ├─────────────────┬─────────────────┬─────────────────────────┤ │ 行动路径清晰度 │ 选择依据明确性 │ 服务预期管理 │ │ (Action Path) │ (Decision Basis) │ (Expectation Mgmt) │ ├─────────────────┼─────────────────┼─────────────────────────┤ │ 用户看完知道 │ 用户能快速判断 │ 用户购买前已知晓 │ │ "下一步做什么" │ "哪个适合我" │ "可能遇到什么问题" │ └─────────────────┴─────────────────┴─────────────────────────┘
### 2.1 行动路径清晰度
**定义**：用户浏览价格图后，能清晰知道下一步该做什么。
**设计要点**：
| 要点 | 说明 | 反面案例 |
|------|------|----------|
| 有明确的行动召唤 | 告诉用户"怎么购买" | 只展示价格，无引导 |
| 路径单一或有明确优先级 | 避免选择困难 | 多个入口平级展示 |
| 视觉焦点引导 | 用颜色/大小突出主路径 | 所有信息平铺展示 |
**检查问题**：
- [ ] 用户看完图，知道下一步该做什么吗？
- [ ] 有没有明确的行动召唤（CTA）？
- [ ] 如果有多个选项，主推路径是否足够突出？
### 2.2 选择依据明确性
**定义**：当存在多个方案时，用户能快速判断哪个适合自己。
**设计要点**：
| 要点 | 说明 | 反面案例 |
|------|------|----------|
| 用场景/人群区分 | 而非仅用功能描述区分 | "快捷交付" vs "人工服务"（太抽象） |
| 提供对比维度 | 让差异一目了然 | 两个方案各自描述，无对比 |
| 用问句引导决策 | 降低用户思考成本 | 仅列出特性，让用户自己判断 |
**推荐的决策引导句式**：
| 场景 | 引导句式 |
|------|----------|
| 快速体验 vs 长期使用 | "想快速体验？" / "想长期使用？" |
| 价格敏感 vs 品质敏感 | "追求性价比？" / "追求稳定性？" |
| 新手 vs 专业用户 | "首次使用？" / "已有经验？" |
| 账号归属 | "想用自己的邮箱？" / "不介意用平台邮箱？" |
**对比维度建议**：
| 维度类型 | 适用场景 | 示例 |
|----------|----------|------|
| 交付速度 | 成品号 vs 定制化 | "秒发" vs "1-24小时" |
| 账号归属 | 成品号 vs 定制化 | "平台邮箱" vs "自定义邮箱" |
| 质保范围 | 入门版 vs 护航版 | "72小时边界" vs "全程质保" |
| 环境控制 | 入门版 vs 护航版 | "自备环境" vs "托管环境" |
| 使用量 | Pro vs Max | "标准配额" vs "5倍/20倍配额" |
**检查问题**：
- [ ] 用户能在5秒内判断哪个方案适合自己吗？
- [ ] 方案之间的核心差异是否一目了然？
- [ ] 是否使用了用户能理解的语言（而非行业术语）？
### 2.3 服务预期管理
**定义**：购买前让用户知晓服务边界和可能的风险，避免售后纠纷。
**设计要点**：
| 要点 | 说明 | 反面案例 |
|------|------|----------|
| 风险前置告知 | 在购买决策点之前展示 | 仅在购买后/详情页底部说明 |
| 边界清晰表述 | 明确"我们做什么/不做什么" | 模糊承诺"专业服务" |
| 升级路径引导 | 告知更高保障的选择 | 只展示当前方案，无升级引导 |
**必须前置告知的信息**（按产品类型）：
| 产品类型 | 必须告知 |
|----------|----------|
| Claude 入门版（成品号/定制化） | 72小时服务边界、非全程质保、需自备网络环境 |
| Claude 护航版 | 质保范围、环境托管说明、换新政策 |
| ChatGPT/Gemini 等 | 全程质保政策、手续费说明 |
**风险提示的视觉处理**：
| 重要程度 | 视觉处理 |
|----------|----------|
| 高（影响购买决策） | ⚠️ 图标 + 浅色背景框 + 加粗文字 |
| 中（影响使用体验） | 单独行展示 + 对比色文字 |
| 低（补充说明） | 底部小字 + 低对比度颜色 |
**检查问题**：
- [ ] 用户购买前是否已知晓服务边界？
- [ ] 可能引发售后纠纷的点是否已前置说明？
- [ ] 是否引导了更高保障的升级路径？
---
## 三、问题诊断框架
当需要优化现有价格图时，使用以下框架快速定位问题：
### 3.1 快速诊断三问
| 诊断问题 | 对应维度 | 如果答案是"否" |
|----------|----------|----------------|
| 用户看完知道怎么买吗？ | 行动路径清晰度 | → 增加行动召唤、优化视觉焦点 |
| 用户能快速选择吗？ | 选择依据明确性 | → 增加对比维度、使用问句引导 |
| 用户知道可能的风险吗？ | 服务预期管理 | → 前置风险提示、明确服务边界 |
### 3.2 详细诊断清单
**行动路径问题**：
| 症状 | 可能原因 | 优化方向 |
|------|----------|----------|
| 用户看完没有行动 | 缺少CTA | 增加"旺旺咨询下单"等引导 |
| 用户不知道选哪个 | 选项平级展示 | 突出主推方案 |
| 用户在多个入口间犹豫 | 路径过多 | 减少路径或明确优先级 |
**选择依据问题**：
| 症状 | 可能原因 | 优化方向 |
|------|----------|----------|
| 用户反复问"有什么区别" | 差异描述太抽象 | 用场景/人群语言重写 |
| 用户选错方案 | 缺少对比维度 | 增加表格对比 |
| 用户觉得"都差不多" | 核心差异不突出 | 用问句引导决策 |
**服务预期问题**：
| 症状 | 可能原因 | 优化方向 |
|------|----------|----------|
| 售后纠纷多 | 风险告知不足 | 前置风险提示 |
| 用户觉得"被坑了" | 服务边界不清 | 明确"做什么/不做什么" |
| 用户不知道护航版 | 升级引导不足 | 增加升级路径提示 |
---
## 四、布局模式库
### 4.1 决策树式布局（推荐）
**适用场景**：存在2-3个方案需要用户选择时
**核心特点**：用问句引导用户快速定位适合的方案
**结构示意**：
┌─────────────────────────────────────────────────────────────┐ │ 头部区（产品名 + 副标语） │ ├─────────────────────────────────────────────────────────────┤ │ 快速决策区 │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ 想快速体验？ │ │ 想用自己邮箱？ │ │ │ │ → 选成品号 │ │ → 选定制化 │ │ │ └─────────────────────┘ └─────────────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ 价格对比区（表格式） │ │ ┌─────────┬─────────────┬─────────────┐ │ │ │ │ 成品号 │ 定制化 │ │ │ ├─────────┼─────────────┼─────────────┤ │ │ │ 交付速度 │ 秒发 │ 1-24小时 │ │ │ │ 账号归属 │ 平台邮箱 │ 自定义邮箱 │ │ │ │ 价格 │ ¥219/月 │ ¥299/月 │ │ │ └─────────┴─────────────┴─────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ ⚠️ 重要提示区 │ │ · 入门版为72小时服务边界，非全程质保 │ │ · 需自备稳定网络环境 │ ├─────────────────────────────────────────────────────────────┤ │ 行动引导区 │ │ 旺旺咨询即可下单 │ 需要全程质保？→ 了解护航版 │ └─────────────────────────────────────────────────────────────┘
**优势**：
- 决策路径清晰，用户无需自己分析
- 对比维度明确，差异一目了然
- 风险前置，减少售后纠纷
### 4.2 单方案突出式布局
**适用场景**：主推单一方案，或方案之间差异不大时
**结构示意**：
┌─────────────────────────────────────────────────────────────┐ │ 头部区 │ ├─────────────────────────────────────────────────────────────┤ │ 核心价值区（3个核心卖点） │ ├─────────────────────────────────────────────────────────────┤ │ 价格展示区（突出主推套餐） │ │ ┌─────────────────────────────────────────┐ │ │ │ 年付 ¥389/月 【推荐】 │ │ │ │ 省¥1,320 │ │ │ └─────────────────────────────────────────┘ │ │ 其他套餐：月付¥499 │ 季付¥449 │ 半年付¥419 │ ├─────────────────────────────────────────────────────────────┤ │ 保障说明区 │ ├─────────────────────────────────────────────────────────────┤ │ 行动引导区 │ └─────────────────────────────────────────────────────────────┘
**适用产品**：护航版价格图（单一服务类型，多种套餐周期）
### 4.3 阶梯式布局
**适用场景**：展示产品升级路径（如Pro → Max 5× → Max 20×）
**结构示意**：
┌─────────────────────────────────────────────────────────────┐ │ 头部区 │ ├─────────────────────────────────────────────────────────────┤ │ 产品阶梯区 │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Pro │→ │ Max 5× │→ │ Max 20× │ │ │ │ ¥219起 │ │ ¥1,198起│ │ ¥2,398起│ │ │ │ 标准配额 │ │ 5倍配额 │ │ 20倍配额 │ │ │ └──────────┘ └──────────┘ └──────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ 选择建议区 │ │ · 轻度使用/尝鲜 → Pro │ │ · 日常办公/中度使用 → Max 5× │ │ · 重度使用/专业场景 → Max 20× │ ├─────────────────────────────────────────────────────────────┤ │ 行动引导区 │ └─────────────────────────────────────────────────────────────┘
**适用产品**：产品线总览图、选购指南图
### 4.4 布局模式选择指南
| 场景 | 推荐布局 | 原因 |
|------|----------|------|
| 同一产品的2-3种服务类型 | 决策树式 | 需要引导用户选择 |
| 单一服务类型的多种套餐 | 单方案突出式 | 突出主推套餐即可 |
| 产品线对比/升级路径 | 阶梯式 | 展示产品间的递进关系 |
| 简单产品（无复杂选择） | 单方案突出式 | 保持简洁 |
---
## 五、验收检查清单
价格图制作完成后，使用以下清单逐项检查：
### 5.1 行动路径检查
| 检查项 | 标准 | ✓/✗ |
|--------|------|-----|
| 有明确的行动召唤（CTA） | 用户知道下一步做什么 | |
| 主推方案视觉突出 | 颜色/大小/位置有区分 | |
| 路径不超过2条 | 避免选择困难 | |
### 5.2 选择依据检查
| 检查项 | 标准 | ✓/✗ |
|--------|------|-----|
| 使用场景/人群语言 | 而非抽象的功能描述 | |
| 提供对比维度 | 表格或并列对比 | |
| 核心差异5秒可识别 | 不需要仔细阅读 | |
### 5.3 服务预期检查
| 检查项 | 标准 | ✓/✗ |
|--------|------|-----|
| 风险提示前置 | 在购买决策点之前 | |
| 服务边界明确 | 72小时/全程质保等 | |
| 升级路径引导 | 护航版/更高配置 | |
### 5.4 基础规范检查
| 检查项 | 标准 | ✓/✗ |
|--------|------|-----|
| 价格数据准确 | 与《产品服务信息库》一致 | |
| 色彩与主图统一 | 与对应产品主图色系匹配 | |
| 无禁用词 | VPN/梯子/代购等 | |
| 尺寸正确 | 800×1200px | |
---
## 六、配套文档索引
| 文档名称 | 用途 | 使用场景 |
|----------|------|----------|
| 《电商视觉规范 V1.1》 | 视觉执行标准 | 确定颜色、字体、元素样式 |
| 《价格图内容规范 V1.0》 | 内容结构标准 | 确定内容结构、文案规范 |
| 《产品服务信息库》 | 价格数据源 | 查询最新价格和服务配置 |
| 《智源AI服务条款说明》 | 服务边界定义 | 撰写风险提示和服务说明 |
---
## 七、版本记录
| 版本 | 日期 | 更新内容 |
|------|------|----------|
| V1.0 | 2025-01-17 | 首次发布，建立三维度框架、布局模式库、验收清单 |
---
**文档维护说明**：
- 更新责任人：Feifei
- 更新触发条件：发现新的用户体验问题模式、总结新的布局方案
- 配套文档同步：更新本文档时，检查是否需要同步更新内容规范和视觉规范