meida/docs/美搭配与美学诊断-需求v2.md

美搭配与美学诊断 · 需求文档 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（100250）、weight_kg（25300）、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