xsl/juzi

Files

T

xsl 5957ef04fc feat: 接入 Face++ 真实测肤 + 三轮多角色迭代修复

Face++ 集成(高阶版 skinanalyze_advanced):
- h5/server.js:零依赖 Node 后端,静态托管 + /api/skin-analyze 中转,
  api_secret 只存服务端(从 apikey.bash/env 读取,.gitignore 已排除)
- 实时相机:getUserMedia 自拍取景,不可用时降级系统相机;
  相机令牌防授权回调泄漏摄像头;离开拍照页即释放
- 检测流:三连拍仅送检正面照(压至 1280px JPEG),错误码→友好提示
- 结果映射:肌肤年龄=skin_age 真实值;紧塑力/活力感/稳定力由真实
  维度合成;具体描述按检出项动态生成;检测图用用户实拍
- ?mock=1 内置样本供离线/自动化验证;README 补充部署与 HTTPS 说明

三轮迭代修复(QA+美术并行审计→开发统一修复,共 ~28 项):
- 功能:P1 鼠标拖拽轮播(Pointer Events+setPointerCapture)、
  快门/返回竞态(camSeq 令牌)、报告页状态重置、弹窗 ESC/遮罩关闭
- 视觉:还原度 80%→94%,档案页布局/弹窗比例/报告页产品卡等
  结构性偏差修正,字号/间距逐项实测核销
- 工程化:首屏 701KB→386KB(懒加载+preload+清理 212KB 无用资源)、
  favicon/SEO meta/隐私协议占位层/README

Review 修复:server.js 路径穿越前缀绕过(ROOT+sep 校验)、
getUserMedia 迟到回调释放相机(camSeqCam 令牌)

2026-09-22 21:06:33 +08:00

6.8 KiB

Raw Permalink Blame History

巨子测肤 · 1'me 在线肌肤测试 — UI 设计规范

来源:Figma 文件《巨子测肤 · UI外发版 · PSD可编辑重建》提取日期:2026-09-21 · 文件 key RTNcNqkBPg5Stcoi5d7FUP

1. 基准与尺寸换算

设计稿以 1080px 宽(全屏 1080×2339)为基准,是微信小程序风格界面(带胶囊按钮)。

目标	换算	示例(62.3px 大标题)
微信小程序 rpx	`rpx = px × 750 ÷ 1080 ≈ px × 0.694`	≈ 43rpx
iOS 逻辑像素 pt	`pt = px ÷ 2.88`	≈ 21.6pt
CSS px(375 基准)	`px = px ÷ 2.88`	≈ 21.6px

2. 色彩规范

品牌色

色值	用途
`#F5F078` 柠檬黄	品牌主色/CTA。启动页「开始检测」按钮框、油性肤质插画强调
`#282828` 深炭灰	主文字色(全稿使用最多,×143),同时用于插画描边

文字色阶(从深到浅)

色值	用途
`#000000`	纯黑标题(护理建议标题、弹窗文案)
`#282828`	正文主色
`#333333` / `#2C2C2C`	次级正文(隐私协议、下拉箭头)
`#4A4A4A` / `#464646`	护理建议条目正文、备注正文
`#757575` / `#707070`	弱化说明(隐私勾选文案、产品副标题、免责小字)
`#868686`	报告页数据标签(综合评分、肌肤年龄、维度名)
`#D30C0C`	警示红(低分维度分数 5.1)
`#FFFFFF`	反白文字(深色/图片背景上、拍照页指示)

背景与分隔

色值	用途
`#F5F5F5`	浅灰背景(全屏 ×15 处)
`#FFFFFF`	卡片/弹窗底色
`#EAE6E1` 米灰	干性肤质插画底色
`#DBF6D6` 淡绿	中性/混合偏油肤质插画底色
`#D6D6D6`	轮播标识-未选中圆点
描边 `#E5E5E5` / `#EFEFEF`	输入框/分隔线

注:全稿无圆角、无阴影定义 —— PSD 重建版的按钮均为矢量图形(见切图),开发时按钮圆角需按切图自行实现(主按钮接近胶囊/大圆角样式)。

3. 字体规范

全稿统一 Noto Sans SC(思源黑体),无衬线。层级如下(px 为设计稿原始值,rpx 已按 ×0.694 换算):

层级	字号/行高(px)	字重	rpx	用途示例
Display	83 / 146	500	58	报告页维度分数(7.2、5.1)
H1	66~~67 / 87~~90	500	46	弹窗欢迎语、启动页 Slogan(白)
H2	62 / 88~109	500/700	43	「您的肌肤状态」、拍照页步骤 1/3、产品推荐标题
H3	59 / 109	700	41	报告页「您的肌肤状态表现」
H4	41~42 / 73	400/500	29	表单标签「您的日常肤质/年龄/性别/地区」、按钮文字「开始检测」
H5	41 / 46	400	29	拍照指示短句(正脸居中/光线充足/取下眼镜)
H6	37 / 59~66	500/700	26	肤质名称(干性肌肤…)、护理建议标题
Body	33 / 50	400/500	23	弹窗正文、维度名(纹路/紧致)
Body-S	29 / 41~54	400/500	20	肤质描述文案、护理建议条目、隐私协议
Caption	25 / 27~50	400/500	17	轮播轴标签(偏干/水油平衡)、报告页标签
Caption-S	21 / 30~58	300/400/500	15	免责声明、产品小字(`*` 开头备注)

小程序字重注意:Noto Sans SC 的 300/500/700 在小程序中可分别用 PingFang/思源的 Light/Medium/Bold 对应,或直接引入 woff 字体包。

4. 组件切图(assets/svg/)

文件	原组件	尺寸	说明
`按钮-主按钮.svg`	按钮 / 主按钮	523×113	CTA 主按钮,柠檬黄 #F5F078 底
`拍照-快门.svg`	拍照 / 快门	178×178	拍照页快门按钮
`图标-关闭.svg`	图标 / 关闭	89×89	弹窗关闭
`图标-下拉与返回.svg`	图标 / 下拉与返回	40×40	表单下拉箭头/返回
`图标-相册.svg`	图标 / 相册	90×90	拍照页相册入口
`图标-重拍.svg`	图标 / 重拍	90×90	重拍按钮
`品牌-1me.svg`	品牌 / 1'me	131×58	品牌 LOGO
`肤质-面部插画.svg`	肤质 / 面部插画	315×315	肤质选择页插画基础形

肤质插画 5 个配色变体(同一面部插画换色):

肤质	底色/强调	对应文案
干性	`#EAE6E1` 米灰	全脸干燥,容易紧绷、缺乏光泽
混合偏干	米灰系	两颊偏干,T区油脂较少或偶尔出油
中性	`#DBF6D6` 淡绿	水油平衡,肤感舒适,无明显干燥出油
油性	`#F5F078` 柠檬黄	全脸易出油,容易泛油光、毛孔明显
混合偏油	淡绿系	T区易出油,两颊相对清爽或轻微干燥

5. 图片素材(assets/images/,共 15 张)

素材	尺寸	用途
启动页-背景	1414×2423	启动页全幅(三人合影+蓝天)
启动页-顶部装饰	—	状态栏区装饰
档案填写-背景	1080×2339	档案页全幅背景
正面/左面/右面-拍照示意	1082×2350	三个拍照引导页背景
报告页-背景	4915×11457	报告页长图背景(注意超大,建议压缩)
产品图-1~4	~500×650	报告页产品推荐
检测图-1~4	~300×360	报告页六维检测示意

6. 页面清单(design/ 下有整屏 PNG 预览)

#	页面	Frame ID	尺寸
01	启动页	2:2	1080×2339
02	启动页弹窗(隐私授权)	2:3	1080×2339
03	档案填写(含肤质选择轮播)	2:4	1080×2339
04	拍照弹窗(引导)	2:5	1080×2339
05-07	正面 / 左面 / 右面(相机取景)	2:6/2:7/2:8	1080×2339
08	报告页(长页)	2:9	1080×3548
—	肤质选择(档案页子模块,用户直链节点)	4:48	713×873

另有 15 个「隐藏内容展开」补充画板(肤质变体展开、报告页备选文案/备选图等),原始数据在 full.json 可随时按需导出。

7. 目录结构

design/
├── 设计规范.md          ← 本文档
├── 01~09-*.png          # 9 张整屏预览(1080 宽)
├── full.json            # Figma 完整节点数据(含矢量路径)
├── file-tree.json       # 文件结构树
├── node-4-48.json       # 肤质选择节点详细数据
├── imgusage.json        # 图片引用关系
└── assets/
    ├── svg/             # 8 个组件矢量切图
    └── images/          # 15 张位图素材(中文名)

8. 还原建议

流程:启动页(授权弹窗)→ 档案填写(年龄/性别/地区/肤质轮播)→ 拍照弹窗 → 正面/左/右三连拍 → 生成报告。
肤质选择是轮播交互(轮播标识×5 圆点 + 偏干↔偏油轴标签),插画随选项换色。
报告页为长滚动页:总分(82 分/100)→ 六维度 → 三维度拆解 → 具体描述(配检测图)→ 护理建议 → 产品推荐 → 免责声明。
位图素材均为 PNG(原始命名 .jpg 已改),报告页背景 4915×11457 建议压缩后再入包。
颜色、字号直接抄本规范第 2、3 节;组件直接用 assets/svg 切图。

6.8 KiB Raw Permalink Blame History Unescape Escape