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