# 产品侧页面结构草图

## 目标

本文档用于定义首版页面信息结构，帮助后续落地首页、套餐页、FAQ 和引导页。

以下为文字版草图，重点在结构和模块，不是视觉稿。

## 1. 首页落地页结构

## 页面结构

1. 顶部导航
2. 首屏 Hero
3. 核心卖点区
4. 使用场景区
5. 三步使用流程
6. 演示视频区
7. 方案选择区
8. FAQ 简版
9. 页脚

## 1.1 顶部导航

建议内容：

- Logo / 产品名
- 功能介绍
- 套餐
- FAQ
- GitHub
- 登录
- 立即体验

## 1.2 首屏 Hero

左侧：

- 标题
- 副标题
- 主按钮
- 次按钮

右侧：

- 产品截图或播放动图

## 1.3 核心卖点区

建议 4 个卡片：

- 点句即读
- 逐句高亮
- 起播快
- 普通 CPU 可部署

## 1.4 使用场景区

建议 4 个场景卡片：

- 英语学习
- 论文阅读
- 教材精读
- 机构部署

## 1.5 三步使用流程

横向三列或竖向三步：

1. 上传 PDF
2. 点击句子
3. 跟随听读

## 1.6 演示视频区

- 视频缩略图
- 播放按钮
- 一句辅助说明

## 1.7 方案选择区

三列：

- 免费版
- Pro
- 私有部署

每列包含：

- 适合谁
- 核心权益
- 按钮

## 1.8 FAQ 简版

展示 4-6 条最常见问题。

## 1.9 页脚

建议包含：

- 产品简介
- 开源版入口
- 隐私政策
- 服务条款
- 联系方式

## 2. 套餐页结构

## 页面结构

1. 页面标题
2. 套餐卡片
3. 功能对比表
4. 私有部署说明
5. 常见问题
6. 联系入口

## 2.1 套餐卡片

三张卡片：

- 免费版
- Pro 版
- 私有部署版

每张卡片包括：

- 名称
- 简介
- 核心权益
- 价格
- 按钮

## 2.2 功能对比表

建议对比：

- 每日额度
- 每月额度
- 单次文本长度
- 音色数量
- 并发任务数
- 优先支持
- 私有部署支持

## 3. FAQ 页面结构

## 页面结构

1. 页面标题
2. 分类导航
3. 问题列表
4. 联系支持

## 分类建议

- 产品能力
- 使用限制
- 文件与隐私
- 付费与部署

## 4. 新手引导结构

## 首次引导弹层

内容：

- 欢迎标题
- 三步说明
- 开始体验按钮

## 阅读器内引导

建议在以下位置做轻提示：

- 文件上传区域
- 句子区域
- 控制栏

## 5. 隐私政策页结构

## 页面结构

1. 标题
2. 生效日期
3. 我们收集什么
4. 为什么收集
5. 如何存储
6. 是否共享
7. 用户权利
8. 联系方式

## 6. 服务条款页结构

## 页面结构

1. 标题
2. 生效日期
3. 服务内容
4. 账号责任
5. 禁止行为
6. 付费说明
7. 服务中断与变更
8. 责任限制
9. 联系方式

## 7. 页面跳转关系

建议关系：

- 首页 -> 注册/登录
- 首页 -> 演示视频
- 首页 -> 套餐页
- 首页 -> FAQ
- 首页 -> GitHub
- 套餐页 -> 注册/升级/咨询
- FAQ -> 联系方式
- 页脚 -> 隐私政策/服务条款

## 8. 首版实现建议

首版不需要复杂交互，重点是：

- 结构清晰
- 价值表达明确
- 有明确 CTA
- 能支撑注册、试用、咨询

## 总结

页面结构草图的重点不是好看，而是先把信息流和转化路径理顺。对你这个项目来说，首页和套餐页是核心，FAQ、隐私政策、服务条款是支撑页面，新手引导则直接影响首次体验和留存。