# 巨子测肤 · 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. 肤质选择是**轮播交互**(轮播标识×4 圆点 + 偏干↔偏油轴标签),插画随选项换色。
3. 报告页为长滚动页:总分(82 分/100)→ 六维度 → 三维度拆解 → 具体描述(配检测图)→ 护理建议 → 产品推荐 → 免责声明。
4. 位图素材均为 PNG(原始命名 .jpg 已改),报告页背景 4915×11457 建议压缩后再入包。
5. 颜色、字号直接抄本规范第 2、3 节;组件直接用 assets/svg 切图。