美搭 —— 试衣间 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. 验收清单（逐条可勾）

四页主色唯一来源 Theme.ets；落地页外无紫色，除 #1A1A1A 胶囊外无新增散落色值。
试衣间 v2：预览区约占屏 45%、双列网格、空态引导按钮、品类条横向可滚且选中黑底白字。
发型页 v2：双图+对比、分段控件、8 色圆点+名称、强度滑杆、吸底「应用发色」；旧三态与授权弹层行为不回归。
落地页：紫渐变 hero、5 条困扰卡、4 步步骤条、吸底「马上体验」跳填写页。
填写页：分组白卡表单、三个滚轮范围正确（100-250 / 25-300 / 年份）、必填校验+汇总条+滚动定位、隐私说明可见。

16 KiB Raw Blame History Unescape Escape