Files
meida/docs/美搭配与美学诊断-UI规范.md
xsl 1b534f5133 feat(fitting): 试衣间布局 v2.1——紧凑预览 300vp+三列纯图卡+全屏查看器(设计师 Agent 出稿)
- 预览区 3:4 大图(437vp/占屏57%) → 固定 300vp + Contain 不裁切(用户要求预览变小且不裁切)
- 新增 ImageViewer 全屏查看器:点预览/生成完成自动弹出;原图|效果图页签与预览角标共用 showOriginal;保存走三态口径
- 衣橱网格双列带文字行 → 三列纯图卡(104×139,品类图内左下角标),首屏可见 6 卡 vs 原 3 卡
- 试穿胶囊 52×120→44×96、品类 chips 高 32→28、角标 12→11
- 设计稿:docs/美搭配与美学诊断-UI规范.md §10(含 7 条冲突修订表与 8 条验收)
2026-09-03 22:14:39 +08:00

25 KiB
Raw Permalink Blame History

美搭 —— 试衣间 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 为「19502010 年」年份单列或 YYYY-MM 串(开发定,先例一致即可);身高 100250 整数 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 执行。