# 美搭 —— 试衣间 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 / 年份）、必填校验+汇总条+滚动定位、隐私说明可见。 ## 10. 试衣间布局 v2.1（FittingRoomPage 紧凑预览改版） > 用户诉求：①预览区（现 3:4 大图 437vp、占屏约 57%）弄小；②我的/精选衣橱区弄大；③少滚动即可浏览选衣。 > 本节与 §3 预览区规格、§9 验收 2 冲突处**以本节为准**，其余全部沿用。逻辑屏按 360×788vp 计算。 ### 10.1 五项裁决 1. **预览 vs 不裁切 = 方案 a+c+d 组合**：预览固定高 **300vp** + `ImageFit.Contain` + 底 COLOR_IMAGE_BG（人像 3:4 渲染约 225×300 居中，两侧灰边各≈51vp）。理由：试穿必须看全全身，Cover 裁切直接劣化选衣判断且用户已投诉过「被裁切」，故预览态放弃 Cover（成为 §2 全 Cover 规则的唯一例外）；小图看不全→**点图开全屏查看器**（§10.3）；**生成完成后自动弹出查看器一次**（genSeq 守卫：取消/离开/迟到失效不弹，用户关闭后不重复弹）。空态（未传本人照）预览仍 300vp，占位内容居中沿用。 2. **网格三列、纯图卡**：列/行距 8；卡宽≈104、图 104×139（3:4 Cover）。**去掉名称与品类两行文字**（104vp 窄卡放不下、品类已可由 chips 过滤），品类改为图内左下小角标；槽位角标与删除 × 保留右上。首屏可见 ≥2 整行=6 卡（原双列带文字约 3 卡）。 3. **生成中/结果态**：生成中覆盖层压在 300vp 预览内（黑 60%）：Loading 36 + 状态文案 12（最多 2 行）+ 秒数 16 + 「取消生成」高 28；结果操作行「保存到相册/再来一次」保留在预览下方原位不动；查看器内另设「保存到相册」主按钮。 4. **胶囊/角标缩小**：「试穿」黑胶囊 **44×96**（原 52×120）、圆角 22、白字 14，右缘距预览右边 12、垂直居中，置灰条件沿用；「模特/效果图」角标字号 12→**11**、内边距 10×6、距边 10（对齐 §2 角标 11）。 5. **全屏查看器**：全屏覆盖层、底 COLOR_BLACK_CAPSULE（#1A1A1A，复用不新增色值）；与页面**共用 `showOriginal` 状态**——页签、预览左上角标、图源三处同步。 ### 10.2 整页线框（紧凑预览版） ``` ┌──────────────────────────────────┐ 360vp │ ‹ 返回 试衣间 │ 顶栏48 沿用 ├──────────────────────────────────┤ │ ┌──────────────────────────────┐ │ 预览卡：margin16/8 高300 固定 │ │[模特]11 ┌────┐ │ │ 底#EDEFF3 圆角16 clip │ │ ┌───────────┐ │试 │ │ │ 图 Contain 225×300 居中 │ │ │ 全身完整 │ │穿 │ │ │ 两侧灰边各≈51 不裁切 │ │ │ 不裁切 │ └────┘ │ │ 点图→全屏查看器(§10.3) │ │ └───────────┘ 44×96 │ │ 生成中：黑60%覆盖层 │ └──────────────────────────────┘ │ │ 请先选择一件上衣… / 状态/合规提示 │ 12 条件行 ≤20vp（沿用） ├──────────────────────────────────┤ │ 我的衣橱 精选衣橱 │ Tab32 沿用（主色3vp下划线） │ (全部)(上衣)(下装)(连衣裙)(外套)(套装)→│ chips高28 横滚 选中黑底白字 ├──────────────────────────────────┤ │ ┌──────┐ ┌──────┐ ┌──────┐ │ 三列：列距8 行距8 │ │ 图3:4 │ │ 图3:4 │[×] 图3:4 │ │ 卡宽104 图104×139 Cover │ │[上衣] │ │[下装] │ │ │ │ 左下品类角标(黑60%字10) │ └──────┘ └──────┘ └──────┘ │ 选中2vp主色描边+右上槽位角标 │ ┌──────┐ ┌──────┐ ┌──────┐ │ 第2行 首屏完整可见 │ │ 图 │ │ ＋ │ │ 图 │ │ 末位添加卡：＋24/添加12 │ └──────┘ └──────┘ └──────┘ │ 底部「拍照」11 主色 ├────── ↓ 以下滚动 ↓ ───────────────┤ │ 保存到相册 再来一次 │ 结果操作行（条件，沿用） │ 连衣裙、外套、套装按上衣流程… │ 脚注11＋高级提示词＋上次结果卡 └──────────────────────────────────┘ ``` 垂直预算（788vp）：顶栏 48 + 预览块 316（图 300+上下边距 16，占屏 40%，原 453/57%）+ 提示行 ≤20 + 滚动区 ≥404（Tab 32 + chips 36 + 网格首屏 ≥2 整行 286）。 ### 10.3 全屏查看器线框 ``` ┌──────────────────────────────────┐ 全屏覆盖层 底#1A1A1A │ × 原图 效果图 │ 顶56：×白24 距左16；页签白13 │ ───── │ 当前=白+3vp白下划线；未选白60% │ │ 仅 resultUrl 非空显页签； │ ┌────────────┐ │ 模特态仅「×」无页签 │ │ 原图/效果图 │ │ 图 Contain 宽100%-32 居中 │ │ 3:4 居中 │ │ 高=顶部56与底区之外全部 │ └────────────┘ │ 点图=切原图/效果（共用 │ │ showOriginal，关闭后预览同步） │ [ 保存到相册 ] │ 主按钮 高48 圆角24 主色白字16 │ 再来一次 │ 白13 文字链（仅结果态显示） └──────────────────────────────────┘ 关闭：点 × / 系统返回；保存成功回填状态文案「已保存到相册」（沿用三态口径）。 ``` ### 10.4 尺寸与 §2/§3 冲突修订清单 | # | 原规则 | v2.1 修订 | |---|---|---| | 1 | §2 图片一律 ImageFit.Cover | 试衣间预览/查看器改 **Contain**（唯一例外） | | 2 | §2 列表/网格间距 12 | 试衣间网格列/行距 **8** | | 3 | §3 预览区高=屏 45% | 固定 **300vp**（含边距占屏 40%） | | 4 | §3 双列 3:4 卡+名称13+品类11 | **三列纯图卡**（104×139，无文字行） | | 5 | §3 角标白字 12、内边距 8×12、距边 12 | 字 **11**、内边距 10×6、距边 10 | | 6 | §3「试穿」胶囊 52×120 | **44×96** 圆角 22 | | 7 | §3 品类条 chips 高 32 | **28**（字 12、内边距 10×6、圆角 14） | 新增组件：**ImageViewer**（components/f2/ImageViewer.ets，@Component 导出；参数：imageSrc、hasResult、showOriginal 双向、onSave、onRetry、onClose）。 ### 10.5 新增文案（逐字，其余沿用 §8） | 位置 | 文案 | |---|---| | 试衣间·查看器页签 | 原图 / 效果图 | | 试衣间·查看器关闭 | ×（图标，无朗读文案需求，无文字） | | 试衣间·卡片品类角标 | 沿用品类词：上衣 / 下装 / 连衣裙 / 外套 / 套装 | ### 10.6 验收清单（可自动化判定） 1. 360×788vp 下预览块高（含上下边距）=316vp 固定；图 ImageFit.Contain、底 #EDEFF3、无裁切。 2. 无状态提示行时，衣橱网格首屏完整可见 2 行 × 3 列（≥6 卡），Tab/chips 无需滚动。 3. 网格 3 列、列/行距 8；服装卡无名称/品类文字行、左下品类角标；选中态 2vp #C2185B 描边+右上槽位角标；我的衣橱卡保留 20×20 删除。 4. 点预览图弹出全屏查看器；有结果时查看器页签与预览左上角标文案一致（同一 showOriginal 状态驱动）。 5. 生成完成自动打开查看器恰一次（取消/离开/迟到失效不弹）；查看器「保存到相册」走系统保存对话框三态口径。 6. 「试穿」胶囊 44×96 右缘悬浮、未选上衣/生成中置灰不可点（沿用）；生成中覆盖层四要素（Loading/文案≤2行/秒数/取消）在 300vp 内完整显示。 7. 「＋添加」卡在网格末位，含相册（点卡）与拍照（底部链接）两入口（沿用）。 8. 除查看器底与胶囊复用 #1A1A1A 外无新增色值；§3/§9.2 与本节冲突处按本表 §10.4 执行。