xsl
9a00ac3907
功能 1、是前端能从后端拉起一组图片，分类为“男”，“女”。 这个图片是保存到oss文件系统的，后端需要提供图片的url。 2、前端可以选择一个图片，手动端可以拍摄图片或者选择图片。 3、前端发起更换发型的请求，把选择的图片和对应要更换的发型ID发给后端。 4、前端收到后端更换发型的请求后处理图片返回给前端。 5、后端实际处理更换发型请求的时候会调用另外一个远程的http接口来实现。 先帮我把项目结构，产品文档，系统框架等做出来。
4.7 KiB
4.7 KiB
发型更换H5项目产品需求文档
1. 产品概览
本项目是一个基于H5的发型更换应用，支持用户上传或拍摄照片，并选择不同发型进行更换预览。
- 解决用户在剪发前无法直观预览不同发型效果的问题，帮助用户做出更合适的发型选择。
- 产品目标是提供简单易用的发型预览功能，覆盖PC和移动端浏览器。
2. 核心功能
2.1 用户角色
本产品为单一角色应用，无需登录注册，所有用户均可直接使用全部功能。
2.2 功能模块
我们的H5应用包含以下主要页面：
- 首页：展示发型分类和推荐发型，提供图片上传/拍摄入口。
- 发型选择页：按性别分类展示发型列表，支持用户选择发型。
- 结果预览页：展示发型更换后的效果，支持保存和分享。
2.3 页面详情
| 页面名称 | 模块名称 | 功能描述 |
|---|---|---|
| 首页 | 导航栏 | 显示应用名称，提供返回按钮（在子页面） |
| 首页 | 图片上传区 | 支持点击上传图片或拍摄照片，显示上传后的预览图 |
| 首页 | 发型分类入口 | 展示"男"、"女"发型分类入口，点击进入对应分类的发型选择页 |
| 发型选择页 | 分类导航 | 显示当前分类，支持切换男/女分类 |
| 发型选择页 | 发型列表 | 以网格形式展示该分类下的发型图片，每张图片下方显示发型名称 |
| 发型选择页 | 发型预览 | 鼠标悬停或点击发型时，在预览区显示该发型的详细效果 |
| 发型选择页 | 确认按钮 | 点击后将选择的发型应用到用户上传的照片上 |
| 结果预览页 | 效果展示 | 大图展示发型更换后的效果，支持左右滑动查看原图和效果图对比 |
| 结果预览页 | 操作按钮 | 提供重新选择发型、重新上传照片、保存结果等功能按钮 |
| 结果预览页 | 分享功能 | 支持将结果分享到社交媒体或生成分享链接 |
3. Core Process
用户操作流程
- 用户访问H5应用首页
- 用户上传照片或拍摄照片
- 系统显示上传成功的照片预览
- 用户选择"男"或"女"发型分类
- 系统加载并展示对应分类的发型列表
- 用户浏览发型列表并选择喜欢的发型
- 用户点击确认按钮，系统将选择的发型应用到上传的照片上
- 系统显示发型更换后的效果
- 用户可以选择重新选择发型、重新上传照片或保存结果
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）确保在不同设备上的可读性