|
|
@@ -150,8 +150,94 @@
|
|
|
- **服装图片上传**：用户可以上传服装图片进行试穿（大小限制5MB）。
|
|
|
- **类别选择**：用户可以选择试穿的服装类别（如上半身）。
|
|
|
- **虚拟试穿**：点击“Try On”按钮进行虚拟试穿，使用1个信用点。
|
|
|
-## 产品结构图梳理
|
|
|
-- 参考
|
|
|
+# 产品结构图梳理
|
|
|
+
|
|
|
+# 页面产品结构图
|
|
|
+ 页面的产品结构描述了网站各个页面和模块之间的组织和层次结构。这对于理解用户如何在页面之间导航以及每个页面的主要功能是什么非常重要。以下是针对一个虚拟试妆网站 (https://heybeauty.ai/try-on) 的页面产品结构：
|
|
|
+
|
|
|
+### 页面产品结构图
|
|
|
+
|
|
|
+1. **首页 (Home)**
|
|
|
+ - **Header**
|
|
|
+ - 菜单图标 (Menu Icon) / 导航栏 (Navigation Bar)
|
|
|
+ - **导航菜单 (Nav Menu)**
|
|
|
+ - 首页 (Home)
|
|
|
+ - 试妆页 (Try On)
|
|
|
+ - 结果页 (Results)
|
|
|
+ - **主要内容区 (Main Content)**
|
|
|
+ - 欢迎信息 (Welcome Message)
|
|
|
+ - 标题 (Title)
|
|
|
+ - 描述 (Description)
|
|
|
+ - 开始试妆按钮 (Start Try-On Button)
|
|
|
+
|
|
|
+2. **试妆页 (Try On)**
|
|
|
+ - **Header**
|
|
|
+ - 菜单图标 (Menu Icon) / 导航栏 (Navigation Bar)
|
|
|
+ - **导航菜单 (Nav Menu)**
|
|
|
+ - 首页 (Home)
|
|
|
+ - 试妆页 (Try On)
|
|
|
+ - 结果页 (Results)
|
|
|
+ - **主要内容区 (Main Content)**
|
|
|
+ - 上传照片模块 (Upload Photo Module)
|
|
|
+ - 上传照片按钮 (Upload Photo Button)
|
|
|
+ - 试妆显示区 (Try-On Display Area)
|
|
|
+ - 显示上传的照片 (Display Uploaded Photo)
|
|
|
+ - 化妆选择选项 (Makeup Selection Options)
|
|
|
+ - 应用化妆按钮 (Apply Makeup Button)
|
|
|
+
|
|
|
+3. **结果页 (Results)**
|
|
|
+ - **Header**
|
|
|
+ - 菜单图标 (Menu Icon) / 导航栏 (Navigation Bar)
|
|
|
+ - **导航菜单 (Nav Menu)**
|
|
|
+ - 首页 (Home)
|
|
|
+ - 试妆页 (Try On)
|
|
|
+ - 结果页 (Results)
|
|
|
+ - **主要内容区 (Main Content)**
|
|
|
+ - 结果展示区 (Results Display Area)
|
|
|
+ - 结果照片 (Result Photo)
|
|
|
+ - 保存按钮 (Save Button)
|
|
|
+ - 分享按钮 (Share Button)
|
|
|
+ - 重试按钮 (Retry Button)
|
|
|
+
|
|
|
+### 详细模块结构
|
|
|
+
|
|
|
+#### 首页 (Home)
|
|
|
+- **Header**
|
|
|
+ - 菜单图标 (Menu Icon): 触发导航菜单的显示
|
|
|
+- **导航菜单 (Nav Menu)**
|
|
|
+ - 菜单项 (Menu Item): 首页 (Home), 试妆页 (Try On), 结果页 (Results)
|
|
|
+- **主要内容区 (Main Content)**
|
|
|
+ - 欢迎信息 (Welcome Message)
|
|
|
+ - 标题 (Title): "Welcome to HeyBeauty"
|
|
|
+ - 描述 (Description): "Try our virtual makeover tool."
|
|
|
+ - 开始试妆按钮 (Start Try-On Button): 引导用户到试妆页
|
|
|
+
|
|
|
+#### 试妆页 (Try On)
|
|
|
+- **Header**
|
|
|
+ - 菜单图标 (Menu Icon): 触发导航菜单的显示
|
|
|
+- **导航菜单 (Nav Menu)**
|
|
|
+ - 菜单项 (Menu Item): 首页 (Home), 试妆页 (Try On), 结果页 (Results)
|
|
|
+- **主要内容区 (Main Content)**
|
|
|
+ - 上传照片模块 (Upload Photo Module)
|
|
|
+ - 上传照片按钮 (Upload Photo Button): `<input type="file" id="upload-photo" accept="image/*">`
|
|
|
+ - 试妆显示区 (Try-On Display Area)
|
|
|
+ - 显示上传的照片 (Display Uploaded Photo): 上传的照片显示区
|
|
|
+ - 化妆选择选项 (Makeup Selection Options): 用户选择不同的化妆选项
|
|
|
+ - 应用化妆按钮 (Apply Makeup Button): 应用选定的化妆效果
|
|
|
+
|
|
|
+#### 结果页 (Results)
|
|
|
+- **Header**
|
|
|
+ - 菜单图标 (Menu Icon): 触发导航菜单的显示
|
|
|
+- **导航菜单 (Nav Menu)**
|
|
|
+ - 菜单项 (Menu Item): 首页 (Home), 试妆页 (Try On), 结果页 (Results)
|
|
|
+- **主要内容区 (Main Content)**
|
|
|
+ - 结果展示区 (Results Display Area)
|
|
|
+ - 结果照片 (Result Photo): 显示试妆结果照片
|
|
|
+ - 保存按钮 (Save Button): 保存结果照片
|
|
|
+ - 分享按钮 (Share Button): 分享结果照片
|
|
|
+ - 重试按钮 (Retry Button): 返回试妆页重新开始
|
|
|
+
|
|
|
+这个页面产品结构图不仅有助于清晰定义各个页面的功能和内容，也有助于在设计和开发过程中保持页面之间的一致性和流畅的用户体验。
|
|
|
|
|
|
# 虚拟试穿界面的产品结构
|
|
|
**顶部导航栏**：
|
leguangfeng