docs: 美搭配 v2 + 美学诊断需求文档与 UI 规范(参考站对齐 + Phase A 降级裁决)

This commit is contained in:
xsl
2026-09-02 23:40:16 +08:00
parent c9d13697a6
commit f17868233a
2 changed files with 392 additions and 0 deletions
+211
View File
@@ -0,0 +1,211 @@
# 美搭 —— 试衣间 v2 / 发型页 v2 / 美学诊断 UI 设计规范
> 版本 v1.0(2026-09-02)。范围:试衣间改版、发型页改版、美学诊断落地页与填写页(均为新增/重设计)。
> 开发照本文执行,不再另行口头约定;与现有页面冲突处以本文为准。
> 基线代码:core/Theme.ets、pages/HomePage.ets、pages/HairDesignPage.ets、pages/TryonPage.ets。
## 0. 现状勘误与落点
- `pages/FittingRoomPage.ets` **不存在**。试衣间现状是 `pages/TryonPage.ets`:三槽上传表单(全身照/上衣/裤子)+ 提示词 + 生成等待,非 v2 目标形态。
- 试衣间 v2 建议新建 `pages/FittingRoomPage.ets` 承载衣橱网格形态;旧 TryonPage 在 v2 验收通过前保留,首页入口卡切换指向。
- 发型页 v2 就地改造 `pages/HairDesignPage.ets`,保留:点按对比、人脸授权弹层(components/f2/FacePhotoConsent)、结果落盘(filesDir/results)。
- 美学诊断两页新建:`pages/DiagnosisLandingPage.ets`、`pages/DiagnosisFormPage.ets`。
- 滚轮选择器先例:`pages/ReportCreatePage.ets` 的 `getUIContext().showTextPickerDialog({ range, selected, canLoop:false })`,身高/体重直接复用此交互。
## 1. 色板 Token
一级来源 `core/Theme.ets`,页面内禁止再散落硬编码主色;下表「新增」色仅落地页 hero 与中性灰,收口于 Theme.ets 补常量。
| Token | 值 | 用途 | 使用页面 |
|---|---|---|---|
| COLOR_PRIMARY(现有) | #C2185B | 主按钮、选中态、强调文字、下划线 Tab、删除外的红字错误提示沿用 | 全部 |
| COLOR_PRIMARY_SOFT(现有) | #F7E3EA | 次级按钮底、选中浅底 | 全部 |
| COLOR_TEXT_PRIMARY(现有) | #222222 | 标题/正文 | 全部 |
| COLOR_TEXT_SECONDARY(现有) | #8A9099 | 辅助说明、次级文字 | 全部 |
| COLOR_TEXT_DISABLED(新增收口) | #C2C7CE | 禁用文字、占位箭头(现散落 HomePage,收进 Theme) | 全部 |
| COLOR_PAGE_BG(新增收口) | #F5F6F8 | 页面底色(现各页各自定义,收进 Theme) | 全部 |
| COLOR_DIVIDER(新增收口) | #E5E7EB | 分隔线、chip 描边 | 全部 |
| COLOR_IMAGE_BG(新增收口) | #EDEFF3 | 图片占位底 / 未选中段底 | 试衣间、发型 |
| COLOR_BLACK_CAPSULE(新增) | #1A1A1A | 「试穿」胶囊按钮、品类 chip 选中态(黑底白字) | 试衣间 |
| COLOR_BADGE_BG(新增) | 0x99000000(黑 60% 透明) | 图上角标(模特/删除/原图|效果图)底 | 试衣间、发型 |
| COLOR_DIAG_HERO_TOP(新增) | #7C4DFF | 美学诊断落地页 hero 渐变起点 | 仅落地页 |
| COLOR_DIAG_HERO_BOTTOM(新增) | #5E35B1 | 落地页 hero 渐变终点 | 仅落地页 |
| COLOR_ERROR(新增收口) | #C0392B | 错误文案(HairDesignPage 已硬编码,收进 Theme) | 全部 |
**裁决说明**:参考站紫调(#7C4DFF→#5E35B1)与 App 主色玫红 #C2185B 不同系。仅落地页 hero 使用独立紫渐变(与 AI 顾问紫 #6C5CE7 同为点缀系、不冲突);落地页其余元素、CTA 按钮、其余三页一律走玫红主色,不跟紫。
## 2. 基础尺度(四页统一)
- 页面左右边距 16;卡片内边距 14~16;列表/网格间距 12;同类元素组内间距 8。
- 圆角:大卡片 16、图片卡/小卡 12、胶囊(按钮/chip)=高度一半、角标圆形。
- 字号字重:页大标题 26 Bold;区块标题 16 Medium;正文/行标签 14 Regular;辅助/品类小字 12;角标/步骤标签 11。
- 主按钮统一:宽 100%-32(或吸底减边距)、高 48、圆角 24、底 COLOR_PRIMARY、白字 16 Medium;禁用态底 #E5E7EB、字 #C2C7CE。
- 图片一律 `ImageFit.Cover`;加载中占位底 COLOR_IMAGE_BG + LoadingProgress(色 COLOR_PRIMARY,36vp)。
## 3. 页面一:试衣间 v2(FittingRoomPage)
```
┌──────────────────────────────┐
│ ‹ 返回 试衣间 │ 顶栏:白底,高48,标题17 Medium
├──────────────────────────────┤
│ ┌──────────────────────────┐ │ 预览区:高=屏45%(≥320vp)
│ │[模特] ╲ │ │ 图片 Cover,圆角16,边距16
│ │ ┌────┐ │ │ 左上角标「模特」:黑60%胶囊,
│ │ │试穿 │ │ │ 白字12,内边距8×12,距边12
│ │ └────┘ │ │ 「试穿」:黑胶囊#1A1A1A 白字14,
│ │ ╱ │ │ 右缘悬浮垂直居中,距右16
│ └──────────────────────────┘ │ 点图=生成后原图/效果切换(沿用)
├──────────────────────────────┤
│ 我的衣橱 │ Tab 行:仅1个Tab;选中16 Medium
│ ───── │ 主色+3vp下划线(圆角2);占位留扩展
├──────────────────────────────┤
│ (全部)(上衣)(下装)(连衣裙)(外套)(套装)→ │ 品类条:横向Scroll,高32
├──────────────────────────────┤
│ ┌────────┐ ┌────────┐ │ 双列网格:列距12 行距12
│ │图 Cover│ │图 Cover│ [×] │ 服装卡:白底圆角12
│ │ │ │ │ │ 图 aspectRatio 3:4 Cover
│ │名称 │ │名称 │ │ 名称13 Medium 主色文,单行截断
│ │品类小字│ │品类小字│ │ 品类11 Secondary
│ └────────┘ └────────┘ │ 删除角标:右上20×20圆 黑60%
├──────────────────────────────┤
│ 空态: (空衣橱插图区) │ 空态居中:图标44 Disabled色
│ 衣橱还是空的 │ 标题14 Primary + 副文案12 Secondary
│ [ 从相册选一件衣服 ] │ 大按钮:主色 高48 圆角24
└──────────────────────────────┘
```
状态:生成中→预览区 Loading+状态文案(沿用 TryonPage 计时/挽留口径);服装卡点击=选中试穿(描边 2vp COLOR_PRIMARY);删除角标点击需二次确认弹窗(「移除这件衣服?」取消/移除)。
## 4. 页面二:发型页 v2(HairDesignPage 改造)
```
┌──────────────────────────────┐
│ ‹ 返回 发型设计 │ 顶栏同上
├──────────────────────────────┤
│ ┌────────────┐ ┌────────────┐│ 双图区:两图等宽,高=屏40%
│ │ 原图 │ │ 效果图 ││ (≥240vp),间距12,圆角12
│ │[原图|效果图]│ │ ││ 左下小角标标注当前显示态:
│ └────────────┘ └────────────┘│ 黑60%胶囊白字11;点右图切换对比
│ 相册 拍照 │ 入口文字链 12 Primary(沿用)
├──────────────────────────────┤
│ ╭──────╮──────╮ │ 性别分段控件:容器COLOR_IMAGE_BG
│ │ 女生 │ 男生 │ │ 圆角18 内边距2;选中段主色底
│ ╰──────╯──────╯ │ 白字圆角16,未选透明底深字13
├──────────────────────────────┤
│ 选择发型(点选即试戴) │ 三列网格沿用现状(不动)
│ ▣ ▣ ▣ / ▣ ▣ ▣ / ▣ ▣ ▣ │ 选中描边2vp主色(沿用)
├──────────────────────────────┤
│ 发色 ● ● ● ● ● ● ● ● │ 8色圆点:32vp圆,名称11在点下
│ 自然黑 深棕 栗色 蜜茶… │ 选中:外环2vp COLOR_PRIMARY
├──────────────────────────────┤
│ 强度 ────●──────── 0.9 │ 行:标签12 Secondary+Slider+值
├──────────────────────────────┤
│ [ 应用发色 ] │ 吸底主按钮(白底条+顶分隔线)
└──────────────────────────────┘
```
变化点:①发色由文字 chip 改为「圆点+名称」竖排小项(色值沿用 PRESET_COLORS 8 组 RGB);②「应用发色」由滚动区内改为吸底;③无结果时发色/强度区整体隐藏(沿用),按钮禁用态见 §2。上次结果卡、三态(加载/空/失败)、人脸授权弹层全部沿用不动。
## 5. 页面三:美学诊断落地页(DiagnosisLandingPage)
```
┌──────────────────────────────┐
│ ██████ 紫渐变 hero █████████ │ hero:#7C4DFF→#5E35B1 线性渐变
│ │ 高=屏38%,圆角16(四周留边16)
│ 个人形象风格分析报告 │ 大标题 白 26 Bold,左上角内边距24
│ 5 分钟,看清你的穿衣风格 │ 副标 白85% 13
├──────────────────────────────┤
│ 你的穿衣困扰 │ 区块标题16 Medium
│ ┌──────────────────────────┐ │ 清单卡:白底圆角12 内边距16
│ │ ● 不知道自己适合什么风格 │ │ 5 行,行高≥40,行间8
│ │ ● 衣柜很多衣服却不会搭 │ │ 每行:主色圆点8vp+文字14
│ │ ● 穿显胖/显黑,不敢尝试 │ │
│ │ ● 想改变却没有方向 │ │
│ │ ● 每次出门搭配浪费时间 │ │
│ └──────────────────────────┘ │
│ 如何生成你的报告 │ 区块标题16 Medium
│ ①┄②┄③┄④ │ 横向步骤条:4步等宽
│ 测一测 分析 生成 报告 │ 圆点28vp(当前主色底白字/未选
│ │ IMAGE_BG底Secondary字),连线
│ │ 2vp #E5E7EB,标签11居中
├──────────────────────────────┤
│ [ 马上体验 ] │ 吸底 CTA:主色玫红(非紫)高48
└──────────────────────────────┘
```
CTA 点击 → router 跳 DiagnosisFormPage。hero 为该页专属装饰,报告页/表单页不出现紫渐变。
## 6. 页面四:美学诊断填写页(DiagnosisFormPage)
```
┌──────────────────────────────┐
│ ‹ 返回 形象信息 │ 顶栏同上
├──────────────────────────────┤
│ 基本信息 │ 区块标题16 Medium,上边距16
│ ┌──────────────────────────┐ │ 分组卡:白底圆角12 内边距16
│ │ 性别 [男 | 女] │ │ 行高52,行间分隔线0.5vp
│ │ 出生日期 1995-06-01 ›│ 分段控件复用§4;未选占位
│ │ 身高 165 cm ›│ 「请选择」Secondary色
│ │ 体重 55 kg ›│ 行:标签14左,值14右+›Disabled
│ │ 职业 请输入 ›│ 文本框右对齐无边框,占位同上
│ └──────────────────────────┘ │
│ 信息仅用于生成你的个人报告, │ 隐私说明:11 Secondary,左对齐
│ 不会对外展示或共享。 │ 卡下边距8
│ │ 中部留白(后续扩展题目区)
├──────────────────────────────┤
│ [ 下一步 ] │ 吸底主按钮:主色 高48
└──────────────────────────────┘
```
- 滚轮口径(全部复用 showTextPickerDialog,canLoop:false):出生日期 range 为「1950~2010 年」年份单列或 YYYY-MM 串(开发定,先例一致即可);身高 100~250 整数 cm,默认 165;体重 25~300 整数 kg,默认 55;已有值从当前值滚起(沿用 ReportCreatePage 的 clamp 写法)。
- 校验:性别/出生日期/身高/体重必填,职业可空;缺失字段红字 12 COLOR_ERROR 行下提示 + 汇总条「请完成:…」并滚动到首个缺失项(沿用 ReportCreatePage 口径);「下一步」全部合法后才可跳转结果流程。
## 7. 组件清单(新建,一律独立文件、@Component 导出)
| 组件 | 建议文件 | 复用方 |
|---|---|---|
| CategoryChip 品类 chip | components/f2/CategoryChip.ets | 试衣间 v2 |
| ClothCard 服装卡(图+名称+品类+删除角标) | components/f2/ClothCard.ets | 试衣间 v2 |
| CapsuleButton 黑胶囊(试穿) | components/f2/CapsuleButton.ets | 试衣间 v2 |
| Segment 分段控件(两枚胶囊,参数 items/selected) | components/f2/Segment.ets | 发型页、诊断表单 |
| ColorDot 发色圆点+名称 | components/f2/ColorDot.ets | 发型页 |
| StepBar 横向步骤条 | components/f3/StepBar.ets | 诊断落地页 |
| FormRow 表单行(标签+值/控件+箭头+错误行) | components/f3/FormRow.ets | 诊断表单(ReportCreatePage 后续可迁) |
放置依据:f2=试衣间/发型域(FacePhotoConsent 已在此),f3=报告域(诊断归报告旅程)。通用基础件(Segment、FormRow)先放域内,出现第二域复用时再上收 core/。
## 8. 文案表(原文照抄,开发不得改写)
| 位置 | 文案 |
|---|---|
| 试衣间·页标题 | 试衣间 |
| 试衣间·图上角标 | 模特 |
| 试衣间·悬浮按钮 | 试穿 |
| 试衣间·Tab | 我的衣橱 |
| 试衣间·品类 chips | 全部 / 上衣 / 下装 / 连衣裙 / 外套 / 套装 |
| 试衣间·空态标题/副文/按钮 | 衣橱还是空的 / 从相册挑一件,马上试穿效果 / 从相册选一件衣服 |
| 试衣间·删除确认 | 移除这件衣服? / 取消 / 移除 |
| 发型页·双图角标 | 原图 / 效果图 |
| 发型页·分段控件 | 女生 / 男生 |
| 发型页·区块标题 | 选择发型(点选即试戴) / 换个发色 / 强度 |
| 发型页·主按钮 | 应用发色(生成中→生成中…) |
| 发型页·图下提示 | 请使用本人照片,上传即确认不侵犯他人肖像权 |
| 落地页·大标题/副标 | 个人形象风格分析报告 / 5 分钟,看清你的穿衣风格 |
| 落地页·区块标题 | 你的穿衣困扰 / 如何生成你的报告 |
| 落地页·困扰 5 条 | 不知道自己适合什么风格 / 衣柜很多衣服却不会搭 / 穿显胖显黑,不敢尝试 / 想改变却没有方向 / 每次出门搭配浪费时间 |
| 落地页·步骤条 | 测一测 / 分析 / 生成 / 报告 |
| 落地页·CTA | 马上体验 |
| 表单页·页标题/区块 | 形象信息 / 基本信息 |
| 表单页·行标签 | 性别 / 出生日期 / 身高 / 体重 / 职业 |
| 表单页·分段 | 男 / 女;占位:请选择 / 请输入 |
| 表单页·隐私说明 | 信息仅用于生成你的个人报告,不会对外展示或共享。 |
| 表单页·主按钮 | 下一步 |
| 表单页·缺失汇总 | 请完成:性别、出生日期…(动态拼接) |
## 9. 验收清单(逐条可勾)
1. 四页主色唯一来源 Theme.ets;落地页外无紫色,除 #1A1A1A 胶囊外无新增散落色值。
2. 试衣间 v2:预览区约占屏 45%、双列网格、空态引导按钮、品类条横向可滚且选中黑底白字。
3. 发型页 v2:双图+对比、分段控件、8 色圆点+名称、强度滑杆、吸底「应用发色」;旧三态与授权弹层行为不回归。
4. 落地页:紫渐变 hero、5 条困扰卡、4 步步骤条、吸底「马上体验」跳填写页。
5. 填写页:分组白卡表单、三个滚轮范围正确(100-250 / 25-300 / 年份)、必填校验+汇总条+滚动定位、隐私说明可见。
+181
View File
@@ -0,0 +1,181 @@
# 美搭配与美学诊断 · 需求文档 v2
> 2026-09-02 | 状态:待评审 | 关联:《试衣间与发型设计-产品方案》《鸿蒙美搭-智能穿搭美学助手-产品方案》§2.1、《美学报告-需求文档》v1.2
> 目标形态:参考站 fitting-room.huimeimeta.com H5(试衣间页 / 发型品类形态 / 美学诊断落地页 + 信息填写页)。
## 1. 背景与范围
现有 Phase A 已交付:试衣间(本人照+上衣±裤子→换装,直连 meida.xiangsilian.com/change_cloth_base64)、发型设计(面部特写→60 款试戴+8 色换色)、美学报告(六字段问卷→32 维报告)。
本 v2 三件事:
1. **试衣间改版**(对外名「美搭配」):视觉与交互对齐参考站(顶部预览+试穿按钮+衣橱 Tab+品类条+双列网格);
2. **发型设计改版**:保留现有交互,视觉对齐参考站形态;
3. **新增美学诊断**:营销落地页 + 信息填写页,复用现有报告创建链路。
Phase A 约束:无后端改造、无账号体系升级,全部改动在客户端。
## 2. 现状 vs 目标差距表
### 2.1 试衣间(美搭配)
| 维度 | 现状(TryonPage v1) | 目标(v2,对齐参考站) |
|---|---|---|
| 布局 | 三张照片槽(全身照/上衣/裤子)纵排表单 | 顶部大图模特预览 + 右侧悬浮黑色「试穿」按钮 + 下方衣橱区 |
| 素材来源 | 逐张上传/拍摄 | 「我的衣橱」双列网格点选;模特位=本人照上传(拍/选) |
| 品类 | 无品类概念(固定两槽) | 品类条:全部/上衣/下装/连衣裙/外套/套装(发型不在本页) |
| Tab | 无 | 「我的衣橱|赴宴试衣间」双 Tab |
| 模特切换 | 无 | 参考站支持左右滑切换模特;Phase A 仅本人照,**无模特库、无滑动切换**(见 §3.2) |
| 生成链路 | 不变 | 不变(接口、超时 320s、秒数等待、常亮、挽留、本机留存均沿用) |
### 2.2 发型设计
| 维度 | 现状(HairDesignPage v1) | 目标(v2) |
|---|---|---|
| 布局 | 照片槽 + 男女分栏网格 + 换发色面板 | 同参考站形态:顶部预览大图 + 品类条(全部/男发/女发)+ 双列网格;换发色面板改为网格下方可展开卡片 |
| 交互 | 点选即试戴、8 色发色、强度滑杆、男女分栏(女 34/男 26) | **全部保留**,仅视觉重排 |
| 数据 | 在线拉 60 款 | 不变 |
### 2.3 美学诊断(新增)
| 维度 | 现状 | 目标(v2) |
|---|---|---|
| 入口 | 首页入口卡「生成我的形象报告」直达问卷页 | 入口卡改跳「美学诊断落地页」(营销态) |
| 落地页 | 无 | 紫色调静态页:主张+PROBLEM+REASON+4 步流程+3 价值卡+CTA「马上体验」 |
| 信息填写 | 无(问卷页直接六字段) | 白底「AI 美学检测」表单:性别/出生日期/身高/体重/职业 →「下一步」预填进现有问卷页 |
## 3. Phase A 技术约束下的产品裁决
### 3.1 品类 → 接口工作流的降级映射(重要)
换装接口仅支持「上衣(cloth_img,必传)+ 裤子(kuzi_img,可选且必须伴随上衣)」。参考站的 6 品类按下表**两档映射**,UI 不暴露工作流差异:
| 品类标签 | 工作流档位 | 说明 |
|---|---|---|
| 上衣 | cloth_img | 标准档 |
| 下装 | kuzi_img | 仅可与上衣同时选中;未选上衣时点选提示「请先选择一件上衣,再搭配下装」 |
| 连衣裙 / 外套 / 套装 | **归入 cloth_img(上衣档)** | 降级声明:按单件上衣工作流处理,效果可能不完整(如下摆/成套感缺失),品类条上对这三类加「试穿效果以实际生成为准」的页面脚注 |
选中模型:**双槽位**。上衣槽(含连衣裙/外套/套装)与下装槽各单选、可替换、可取消;「试穿」按钮可用条件=上衣槽非空。生成时按槽位组装 cloth_img/kuzi_img。
### 3.2 模特位:仅本人照片
- 「模特」=用户本人大图预览,**不做模特库、无左右滑动切换**(参考站该交互依赖内置模特素材与授权,Phase A 均无)。
- 预览空态:占位图+「上传/拍摄你的正面全身照」按钮;点击走现有 FacePhotoConsent 流程。
- 预览有图时:右侧悬浮「试穿」按钮(黑底白字、圆角、高约 120vp 竖条,对齐参考站);未选上衣时按钮置灰。
### 3.3 我的衣橱 / 赴宴试衣间
- **我的衣橱**(默认 Tab)=用户本机上传的服装:元数据(品类标签、添加时间)写 preferences,图片文件落 filesDir/wardrobe/,App 卸载即清,不上传服务端。
- **上传交互**:衣橱网格末位常驻「+ 添加」卡;点击选/拍一张 → 必选品类标签弹层(上衣/下装/连衣裙/外套/套装,五选一,默认无选中,未选不能确认)→ 存入。
- **赴宴试衣间**=精选示例服装(内置素材)。**Phase A 无内置素材,该 Tab 直接隐藏**(不显示灰色占位);素材管线(≥300 件 tryon_ready)就绪后再启用,启用时该 Tab 展示双列精选网格,点击行为与我的衣橱一致(点选→试穿)。
### 3.4 服装库
Phase A 无内置素材,网格唯一数据源=我的衣橱。空态:居中插画+「衣橱还是空的,拍一件你的衣服试试」+「添加第一件」按钮(点击=上传流程)。
### 3.5 发型页裁决
男女分栏(26 男/34 女)、8 色发色(自然黑/深棕/栗色/蜜茶/亚麻/酒红/奶奶灰/蓝黑)、强度滑杆(0~1,默认 0.9)、点选即试戴、换发色作用于当前结果图——交互全部保留;本次只做视觉重排对齐参考站(顶部预览+品类条+网格)。品类条「全部/男发/女发」映射现有 genderTab(全部=unknown 款两栏都显示,沿用)。
### 3.6 美学诊断:复用报告链路,不重复造接口
现有 `POST /api/v1/reports` 问卷体六字段:`gender`(女/男/不便告知)、`height_cm`(100~250)、`weight_kg`(25~300)、`birthday`(YYYY-MM-DD)、`core_goals`(六项多选,至少 1)、`psych_style`(九型单选);提交前有配额确认框(report_basic 终身 1 次),随后 3s 轮询任务→结果页。
**字段映射与预填策略**:
| 新表单字段 | 映射 | 说明 |
|---|---|---|
| 性别(男/女 二选切换) | `questionnaire.gender` | 直接映射「男/女」;「不便告知」不在新表单出现,仅原问卷页保留 |
| 出生日期 | `questionnaire.birthday` | DatePicker(1930~当天);表单上按年月日展示并派生只读「年龄」 |
| 身高 cm | `questionnaire.height_cm` | 沿用滚轮选择器 100~250,不开放键盘 |
| 体重 KG | `questionnaire.weight_kg` | 滚轮 25~300 |
| 职业 | **Phase A 仅本地留存,不进提交体** | 后端问卷 schema 无 occupation 字段(维度字典 #4 属全面报告),无后端改造前提下不提交;存 AppStorage 供 Phase B 随 schema 扩展提交 |
**流程**:填写页「下一步」→ `router.pushUrl('pages/ReportCreatePage')` 携带预填参数 `{gender, birthday, height_cm, weight_kg, occupation(本地)}`;ReportCreatePage 新增 aboutToAppear 读参预填对应 @State,用户在原页补齐核心诉求+心理风格后走原提交/配额确认/轮询链路。原问卷页字段与校验不删不改;从首页直达原问卷页的路径取消(入口卡改指落地页)。
### 3.7 合规红线(沿用,不放松)
- 仅限本人照片:试衣间模特位、发型页照片均限本人,页面明示「仅限本人照片」;
- 人脸单独同意:上传含人脸照片前必须弹 FacePhotoConsent(服装图不涉及);
- Phase A 不接入试衣/发型配额:无配额提示、无扣减文案,个人页配额卡保持只读;
- 结果图不落服务端库、无分享出口;本机留存沿用 filesDir/results(仅最近一次)。
## 4. 页面结构定义
### 4.1 P1 试衣间(美搭配)v2
| 区块(上→下) | 内容与交互 | 状态 |
|---|---|---|
| ① 顶部预览区 | 高约 45% 屏;本人全身照大图(cover 裁切);右侧悬浮「试穿」竖按钮(黑底白字,选中 0 件上衣置灰) | 空态:浅灰底+人形占位+「上传/拍摄你的正面全身照」按钮(点击→人脸同意→拍/选);加载中不涉及(本地图即时显示) |
| ② Tab 行 | 「我的衣橱|赴宴试衣间」;Phase A 仅渲染我的衣橱(见 §3.3) | — |
| ③ 品类条 | 「衣服库」标题+横向滚动 chips:全部/上衣/下装/连衣裙/外套/套装;单选过滤,默认「全部」 | — |
| ④ 双列网格 | 衣橱卡片:服装图(1:1 裁切)+ 品类角标;点选=设入对应槽位(选中态描边+右上角「上衣/下装」槽位角标);再点取消;末位「+ 添加」卡 | 空态见 §3.4;图片加载失败显示「已失效,点按删除」占位(本机文件被清时) |
| ⑤ 结果区 | 生成中:预览区覆盖层显示已等待秒数+阶段文案+「取消生成」;完成后原图/结果点按切换+「保存到相册」「再来一次」;「上次结果」卡沿用 | 失败:400 提示重拍/换图;502/503/504「服务繁忙稍后重试」;>320s 主动中止提示;均保留已选不覆盖 |
| ⑥ 高级项 | 提示词输入,默认折叠(沿用) | — |
### 4.2 P2 发型设计 v2
| 区块(上→下) | 内容与交互 | 状态 |
|---|---|---|
| ① 顶部预览区 | 面部特写大图+右侧悬浮「试戴」按钮(形态同 P1);预览下小字「仅限本人照片」 | 空态:占位+「上传/拍摄面部特写」按钮(→人脸同意);生成中覆盖层:进度文案+秒数,失败保留当前图 |
| ② 品类条 | chips:全部/男发/女发(映射现有男女分栏) | — |
| ③ 发型网格 | 双列:缩略图+名称;点选即试戴(选中描边);结果回填预览区,点按切换原图/结果 | 列表三态沿用:加载中骨架/空态「暂无发型」/失败+「重新加载」 |
| ④ 换发色卡片 | 网格下方可展开卡片「换发色」:8 色圆点+强度滑杆+「应用」;作用于当前结果图 | 未试戴成功前卡片置灰+引导文案「先试戴一款发型」 |
### 4.3 P3 美学诊断落地页(新页面,纯静态)
| 区块(上→下) | 内容 |
|---|---|
| ① 主视觉 | 紫色渐变底;主标「个人形象风格分析报告」;副标「AI 解读你的身材、色彩与风格基因」;顶部返回+标题「美学诊断」 |
| ② 穿衣困扰 PROBLEM | 标题「这些困扰你也有吗?」+ 清单卡 6 条(不知道自己适合什么风格 / 衣柜满满却没衣服穿 / 买回的衣服总穿不出效果 / 打扮了还是显老气或不够精致 / 换季搭配毫无头绪 / 不会配色显黑显胖) |
| ③ REASON | 一段式说明「问题不在长相,在于没找到属于你的形象公式」 |
| ④ 4 步流程 | 步骤条:① 身材形象分析 ② 运动形象分析 ③ 职业形象分析 ④ 专属报告编写(每步一句副文案) |
| ⑤ 三张价值卡 | 专属形象基因 / 专属风格系统 / 专属魅力衣橱(各一句说明) |
| ⑥ 底部 CTA | 通栏紫色按钮「马上体验」→ P4;CTA 上方小字「我们会保障您的个人信息安全」 |
无任何网络请求;弱网/失败态不适用。
### 4.4 P4 美学诊断信息填写页(新页面)
| 区块(上→下) | 内容与交互 | 状态 |
|---|---|---|
| ① 标题区 | 白底;「AI 美学检测」大标+「我们会保障您的个人信息安全」副标 | — |
| ② 性别 | 「男/女」两粒切换胶囊(单选必填,默认不选) | 未选提交→红字「请选择性别」 |
| ③ 出生日期 | 点击弹 DatePicker(1930~今天);行内展示「1998-06-15(26 岁)」 | 未选提交→红字「请选择出生日期」 |
| ④ 身高 cm | 滚轮选择器 100~250 | 未选提交→红字「请选择身高」 |
| ⑤ 体重 KG | 滚轮选择器 25~300 | 未选提交→红字「请选择体重」 |
| ⑥ 职业 | 常用职业 chips 单选(学生/上班族/教师/医护/公务员/自由职业/其他)+选填 | 可不选 |
| ⑦ 底部「下一步」 | 通栏按钮;校验失败时汇总条点名缺项并滚至首个缺失字段(沿用原问卷页交互);通过→预填跳 ReportCreatePage | 跳转失败:页内红字兜底提示 |
说明:进入 P4 即视为同意生成报告;配额确认仍发生在 ReportCreatePage 提交前(禁止静默扣减纪律不变)。已生成过报告的用户走完流程会在提交时命中「本期报告已生成」对话框(沿用 40920 处理),落地页不做二次拦截。
## 5. 验收标准(可自动化判定)
**P1 试衣间**
1. 首次进入且未上传本人照:预览区显示占位文案与上传按钮,且「试穿」按钮不可点击;
2. 衣橱上传一张图并选「连衣裙」标签:网格出现该卡,品类条切「连衣裙」可见、切「上衣」不可见;
3. 仅选下装未选上衣:「试穿」不可用且出现「请先选择一件上衣,再搭配下装」提示;
4. 选 1 件上衣+1 件下装点「试穿」:请求体 cloth_img 与 kuzi_img 均非空;仅选上衣时 kuzi_img 为空;
5. 衣橱为空(清 preferences)时显示空态文案与「添加第一件」按钮。
**P2 发型**
1. 列表加载完成:品类条「女发」项数=34、「男发」项数=26(±unknown 款两栏均含);
2. 未试戴成功时「换发色」卡片置灰不可展开;
3. 试戴成功后预览区可点按切换原图/结果;
4. 照片上传前未通过人脸同意时不弹出相册/拍照选择器。
**P3/P4 美学诊断**
1. 落地页渲染 6 条 PROBLEM、4 步流程、3 张价值卡,CTA 点击跳转 P4;
2. P4 五项必填校验:任一未填点「下一步」,出现对应红字与汇总条且不发生路由跳转;
3. 填写「女/1998-06-15/165/52」后「下一步」:ReportCreatePage 的性别=女、生日=1998-06-15、身高=165、体重=52 已预填,核心诉求与心理风格为空待用户填写;
4. 职业任意选择不改变提交报文中 questionnaire 字段集合(无 occupation 键)。
## 6. 非目标(Phase B 及以后)
1. 模特库与左右滑动切换模特;
2. 「赴宴试衣间」精选素材与该 Tab 启用;
3. 电商链接/购买入口;
4. AI 试衣配额接入与扣减、任务中心、AI 水印与内容编号、COS 转存(切 `/api/v1/tryon/*` 代理时一并做);
5. 衣橱云端同步、多套搭配批量试穿、报告推荐搭配自动填充衣橱。
**文档版本**:v2.0 | 2026-09-02 | 作者:产品 Agent