我要开发一个h5的项目。 目标平台是PC浏览器和手机浏览器。 分为前端和后端。 后端采用python 不需要数据库，直接用文件系统，启动的时候读取到内存就可以。
功能 1、是前端能从后端拉起一组图片，分类为“男”，“女”。 这个图片是保存到oss文件系统的，后端需要提供图片的url。 2、前端可以选择一个图片，手动端可以拍摄图片或者选择图片。 3、前端发起更换发型的请求，把选择的图片和对应要更换的发型ID发给后端。 4、前端收到后端更换发型的请求后处理图片返回给前端。 5、后端实际处理更换发型请求的时候会调用另外一个远程的http接口来实现。 先帮我把项目结构，产品文档，系统框架等做出来。
This commit is contained in:
+92
@@ -0,0 +1,92 @@
|
||||
# 发型更换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）确保在不同设备上的可读性
|
||||
Reference in New Issue
Block a user