# 发型更换H5项目产品需求文档

## 1. 产品概览
本项目是一个基于H5的发型更换应用，支持用户上传或拍摄照片，并选择不同发型进行更换预览。
- 解决用户在剪发前无法直观预览不同发型效果的问题，帮助用户做出更合适的发型选择。
- 产品目标是提供简单易用的发型预览功能，覆盖PC和移动端浏览器。

## 2. 核心功能

### 2.1 用户角色
本产品为单一角色应用，无需登录注册，所有用户均可直接使用全部功能。

### 2.2 功能模块
我们的H5应用包含以下主要页面：
1. **首页**：展示发型分类和推荐发型，提供图片上传/拍摄入口。
2. **发型选择页**：按性别分类展示发型列表，支持用户选择发型。
3. **结果预览页**：展示发型更换后的效果，支持保存和分享。

### 2.3 页面详情

| 页面名称 | 模块名称 | 功能描述 |
|---------|---------|---------|
| 首页 | 导航栏 | 显示应用名称，提供返回按钮（在子页面） |
| 首页 | 图片上传区 | 支持点击上传图片或拍摄照片，显示上传后的预览图 |
| 首页 | 发型分类入口 | 展示"男"、"女"发型分类入口，点击进入对应分类的发型选择页 |
| 发型选择页 | 分类导航 | 显示当前分类，支持切换男/女分类 |
| 发型选择页 | 发型列表 | 以网格形式展示该分类下的发型图片，每张图片下方显示发型名称 |
| 发型选择页 | 发型预览 | 鼠标悬停或点击发型时，在预览区显示该发型的详细效果 |
| 发型选择页 | 确认按钮 | 点击后将选择的发型应用到用户上传的照片上 |
| 结果预览页 | 效果展示 | 大图展示发型更换后的效果，支持左右滑动查看原图和效果图对比 |
| 结果预览页 | 操作按钮 | 提供重新选择发型、重新上传照片、保存结果等功能按钮 |
| 结果预览页 | 分享功能 | 支持将结果分享到社交媒体或生成分享链接 |

## 3. Core Process
### 用户操作流程
1. 用户访问H5应用首页
2. 用户上传照片或拍摄照片
3. 系统显示上传成功的照片预览
4. 用户选择"男"或"女"发型分类
5. 系统加载并展示对应分类的发型列表
6. 用户浏览发型列表并选择喜欢的发型
7. 用户点击确认按钮，系统将选择的发型应用到上传的照片上
8. 系统显示发型更换后的效果
9. 用户可以选择重新选择发型、重新上传照片或保存结果

```mermaid
graph TD
    A[首页] --> B[上传/拍摄照片]
    B --> C[选择发型分类]
    C --> D[浏览发型列表]
    D --> E[选择发型]
    E --> F[确认更换]
    F --> G[查看结果]
    G --> H{操作选择}
    H -->|重新选择发型| D
    H -->|重新上传照片| B
    H -->|保存结果| I[保存成功]
```

## 4. 用户接口设计
### 4.1 设计风格
- **主色调**：#4A90E2（蓝色），#50E3C2（青色）
- **辅助色**：#F5A623（橙色），#D0021B（红色）
- **按钮样式**：圆角矩形，有轻微的阴影效果，点击时有反馈动画
- **字体**：系统默认无衬线字体，标题18-24px，正文14-16px
- **布局风格**：响应式设计，移动端单列布局，PC端多列网格布局
- **图标风格**：线性图标，简洁现代

### 4.2 页面设计概览

| 页面名称 | 模块名称 | UI元素 |
|---------|---------|---------|
| 首页 | 导航栏 | 顶部固定，高度60px，背景色#4A90E2，白色文字 |
| 首页 | 图片上传区 | 居中显示，宽高比1:1，虚线边框，中央有上传图标和文字提示 |
| 首页 | 发型分类入口 | 底部固定，两个并排的大按钮，分别显示"男"、"女"字样和对应图标 |
| 发型选择页 | 分类导航 | 顶部固定，两个切换按钮，当前选中分类高亮显示 |
| 发型选择页 | 发型列表 | 网格布局，每张发型图片为正方形，间距10px，有轻微的阴影效果 |
| 发型选择页 | 确认按钮 | 底部固定，宽度100%，高度50px，背景色#50E3C2，白色文字 |
| 结果预览页 | 效果展示 | 居中显示，大图展示，支持手势缩放和滑动 |
| 结果预览页 | 操作按钮 | 底部固定，三个并排的图标按钮，分别对应重新选择、重新上传、保存 |

### 4.3 自适应
- **设计理念**：采用移动优先的响应式设计理念
- **断点设置**：
  - 移动端：< 768px
  - 平板：768px - 1024px
  - PC端：> 1024px
- **适配策略**：
  - 移动端：单列布局，触摸友好的大按钮
  - PC端：多列网格布局，鼠标悬停效果
  - 图片和元素尺寸会根据屏幕宽度自动调整
  - 字体大小使用相对单位（rem/em）确保在不同设备上的可读性